/* Auto Glass World - Landing hero (modules/global/global_lp_hero.php) */
.agw-lph {
    --agw-lph-size: clamp(2.8rem, 4.6vw, 4.7rem); /* the landing design's smaller title (asked 2026-10-27); every other h1 is --agw-fs-h1 */
    --agw-lph-body-top: clamp(40px, 6vw, 72px);
    position: relative;
    isolation: isolate;
    display: flex;
    overflow: hidden;
    min-height: calc(100svh - var(--agw-header-h, 90px));
    background: var(--agw-color-cool);
    color: var(--agw-color-navy);
}

.agw-lph-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.agw-lph-media picture {
    display: contents;
}

.agw-lph-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 34%;
}

/* The photo is shown exactly as uploaded: no shade, gradient or fade. Readability of the text over it
   is set in the photo itself. */

.agw-lph-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    gap: 32px clamp(32px, 5vw, 72px);
    align-items: center;
    padding-top: var(--agw-lph-body-top);
    padding-bottom: clamp(32px, 4vw, 56px);
}

.agw-lph-body.is-no-form {
    grid-template-columns: minmax(0, 1fr);
}

.agw-lph-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Desktop: the eyebrow starts at about the same height as the home hero's. */
@media (min-width: 1200px) {
    .agw-lph-copy {
        padding-top: 48px;
    }
}

.agw-lph .eyebrow {
    margin-bottom: var(--agw-label-gap);
    color: var(--agw-color-muted);
}

.agw-lph .agw-lph-title {
    margin: 0;
    color: var(--agw-color-navy);
    font-size: var(--agw-lph-size);
    line-height: 0.92;
}

/* Title field: lines split with <br>; the <em> line is blue italic. */
.agw-lph-title em {
    color: var(--agw-color-primary);
    font-style: italic;
}

.agw-lph-support {
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
    margin-top: 22px;
}

.agw-lph .agw-lead {
    max-width: 36ch;
    color: #33405a;
}

/* "20+ Years in auto glass." */
.agw-lph-rail {
    display: flex;
    gap: 20px;
    align-items: center;
    max-width: min(100%, 520px);
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid rgba(11, 30, 61, 0.18);
}

.agw-lph-num {
    display: flex;
    align-items: flex-start;
    color: var(--agw-color-navy);
    font-family: var(--agw-font-heading);
    font-size: var(--agw-fs-num);
    font-weight: 700;
    line-height: 0.8;
}

.agw-lph-num sup {
    margin-left: 2px;
    color: var(--agw-color-primary);
    font-size: 0.42em;
    line-height: 1;
}

.agw-lph-rail p {
    margin: 0;
    color: var(--agw-color-muted);
    font-size: var(--agw-fs-text);
    line-height: 1.4;
}

.agw-lph-rail b {
    display: block;
    color: var(--agw-color-navy);
    font-weight: 600;
}

/* No entrance animation: the title is the largest element on screen, and fading it in would delay it. */
.agw-lph-form {
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .agw-lph {
        --agw-lph-size: clamp(2.9rem, 12.6vw, 4rem);
        min-height: 0;
        background: var(--agw-color-navy); /* the form sits on navy below the photo, as in the home hero */
    }

    .agw-lph-body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked: the photo is a grid item behind the text only (row 1), from the top of the hero to
       24px below the text, full screen width. The form below sits on the navy, as in the home hero. */
    .agw-lph-media {
        position: relative;
        inset: auto;
        grid-row: 1;
        grid-column: 1;
        align-self: stretch;
        margin: calc(-1 * var(--agw-lph-body-top)) calc(-1 * var(--agw-gutter)) -24px;
    }

    /* The photo fills the box and never sets its height (a tall mobile photo would stretch the box). */
    .agw-lph-media img {
        position: absolute;
        inset: 0;
    }

    .agw-lph-copy {
        grid-row: 1;
        grid-column: 1;
    }

    .agw-lph-form {
        grid-row: 2;
        margin-top: 24px;
    }

    .agw-lph-media img {
        object-position: 76% 30%;
    }


    .agw-lph .agw-lph-title {
        line-height: 0.95;
    }

    /* Phones and tablets: light text over the photo, as in the home hero. */
    .agw-lph .eyebrow,
    .agw-lph .agw-lph-title,
    .agw-lph-title em,
    .agw-lph-num,
    .agw-lph-rail b {
        color: var(--agw-color-paper);
    }

    .agw-lph .agw-lead,
    .agw-lph-rail p {
        color: var(--agw-film-muted);
    }

    .agw-lph-num sup {
        color: var(--agw-color-sky);
    }

    .agw-lph-rail {
        border-color: rgba(244, 242, 236, 0.24);
    }
}

/* Phones: the text starts lower, as in the home hero (the eyebrow at the same height: 53px above 125vw). */
@media (max-width: 575px) {
    .agw-lph .eyebrow {
        margin-top: calc(125vw - 173px);
    }
}