/*
  local-service-hero — local service page hero.
  Desktop: Figma 371:47 · Mobile: Figma 371:472

  Standalone block. Do not edit the shared hero-image component for this page.

  Desktop stacking:
  1) Full-bleed composite photo (technician baked in)
  2) Red multiply diagonal wash on the left
  3) Copy at 224px from the top

  Mobile stacking:
  1) Full-bleed photo (object-position: bottom)
  2) Full-bleed red multiply wash
  3) Black scrim (~40% opacity)
*/

.local-service-hero {
  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); /* demo-location band when not overridden */
  color: var(--color-text-inverse);
  background-color: #141814;
}

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

.local-service-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.local-service-hero__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.local-service-hero__bg--desktop {
  display: block;
  /* Keep the technician framed on the right of the composite plate */
  object-position: 78% 42%;
}

.local-service-hero__bg--mobile {
  display: none;
  object-position: center bottom;
}

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

.local-service-hero__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%
  );
}

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

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

.local-service-hero__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(--local-service-hero-content-top); /* 224px */
  margin-inline-start: var(--layout-section-copy-inset);
  padding-block-end: var(--space-2xl);
}

@media (min-width: 1024px) {
  /* H1 is 758px and overflows the 656px copy column */
  .local-service-hero__content {
    max-inline-size: var(--local-service-hero-title-max);
  }

  .local-service-hero__eyebrow,
  .local-service-hero__text,
  .local-service-hero__actions,
  .local-service-hero__rating {
    max-inline-size: var(--hero-content-w); /* 656px */
  }
}

.local-service-hero__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);
}

.local-service-hero__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);
}

.local-service-hero__title-mobile {
  display: none;
}

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

.local-service-hero__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);
}

.local-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md); /* 16px — Figma 371:54 */
}

.local-service-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 1.25rem; /* 20px */
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  border: 1px solid var(--color-bg);
  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;
  color: var(--color-primary);
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.local-service-hero__btn:hover {
  background-color: #f5f5f5;
}

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

.local-service-hero__btn-icon {
  inline-size: 11px;
  block-size: 11px;
  flex-shrink: 0;
}

.local-service-hero__btn-icon--phone {
  inline-size: 22px;
  block-size: 22px;
  object-fit: contain;
}

.local-service-hero__rating {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem; /* 12px */
}

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

.local-service-hero__star {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  object-fit: contain;
}

.local-service-hero__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) {
  .local-service-hero {
    --hero-content-w: min(41rem, 46vw);
    --fs-hero-title: clamp(2.5rem, 4vw, 4rem);
    --hero-title-lh: 1.05;
  }

  .local-service-hero {
    --local-service-hero-title-max: min(47.375rem, 50vw);
  }
}

@media (max-width: 1279px) {
  .local-service-hero {
    --hero-content-w: min(34rem, 50vw);
  }

  .local-service-hero__btn {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }
}

/*
  Desktop — shorter hero like local home / services hub / service area hub:
  copy + symmetric vertical inset, not full 925px --hero-min-h frame.
*/
@media (min-width: 1024px) {
  .local-service-hero {
    box-sizing: border-box;
    align-items: flex-start;
    min-block-size: auto;
    padding-block: var(--local-hero-content-top);
  }

  .local-service-hero__content {
    margin-block-start: 0;
    padding-block-end: 0;
    flex: 0 0 auto;
  }

  /* Overscan top-right so the technician is framed in the shorter band */
  .local-service-hero__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;
  }
}

/* ---------- Mobile — Figma 371:472 ---------- */

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

  .local-service-hero__bg--desktop {
    display: none;
  }

  .local-service-hero__bg--mobile {
    display: block;
    object-fit: cover;
    object-position: center bottom;
  }

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

  .local-service-hero__media::after {
    display: block;
  }

  .local-service-hero__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);
  }

  .local-service-hero__eyebrow,
  .local-service-hero__text,
  .local-service-hero__actions,
  .local-service-hero__rating {
    max-inline-size: none;
  }

  .local-service-hero__eyebrow {
    display: none;
  }

  .local-service-hero__title-desktop {
    display: none;
  }

  .local-service-hero__title-mobile {
    display: block;
  }

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

  .local-service-hero__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;
  }

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

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

  .local-service-hero__btn--estimate {
    inline-size: 100%;
    padding: 1.25rem 2.5rem; /* 20px 40px */
    font-size: 1rem;
  }

  /* Call CTA hugs the phone icon + label (Figma 371:483) */
  .local-service-hero__btn--call {
    inline-size: auto;
    align-self: center;
    padding-inline: 1.25rem;
  }

  .local-service-hero__rating {
    flex-direction: column;
    flex-wrap: wrap;
    align-self: center;
    justify-content: center;
    gap: 0.75rem;
    inline-size: 100%;
  }

  .local-service-hero__rating-text {
    white-space: normal;
    text-align: center;
  }
}