/* hero.css: the photo-scrim hero, shared by the homepage, the seven service
   pages and the thirteen location pages.

   Loads after components.css, so .btn exists to be modified:
     tokens -> base -> layout -> components -> nav -> form -> hero -> services|locations

   The scrim, the photograph, the chip row and the breakpoints: agent/hero.md.
   Read it before changing the scrim or --scrim-rgb. */


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    /* url() resolves against THIS STYLESHEET, hence "../". Moving this to an
       inline style="" resolves it against the document and breaks it. */
    --hero-photo: url("../images/gallery/IMG_1365.jpeg");
    --hero-min: min(76vh, 62rem);
    --hero-pad: var(--space-9) var(--space-8);

    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: var(--hero-min);
    padding-block: var(--hero-pad);
    color: var(--ink-on-dark);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--hero-photo) center right / cover no-repeat;
}

/* Two-part scrim: the horizontal ramp holds the text column, the bottom
   vignette keeps the chips legible where the photo goes pale. Do not lighten
   it; it is what keeps white type above 4.5:1. Re-measure at several widths,
   not just 1440, if you touch it: agent/hero.md. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgb(var(--scrim-rgb) / 0) 55%,
            rgb(var(--scrim-rgb) / 0.75) 100%
        ),
        linear-gradient(
            90deg,
            rgb(var(--scrim-rgb) / 0.86) 0%,
            rgb(var(--scrim-rgb) / 0.82) 62%,
            rgb(var(--scrim-rgb) / 0.60) 78%,
            rgb(var(--scrim-rgb) / 0.42) 100%
        );
}

/* Left-anchored, so the headline lines up with the logo and nav above it. */
.hero__inner {
    max-width: 80ch;   /* headline measure, in characters */
    margin-right: auto;
}

/* First-load entrance. @starting-style, so unsupported engines simply render
   the content: motion never gates the headline or the phone number. Needs no
   reduced-motion override; base.css already handles it. See agent/motion.md. */
.hero__inner > *,
.hero__routes,
.hero__services {
    transition: opacity 480ms var(--ease-out),
                translate 480ms var(--ease-out);
}

@starting-style {
    .hero__inner > *,
    .hero__routes,
    .hero__services {
        opacity: 0;
        translate: 0 12px;
    }
}

.hero__inner > *:nth-child(1) { transition-delay: 40ms; }
.hero__inner > *:nth-child(2) { transition-delay: 100ms; }
.hero__inner > *:nth-child(3) { transition-delay: 160ms; }
.hero__inner > *:nth-child(4) { transition-delay: 220ms; }

.hero__routes,
.hero__services { transition-delay: 280ms; }

.hero h1 {
    color: var(--ink-on-dark);
    margin-bottom: var(--space-5);
}

/* Only force the break where the line provably fits: below 720px "GARAGE DOOR"
   at the clamp minimum can exceed the content column. */
.hero__line {
    display: inline;
}

@media (min-width: 720px) {
    .hero__line {
        display: block;
    }

    .hero__br {
        display: none;
    }
}

.hero__line--sm {
    font-size: 0.7em;
}

/* The highlighted phrase is a <mark>; reset its default yellow highlight. */
.hero h1 mark {
    display: block;
    background: none;
    font-size: 0.9em;
    color: var(--blue-on-scrim);   /* 6.6:1 on the scrim */
}

@media (max-width: 375px) {
    .hero__line--sm {
        font-size: 0.5em;
    }

    .hero h1 mark {
        font-size: 0.8em;
    }
}

.hero__lead {
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
    color: var(--on-ink);
    max-width: var(--measure);
}

/* The urgency split. Call dominates by colour and size, not by isolation. */
.hero__paths {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

/* Shared height so the row reads as one pair; max() holds the 48px control
   floor when the root scales down. */
.hero__paths .btn {
    min-height: max(6rem, 48px);
}

.hero__paths .btn--outline {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--ink-on-dark);
    backdrop-filter: blur(2px);
}

