/* ==========================================================================
   STAFF(下層ページ)
   ========================================================================== */
.staff-page {
  background: var(--color-bg);
  padding: 64px 24px;
}

.staff-page__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.staff-page__title {
  text-align: left;
}

.staff-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  list-style: none;
}

.staff-card__photo {
  position: relative;
  aspect-ratio: 326 / 395;
  border-radius: 16px;
  overflow: visible;
}

.staff-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.staff-card__badge {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 48px;
  height: 48px;
  transition: opacity 0.2s ease;
}

.staff-card__badge:hover,
.staff-card__badge:focus-visible {
  opacity: 0.8;
}

.staff-card__badge img {
  display: block;
  width: 100%;
  height: 100%;
}

.staff-card__role {
  margin-top: 36px;
  font-family: var(--font-maru);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.staff-card__name {
  margin-top: 8px;
  font-family: var(--font-maru);
  font-size: 24px;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.staff-card__catch {
  margin-top: 8px;
  font-family: var(--font-maru);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

/* デスクトップ: Figma実測値通りの配置(3列グリッド・写真右下にInstagramバッジ) */
@media (min-width: 861px) {
  .staff-page {
    padding-top: max(64px, 12.15vw);
    padding-bottom: max(64px, 8.5vw);
    padding-left: 0;
    padding-right: 0;
  }

  .staff-page__inner {
    max-width: none;
    margin: 0;
    padding-left: max(60px, 10vw);
    padding-right: max(24px, 3vw);
  }

  .staff-page__title {
    margin-left: max(20px, 4.86vw);
  }

  .staff-grid {
    margin-top: max(64px, 10.63vw);
    grid-template-columns: repeat(3, max(220px, 22.64vw));
    column-gap: max(48px, 6.6vw);
    row-gap: max(56px, 6.18vw);
  }

  .staff-card__photo {
    border-radius: max(16px, 2.08vw);
  }

  .staff-card__photo img {
    border-radius: max(16px, 2.08vw);
  }

  .staff-card__badge {
    top: calc(100% + max(12px, 1.53vw));
    width: max(40px, 3.96vw);
    height: max(40px, 3.96vw);
  }

  .staff-card__role {
    margin-top: max(24px, 2.99vw);
  }

  .staff-card__name {
    margin-top: max(8px, 1.04vw);
  }

  .staff-card__catch {
    margin-top: max(6px, 0.83vw);
  }
}

/* スマホ幅: 記事一覧は1列に戻し、Instagramバッジの間隔も広げる
   + スタッフ同士の間隔を広げる */
@media (max-width: 680px) {
  .staff-grid {
    grid-template-columns: 1fr;
    row-gap: 64px;
  }

  .staff-card__badge {
    top: calc(100% + 20px);
  }
}