/**
 * ====================================================================
 * archive.css — アーカイブ（一覧）ページ専用スタイル
 * ====================================================================
 *
 * アーカイブ刷新PJ Phase A（A2）で新設したスケルトン。
 * Phase B でアーカイブ系（events / tournament / court / circle / lesson /
 * members_column の CPT アーカイブ・area タクソノミー・検索結果）の
 * デザインをここに実装する。Phase A 時点では中身なし＝見た目不変。
 *
 * 読込条件: functions.php pb1_design_tokens_enqueue() 内で
 *   is_post_type_archive / is_tax(area系) / is_search の場合に enqueue。
 *   deps: pb1-design-tokens-core（トークン解決後に読み込む）。
 *
 * ─────────────────────────────────────────────
 * ルール（厳守）:
 *   - 色などの HEX / rgb() 直書きは禁止。必ず design-tokens.core.css の
 *     CSS カスタムプロパティ（var(--color-*, --font-*, --space-* 等)）を
 *     参照すること。トークンに無い値が必要になったら、まず
 *     design-tokens.core.css 側への追加を検討する。
 *   - スコープはアーカイブ系コンテキストに限定し、単記事・固定ページへ
 *     波及するセレクタを書かない。
 * ─────────────────────────────────────────────
 */

/* ====================================================================
 * Phase B（2026-07-03）— アーカイブ デザイン刷新・ブランド統一
 *
 *   値の正: design-tokens.core.css（HEX直書き禁止・var() 参照のみ）。
 *   Plato ブランド監査確定仕様:
 *     - 角丸辞書: 90(大面) / 60(ピルCTA) / 20(カード) / 12(サムネ内側) / ピル999(バッジ)
 *     - 影: 常態 --shadow-card-rest / hover --shadow-card-hover + translateY(-3px)
 *       （ブランドブルー由来ティント統一・黒影禁止）
 *     - タイトル #161414（--color-text-primary）/ hover #0050E0（--color-blue-light）
 *     - バッジ: 募集中・開催前=BluePale地×BrandBlue文字 / 本日開催=唯一のソリッド強調
 *       （バッジ文字は14px相当<18.5px boldのため、AA担保で #BC5300=--color-orange-dark 地）
 *       / 終了・締切=ニュートラル減彩（カード全体 grayscale・リンク維持）
 *     - サムネ: 16:9固定・cover(center)デフォルト・contain切替は .is-contain modifier
 *     - ボタン: ピル。詳細=Navy（--color-cta-bg）/ 申し込み=Orange系
 *       （常態 --color-orange-dark=白文字AA / hover --color-orange-hover=意図的AA例外・
 *        ユーザー承認 2026-06-15 の既存例外に準拠）
 *     - 装飾は h1 帯 1 箇所に限定。カード群以下は白＋ニュートラル＋トークン色のみ。
 *
 *   読込順: style.css(10) → design-tokens.core(20) → …… → article.css → 本ファイル。
 *   同一 priority 内で最後に enqueue されるため、同等以上の詳細度で style.css /
 *   article.css を上書きできる（!important 不使用方針）。
 * ==================================================================== */

/* --------------------------------------------------------------------
 * B3. h1 帯 — トップ .content-Title 型の反復
 *   （英語ディスプレイ Poppins 700 BrandBlue ＋ 日本語 h1 サブ＋オレンジドット。
 *     SEO 上の h1 タグは日本語側。マークアップは inc/archive-view-helpers.php）
 * ------------------------------------------------------------------ */
.pb1-archive-Hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 8px 0 var(--space-title-bottom);
}
.pb1-archive-Hero .pb1-archive-Hero-en {
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2-content-title);
  color: var(--color-title-on-white);
  line-height: 1.15;
  letter-spacing: 0.02em;
}
/* style.css h1.event-h1（二重下線・中央寄せ・負マージン）をトップの和文サブ型へ置換 */
.pb1-archive-Hero h1.event-h1 {
  position: relative;
  margin: 4px 0 0;
  padding: 0 0 0 15px;
  border-bottom: none;
  text-align: left;
  font-family: var(--font-family-ja);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title-sub);
  line-height: 1.6;
  color: var(--color-text-primary);
}
.pb1-archive-Hero h1.event-h1::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--color-dot-on-white);
}
/* 帯の型では改行不要（旧 h1 の <br class="sp"> は文中スペース扱いに） */
.pb1-archive-Hero h1.event-h1 br.sp {
  display: none;
}

