@charset "UTF-8";

/* ==========================================================================
   cle-feature-index.css — CLE SIESTE 特集一覧

   移植元: docs/design/features.html ＋ features.css

   ■ ページの作り
     特集一覧は、お知らせカテゴリー feature のページ
     （/shop/information_categories/feature）。テンプレートは
     shop/information_categories/show.html.liquid で、slug が feature の
     ときだけこの組みになる。ほかのカテゴリーは cle-news.css の組み。

       main.l-container
         div.cle-feature-index
           div.cle-feature-index__backdrop ← ヒーローの写真（position:fixed）
           section.cle-feature-index__hero
           div.cle-page__flow              ← 写真を覆いながら上がってくる本文
             section.cle-page__block       ← 定番の特集（テーマ設定から）
             section.cle-page__block#stories ← すべての特集（記事）
         nav.cle-crumb

   ■ 特集記事のパーツ（cle-feature.css）とは別物
     あちらは記事本文に貼るパーツで、ディレクターの管理物。
     こちらは一覧ページの器で、テーマ側の持ち物。クラス名の接頭辞も
     分けてある（あちらは ft-、こちらは cle-feature-index）。

   ■ 読み込みは条件なし（_head.html.liquid）
     指定はすべて .cle-feature-index の下か :has(.cle-feature-index) に
     閉じてあるので、他のページで読まれても影響は出ない。JSは要らない。

   ■ 土台は cle-page.css を使う
     幅・面の余白・本文の層・見出し・英語のラベル・パンくずは下層ページ
     共通のもの。ヒーローは About（cle-about.css 1〜2節）と同じ作りで、
     値も同じにしてある。**片方だけ直さないこと。**

   ■ デザインから変えたところ
     記事カードのカテゴリーのラベル（.feature-card-cat）は出さない。
     お知らせは1記事1カテゴリーで、その1つが feature で埋まっているため。

   クラス名の対応:
     .page-hero-backdrop  → .cle-feature-index__backdrop
     .page-hero-scrim     → .cle-feature-index__scrim
     .page-hero           → .cle-feature-index__hero
     .page-hero-copy      → .cle-feature-index__hero-copy
     .page-hero-eyebrow   → .cle-page__eyebrow（共通）
     .page-hero-lead      → .cle-feature-index__hero-lead
     .page-head 一式      → .cle-page__head 一式（共通）
     .feature-badge       → .cle-feature-index__badge
     .feature-more        → .cle-feature-index__more
     .pillar-grid         → .cle-feature-index__pillars
     .pillar-card ほか    → .cle-feature-index__pillar(-media / -body / -fr / -title / -desc)
     .feature-grid        → .cle-feature-index__grid
     .feature-card ほか   → .cle-feature-index__card(-media / -title / -excerpt / -date)
   ========================================================================== */

/* ==========================================================================
   1. ページの土台（cle-about.css 1節と同じ）

   ヒーローを画面の上端から見せるため、固定ヘッダーぶんの押し下げを外す。
   セレクタは cle-header.css の押し下げの指定に詳細度で勝てる形のまま
   :has() を足してある。
   ========================================================================== */

body:not(.cle-top):not(.cle-header-static) .l-container:has(.cle-feature-index) {
  padding-top: 0;
}

/* ヒーローの写真は z-index:-1 の position:fixed。.l-wrapper の不透明な
   地色に隠れるので透明にする（cle-about.css 1節と同じ理由）。 */
.l-wrapper:has(.cle-feature-index),
.l-wrapper-none:has(.cle-feature-index) {
  background: transparent;
}

.cle-feature-index {
  position: relative;
  color: var(--cle-ink);
}

/* 地色は商品一覧・部屋ページと揃える（about のグラデーションを上書き）。
   パンくずは .cle-feature-index の外にあるので :has() で拾う。 */
.cle-feature-index .cle-page__flow,
.l-container:has(.cle-feature-index) .cle-crumb {
  background: #fbf9f3;
}

/* ヘッダーやメガメニューからアンカーで飛んでくるので、
   固定ヘッダーに頭が隠れないよう逃がしておく。 */
.cle-feature-index [id] {
  scroll-margin-top: calc(var(--cle-header-h) + 24px);
}

/* ==========================================================================
   2. ページヒーロー（cle-about.css 2節と同じ値）
   ========================================================================== */

.cle-feature-index__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.cle-feature-index__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cle-feature-index__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(45, 32, 21, 0.18), rgba(15, 10, 7, 0.46)),
    linear-gradient(90deg, rgba(8, 10, 16, 0.4) 0%, rgba(8, 10, 16, 0) 26%, rgba(8, 10, 16, 0) 74%, rgba(8, 10, 16, 0.4) 100%);
}

