/*
  hero-image — full-bleed hero with diagonal media split.
  Desktop: Figma 170:3112 · Mobile: Figma 172:3852

  Desktop stacking (matches Figma):
  1) Full-bleed environment photo
  2) Red multiply diagonal wash (behind the person)
  3) Transparent PNG cutout ON TOP of the diagonal (overlaps the edge, headroom intact)

  Mobile stacking (matches Figma 172:3852):
  1) Full-bleed portrait photo (object-position: bottom)
  2) Full-bleed red multiply wash (#cc092f)
  3) Black scrim (~40% opacity) — Figma’s multiply renders darker than CSS multiply alone
*/

.hero-image {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  /* Isolate so the red multiply wash only blends with hero media, not the page */
  isolation: isolate;
  min-block-size: var(--hero-min-h);
  color: var(--color-text-inverse);
  /* Dark fallback behind the right-side foliage (not brand red) */
  background-color: #141814;
}

/* ---------- Media layers ---------- */

.hero-image__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-image__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
  Environment-only plate (person removed) — house/foliage under the red wash,
  green bokeh behind the cutout. Sharp technician is the PNG layer only.
*/
.hero-image__bg--desktop {
  display: block;
  object-position: center center;
}

.hero-image__bg--mobile {
  display: none;
  /* Prefer the top of the frame so the head is never cropped */
  object-position: center top;
}

/* Responsive <picture> hero — one img, viewport chosen via <source>. */
.hero-image__media picture .hero-image__bg--responsive {
  display: block;
  object-position: center center;
}

/* Decorative washes — pseudo-elements on __media (no empty DOM nodes). */
.hero-image__media::before,
.hero-image__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Desktop: diagonal red multiply wash */
.hero-image__media::before {
  z-index: 1;
  background-color: var(--color-primary);
  mix-blend-mode: multiply;
  clip-path: polygon(
    0 0,
    var(--hero-wedge-top-x) 0,
    calc(var(--hero-wedge-top-x) - var(--hero-wedge-run-x) * var(--hero-wedge-h-scale)) 100%,
    0 100%
  );
}

.hero-image__media::after {
  display: none;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
}

.hero-image__diagonal-img {
  display: none;
}

/*
  Technician cutout — above the diagonal so he overlaps it (Figma).
  Sits in the right half with headroom; not glued to the far-right edge.
*/
.hero-image__portrait {
  position: absolute;
  /* Headroom above the cap */
  inset-block-start: clamp(40px, 4.5vw, 64px);
  inset-block-end: 0;
  /* Nudge in from the right so the shoulder isn’t clipped (Figma) */
  inset-inline-end: clamp(0px, 2vw, 40px);
  inset-inline-start: auto;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  inline-size: 48%;
  max-inline-size: 920px;
  overflow: hidden;
}