.hero__paths .btn--outline:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--ink-on-dark);
    color: var(--ink-on-dark);
}


/* --------------------------------------------------------------------------
   Routes. The chip row: on a location page it carries services, on a service
   page it carries cities. Hence .hero__routes, not .hero__services, which is
   kept as an alias so index.html needs no edit. See agent/hero.md.
   -------------------------------------------------------------------------- */
.hero__routes,
.hero__services {
    display: block;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero__routes-label,
.hero__services-label {
    display: block;
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--on-ink-muted);   /* thinnest margin over the photo; re-measure first */
}

/* Uncapped: the row spans the container and the chips wrap where they wrap. */
.hero__routes ul,
.hero__services ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
}

/* The chevron is what makes these read as links rather than tags. */
.hero__routes a,
.hero__services a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;        /* real px: a rem floor shrinks with the root */
    padding: 0.53em 0.8em;   /* em: chip padding tracks the chip's own size */
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.07);
    color: var(--on-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                scale var(--dur-press) var(--ease-out);
}

.hero__routes a svg,
.hero__services a svg {
    flex: none;
    opacity: 0.7;
    transition: translate var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out);
}

.hero__routes a:active,
.hero__services a:active {
    scale: 0.97;
}

@media (hover: hover) and (pointer: fine) {
    .hero__routes a:hover,
    .hero__services a:hover {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.7);
        color: var(--ink-on-dark);
    }

    .hero__routes a:hover svg,
    .hero__services a:hover svg {
        opacity: 1;
        translate: 2px 0;
    }
}

/* 981px is where the chips stop wrapping, NOT the nav breakpoint (900px).
   `1 0 auto`, not `1 1 0`: equal shares wrap "Track alignment". Must stay below
   `.hero__routes a` or its display loses. See agent/hero.md. */
@media (min-width: 981px) {
    .hero__routes li,
    .hero__services li {
        flex: 1 0 auto;
    }

    .hero__routes a,
    .hero__services a {
        display: flex;
        justify-content: center;
    }
}

/* The scrim ramp is a percentage of the hero while the text column is sized in
   ch, so the two disagree as the hero narrows and the type walks off the dark
   plateau. This band is where that first bites. See agent/hero.md. */
@media (min-width: 721px) and (max-width: 1240px) {
    .hero::after {
        background:
            linear-gradient(
                180deg,
                rgb(var(--scrim-rgb) / 0) 55%,
                rgb(var(--scrim-rgb) / 0.75) 100%
            ),
            linear-gradient(
                90deg,
                rgb(var(--scrim-rgb) / 0.88) 0%,
                rgb(var(--scrim-rgb) / 0.86) 74%,
                rgb(var(--scrim-rgb) / 0.78) 90%,
                rgb(var(--scrim-rgb) / 0.62) 100%
            );
    }
}

@media (max-width: 720px) {
    .hero {
        min-height: 0;
        padding-block: var(--space-7);
    }

    /* Photo detail is unreadable at this width; bias the scrim to solid. */
    .hero::after {
        background: linear-gradient(
            180deg,
            rgb(var(--scrim-rgb) / 0.90) 0%,
            rgb(var(--scrim-rgb) / 0.86) 60%,
            rgb(var(--scrim-rgb) / 0.94) 100%
        );
    }

    /* The panicked user is one-handed: call on top, full width, thumb zone. */
    .hero__paths {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__routes,
    .hero__services {
        margin-top: var(--space-6);
    }
}


/* --------------------------------------------------------------------------
   Variants. Inner pages run shorter: the visitor already knows what the page
   is, so the hero confirms and routes rather than introduces. Each page type
   names its own --hero-photo in services.css / locations.css.
   -------------------------------------------------------------------------- */
.hero--service,
.hero--location {
    --hero-min: min(62vh, 52rem);
    --hero-pad: var(--space-8) var(--space-7);
}