/* ============================================================
   柾風 春岡（MASAKAZE Haruoka）pages-data.css
   下層ページ第2弾（product.html / works.html / event.html /
   information.html）専用の追加部品。style.css・css/pages.css の
   トークン・既存部品を前提にする（両ファイルの後に読み込むこと）。
   js/page-data.js がこのファイルのクラス名で描画する。
   単位は px 固定幅を作らず rem/em/% を基本にする。
   ============================================================ */

/* ============================================================
   一覧行を丸ごとリンク化したときの共通ホバー
   （.product-item/.work-card は style.css 側で class 自体に
   display:flex 等が定義済みのため、<a> に変えても崩れない）
   ============================================================ */
.product-item,.work-card{transition:opacity .3s var(--ease)}
.product-item:hover,.work-card:hover{opacity:.86}

/* ============================================================
   filter-tabs（works.html / information.html のカテゴリ絞り込み。
   URLは変えずJSのみで表示件数を切り替える）
   <div class="filter-tabs">
     <button type="button" class="is-active" data-filter="all">すべて</button>
     <button type="button" data-filter="邸宅">邸宅</button>
   </div>
   ============================================================ */
.filter-tabs{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,32px);margin-bottom:clamp(32px,4.5vw,56px)}
.filter-tabs button{
  padding-bottom:6px;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;
  color:var(--mute);border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.filter-tabs button:hover{color:var(--fg)}
.filter-tabs button.is-active{color:var(--fg);border-color:currentColor}

/* ============================================================
   event-row（event.html 一覧の1行。日付／状況タグ／タイトル／概要／
   Detail・申し込みリンク）
   <a class="event-row reveal" data-stagger href="event.html?id=…">
     <span class="event-row__date">2026.09.12</span>
     <span class="status-pill status-pill--open">受付中</span>
     <h2 class="event-row__title">…</h2>
     <p class="event-row__summary">…</p>
     <span class="event-row__actions">
       <span class="text-link">Detail &rarr;</span>
       <span class="btn btn--pill event-row__apply">申し込む &rarr;</span>
     </span>
   </a>
   ============================================================ */
.event-list{display:flex;flex-direction:column}
.event-row{display:block;padding-block:clamp(24px,3.5vw,36px);border-top:1px solid var(--line)}
.event-list a.event-row:last-child{border-bottom:1px solid var(--line)}
.event-row__date{font-family:var(--font-en);font-size:12px;letter-spacing:.08em;color:var(--mute)}
.event-row__title{margin-top:10px;font-size:16px;letter-spacing:.02em;line-height:1.7;font-weight:500}
.event-row__summary{margin-top:8px;max-width:38em;font-size:13px;line-height:1.9;color:var(--mute)}
.event-row__actions{margin-top:16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.event-row__apply{padding:9px 20px;font-size:11px}

/* status-pill（受付中=塗り／満席・終了=薄い、共通部品） */
.status-pill{display:inline-block;margin-left:12px;padding:3px 12px;font-family:var(--font-en);font-size:10px;letter-spacing:.08em;vertical-align:1px}
.status-pill--open{background:var(--fg);color:var(--bg)}
.status-pill--muted{border:1px solid var(--line);color:var(--mute)}

/* ============================================================
   info-row（information.html 一覧の1行。日付／カテゴリ／タイトル）
   <a class="info-row reveal" data-stagger href="information.html?id=…">
     <span class="info-row__date">2026.08.12</span>
     <span class="info-row__cat">お知らせ</span>
     <h2 class="info-row__title">…</h2>
   </a>
   ============================================================ */
.info-list{display:flex;flex-direction:column}
.info-row{display:flex;gap:clamp(16px,2.5vw,28px);align-items:baseline;padding-block:18px;border-top:1px solid var(--line);transition:opacity .3s var(--ease)}
.info-list a.info-row:last-child{border-bottom:1px solid var(--line)}
.info-row:hover{opacity:.7}
.info-row__date{flex:0 0 auto;font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--mute)}
.info-row__cat{flex:0 0 auto;font-size:10px;letter-spacing:.06em;color:var(--mute);border:1px solid var(--line);padding:2px 9px}
.info-row__title{flex:1 1 auto;font-size:14px;line-height:1.8;font-weight:400}

/* ============================================================
   related-grid（product.html詳細の関連事例・works.html詳細の
   同じカテゴリの事例。ミニカード2枚を横並びに。.work-card を流用）
   ============================================================ */
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}

/* ============================================================
   prev-next（詳細ページ末尾の前後ナビ）
   <nav class="prev-next"><a class="text-link">&larr; 前の事例</a><a class="text-link">次の事例 &rarr;</a></nav>
   ============================================================ */
.prev-next{display:flex;justify-content:space-between;gap:24px;padding-block:clamp(24px,3vw,32px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prev-next__spacer{flex:1}

/* ============================================================
   Responsive：1024px以下
   ============================================================ */
@media (max-width:1024px){
  .related-grid{grid-template-columns:1fr}
  .event-row__actions{gap:14px}
}

@media (max-width:600px){
  .info-row{flex-direction:column;gap:6px}
  .prev-next{flex-direction:column;gap:14px}
}

/* ============================================================
   大画面：1800px以上
   ============================================================ */
@media (min-width:1800px){
  .event-row__summary{max-width:42em;font-size:1rem}
  .info-row__title{font-size:1rem}
}