/* --------------------------------------------------------------------
 * B3. 導入ブロック（tmp/archive-intro.php）
 *   装飾は持ち込まない：白地＋BluePale罫線＋カード角丸のみ。
 * ------------------------------------------------------------------ */
.pb1-archive-Intro {
  margin: 0 0 24px;
}
.pb1-archive-Intro .intro-Lead {
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.8;
}
.pb1-archive-Intro .intro-Areas {
  background: var(--color-brand-white);
  border: 1px solid var(--color-blue-pale);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  font-size: calc(var(--base-font-size) * (14 / 16));
  line-height: 2;
}
.pb1-archive-Intro .intro-Areas-Title {
  display: block;
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-blue);
}
.pb1-archive-Intro .intro-Areas a {
  color: var(--color-brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pb1-archive-Intro .intro-Areas a:hover {
  color: var(--color-blue-light);
}
.pb1-archive-Intro .intro-Banner {
  margin: 16px 0 0;
  text-align: center;
}
.pb1-archive-Intro .intro-Banner img {
  width: min(453px, 100%);
  height: auto;
  border-radius: var(--radius-thumb);
}

/* --------------------------------------------------------------------
 * B1. カードの殻 — 角丸20 / ブルーティント影 / hover 浮き / BluePale罫線
 * ------------------------------------------------------------------ */
.card-post-archive .entry-card-wrap {
  background: var(--color-brand-white);
  border: 1px solid var(--color-blue-pale);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-rest);
  /* style.css のフェードイン transition(3s) を実用速度に短縮しつつ box-shadow を追加 */
  transition: transform var(--t-slow), opacity var(--t-slow), box-shadow var(--t-fast);
}
.card-post-archive .entry-card-wrap:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  transition: transform var(--t-fast), opacity var(--t-slow), box-shadow var(--t-fast);
}
.card-post-archive a {
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------
 * B1+B2. カードタイトル — #161414 / hoverで #0050E0 / 2行clamp＋ellipsis
 * ------------------------------------------------------------------ */
.card-post-archive .post-card-title {
  white-space: normal;   /* style.css の nowrap（SP右端見切れの真因）を解除 */
}
.card-post-archive .post-card-title h3,
.card-post-archive h3.post-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: none;
  line-height: 1.4;
  color: var(--color-text-primary);
  transition: color var(--t-fast);
}
.card-post-archive .entry-card-wrap:hover .post-card-title h3,
.card-post-archive .entry-card-wrap:hover h3.post-card-title {
  color: var(--color-blue-light);
}

/* --------------------------------------------------------------------
 * B1. サムネイル — 16:9 固定（全CPT統一）・cover(center) デフォルト・
 *     contain modifier・画像なしプレースホルダー
 * ------------------------------------------------------------------ */
.card-post-archive .post-card-thumbnail img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  max-height: none;                       /* style.css sp-thumb の max-height:150px を解除 */
  object-fit: cover;
  object-position: center;                /* style.css sp-thumb の 0 0 を解除 */
  border-radius: var(--radius-thumb);     /* サムネ内側 R12 */
}
/* コンテナ側の max-height:150px（style.css SP media「Thumbnail visibility control」）も解除。
 * img のみ解除するとコンテナ150px＋img16:9(SP幅で約200px)で50pxはみ出し、
 * 後続の .post-card-title に画像が被る（lesson/tournament SPで顕在化・全CPT潜在） */
.card-post-archive .post-card-thumbnail.sp-thumb {
  max-height: none;
}
/* 表示モード modifier: 縦長ポスター・ロゴ・白背景素材は contain＋BluePale地
 *   （投稿単位の管理UIは次フェーズ。まず切替クラスの仕組みのみ用意） */