.hero-image__portrait-img {
  display: block;
  inline-size: auto;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/*
  Composite plate variant (service hub / service page — Figma 237:606 / 237:2025).
  Person is baked into the background image, so the cutout layer stays off.
  Additive: homepage hero (no --composite) still uses the portrait PNG.
*/
.hero-image--composite .hero-image__portrait {
  display: none;
}

.hero-image--composite .hero-image__bg--desktop {
  object-position: right center;
}

.hero-image--composite .hero-image__bg--mobile {
  object-position: 70% center;
}

/*
  Service page instance — Figma 237:2025.
  Composite plate: technician on the right with a water-fed pole.
  Title stays in the 656px copy column.
*/
.hero-image--service-page .hero-image__bg--desktop {
  object-position: 72% 42%;
}

.hero-image--service-page .hero-image__bg--mobile {
  object-position: 70% 35%;
}

/*
  Service page detail — Figma 267:47 (outdoor lighting hub composite plate).
  H1 can overflow the 656px copy column; desktop bg uses Figma fill transform.
*/
.hero-image--service-page-detail {
  --hero-content-top: var(--hero-content-top-detail);
}

.hero-image--service-page-detail .hero-image__bg--desktop {
  inset: auto;
  inline-size: 122.74%;
  block-size: 109.19%;
  inset-inline-start: -3.03%;
  inset-block-start: 0.01%;
  /* base.css caps imgs at 100%; allow Figma overscan (same as FAQs hero) */
  max-inline-size: none;
  object-fit: cover;
  object-position: center top;
}

.hero-image--service-page-detail .hero-image__bg--mobile {
  object-position: 68% 28%;
}

@media (min-width: 1024px) {
  .hero-image--service-page-detail .hero-image__content {
    max-inline-size: var(--hero-title-max-detail);
  }

  .hero-image--service-page-detail .hero-image__eyebrow,
  .hero-image--service-page-detail .hero-image__text,
  .hero-image--service-page-detail .hero-image__actions,
  .hero-image--service-page-detail .hero-image__rating {
    max-inline-size: var(--hero-content-w);
  }
}

/*
  Composite heroes — demo-location band height (copy + symmetric inset).
  Portrait PNG heroes (no --composite) keep --hero-min-h on the section instead.
*/
@media (min-width: 1024px) {
  .hero-image--composite {
    box-sizing: border-box;
    align-items: flex-start;
    padding-block: var(--local-hero-content-top);
  }

  /*
    Fixed 746px band (109px + 528px + 109px) — same as local-hero on demo-location.
    Contact, Why Shine, and blog list keep content-driven height.
  */
  .hero-image--composite:not(.hero-image--contact):not(.hero-image--why-shine):not(.hero-image--local-blog) {
    min-block-size: var(--hero-min-h);
    block-size: var(--hero-min-h);
  }

  .hero-image--composite .hero-image__content {
    margin-block-start: 0;
    padding-block-end: 0;
    flex: 0 0 auto;
  }

  .hero-image--composite .hero-image__bg--desktop {
    inset: auto;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 118%;
    object-fit: cover;
    object-position: right top;
  }

  /* Lighting hub plate — keep Figma fill over generic composite overscan */
  .hero-image--composite.hero-image--service-page-detail .hero-image__bg--desktop {
    inline-size: 122.74%;
    block-size: 109.19%;
    inset-inline-start: -3.03%;
    inset-block-start: 0.01%;
    max-inline-size: none;
    object-position: center top;
  }
}

/* ---------- Content ---------- */

.hero-image__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl); /* 32px */
  box-sizing: border-box;
  inline-size: 100%;
  margin-block-start: var(--hero-content-top);
  margin-inline-start: var(--layout-section-copy-inset);
  padding-block-end: var(--space-2xl);
}

@media (min-width: 1024px) {
  .hero-image__content {
    max-inline-size: var(--hero-content-w);
  }
}

.hero-image__eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: var(--fs-hero-eyebrow);
  line-height: var(--lh-mega-label); /* 36px */
  letter-spacing: var(--hero-eyebrow-ls);
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

.hero-image__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero-title);
  line-height: var(--hero-title-lh);
  letter-spacing: var(--hero-title-ls);
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

.hero-image__title-mobile {
  display: none;
}

.hero-image__text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* 24px */
  inline-size: 100%;
}

.hero-image__text {
  margin: 0;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-regular);
  font-size: var(--fs-hero-text);
  line-height: var(--lh-mega-body); /* 30px */
  letter-spacing: var(--ls-mega-body);
  color: var(--color-text-inverse);
}

.hero-image__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-lg); /* 24px */
}

.hero-image__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 1.25rem; /* 20px */
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-cta);
  white-space: nowrap;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base), transform var(--transition-base);
}

.hero-image__btn:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 3px;
}

.hero-image__btn--primary {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-bg);
}

.hero-image__btn--primary:hover {
  background-color: #f5f5f5;
}

.hero-image__btn--secondary {
  background-color: transparent;
  color: var(--color-text-inverse);
  border: 1px solid var(--color-text-inverse);
}

.hero-image__btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hero-image__btn-icon {
  inline-size: 11px;
  block-size: 11px;
  flex-shrink: 0;
}

.hero-image__btn-text {
  min-inline-size: 0;
}

/*
  Rating row — Figma desktop: stars + one-line italic caption side by side.
  Do NOT constrain the whole row to 230px (that forced the text to wrap).
*/
.hero-image__rating {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem; /* 12px */
}

.hero-image__stars {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-xs); /* 8px */
}

.hero-image__star {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  object-fit: contain;
}

.hero-image__rating-text {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: var(--fs-hero-rating);
  line-height: 1.25;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--color-text-inverse);
}

/* ---------- Mid desktop ---------- */

