/* ============================================================================
   Clearout Crew — Refresh module: HERO
   Part of the "Warm & Elevated" refresh (owner-approved 2026-08-09). One small,
   self-contained module per section so each is easy to service and diagnose.
   This file styles ONLY the homepage hero (.cc-hero and its children).

   Handle: cc-refresh-hero   ·   Loads after premium.css.
   Toggle just this section: dequeue 'cc-refresh-hero' (leaves the rest intact).
   Revert its effect: delete this file and drop it from the module list in
   functions.php. Changes nothing outside the hero.

   Depends on tokens from design-tokens.css + premium.css (warm palette, warm
   shadows). Self-contained: its only local vars live here.
   ========================================================================== */

:root {
  --cc-frame: 4px solid #FFFFFF;       /* white photo mat */
}

/* Richer, layered warm ground (charcoal/orange family only, no new palette). */
.cc-hero.cc-section {
  background-color: var(--cc-paper);
  background-image:
    radial-gradient(115% 85% at 93% -10%, rgba(249, 115, 22, 0.15), transparent 55%),
    radial-gradient(85% 75% at -6% 4%, rgba(194, 65, 12, 0.06), transparent 58%),
    linear-gradient(180deg, #FFF8F1 0%, var(--cc-paper) 62%);
}

/* NOTE: the headline's size + leading come from the theme's fluid --cc-fs-h1
   token, set as an INLINE style on the <h1> (~52px desktop, ~34px phone,
   line-height 1.15). Inline styles win over any selector here, and that scale is
   well tuned + verified good on a real phone, so we don't fight it. The hero's
   signature is the underscore below + a hair more tracking, which DO apply. */
.cc-hero__text h1 {
  letter-spacing: -0.03em;
}
/* Craft underscore — a short warm bar that signs the headline (a mark, not a
   full-width divider). */
.cc-hero__text h1::after {
  content: "";
  display: block;
  width: 78px;
  height: 5px;
  margin-top: 1.15rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cc-orange), var(--cc-orange-cta));
}
.cc-hero__text .cc-lead {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  color: var(--cc-ink-muted);
}

/* Reassurance line → warm, raised trust pills (the reassurance a homeowner reads
   before deciding to call). Scoped to the hero so other reassurance lines are
   unchanged. */
.cc-hero .cc-reassurance {
  gap: 0.6rem 0.7rem;
  margin-top: var(--cc-space-32);
}
.cc-hero .cc-reassurance li {
  padding: 0.45rem 0.85rem;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-surface);
  border: 1px solid var(--cc-border-warm);
  box-shadow: var(--cc-shadow-warm);
  color: var(--cc-ink);
  font-weight: 600;
}
.cc-hero .cc-reassurance li::before {
  content: "\2713";
  color: var(--cc-orange-cta);
  font-weight: 700;
}

/* Photo — a clean white mat + warm keyline + soft warm elevation, so the real
   job photo reads as framed and premium. */
.cc-hero__photo {
  border-radius: 18px;
  border: var(--cc-frame);
  box-shadow: 0 0 0 1px var(--cc-border-warm), var(--cc-shadow-warm-lg);
}

@media (min-width: 782px) {
  /* Calm premium's striped offset panel to a solid-warm block behind the photo,
     so the framing reads editorial, not busy. */
  .cc-hero__media::before {
    right: -15px;
    bottom: -17px;
    width: 62%;
    height: 66%;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0.04));
    border: 1px solid var(--cc-border-warm);
  }
}

/* Phone: on a narrow screen the roomy desktop pills stack one-per-line and read as
   a tall list. Tighten the gap, padding, and type a touch so they cluster as
   compact chips (the short pills pair up, the long one takes its own line) — same
   pills, less listy. */
@media (max-width: 600px) {
  .cc-hero .cc-reassurance {
    gap: 0.4rem 0.45rem;
    margin-top: var(--cc-space-24);
  }
  .cc-hero .cc-reassurance li {
    padding: 0.34rem 0.7rem;
    font-size: 0.82rem;
  }
}