/* =========================================
   archive-staff.css
   ========================================= */

.staff-archive {
  padding: 60px 0 80px;
}

/* 4カラムグリッド */
.staff-archive__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;;
}

/* スタッフカード */
.staff-card {
  display: flex;
  flex-direction: column;
}

/* 写真 */
.staff-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  -webkit-mask-image: url('/wp-content/themes/aoi/assets/images/mask.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;

  mask-image: url('/wp-content/themes/aoi/assets/images/mask.png');
  mask-repeat: no-repeat;
  mask-size: cover;
}

.staff-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* ちぎり風 */
  clip-path: polygon(
    10% 0%, 90% 0%, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0% 80%, 0% 20%
  );
}

.staff-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: #e8e8e8;
}

/* テキスト情報 */
.staff-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.staff-card__info-row {
  font-size: 1.9rem;
  color: #111;
  line-height: 1.6;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0;
  font-weight: 700;
}

.staff-card__label {
  flex-shrink: 0;
  min-width: 2em;
}


.staff-card__sep {
  flex-shrink: 0;
  margin-right: 2px;
}

/* ページネーション */
.staff-archive__pagination {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}

.staff-archive__pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.staff-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0.9rem;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.staff-archive__pagination .page-numbers:hover {
  background: #e8f5f4;
}

.staff-archive__pagination .page-numbers.current {
  background: #00AFC3;
  color: #fff;
}

.staff-archive__pagination .page-numbers.prev,
.staff-archive__pagination .page-numbers.next {
  font-size: 1.1rem;
  color: #555;
}

/* 該当なし */
.staff-archive__none {
  text-align: center;
  color: #777;
  font-size: 0.95rem;
  padding: 40px 0;
}

@media (max-width: 768px) {

  /* アーカイブ全体 */
  .staff-archive {
    padding: 40px 10px 60px; /* 上下の余白を少し小さく */
  }

  /* グリッド 1列表示 */
  .staff-archive__grid {
    display: grid;
    grid-template-columns: 1fr; /* 1列に変更 */
    gap: 16px; /* 間隔を少し狭く */
  }

  /* スタッフカード */
  .staff-card {
    flex-direction: column;
  }

  /* 画像部分は正方形を維持 */
  .staff-card__img {
    width: 100%;
    aspect-ratio: 1/1;
  }

  /* 文字情報 */
  .staff-card__info-row {
    font-size: 1.4rem; /* SP用に文字を少し小さめに */
    line-height: 1.4;
    font-weight: 700;
    gap: 2px;
  }

  .staff-card__info {
    gap: 2px;
    padding: 8px 12px;
  }

  /* ページネーション */
  .staff-archive__pagination {
    margin-top: 40px;
  }

  .staff-archive__pagination .page-numbers {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}