@media (max-width: 1599px) {
  .hero-image {
    --hero-content-w: min(41rem, 46vw);
    --fs-hero-title: clamp(2.5rem, 4vw, 4rem);
    --hero-title-lh: 1.05;
    --hero-content-top: clamp(4rem, 8vw, 11.125rem);
  }

  .hero-image--service-page-detail {
    --hero-title-max-detail: min(47.1875rem, 50vw);
  }

  .hero-image__portrait {
    inline-size: 46%;
  }
}

@media (max-width: 1279px) {
  .hero-image {
    --hero-content-w: min(34rem, 50vw);
    --hero-min-h: 46.625rem; /* stay on demo-location band through tablet */
  }

  .hero-image__portrait {
    inline-size: 44%;
  }

  .hero-image__actions {
    gap: var(--space-md);
  }

  .hero-image__btn {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }
}

/* ---------- Mobile — Figma 172:3852 ---------- */

@media (max-width: 1023px) {
  .hero-image {
    min-block-size: var(--local-hero-min-h-mobile); /* 526px — demo-location mobile band */
    align-items: stretch;
    justify-content: flex-start;
    background-color: #0d0d0d;
  }

  .hero-image__bg--desktop {
    display: none;
  }

  .hero-image__portrait {
    display: none;
  }

  .hero-image__bg--mobile,
  .hero-image__media picture .hero-image__bg--responsive {
    display: block;
    object-fit: cover;
    /* Figma mobile frame uses object-bottom so the torso fills the frame */
    object-position: center bottom;
  }

  .hero-image__media::before {
    clip-path: none;
    background-color: var(--color-primary);
    mix-blend-mode: multiply;
  }

  .hero-image__media::after {
    display: block;
  }

  .hero-image__content {
    align-self: stretch;
    align-items: flex-start;
    justify-content: center; /* vertical center in fixed mobile band */
    gap: 1.125rem; /* 18px */
    max-inline-size: none;
    margin-block-start: 0;
    margin-inline: 0;
    padding-block: var(--local-hero-pad-y-mobile);
    padding-inline: var(--space-md);
  }

  .hero-image__eyebrow {
    display: none;
  }

  .hero-image__title-desktop {
    display: none;
  }

  .hero-image__title-mobile {
    display: block;
  }

  .hero-image__title {
    font-size: var(--fs-hero-title-mobile);
    line-height: var(--hero-title-lh-mobile);
    letter-spacing: var(--hero-title-ls);
  }

  .hero-image__text-block {
    gap: 1.125rem;
    align-items: flex-start;
    align-self: stretch;
    inline-size: 100%;
    max-inline-size: none; /* full content width on mobile (portrait hidden) */
    text-align: start;
  }

  .hero-image__text {
    font-size: var(--fs-hero-text-mobile);
    letter-spacing: -0.02em;
  }

  .hero-image__actions {
    flex-direction: column;
    align-items: stretch;
    align-self: center;
    gap: var(--space-md);
    inline-size: 100%;
    max-inline-size: 16.625rem; /* 266px */
  }

  .hero-image__btn {
    box-sizing: border-box;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: 1.25rem 2.5rem; /* 20px 40px */
    font-size: 1rem;
    /* Long CTAs (e.g. holiday lighting estimate) must wrap inside the 266px pill */
    white-space: normal;
    text-align: center;
  }

  .hero-image__btn-text {
    text-align: center;
  }

  /* Careers mobile — CTA pill only; hero copy keeps default left-aligned stack. */
  .hero-image--careers .hero-image__actions {
    max-inline-size: none;
    align-items: center;
  }

  .hero-image--careers .hero-image__btn {
    box-sizing: border-box;
    inline-size: auto;
    width: fit-content;
    max-inline-size: 100%;
    margin-inline: auto;
    padding-inline: 1.25rem 1.75rem;
    white-space: nowrap;
    text-align: center;
  }

  .hero-image--careers .hero-image__btn-text {
    flex-shrink: 0;
    min-inline-size: auto;
  }

  /* Mobile rating stacks: stars above caption (Figma) */
  .hero-image__rating {
    flex-direction: column;
    flex-wrap: wrap;
    align-self: center;
    justify-content: center;
    gap: 0.75rem;
    inline-size: 100%;
  }

  .hero-image__rating-text {
    white-space: normal;
    text-align: center;
  }

  .hero-image--service-page .hero-image__bg--mobile {
    object-position: 68% 30%;
  }

  /* Local blog — desktop column max does not apply on mobile; copy stays left-aligned */
  .hero-image--local-blog .hero-image__content {
    max-inline-size: none;
  }

  .hero-image--local-blog .hero-image__text {
    max-inline-size: none;
  }

  .hero-image--local-blog .hero-image__bg--mobile {
    object-position: 68% 28%;
  }

  /* Sparse copy-only heroes — desktop column max does not apply on mobile */
  .hero-image--why-shine .hero-image__content,
  .hero-image--faqs .hero-image__content,
  .hero-image--service-page-detail .hero-image__content {
    max-inline-size: none;
  }

  .hero-image--why-shine .hero-image__text {
    max-inline-size: none;
  }

  .hero-image--why-shine .hero-image__bg--mobile {
    object-position: 78% 18%;
  }

  .hero-image--faqs .hero-image__text-block {
    gap: 1.125rem;
  }
}

