/* =============================================================================
 * Auto Parqueo — homepage and about page
 *
 * Everything here builds on the tokens and primitives in app.css (container,
 * section, card, btn, eyebrow, lead, fine-print). No colour is written as a
 * literal: the two values this file needs that app.css does not already define
 * are declared as custom properties for both schemes right below, so the page
 * follows the OS theme with no extra rules.
 *
 * Mobile first. Every grid here is a single `repeat(auto-fit, minmax())` line
 * rather than a stack of breakpoints; the only real media query is the hero,
 * where the illustration genuinely has to move from below the copy to beside it.
 * ========================================================================== */

:root {
    /* The warm wash behind the hero. Amber at low opacity over cream reads as
     * daylight; the same mix over the dark background reads as glare, so dark
     * mode uses the deeper 700 stop at roughly half the strength. */
    --hero-glow: color-mix(in srgb, var(--primary-500) 22%, transparent);
    --step-rule: var(--border-app);
}

@media (prefers-color-scheme: dark) {
    :root {
        --hero-glow: color-mix(in srgb, var(--primary-700) 13%, transparent);
        --step-rule: color-mix(in srgb, var(--accent) 34%, transparent);
    }
}

/* ---- Inline icons -------------------------------------------------------- *
 * Stroke geometry lives here instead of on each <svg> so the markup stays
 * readable and a size change is one line. currentColor is what makes an icon
 * inherit its container's theme colour. */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Shared section header ---------------------------------------------- */
.section__head {
    display: grid;
    gap: 0.625rem;
    max-width: 44rem;
    margin-block-end: 2.5rem;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;               /* the glow must not widen the page */
    padding-block: 3rem 3.5rem;
    border-block-end: 1px solid var(--border-app);
    background:
        radial-gradient(60rem 34rem at 88% -12%, var(--hero-glow), transparent 68%),
        var(--background);
}

.hero__inner {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

/* 20px is the hero's default rhythm: eyebrow, headline, lead and fine print are
 * one continuous read. The CTA row is not part of that read, so it opts out
 * below and gets its own 32px tier on both sides. Note the trap this selector
 * sets for anything it spaces: it is a single class of specificity, so any
 * later rule that resets `margin` on a child — a `<ul>` killing its UA margin,
 * say — wins the tie and silently zeroes the gap. Children that reset margin
 * must restate their block-start value; `.hero__facts` does. */
.hero__copy > * + * {
    margin-block-start: 1.25rem;
}

.hero h1 {
    max-width: 20ch;                /* keeps the headline in three tight lines */
}

.hero .lead {
    max-width: 48ch;
}

/* The hero's one primary action, so it is given room to be one: 32px above and
 * below instead of the 20px paragraph rhythm, which reads the two buttons as a
 * deliberate stop rather than as the next line of the paragraph. */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2rem;
}

/* True statements only — this row is where a landing page usually invents
 * "500+ customers". Four facts we can stand behind, set as quiet supporting
 * text rather than headline numbers. */
.hero__facts {
    display: grid;
    gap: 0.5rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    /* The shorthand is the UA <ul> margin being cleared, but it also outranks
     * `.hero__copy > * + *` on source order alone, which is what glued this
     * list to the buttons. Restate the gap it owes right after clearing. */
    margin: 0;
    margin-block-start: 2rem;
    padding: 0;
    list-style: none;
    font-size: var(--text-micro);
    color: var(--muted);
}

/* Four facts, so 1, 2 and 4 columns are all clean and 3 strands one. auto-fit
 * picked 3 between 720px and 928px, then flashed 4-across for one step before
 * the hero splits at 60rem and snaps back to 2. Pinning 2 kills both. Above
 * 60rem these live in the hero's left column, which tops out around 508px, so
 * 3 or 4 across is unreachable there anyway — 2 is the permanent answer.
 * minmax(0, 1fr) rather than 13rem: a forced track with a floor can overflow
 * a narrow column, and a 0 floor can only reflow text. */
@media (min-width: 30rem) {
    .hero__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hero__fact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --accent-fg, not --accent: these ticks are the graphical object carrying the
 * claim next to them, so they owe 3:1. Raw amber managed 2.27 on cream. */
.hero__fact .icon {
    width: 1rem;
    height: 1rem;
    color: var(--accent-fg);
}

/* The illustration is an included partial owned by another file; this wrapper
 * only guarantees it scales and never forces a horizontal scrollbar. */
.hero__scene > * {
    width: 100%;
    height: auto;
}

@media (min-width: 60rem) {
    .hero {
        padding-block: 4.5rem 5rem;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 3.5rem;
    }
}

/* ---- Benefits ------------------------------------------------------------ */
.benefit-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit {
    display: grid;
    gap: 0.625rem;
    align-content: start;           /* cards match height, text does not stretch */
}

.benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--accent-soft);
    color: var(--accent-fg);
}

.benefit p {
    margin: 0;
    color: var(--muted);
}

/* ---- How it works -------------------------------------------------------- */
/* Three items, so the column count has to skip 2: auto-fit found a 2-column
 * stage between 592px and 848px that left step 03 stranded alone on its own
 * row. Raising the minmax base cannot fix that — for any base there is always
 * a width where exactly 2 tracks fit. An explicit breakpoint can, and it also
 * makes the switch independent of --gutter. The count is fixed by the template
 * (`for step in 1..3`); if that ever becomes data-driven, revisit this. */
.steps {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;               /* the visible "01" replaces the marker */
}

@media (min-width: 60rem) {
    .steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

.step {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding-block-start: 1rem;
    border-block-start: 2px solid var(--step-rule);
}

.step__num {
    font-size: var(--text-title);
    font-weight: 800;
    line-height: 1;
    /* 24px counts as large text, so the bar is 3:1 — raw amber hit 2.14 on the
     * tinted band and the numerals washed out. */
    color: var(--accent-fg);
    font-variant-numeric: tabular-nums;
}

.step p {
    margin: 0;
    color: var(--muted);
}

/* ---- Locations ----------------------------------------------------------- */
.locations__map {
    overflow: hidden;               /* clips the map's own corners to the radius */
    border: 1px solid var(--border-app);
    border-radius: var(--radius-card);
    background: var(--surface-container);
}

.locations__map > * {
    width: 100%;
}

/* ---- Closing CTA band ---------------------------------------------------- */
.cta-band__inner {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
}

/* The 65ch from app.css does NOT survive here: this p is also a .lead, and
 * .lead sets max-width:none. Without re-stating the cap the closing line ran
 * 124 characters across a single 976px row. Auto margins keep it centred. */
.cta-band p {
    max-width: 65ch;
    margin-inline: auto;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* ---- About page ---------------------------------------------------------- */
.about-head {
    padding-block-end: 3rem;
}

/* Same .lead / max-width:none trap as .cta-band p above — this intro sat on one
 * 109-character line at desktop because nothing re-capped it. */
.about-head .lead {
    max-width: 65ch;
    margin-block-start: 1rem;
}

.about-head .eyebrow {
    margin-block-end: 0.75rem;
}

/* Same three-item orphan as .steps, here between 656px and 960px. Prose also
 * reads better as one full-width column than as two narrow ones on a tablet,
 * so the single-column stage runs all the way to 64rem. */
.about-grid {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 64rem) {
    .about-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.about-block h2 {
    font-size: var(--text-subtitle);
    margin-block-end: 0.625rem;
}

.about-block p {
    color: var(--muted);
}

.about-block p + p {
    margin-block-start: 0.75rem;
}