/* hero-fullbleed-glass-card — 全面写真 + すりガラスカードを中央に配置
 * 出典: Figma「sitemeister_module」main7。
 * ★カード面は「サイトの背景色を透過させたもの」として作る(color-mix)。
 *   rgba(255,255,255,.8) 直書きだと、濃色テーマのサイトで白カード + 濃いインクになり浮く。
 * ★backdrop-filter が効かない環境でも読めるよう、面色の不透明度は 80% 以上を保つ。
 *
 * ── デザイン方針（トーン: 和（障子・和紙） / アクセント: すりガラス）──
 * この部品の存在理由は「写真を暗くせずに読ませる」こと。16番(hero-fullbleed-center-overlay)は
 * スクリムで写真を暗くして可読性を取るが、この部品は【写真の明るさと色を保ったまま】
 * 面をかぶせた部分だけを読ませる。使用条件も「写真が明るく、黒スクリムだと重くなるとき」。
 * → 障子は光を殺さずに和らげる。すりガラスという素材がそのまま障子の翻訳になる。
 *
 * ★受領時は角丸なし・罫線なし・影なし・blur(10px) で、実描画は【ただの白い半透明矩形】だった。
 *   「すりガラス」というアクセントが成立していなかったので、
 *   ①ぼかしを強める ②面を和紙寄りに上げる ③余白を広げる ④框(かまち)のような細い枠線、
 *   の4点で素材として読める量まで振り切っている。角丸は付けない(和の矩形)。 */

.hero-fullbleed-glass-card {
  position: relative;
  min-height: min(88vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-fullbleed-glass-card__media {
  position: absolute;
  inset: 0;
}

.hero-fullbleed-glass-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-fullbleed-glass-card__card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ★--space-sm は common.css の :root に未定義。フォールバックが無いと var() が無効値になり
     gap が初期値 normal(=0) に落ちて、見出し・リード・CTA が密着する
     (実測: 769px 以上で 0px だった。SP は下の 20px 直値が効いていたので気づきにくい)。 */
  gap: var(--space-sm, 24px);
  /* 余白は「間」。受領時 clamp(28px,4vw,60px) から広げている。 */
  padding: clamp(32px, 5vw, 76px);
  /* ★カード幅は絞らない。写真をもっと見せたくて 620px まで絞ったところ、
     1440/1920px の30字コピーで見出しが4行に割れた(実測)。
     狭い側(769px)で 78% にする案も、内寸が痩せて30字が4行になる。
     「写真が見えない」問題は先方への指摘に回し、ここでは行数を守る。 */
  width: min(750px, 90%);
  box-sizing: border-box;
  text-align: center;
  /* 受領時 85%。和紙寄りに一段上げる。★80% を下回らせないこと —
     この部品は面の不透明度が高いおかげで【可読性が写真に依存しない】
     (写真が真っ黒でも合成面は rgb(217,217,217) で、最も薄い見出し色でも 4.70:1 を確保する)。
     16番が原理的に抱えている「明るい写真だと白文字が届かない」問題がこの部品には無い。
     ここが最大の強みなので、薄くする方向には振らない。 */
  background: transparent;
  /* 受領時 10px。背後を「像」ではなく「気配」にする＝障子越し。 */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  /* 框(かまち)。面と地の境界を1本の線で確定させる。
     これが無いと、白い面が写真に溶けて「ガラス板が置いてある」ことが読み取れない。 */
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  /* 主役の動きは1種類だけ。opacity のみで transform は使わない(最も静かな出方＝和)。
     ★fill-mode は backwards。both だとアニメが走らない環境で opacity:0 が残る事故になる。 */
  animation: hero-fullbleed-glass-card-fade 800ms ease-out backwards;
}

/* keyframes 名はグローバル空間なのでモジュール名を前置する。 */
@keyframes hero-fullbleed-glass-card-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fullbleed-glass-card__card { animation: none; }
}

.hero-fullbleed-glass-card__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-hero-md);
  line-height: 1.4;
  letter-spacing: 0.04em;
  /* ★--color-heading-ink は common.css の :root に未定義。フォールバックを --color-text に
     しても【同色のまま】で階調が戻らないため、color-mix で一段濃い墨を作る
     (common.css が --color-primary-dark で使っているのと同じ手法)。
     ink と text の濃淡はテーマによって反転するので、階調は色ではなくサイズで作る。 */
  color: var(--color-heading-ink, color-mix(in srgb, var(--color-text) 78%, #000));
  margin: 0;
  /* キャッチコピーは1行の <h1> テキストとして扱い、明示的な改行は入れない。
     カード幅内に収まらない場合のみ、ブラウザの自然な折り返しに任せる
     (text-wrap: pretty で孤立した1〜2文字だけの行を避ける)。 */
  text-wrap: pretty;
  white-space: normal;
}

.hero-fullbleed-glass-card__light { font-weight: 300; }

.hero-fullbleed-glass-card__lead {
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
  /* リードは balance が効かなかった(実測)。pretty は行末の孤立を減らす方向に働く。
     案件ごとにコピーが変わるので保険として入れる。非対応環境では素の折り返しに戻るだけ。 */
  text-wrap: pretty;
}

/* CTA の面は common.css の .btn（--color-primary ＋ --color-on-primary）をそのまま使う。
   ★ホバーだけ上書きする理由: common.css の .btn:hover は
     「面を --color-primary-dark にして文字を #fff にする」ため、
     淡色ベージュのプリセットで【白文字 × 明るいベージュ = 2.59:1】になり読めなくなる（実測）。
     面と文字の組（--color-primary / --color-on-primary）は変えず、
     ホバーの合図は【浮き】で出す。矩形は動かない。 */
.hero-fullbleed-glass-card .btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
  .hero-fullbleed-glass-card { min-height: min(80vh, 560px); }
  /* 左右を 20px → 16px に詰めて内寸を稼ぐ。375px で見出しが3行→2行、
     414px でリードが4行→3行になる(実測)。 */
  .hero-fullbleed-glass-card__card { padding: 24px 16px; gap: 20px; }
  /* design.md No.5: モバイル h1 は固定的に絞る */
  .hero-fullbleed-glass-card__heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-fullbleed-glass-card__lead { font-size: var(--fs-body); }
  /* ★PC 用の改行位置を SP に持ち込むと、1セグメントが2行に割れて末尾に1〜2字だけ残る
     (実測: 375px でリード5行、最終行がカード幅の 9%)。
     SP では改行を素の折り返しに任せる。DOM は変えていない(CSS のみ)。
     PC 側の <br> は中央寄せ3行の意匠として成立しているので残す。 */
  .hero-fullbleed-glass-card__lead br { display: none; }
  .hero-fullbleed-glass-card__cta { width: 100%; text-align: center; }
}