/* Hero — hero-bg gradient with pattern overlay, stone-texture background */

/* Ensure the estimate form anchor clears the sticky .site-top header (~5rem)
   plus breathing room. scroll-margin-top works on the element itself and
   applies even for cross-page navigation (e.g. /#estimate from another page),
   complementing the html scroll-padding-top in base.css. */
#estimate {
  scroll-margin-top: 6rem;
}

.hero-bg {
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-gray-600) 50%, var(--color-text) 100%);
  position: relative;
}

/* Warm-tinted dark variant for CTA sections — separates from footer */
.hero-bg-warm {
  background: linear-gradient(135deg, var(--color-text-warm) 0%, var(--color-text-warm-mid) 50%, var(--color-text-warm) 100%);
  position: relative;
}

/* Shared pattern overlay for both hero variants */
.hero-bg::before,
.hero-bg-warm::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.stone-texture {
  background-color: var(--color-surface-muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23b8b2b1' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* ========== HERO CONTAINER PADDING ========== */

/* Hero sections need generous desktop padding to accommodate the wave SVG
   divider at the bottom. On mobile the wave renders much shorter, so
   11rem of desktop padding becomes a big dead gap under the form.
   Compound selector (.container.hero-container) boosts specificity to
   beat layout.css's .container { padding: 0 var(--space-4); } shorthand,
   which otherwise wins on padding-top/padding-bottom because Propshaft's
   :app helper loads stylesheets alphabetically (layout.css after hero.css). */
.container.hero-container {
  position: relative;
  z-index: 1;
  padding-top: var(--space-12);        /* 3rem on mobile */
  padding-bottom: var(--space-16);     /* 4rem on mobile — clears the short wave */
}

@media (min-width: 768px) {
  .container.hero-container {
    padding-top: var(--space-20);      /* 5rem — matches the previous desktop value */
    padding-bottom: 11rem;             /* preserves desktop wave clearance */
  }
}

/* ========== HERO TRUST BADGES (landing-page hero) ========== */

/* Still used by the landing-page hero (app/views/landing_pages/show.html.erb).
   The homepage moved its badges into the standalone .trust-bar band (Phase 2),
   but the landing-page hero keeps these inline badges, so this rule stays.
   On narrow phones the natural wrap puts two items on the first row and one on
   the second — justify-content: center aligns both rows on the hero midline
   instead of leaving the orphan third item floating off-center. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
  .hero-trust {
    justify-content: center;
    gap: var(--space-3) var(--space-6);
  }
}

/* ========== HERO BACKGROUND VIDEO (home + landing pages) ========== */

/* Layer stack for the video variant: backdrop 0, overlay 1, plus-pattern 2,
   content and wave 3. Applied via .hero-bg-video on the home and landing
   page heroes, which both render shared/_hero_video_backdrop.html.erb.
   Specs: docs/superpowers/specs/2026-07-04-hero-background-video-design.md,
         docs/superpowers/specs/2026-07-10-landing-page-hero-video-design.md */

.hero-bg-video .hero-video-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 62%;
  z-index: 0;
  /* Still frame extracted at the video's 6s hold point. Shows on mobile,
     under prefers-reduced-motion, while the video loads, and whenever
     autoplay is blocked — the hero always looks finished without JS. */
  background-image: url("/assets/hero-pan-hold-01cc1180.jpg");
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
}

.hero-bg-video .hero-video-backdrop video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fades in over the still frame once playback actually starts, so the
     wide hold frame never visibly jumps back to the narrow opening frame. */
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-bg-video .hero-video-backdrop video.is-playing {
  opacity: 1;
}

.hero-bg-video .hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two stacked gradients: a horizontal fade that is transparent over the
     footage and solid --color-text under the form column, and the brand 135°
     gradient (--color-text / --color-gray-600) at reduced opacity. The
     color-mix percentages are the approved overlay opacities — they keep
     white hero text at WCAG AA over the brightest footage per the design
     spec; do not lower them. */
  background:
    linear-gradient(90deg, transparent 0%, transparent 45%, color-mix(in srgb, var(--color-text) 55%, transparent) 62%, var(--color-text) 78%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-text) 82%, transparent) 0%, color-mix(in srgb, var(--color-gray-600) 72%, transparent) 50%, color-mix(in srgb, var(--color-text) 82%, transparent) 100%);
}

/* The shared ::before plus-pattern and the content/wave need explicit
   stacking once real layers exist beneath them. */
.hero-bg-video::before {
  z-index: 2;
}

.hero-bg-video .container.hero-container {
  z-index: 3;
}

/* .wave-bottom is already position: absolute (components.css:177), so a
   bare z-index is enough to lift it above the overlay. */
.hero-bg-video .wave-bottom {
  z-index: 3;
}

/* Below 768px the hero grid stacks (layout.css .grid-2 breakpoint) and the
   backdrop spans the full width behind the text. Still image only — the
   Stimulus controller never assigns a src at these widths, so phones never
   download the video. */
@media (max-width: 767.98px) {
  .hero-bg-video .hero-video-backdrop {
    width: 100%;
    /* The stacked mobile hero is ~3x taller than the phone is wide, so
       covering all of it zooms the photo into a narrow slice. Cap the
       backdrop to the headline area (the 480px crop approved in the
       2026-07-04 mockup session) and fade its bottom into the brand
       gradient before the estimate form card. */
    bottom: auto;
    height: 30rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  }
}