/* ════════════════════════════════════════════════════════════
   lp-hero-panel.css — HERO: 写真を縮めて、白い見出しパネルを右下に重ねる型

   以前は写真を全画面に敷き、クリーム地のページでは写真全体へ白いスクリム
   （le-day.css）を載せていた。写真が白く沈むうえ、その上の濃い文字
   （body.le-day で #1f1b16）が読めなかった。

   作り: .lp-hero を**グリッド**にして、写真・パンくず・見出しをセルで置く
   （絶対配置をやめる）。白パネルは ::after で、パンくずと見出しの2行ぶんの
   セルに敷く＝中身の高さに自動で合う。写真は右端と下端を空けて置くので、
   パネルが左上の角で写真に重なる。

   **使い方**: inc/page-manifest.php のそのページの行で
   `body` に `lp-hero-panel` を足し、`css` の最後に `lp-hero-panel` を足す。
   写真そのもの（background-image）はページ別CSSが持つ。ここでは触らない。
   2026-09-12 時点の対象: ご両家のお祝いの下層3ページ（結納・顔合わせ・お披露目）。
   ════════════════════════════════════════════════════════════ */

body.lp-hero-panel .lp-hero{
  height:auto;min-height:0;
  display:grid;
  /* 左余白 ／ 写真の本体 ／ 重なり ／ パネルの残り ／ 右余白 */
  grid-template-columns:
    clamp(16px,4vw,64px)
    minmax(0,1fr)
    clamp(56px,13vw,200px)
    minmax(200px,clamp(220px,22vw,330px))
    clamp(16px,4vw,64px);
  /* 上余白 ／ 写真の本体 ／ パンくず ／ 見出し ／ 下余白 */
  grid-template-rows:
    clamp(124px,17vh,200px)
    minmax(clamp(300px,46vh,560px),1fr)
    auto
    auto
    clamp(48px,7vh,88px);
}

/* 白パネル — パンくずと見出しの2行を覆う。写真より前、文字より後ろ。 */
body.lp-hero-panel .lp-hero::after{
  content:"";grid-area:3 / 3 / 5 / 5;z-index:1;
  background:#fff;
  box-shadow:0 18px 48px rgba(31,27,22,.10);
}

body.lp-hero-panel .lp-hero__image{
  position:static;grid-area:2 / 1 / 4 / 4;z-index:0;
  background-size:cover;background-position:center;
  filter:none;   /* 写真はそのままの明るさで見せる */
  /* パネルの下半分まで写真を伸ばして、重なりを半分ほどにする */
  margin-bottom:calc(-1 * clamp(40px,7vh,90px));
}

/* 写真全体に白を載せない */
body.lp-hero-panel .lp-hero__scrim{display:none !important;}

/* パンくず — 白パネルの上段（見出しの上）へ */
body.lp-hero-panel .lp-hero__crumb{
  position:static;grid-area:3 / 3 / 4 / 5;z-index:2;
  padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px) 0;
  margin:0;
}

/* 見出し — 白パネルの下段。左揃えにして、パネルの幅で折り返す */
body.lp-hero-panel .lp-hero__content{
  position:static;grid-area:4 / 3 / 5 / 5;z-index:2;inset:auto;
  display:block;padding:clamp(14px,1.6vw,20px) clamp(24px,3vw,40px) clamp(26px,3vw,38px);
  text-align:left;
}
body.lp-hero-panel .lp-hero__title{
  max-width:none;   /* パネルの幅で折り返すので、main.js の実測は使わない
                       （パンくずと高さが重ならない配置なので、そもそも測らずに抜ける） */
  font-size:clamp(20px,2vw,27px);letter-spacing:.18em;line-height:1.95;
}

/* 見出しの長さは言語でかなり違う。パネルの幅（約420px）に2行で収まるよう言語ごとに詰める。
   日本語を基準にしているので、ここは ja 以外だけ。 */
body.lp-hero-panel.jisaku-lang-zh .lp-hero__title{font-size:clamp(19px,1.85vw,25px);letter-spacing:.12em;}
body.lp-hero-panel.jisaku-lang-ko .lp-hero__title{font-size:clamp(17px,1.65vw,22px);letter-spacing:.05em;}
body.lp-hero-panel.jisaku-lang-en .lp-hero__title{font-size:clamp(17px,1.6vw,21px);letter-spacing:.04em;line-height:1.75;}

/* パネルが狭いので、PCでも設計どおりの位置で折り返す */
@media(min-width:768px){
  body.lp-hero-panel .lp-hero__title br{display:inline;}
}

/* SP — 写真を上に敷き、パネルは下で少しだけ重ねる */
@media(max-width:767px){
  /* 写真枠は写真と同じ横3:縦2（2026-09-28）。以前は「画面の高さの52%」の縦長の枠に cover で敷いていたので、
     横長の写真（11ページとも約3:2）の左右が半分以上切れ、結納では両端の人物が写らなかった。
     写真はスマホのヘッダー（固定・高さ110px・地色あり）の**下から**始める。以前は画面の最上部から敷いていて、
     上の110pxがヘッダーの裏に隠れていた（縦長の枠だったので目立たなかった）。
     パネルは写真の下端に 48px だけ重ねる（写真の行 = 写真の高さ − 48px）。 */
  body.lp-hero-panel .lp-hero{
    grid-template-columns:20px minmax(0,1fr) 20px;
    grid-template-rows:110px calc(100vw * 2 / 3 - 48px) auto auto 40px;
  }
  body.lp-hero-panel .lp-hero__image{grid-area:2 / 1 / 5 / 4;align-self:start;aspect-ratio:3 / 2;height:auto;margin-bottom:0;}
  body.lp-hero-panel .lp-hero::after{grid-area:3 / 2 / 5 / 3;}
  body.lp-hero-panel .lp-hero__crumb{grid-area:3 / 2 / 4 / 3;padding:20px 20px 0;}
  body.lp-hero-panel .lp-hero__content{grid-area:4 / 2 / 5 / 3;padding:10px 20px 24px;}
}