/*
 * The Howdyline page: the hero over the Beams, what Howdyline is and Book a
 * demo beside the home page's example call on a phone (call.js, call.css);
 * then what it does, over a photo of homes at night that comes up out of
 * the dark. .kicker, .lead, .beams and .button come from site.css.
 *
 * Only the Beams and the call move, and only with prefers-reduced-motion:
 * no-preference; otherwise the call is over and still.
 */

/* ---- Hero: the words over the phone on a phone, beside it from
   --breakpoint-lg ---- */

/* Holds the Beams behind the text, as the page head does. */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.hero .wrap {
    display: grid;
    gap: var(--space-12);
    padding-block: var(--space-14) var(--space-16);
}

.hero h1 {
    margin-block: var(--space-3) 0;
    font-size: var(--text-display-md);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-heading);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
    margin-block-start: var(--space-8);
}

.hero-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-ui);
}

.hero .voice {
    justify-self: center;
}

/* ---- What it does: the photo across the page, coming up out of the dark
   and going back into it under the words, which sit over its lower edge ---- */

.what {
    padding-block-end: var(--space-16);
}

/* Its place is kept while the photo loads, on the dark ground. */
.what-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-block-size: var(--container-3xl);
    background: var(--background);
}

/* The homes and the city's lights on the horizon, not the sky. */
.what-photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 100%;
}

.what-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--background), transparent 30%),
        linear-gradient(to top, var(--background), color-mix(in srgb, var(--background) 70%, transparent) 30%, transparent 70%);
}

.what .wrap {
    position: relative;
    margin-block-start: calc(var(--space-12) * -1);
}

.what h2 {
    max-inline-size: var(--container-2xl);
    margin-block: var(--space-3) 0;
    font-size: var(--text-display-lg);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-heading);
}

/* A rule over each, a Neon dot on the line of its name. */
.what-list {
    display: grid;
    gap: var(--space-8) var(--space-12);
    margin-block: var(--space-12) 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
}

.what-list li {
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--border-strong);
}

.what-list h3 {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-snug);
}

.what-list h3::before {
    content: "";
    flex: none;
    inline-size: var(--space-2);
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: var(--green);
    translate: 0 calc(var(--space-1) * -1);
}

.what-list p {
    max-inline-size: var(--container-md);
    margin-block: var(--space-2) 0;
    color: var(--muted-foreground);
}

@media (min-width: 48rem) {
    .what {
        padding-block-end: var(--space-24);
    }

    .what-photo {
        aspect-ratio: 21 / 9;
    }

    .what .wrap {
        margin-block-start: calc(var(--space-24) * -1);
    }
}

@media (min-width: 56.25rem) {
    .hero .wrap {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
    }

    .what-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Side by side, each line of how starts level, whichever name wraps. */
    .what-list li {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}