.cle-feature-index__hero {
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  height: clamp(520px, 76vh, 780px);
  padding-top: calc(var(--cle-header-h) / 2);
  color: var(--cle-white);
}

.cle-feature-index__hero-copy {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, 760px);
  text-align: center;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

.cle-feature-index__hero-copy h1 {
  margin: 0;
  font: 200 clamp(21px, 2.3vw, 32px)/1.9 var(--cle-font-mincho);
}

.cle-feature-index__hero-lead {
  margin: 26px 0 0;
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: 0.08em;
  opacity: 0.88;
}

/* ==========================================================================
   3. 共通：バッジと「続きを見る」
   ========================================================================== */

.cle-feature-index__badge {
  justify-self: start;
  padding: 5px 12px;
  border: 1px solid var(--cle-line-strong);
  border-radius: 999px;
  color: var(--cle-ink-soft);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.12em;
}

/* TOPの Our Brands のリンクと同じ、細線が伸びるリンク表現 */
.cle-feature-index__more {
  position: relative;
  justify-self: start;
  padding-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.cle-feature-index__more::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.cle-feature-index__pillar:hover .cle-feature-index__more::after,
.cle-feature-index__pillar:focus-visible .cle-feature-index__more::after {
  transform: scaleX(1);
}

/* ==========================================================================
   4. 定番の特集（Le Bar / Le Restaurant）

   中身はテーマ設定「特集一覧ページ（CLE SIESTE）」から出る。
   リンク先が空のカードは a ではなく div で出る（ホバーの演出も付かない）。
   ========================================================================== */

.cle-feature-index__pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.cle-feature-index__pillar {
  display: grid;
  align-content: start;
  color: inherit;
  text-decoration: none;
}

.cle-feature-index__pillar-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--cle-paper-strong);
}

.cle-feature-index__pillar-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

a.cle-feature-index__pillar:hover .cle-feature-index__pillar-media img,
a.cle-feature-index__pillar:focus-visible .cle-feature-index__pillar-media img {
  transform: scale(1.03);
  filter: brightness(1.06);
}

.cle-feature-index__pillar-body {
  display: grid;
  gap: 12px;
  padding: 28px 4px 0;
}

.cle-feature-index__pillar-fr {
  margin-top: 6px;
  font-size: 30px;
  line-height: 1.1;
}

.cle-feature-index__pillar-title {
  font: 300 17px/1.6 var(--cle-font-mincho);
}

.cle-feature-index__pillar-desc {
  max-width: 520px;
  color: var(--cle-ink-soft);
  font-size: 12px;
  line-height: 2;
}

.cle-feature-index__pillar-desc + .cle-feature-index__more {
  margin-top: 8px;
}

/* ==========================================================================
   5. すべての特集（記事の一覧）

   カードは枠を持たせず、写真と罫線だけで組む。
   上の節との罫線は cle-page.css 1節（.cle-page__block の隣接）が引く。
   ========================================================================== */

.cle-feature-index__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 34px;
}

.cle-feature-index__card {
  display: grid;
  align-content: start;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.cle-feature-index__card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 8px;
  background: var(--cle-paper-strong);
}

.cle-feature-index__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.cle-feature-index__card:hover .cle-feature-index__card-media img,
.cle-feature-index__card:focus-visible .cle-feature-index__card-media img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

.cle-feature-index__card-title {
  font: 300 15px/1.7 var(--cle-font-mincho);
}

.cle-feature-index__card-excerpt {
  color: var(--cle-ink-soft);
  font-size: 11.5px;
  line-height: 1.95;
}

.cle-feature-index__card-date {
  padding-top: 10px;
  border-top: 1px solid var(--cle-line);
  color: var(--cle-ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.cle-feature-index__empty {
  margin: 0;
  color: var(--cle-ink-soft);
  text-align: center;
}

/* ==========================================================================
   6. レスポンシブ（移植元と同じ 1024 / 768 の2点）
   ========================================================================== */

@media (max-width: 1024px) {
  .cle-feature-index__pillars {
    gap: 28px;
  }

  .cle-feature-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 24px;
  }
}

@media (max-width: 768px) {
  /* cle-about.css のSPと同じ値 */
  .cle-feature-index__hero {
    height: clamp(320px, 46vh, 420px);
  }

  .cle-feature-index__hero-lead {
    margin-top: 18px;
    font-size: 11px;
  }

  .cle-feature-index__pillars {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .cle-feature-index__pillar-body {
    padding-top: 22px;
  }

  .cle-feature-index__pillar-fr {
    font-size: 26px;
  }

  .cle-feature-index__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cle-feature-index__pillar-media img,
  .cle-feature-index__card-media img {
    transition: none;
  }
}