/* ============================================================
   事業詳細ページの、写真を敷いた見出し（2026-10）

   トップ（home-stage.css）と同じ考え方で組む。
     ・左に黒い幕を重ねて文字を読めるようにする（--veil-left）
     ・下へ向かって地の色へ溶かし、次の節と地続きにする
   写真は主張させない。暗めに沈めて、文字の背後に気配として置く。

   使い方: <section class="detail-hero has-photo" style="--hero-image: url(/images/xxx.jpg)">
   ※ style 属性の中では引用符を使わないこと。Netlify の HTML 圧縮が
     属性を単引用符で囲み直すとき、url('...') の引用符が壊れて写真が出なくなる。
   ============================================================ */

.detail-hero.has-photo {
  position: relative;
  overflow: hidden;
  /* 写真を入れるぶん、見出しの上下に余白を足して窮屈に見せない */
  padding-top: clamp(180px, 26vh, 290px);
  padding-bottom: clamp(110px, 13vw, 180px);
}

/* 写真そのもの。文字と別の層にして、寄せ先だけを差し替えられるようにする */
.detail-hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: var(--hero-pos, 72% center);
  background-repeat: no-repeat;
  /* 加工はごく薄く。写真をほぼそのまま見せる */
  filter: saturate(0.96) brightness(0.94);
}

/* 幕。左は文字を読むため、下は次の節へつなぐために濃くする */
.detail-hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(5, 5, 5, 0.26) 0%,
      rgba(5, 5, 5, 0.08) 42%,
      rgba(5, 5, 5, 0.40) 82%,
      rgba(5, 5, 5, 1) 100%),
    linear-gradient(90deg,
      rgba(5, 5, 5, 0.74) 0%,
      rgba(5, 5, 5, 0.52) 34%,
      rgba(5, 5, 5, 0.16) 66%,
      rgba(5, 5, 5, 0) 100%);
}

/* 文字は幕より前に */
.detail-hero.has-photo > .wrap {
  position: relative;
  z-index: 2;
}

/* 1024px 以下では文字が幅いっぱいに伸びる。左の幕だけでは右端が
   明るい機材に重なって読みにくいので、横方向の幕を右まで効かせる */
@media (max-width: 1024px) {
  .detail-hero.has-photo::after {
    background:
      linear-gradient(180deg,
        rgba(5, 5, 5, 0.30) 0%,
        rgba(5, 5, 5, 0.12) 42%,
        rgba(5, 5, 5, 0.44) 82%,
        rgba(5, 5, 5, 1) 100%),
      linear-gradient(90deg,
        rgba(5, 5, 5, 0.78) 0%,
        rgba(5, 5, 5, 0.62) 40%,
        rgba(5, 5, 5, 0.42) 75%,
        rgba(5, 5, 5, 0.30) 100%);
  }
}

@media (max-width: 720px) {
  .detail-hero.has-photo {
    padding-top: clamp(140px, 22vh, 200px);
    padding-bottom: clamp(80px, 12vw, 120px);
  }
  /* 幅が狭いと左の幕だけでは足りない。全体を少し濃くして文字を守る */
  .detail-hero.has-photo::before { background-position: var(--hero-pos-sp, 68% center); }
  .detail-hero.has-photo::after {
    background:
      linear-gradient(180deg,
        rgba(5, 5, 5, 0.72) 0%,
        rgba(5, 5, 5, 0.56) 40%,
        rgba(5, 5, 5, 0.82) 80%,
        rgba(5, 5, 5, 1) 100%),
      linear-gradient(90deg,
        rgba(5, 5, 5, 0.90) 0%,
        rgba(5, 5, 5, 0.70) 55%,
        rgba(5, 5, 5, 0.40) 100%);
  }
}