@charset "UTF-8";

/* ==========================================================================
   cle-axis.css — CLE SIESTE 軸ページ（系統／印象／シーン／色／季節で選ぶ）

   移植元: docs/design/design_0901/products.css の「03 軸の見出しと選択肢」
           （140〜275行）と、about.css の .cat-chip（1015〜1057行）

   ■ どういうページか
     「香りをどう探すか」の入口だけを持つ1枚。見出しと説明文、そして
     選択肢のカードが並ぶだけで、商品グリッドは持たない。カードを押すと
     絞り込み済みの一覧へ飛ぶ。デザインの products-famille.html /
     -impression.html / -scene.html / -couleur.html / -saison.html。

   ■ ecforce では固定ページ（/shop/pages/{slug}）として作る
     ページ本体は管理画面「固定ページ > 本文」欄のHTML。
     原本は clesieste/html/cle-axis-*.html。
     香りの部屋がセレクションの「コンテンツ」欄、ブランドが商品カテゴリの
     「詳細」欄に書くのと同じ運用。

   ■ 読み込みは条件なし（_head.html.liquid）
     cle-brand.css と同じ理由。固定ページのどれが軸ページかは本文欄の
     中身でしか分からず、head で判定を持たせると liquid 側の都合で
     「静かに読み込まれない」形で失敗する。
     指定はすべて .cle-axis の下か :has(.cle-axis) に閉じてあるので、
     他のページで読まれても影響は出ない。

   ■ 土台は cle-page.css を使う
     幅（.cle-page__wrap）・見出し（.cle-page__head）・パンくず（.cle-crumb）は
     下層ページ共通のものをそのまま使う。ここにはカードの並びと、
     ページの地に敷く紙のテクスチャだけを置く。

   ■ デザインから変えたところ
     1. 選択中を表す is-current を持たせない。
        デザインは各ページの1枚目に is-current / aria-current="page" が
        付いていたが、これはチップが軸の切り替えナビだった頃の名残。
        カードはどれも別の絞り込み結果へ飛ぶので、現在地にあたるものが
        そもそも無い。
     2. 地のテクスチャは body ではなく .l-container に敷く。
        画像URLは Liquid にしか解決できないので、
        shop/pages/show.html.liquid が --cle-axis-bg として渡している。
   ========================================================================== */

/* ==========================================================================
   1. ページの土台

   デザインは body に back.jpg（TOPの pickup と同じ紙のテクスチャ）を敷き、
   本文とパンくずの不透明な地色を透過させて見せていた。

   こちらでは本文コンテナ（.l-container）に敷く。テーマは .l-wrapper に
   地色を持たせているが、.l-container はその子なので上に描かれる。
   フッターは .l-container の外なので、地色はそのまま残る。

   軸ページかどうかは :has(.cle-axis) で見る。判定を head に持たせない
   方針のため（冒頭コメント参照）。打ち消しではなく「軸ページのときだけ
   足す」形で書くこと。打ち消しにすると :has() の無い環境で崩れる。
   ========================================================================== */

.l-container:has(.cle-axis) {
  background: var(--cle-axis-bg, none) center / cover fixed no-repeat;
  background-color: var(--cle-bg);
}

/* パンくずは既定で不透明な帯（cle-page.css 3節）。軸ページでは
   テクスチャを見せたいので透過させ、上の罫線だけ残す。 */
.l-container:has(.cle-axis) .cle-crumb {
  background: transparent;
}

/* 本文の枠。余白も最大幅も足さない（中身が持つ） */
.cle-axis__content {
  margin: 0;
}

/* ==========================================================================
   2. 見出しと選択肢の面

   デザインの .axis-block ＋ body.is-axis-cards の上書きを畳んだもの。
   下に商品グリッドが来ないので、下の余白は面の側で持つ。
   ========================================================================== */

.cle-axis__block {
  padding: 52px 0 120px;
}

/* 見出しは cle-page.css の .cle-page__head をそのまま使う（中央寄せ・
   ラベル・リード文の組みが同じ）。カードとの間隔だけ広げる。 */
.cle-axis__head {
  margin-bottom: 60px;
}

/* リード文は行間だけデザインに合わせる。上下の余白は
   .cle-page__head の gap が持っているので殺しておく。 */
.cle-axis__head .cle-page__head-lead {
  margin: 0;
  line-height: 2.1;
}

/* ==========================================================================
   3. 選択肢のカード

   5列固定の格子に正方形のカードを自動配置する。列幅が行によらず同じ
   なので、枚数が半端でもカードの大きさは揃う（系統12枚なら 5・5・2）。

   塗りは左上を透明にした135度のグラデーション。
   色のデータを持つ軸（色で選ぶ）は透明→その色にし、枠線を持たない。
   持たない軸（系統・印象・シーン・季節）は透明→白(0.3透過)にして、
   薄い枠線だけで区切る。色は a 要素のインラインの --cle-swatch で渡す。
   ========================================================================== */

.cle-axis__nav {
  display: block;
}

.cle-axis__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  gap: 3.5px;
  width: 100%;
}

.cle-axis__card {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 20px 10px;
  border: 1px solid var(--cle-line);
  background: linear-gradient(135deg, transparent, var(--cle-swatch, rgba(255, 253, 249, 0.3)));
  color: var(--cle-ink-soft);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.cle-axis__card:hover {
  border-color: var(--cle-line-strong);
  color: var(--cle-ink);
}

/* 色の軸は塗りだけで区切るので枠線を引かない */
.cle-axis__card.--color {
  border: 0;
}

.cle-axis__card-labels {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
}

/* 英名・和名はカードの塗りによらず黒。薄い塗りしか使わないため */
.cle-axis__card-en {
  color: var(--cle-ink);
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cle-axis__card-jp {
  color: var(--cle-ink);
  font: 300 13px/1 var(--cle-font-mincho);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   4. レスポンシブ（デザインに合わせて 1024px / 768px の2点だけ）
   ========================================================================== */

@media (max-width: 1024px) {
  .cle-axis__block {
    padding-top: 40px;
  }
}

@media (max-width: 768px) {
  .cle-axis__block {
    padding-top: 28px;
  }

  /* 5列は幅が足りないので3列に落とす。段数は増えるが崩れない */
  .cle-axis__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}