/*
  Local blog instance — Figma 500:3083.
  Composite van plate. No eyebrow, CTAs, or rating.
*/
.hero-image--local-blog {
  --hero-content-top: var(--hero-content-top-local-blog);
  background-color: #c20a2b;
}

@media (min-width: 1024px) {
  .hero-image--local-blog .hero-image__content {
    max-inline-size: var(--hero-title-max-local-blog);
  }

  .hero-image--local-blog .hero-image__text {
    max-inline-size: var(--hero-content-w);
  }
}

.hero-image--local-blog .hero-image__text-block {
  gap: var(--space-xl);
}

.hero-image--composite.hero-image--local-blog .hero-image__bg--desktop {
  object-position: 62% top;
}

.hero-image--local-blog .hero-image__bg--mobile {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-position: 70% 30%;
}

@media (max-width: 1599px) {
  .hero-image--local-blog {
    --hero-title-max-local-blog: min(51.375rem, 56vw);
    --hero-content-top: clamp(4rem, 8vw, 19.8125rem);
  }

  .hero-image--why-shine {
    --hero-title-max-why-shine: min(47.4375rem, 52vw);
    --hero-content-top: clamp(4rem, 8vw, 17.6875rem);
  }

  .hero-image--faqs {
    --hero-content-top: clamp(4rem, 8vw, 15.8125rem);
  }
}

/*
  Why Shine instance — Figma 304:1467.
  Composite doorway plate. No eyebrow, CTAs, or rating.
  H1 is 759px. Copy starts at 283px.
*/
.hero-image--why-shine {
  --hero-content-top: var(--hero-content-top-why-shine);
  /* Door red from the photo edge — safety if sub-pixel gaps appear */
  background-color: #c20a2b;
}

@media (min-width: 1024px) {
  .hero-image--why-shine .hero-image__content {
    max-inline-size: var(--hero-title-max-why-shine);
  }

  .hero-image--why-shine .hero-image__text {
    max-inline-size: var(--hero-content-w);
  }
}

/* Title and body sit 32px apart in Figma 304:1469 */
.hero-image--why-shine .hero-image__text-block {
  gap: var(--space-xl);
}

.hero-image--composite.hero-image--why-shine .hero-image__bg--desktop {
  /* Keep the technician framed on the right under the diagonal */
  object-position: 72% top;
}

.hero-image--why-shine .hero-image__bg--mobile {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-position: 78% 20%;
}

/*
  Careers instance — Figma 325:1260.
  Composite plate with eyebrow, single primary CTA, and rating row.
*/
.hero-image--careers .hero-image__bg--desktop {
  object-position: 58% center;
}

.hero-image--careers .hero-image__bg--mobile {
  object-position: 65% 35%;
}

@media (min-width: 1024px) {
  .hero-image--careers .hero-image__eyebrow,
  .hero-image--careers .hero-image__text,
  .hero-image--careers .hero-image__actions,
  .hero-image--careers .hero-image__rating {
    max-inline-size: var(--hero-content-w);
  }
}

/*
  FAQs instance — Figma 322:47.
  Composite plate; no eyebrow, CTAs, or rating.
*/
.hero-image--faqs {
  --hero-content-top: var(--hero-content-top-faqs, 15.8125rem);
  background-color: #a9d3ee;
}

.hero-image--faqs .hero-image__text-block {
  gap: var(--space-xl);
}

.hero-image--composite.hero-image--faqs .hero-image__bg--desktop {
  inset: auto;
  inset-inline-start: -1.74%;
  inset-block-start: -11.6%;
  inline-size: 131.52%;
  block-size: 117%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center center;
}

.hero-image--faqs .hero-image__bg--mobile {
  object-position: 66% 30%;
}