/* hero-style.css — full-bleed sunset with a diagonal brand-green scrim.
   The photo lives behind everything; a layered green gradient keeps the
   brand color dominant on the lower-left (behind all hero text) and
   feathers away toward the upper-right so the sunset reads behind the
   contractor plate. No hard clip — text legibility is guaranteed. */

/* Hero must be a positioned ancestor for the photo layer, and must clip the
   over-tall photo layer used for the scroll parallax. */
.hero {
  position: relative;
  overflow: hidden;
}

/* Full-bleed photo layer, sat behind the grid overlay and content.
   It runs 24% taller than the hero (top:-24%; height:148%) so the parallax
   translate (±22%) can shift it without ever exposing an edge. The layer is
   driven by --parallax-y (set on .hero by parallax.js; custom properties
   inherit down to this child). */
.hero-photo-bg {
  position: absolute;
  top: -24%;
  left: 0;
  right: 0;
  height: 148%;
  z-index: 0;
  background-color: #1F3D34; /* brand green fallback if the photo fails */
  background-image: url('../hero-photo-bg.jpg');
  /* Anchor low so Mt. Rainier + the horizon/water band (mid-frame in the
     source) rise into the clear upper-right window instead of empty sky. */
  background-position: center 78%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* Diagonal green scrim — composited top-to-bottom in source order:
   1) left column protection   2) bottom grounding   3) the diagonal base */
.hero-photo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 1 — reinforce the text column on the left */
    linear-gradient(to right,
      rgba(31,61,52,.62) 0%,
      rgba(31,61,52,.28) 34%,
      transparent 52%),
    /* 2 — ground the bottom edge in solid green */
    linear-gradient(to bottom,
      transparent 48%,
      rgba(31,61,52,.55) 80%,
      #1F3D34 100%),
    /* 3 — the diagonal sweep: solid green bottom-left → clear top-right */
    linear-gradient(to top right,
      #1F3D34 0%,
      #1F3D34 22%,
      rgba(31,61,52,.78) 44%,
      rgba(31,61,52,.28) 66%,
      rgba(31,61,52,.03) 100%);
}

/* Grid overlay and content sit above the photo layer */
.hero-grid-overlay { z-index: 1; }
.hero .hero-inner  { position: relative; z-index: 2; }

/* Light text-shadow so headline/subhead read cleanly near the diagonal */
.hero .hero-title {
  text-shadow: 0 1px 12px rgba(10,24,20,.45), 0 2px 24px rgba(10,24,20,.22);
}
.hero .hero-sub {
  text-shadow: 0 1px 8px rgba(10,24,20,.38);
}

/* Eyebrow pill: brighter text on an opaque dark-green backing so it reads
   over the brightest part of the sunset (it sits high in the photo zone). */
.hero .hero-eyebrow {
  color: #F0EDE6;
  border-color: rgba(255,255,255,.30);
  background: rgba(20,40,33,.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(10,24,20,.35);
}

/* ── Contractor plate over the photo ────────────────────────────────
   The plate's grid cells are already solid green, but its outer panel,
   header row and chips were near-transparent — they wash out over the
   sunset. Give the panel an opaque dark-green base + blur, and lift the
   header/chip text. Scoped to .hero so inner-page plates are untouched. */
.hero .psa-plate {
  background: linear-gradient(180deg, rgba(23,44,37,.80), rgba(15,29,24,.88));
  border-color: rgba(240,237,230,.20);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.72);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.hero .psa-plate .psa-plate-head .psa-lbl {
  color: rgba(240,237,230,.72);
}
.hero .psa-plate .psa-chip {
  color: var(--psa-cream);
  border-color: rgba(240,237,230,.26);
  background: rgba(31,61,52,.55);
}

/* ── Responsive ─────────────────────────────────────────────────────
   When the hero stacks, the diagonal no longer makes sense. Switch to a
   vertical treatment: the sunset (sky + Mt. Rainier) reads clearly across
   the top, then ramps to solid brand green where the text sits, keeping it
   fully legible. Anchor high (center 40%) so the colorful band shows — not
   the dark water that a low anchor would crop to on a tall phone screen. */
@media (max-width: 980px) {
  /* Mobile: the .hero-photo-bg child layer does not render reliably here, so
     the photo AND its green scrim are stacked directly on .hero (which renders
     fine) and the child layer is hidden. Kept identical to the main.css PHASE
     17 mobile rules so whichever stylesheet wins the cascade, the result is the
     same: a legible, scrimmed sunset behind the home hero text. */
  .hero {
    background-color: #1F3D34;
    background-image:
      linear-gradient(to bottom,
        rgba(16,33,27,.58) 0%,
        rgba(16,33,27,.48) 38%,
        rgba(31,61,52,.58) 66%,
        rgba(31,61,52,.96) 90%,
        #1F3D34 100%),
      url('../hero-photo-bg.jpg');
    background-position: center, center 40%;
    background-size: cover, cover;
    background-repeat: no-repeat;
  }
  .hero-photo-bg { display: none; }
}