/* ==========================================================================
   衣装一覧（archive-costume.php／各タクソノミーターム）デザイン案B
   ライン型タブ × スクエア大判カード
   ========================================================================== */

.costume-archive {
  padding: 0 0 var(--space-3xl);
}

.costume-archive__head {
  text-align: center;
  padding: var(--space-3xl) var(--space-md) var(--space-xl);
}

.costume-archive__en {
  display: block;
  font-family: var(--font-en);
  font-size: 0.9375rem;
  letter-spacing: 0.26em;
  color: var(--color-secondary);
  text-transform: uppercase;
}

.costume-archive__jp {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
  color: var(--color-text);
}

.costume-archive__lead {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  line-height: 2;
}

.costume-archive__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --------------------------------------------------------------------------
   絞り込みフィルター
   1段目：明朝の下線タブ／2段目：角型小ボタン
   -------------------------------------------------------------------------- */

.costume-filter {
  border-bottom: 1px solid var(--color-border, #e2dbcd);
  /* 下の余白は常にここで持たせる。2段目が続く場合も、1段目と2段目の間隔はこの値になる。
     ギャラリー・前撮りのタブ下余白（48px）と揃えている。 */
  margin-bottom: var(--space-xl);
}

.costume-filter__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2rem;
  margin: 0;
  padding: 0;
}

.costume-filter__item {
  display: inline-block;
  padding: 0.75rem 0.25rem 1rem;
  margin-bottom: -1px;
  font-family: var(--font-jp);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.costume-filter__item:hover {
  color: var(--color-secondary);
}

.costume-filter__item.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-secondary);
}

/* 2段目（シルエット・カラー） */
.costume-filter--sub {
  border-bottom: none;
  /* 1段目との間隔は .costume-filter の margin-bottom が担うので、ここでは足さない。 */
  padding: 0;
  margin-bottom: var(--space-xl);
}

.costume-filter--sub .costume-filter__list {
  gap: 0.5rem 0.625rem;
}

.costume-filter--sub .costume-filter__item {
  padding: 0.375rem 1rem;
  margin-bottom: 0;
  border: 1px solid var(--color-border, #e2dbcd);
  border-radius: 2px;
  font-size: 0.6875rem;
  letter-spacing: var(--ls-base);
  color: var(--color-text);
}

.costume-filter--sub .costume-filter__item:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.costume-filter--sub .costume-filter__item.is-active {
  background-color: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}

/* 【削除済み】以前ここにあった :last-of-type によるフォールバックは、
   ページ送り（<nav class="navigation pagination">）が同じ階層に出力されると
   フィルターが「最後の nav」でなくなり成立しなくなるため廃止した。
   下余白は .costume-filter の margin-bottom で常に確保している。 */

/* --------------------------------------------------------------------------
   カードグリッド（3カラム／3:4大判・ホバーズーム）
   -------------------------------------------------------------------------- */

.costume-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl) var(--space-md);
  align-items: start; /* 画像の高さがバラバラでも上端で揃える */
}

.costume-card {
  display: block;
}

.costume-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5; /* 800×1000の比率で統一（他サイズはセンタークロップ） */
}

/*
 * おすすめバッジ（PC・タブレット）：ゴールドの塗りに白文字、写真の左上。
 * スマホだけ見た目と位置を変える（767px以下のブロックを参照）。
 */
.costume-card__badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  z-index: 1;
  padding: 0.3rem 0.875rem;
  background-color: var(--color-secondary);
  color: var(--color-bg);
  font-family: var(--font-jp);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  border-radius: 2px;
}

.costume-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.costume-card:hover .costume-card__img {
  transform: scale(1.04);
}

.costume-card__body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--color-border, #e2dbcd);
}

.costume-card__title {
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.costume-card__cat {
  font-family: var(--font-jp);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--color-secondary);
  /*
   * 折り返しを止めない：シルエットは1着に複数付くため
   * 「スレンダーライン/セパレート」のように長くなることがある。
   * グリッドは align-items: start なので、高さが変わっても崩れない。
   */
}

/*
 * 3列（PC）では「/」でつないで1行に見せる。
 * 区切りをテンプレートの文字列ではなくCSSで足しているのは、
 * 2列以下で1件ずつ改行したときに行末へ「/」を残さないため。
 */
.costume-card__cat-item + .costume-card__cat-item::before {
  content: "/";
}

.costume-archive__empty {
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-jp);
  padding: var(--space-2xl) 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

  .costume-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .costume-filter__list {
    gap: 0 1.25rem;
  }

  /*
   * 2列になるとカードの幅が半分になり、型番の右に残るのは 75px ほど。
   * 横並びのままだと「スレンダー／ライン」と単語の途中で折り返してしまうので、
   * 型番の下に移して1件ずつ改行する。区切りの「/」もここでは出さない。
   */
  .costume-card__body {
    display: block;
  }

  .costume-card__cat {
    display: flex;
    flex-direction: column;
    margin-top: 0.375rem;
  }

  .costume-card__cat-item + .costume-card__cat-item::before {
    content: none;
  }
}

@media (max-width: 767px) {

  .costume-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-xs);
  }

  /*
   * 「おすすめ」を写真の左下へ移し、寸法を詰め、白地にゴールド文字にする。
   *
   * ・位置  … バッジの寸法は固定なので、カードが 180px 前後まで縮むスマホでは
   *           右端がモデルの顔・髪まで届いてしまう（カード幅の4割を占める）。
   *           裾の生地は同じ模様が続く部分なので、重なっても失う情報が少ない。
   * ・見た目 … 小さいカードではゴールドの塗りが強く出るため、白地に落とす。
   *
   * PC・タブレットは写真が大きく、左上のゴールド塗りが背景の余白に
   * きれいに収まっているため触らない。ここが 1023px（2列になる幅）ではなく
   * 767px なのはそのため。
   *
   * ※ top を auto に戻さないと、上下どちらの指定も効いた状態になる。
   *
   * 塗りを不透明にしているのは、下の写真が濃いとき（色打掛など）に
   * 文字が沈まないようにするため。
   *
   * 文字色をトークンにしていない理由（アイボリー地とのコントラスト）：
   *   --color-secondary #C9A96E … 2.2:1（読めない）
   *   --color-accent    #A88B5C … 3.1:1
   *   ここで使う         #A0803F … 3.6:1
   * いずれも小さい文字の基準（4.5:1）には届かないが、ゴールドに見える範囲で
   * いちばん読める濃さを採っている。基準を満たしたい場合は #8C6E28（4.7:1）。
   */
  .costume-card__badge {
    top: auto;
    bottom: 0.625rem;
    padding: 0.2rem 0.625rem;
    font-size: 0.5625rem;
    background-color: var(--color-bg);
    color: #A0803F;
    border: 1px solid var(--color-secondary);
  }

  .costume-filter__item {
    padding: 0.625rem 0.125rem 0.75rem;
    font-size: 0.75rem;
  }

  .costume-filter--sub .costume-filter__item {
    padding: 0.375rem 0.875rem;
  }
}