.card-post-archive .post-card-thumbnail.is-contain img {
  object-fit: contain;
  background-color: var(--color-blue-pale);
}
/* 画像なしプレースホルダー（BluePale地＋白ロゴ。inc/archive-view-helpers.php が出力） */
.card-post-archive .pb1-thumb-Placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: var(--color-blue-pale);
  border-radius: var(--radius-thumb);
}
.card-post-archive .pb1-thumb-Placeholder img {
  width: 42%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

/* --------------------------------------------------------------------
 * B1. エリアチップ（.post-card-location）— #0073aa をトークンへ
 * ------------------------------------------------------------------ */
.card-post-archive .post-card-location {
  background-color: var(--color-brand-blue);
  color: var(--color-brand-white);
  border-radius: var(--radius-card) 0 var(--radius-thumb) 0;   /* カード角と同調 */
}

/* --------------------------------------------------------------------
 * B1. ステータスバッジ（event-status-client.js が status--{key} を付与）
 *   青緑・緑・サーモンは全廃。hover用AA例外色 #FF933D はバッジ使用禁止。
 * ------------------------------------------------------------------ */
.card-post-archive .status {
  width: auto;
  min-width: 9em;
  margin: 0 4px;
  padding: 3px 16px;
  border-radius: var(--radius-badge);
  font-weight: var(--font-weight-bold);
}
.card-post-archive .event-status-info {
  gap: 4px;
  margin: 4px 0;
}
/* 募集中・開催前（held / open / waiting）: BluePale地×BrandBlue文字（7.86:1 AA） */
.card-post-archive .status.participant-event-status,
.card-post-archive .status.participant-recruitment-status {
  background-color: var(--color-blue-pale);
  color: var(--color-brand-blue);
}
/* 本日開催: 唯一のソリッド強調。バッジ文字は14px相当（<18.5px bold）のため
 *   #EF6A00 では白文字AA不成立 → 確定仕様どおり #BC5300（--color-orange-dark）へ切替 */
.card-post-archive .status.status--today {
  background-color: var(--color-orange-dark);
  color: var(--color-brand-white);
}
/* 終了・締切・中止: ニュートラル減彩 */
.card-post-archive .status.status--end,
.card-post-archive .status.status--close,
.card-post-archive .status.status--cancel {
  background-color: var(--color-neutral-muted-bg);
  color: var(--color-text-on-muted);
}
/* 終了・中止カードは全体を減彩（リンクは維持・hoverで軽く戻す） */
.card-post-archive .entry-card-wrap.is-status-ended {
  filter: grayscale(0.9);
  opacity: 0.8;
}
.card-post-archive .entry-card-wrap.is-status-ended:hover {
  filter: grayscale(0.4);
  opacity: 1;
}
/* リスト表示の終了行も同トーンに */
.list-post-archive tr.is-status-ended td {
  color: var(--color-text-on-muted);
}
.list-post-archive tr.is-status-ended img {
  filter: grayscale(0.9);
}

/* --------------------------------------------------------------------
 * B1+B5. ボタン — ピル統一。詳細=Navy / 申し込み=Orange系
 *   （lesson 等の濃紺/水色2色混在を解消。文字白の AA は
 *     Navy #003594=10.4:1 / OrangeDark #BC5300=5.0:1 で担保）
 * ------------------------------------------------------------------ */
.card-post-archive .btn-details {
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  transition: background-color var(--t-fast);
}
.card-post-archive .btn-details:hover {
  background-color: var(--color-blue-light);   /* 白文字 6.51:1 AA */
}
.card-post-archive .btn-apply {
  background-color: var(--color-orange-dark);  /* 白文字 5.0:1 AA */
  color: var(--color-cta-text);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  transition: background-color var(--t-fast);
}
.card-post-archive .btn-apply:hover {
  background-color: var(--color-orange-hover); /* 意図的AA例外（hover限定・2026-06-15承認） */
}
.card-post-archive a.btn-map {
  background: var(--color-brand-blue);
  border-radius: var(--radius-badge);
}

/* --------------------------------------------------------------------
 * B1. 種別タグ・タグライン — 残存 #0273aa / #006cff をトークンへ
 * ------------------------------------------------------------------ */
.card-post-archive .event-type-tag,
.card-post-archive .lesson-type-tag,
.list-post-archive .event-type-tag,
.list-post-archive .lesson-type-tag {
  border-color: var(--color-brand-blue);
  color: var(--color-brand-blue);
  border-radius: var(--radius-badge);
  padding: 1px 8px;
}
/* card-position 種別タグ（lesson / events カード）:
 *   style.css の top:180px は旧SPサムネ（max-height:150px）の直下＝白地を前提とした値。
 *   Phase B のサムネ16:9化（SP幅で約200px高・PR#195でmax-height解除）により、
 *   タグが写真の上に重なり、透過地×細ボーダーでは視認不能になっていた
 *   （クリップ・背面化ではなく、重なりによるコントラスト喪失）。
 *   → サムネ高さに依存しない top:10px（PC と同値）へ統一し、
 *     バッジ体系（BluePale地×BrandBlue文字 7.86:1 AA）で写真上でも可読にする。 */
.card-post-archive .lesson-type-tag.card-position,
.card-post-archive .event-type-tag.card-position {
  top: 10px;
  right: 10px;
  border: none;
  background-color: var(--color-blue-pale);
  color: var(--color-brand-blue);
  font-size: calc(var(--base-font-size) * (12/16));
  font-weight: var(--font-weight-bold);
  padding: 2px 10px;
}
.card-post-archive .event-tagline,
.card-post-archive .tournament-tagline,
.card-post-archive .lesson-tagline,
.card-post-archive .tagline,
.card-post-archive .court-tagline {
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------
 * B1. リスト表示テーブル — 罫線・見出し行をトークン統一＋角丸20の面
 * ------------------------------------------------------------------ */
.list-post-archive table {
  border: 1px solid var(--color-blue-pale);
  border-radius: var(--radius-card);
  border-collapse: separate;    /* collapse だと radius が効かないため */
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--shadow-card-rest);
}
.list-post-archive table th {
  border-top: none;
  border-bottom: 1px solid var(--color-blue-pale);
  background-color: var(--color-blue-pale);
  color: var(--color-brand-blue);
  font-weight: var(--font-weight-bold);
}
.list-post-archive table td {
  border-bottom: 1px solid var(--color-blue-pale);
}
.list-post-archive table tbody tr:last-child td {
  border-bottom: none;
}
.list-post-archive table td img {
  border-radius: var(--radius-thumb);
}

/* --------------------------------------------------------------------
 * カラム（members_column）— エディトリアル型の磨き（サムネ＋抜粋＋日付）
 * ------------------------------------------------------------------ */
.card-post-archive .column-excerpt {
  color: var(--color-text-primary);
  line-height: 1.8;
}
.card-post-archive .column-date {
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: calc(var(--base-font-size) * (13 / 16));
  font-family: var(--font-family-en);
}

/* --------------------------------------------------------------------
 * B6. カード内テーブル — タイポグラフィ統一（2026-07-03）
 *   対象: events / tournament / lesson / circle / court カードの
 *   .post-card-details 内 table（参加者テーブル等は対象外・本ファイルは
 *   アーカイブ系コンテキストのみ読込）。
 *   style.css 旧記述（中央揃え・th 30%・line-height 1.1/1.3・
 *   float+負マージンのMAPボタン等）は削除せず本ファイルの後読みで上書き。
 *
 *   タイポ仕様（PC基準）:
 *     - ラベル(th): 12px/600/text-on-muted/字間0.06em/左上揃え/幅6.5em
 *       line-height 1.867 = 22.4px（値の1行箱 14px×1.6 と光学ベースライン揃え）
 *     - 値(td): 14px/400/text-primary/line-height 1.6/字間0.02em
 *     - 行区切り: BluePale 1px（外枠なし・Cocoon親のグレー罫線は打ち消す）
 * ------------------------------------------------------------------ */
.card-post-archive .post-card-details table {
  width: 100%;
  margin: 8px 0 0;
  border-collapse: collapse;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}
.card-post-archive .post-card-details table th {
  width: 6.5em;
  padding: 8px 0;
  border: none;
  background: none;
  font-size: calc(var(--base-font-size) * (12 / 16));
  font-weight: var(--font-weight-medium);
  color: var(--color-text-on-muted);
  letter-spacing: 0.06em;
  text-align: left;
  vertical-align: top;
  line-height: 1.867;   /* 12px×1.867 = 22.4px */
}
.card-post-archive .post-card-details table td {
  padding: 8px 0;
  border: none;
  font-size: calc(var(--base-font-size) * (14 / 16));
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  line-height: 1.6;
  vertical-align: top;
}
/* 行区切り: 1px BluePale。1行目には引かない（外枠なし） */
.card-post-archive .post-card-details tr + tr > th,
.card-post-archive .post-card-details tr + tr > td {
  border-top: 1px solid var(--color-blue-pale);
}
/* tournament 種目の継続行（ラベル空セル）は区切り線なしで密着 */
.card-post-archive .post-card-details tr:has(> th:empty) > th,
.card-post-archive .post-card-details tr:has(> th:empty) > td {
  border-top: none;
  padding-top: 0;
}
/* lesson コース等、セル内の複数行 div の行間 */
.card-post-archive .post-card-details td > div + div {
  margin-top: 2px;
}
/* MAPボタン: style.css の float+負マージンのハックを廃止し、
 *   セル基準の絶対配置に置換。ボタンと文字の重なりは padding-right で回避 */
.card-post-archive .post-card-details td {
  position: relative;
}
.card-post-archive .post-card-details td:has(> .map-btn-area) {
  padding-right: 52px;
}
.card-post-archive .post-card-details .map-btn-area {
  float: none;
  margin-top: 0;
  position: absolute;
  top: 8px;
  right: 0;
}
/* タグライン — 14px/1.5・表との視覚距離は表側 margin 8px が受け持つ */
.card-post-archive .event-tagline,
.card-post-archive .tournament-tagline,
.card-post-archive .lesson-tagline,
.card-post-archive .court-tagline,
.card-post-archive .tagline {
  font-size: calc(var(--base-font-size) * (14 / 16));
  line-height: 1.5;
  padding: 0 0 2px;
}
/* circle 抜粋 — 二次情報として1段小さく・muted */
.card-post-archive .circle-excerpt {
  margin-top: 8px;
  font-size: calc(var(--base-font-size) * (13 / 16));
  line-height: 1.7;
  color: var(--color-text-on-muted);
}
.card-post-archive .circle-excerpt p {
  margin: 0;
}

/* --------------------------------------------------------------------
 * B6-SP. SP圧縮チューニング（max-width:834px。event-status-info の
 *   sp/pc 境界と同一）— 可読下限を守りつつカード高を最小化。
 *   下限の定義: 本文系は 13px/1.5 未満に下げない・ボタンのタップ領域は
 *   縮めない・clamp はフリーテキスト系（.cell-longtext / circle 抜粋）
 *   のみで、日時・会場・費用本体・定員などの構造化データには適用しない。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 834px) {
  .card-post-archive .post-card-details table {
    margin-top: 6px;
  }
  .card-post-archive .post-card-details table th {
    width: 6em;
    padding: 5px 0;
    font-size: calc(var(--base-font-size) * (11 / 16));
    line-height: 1.773;   /* 11px×1.773 = 19.5px（SP値1行箱 13px×1.5 と光学揃え維持） */
  }
  .card-post-archive .post-card-details table td {
    padding: 5px 0;
    font-size: calc(var(--base-font-size) * (13 / 16));
    line-height: 1.5;     /* 和文可読下限 */
  }
  .card-post-archive .post-card-details td:has(> .map-btn-area) {
    padding-right: 48px;
  }
  .card-post-archive .post-card-details .map-btn-area {
    top: 5px;             /* td padding 5px に追従 */
  }
  /* 二次情報も1段圧縮（13px下限は守る）・余白半減 */
  .card-post-archive .event-tagline,
  .card-post-archive .tournament-tagline,
  .card-post-archive .lesson-tagline,
  .card-post-archive .court-tagline,
  .card-post-archive .tagline {
    font-size: calc(var(--base-font-size) * (13 / 16));
    padding: 0 0 1px;
  }
  .card-post-archive .circle-excerpt {
    margin-top: 4px;
    line-height: 1.6;
  }
  /* 長文フリーテキストのみ 2行clamp＋ellipsis
   *   （情報は詳細ページで完全提供。構造化データは絶対にclampしない） */
  .card-post-archive .post-card-details .cell-longtext,
  .card-post-archive .circle-excerpt p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* テーブル後続・カード下端の余白も圧縮（タイトル2行clamp・バッジ等の
   *   既存Phase B実装には触れない） */
  .card-post-archive .post-card-links {
    margin-top: 8px;
  }
  .card-post-archive .entry-card-wrap {
    padding-bottom: 14px;
  }
}

/* --------------------------------------------------------------------
 * B4. 固定ヘッダーロゴ — パンくず退避
 *   ロゴの視認性プレート（白90%背景・blur・角丸・影）は他ページとの
 *   統一のため撤去済み（ロゴ背景は透過）。ロゴ色連動は
 *   home-globalmenu.js（elementsFromPoint 方式）に委ねる。
 * ------------------------------------------------------------------ */
/* パンくずがロゴ下に潜らないよう開始位置を確保
 *   PC: ロゴ高 ~50px + 上マージン20px + 余白 → 84px
 *   SP: ロゴ高 ~39px + 上マージン10px + 余白 → 64px
 *   （article.css の SP 24px は本ファイルが後読みのため上書きされる） */
#breadcrumb {
  margin-top: 84px;
}
@media screen and (max-width: 767px) {
  #breadcrumb {
    margin-top: 64px;
  }
}