/**
 * STY-02 — controlled hero and breadcrumb system.
 *
 * Loaded only on pages that opt in with the gt-hero utility classes. Canonical
 * page styles keep ownership of colour and imagery; this layer normalises
 * vertical rhythm, viewport fit and media behaviour.
 */

body.gt-hero-system-v1 .gt-breadcrumb-band {
    position: relative;
    inset: auto;
    z-index: 1;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 88px 0 9px;
    pointer-events: auto;
}

body.gt-hero-system-v1 .gt-breadcrumb-band .breadcrumbs,
body.gt-hero-system-v1 .gt-breadcrumb-band ol {
    margin-top: 0;
    margin-bottom: 0;
}

body.gt-hero-system-v1 .gt-breadcrumb-band ol,
body.gt-hero-system-v1 .gt-hero__breadcrumbs-inline ol {
    line-height: 1.35;
}

body.gt-hero-system-v1 .gt-hero {
    min-height: 0;
    padding-top: 16px;
    padding-bottom: 28px;
}

body.gt-hero-system-v1 .gt-hero--integrated {
    padding-top: 88px;
}

body.gt-hero-system-v1 .gt-hero__grid {
    align-items: stretch;
    gap: 18px;
    min-height: 0;
}

body.gt-hero-system-v1 .gt-hero__copy,
body.gt-hero-system-v1 .gt-hero__media {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
}

body.gt-hero-system-v1 .gt-hero__copy {
    padding: 40px;
}

body.gt-hero-system-v1 .gt-hero__copy > .gt-hero__eyebrow,
body.gt-hero-system-v1 .gt-hero__copy > .section-label {
    margin-bottom: 9px;
}

body.gt-hero-system-v1 .gt-hero__copy > h1 {
    margin-top: 0;
    margin-bottom: 13px;
}

body.gt-hero-system-v1 .gt-hero__copy > .gt-hero__lead {
    margin-top: 0;
    margin-bottom: 18px;
}

body.gt-hero-system-v1 .gt-hero__actions {
    gap: 9px;
    margin-top: 0;
}

body.gt-hero-system-v1 .gt-hero__media {
    position: relative;
    isolation: isolate;
    height: clamp(500px, 60vh, 540px);
    height: clamp(500px, 60svh, 540px);
    margin: 0;
    overflow: hidden;
}

body.gt-hero-system-v1 .gt-hero__media > img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.gt-hero-system-v1 .gt-hero__overlay {
    right: 14px;
    bottom: 14px;
    left: 14px;
    z-index: 2;
    padding: 14px 16px;
    border-radius: 18px;
}

body.gt-hero-system-v1 .gt-hero__brand {
    display: grid;
    justify-items: start;
    gap: 2px;
    margin: 0 0 8px;
}

body.gt-hero-system-v1 .gt-hero__brand img {
    display: block;
    width: 62px;
    height: 48px;
    margin: 0;
    object-fit: contain;
}

body.gt-hero-system-v1 .gt-hero__brand p,
body.gt-hero-system-v1 .gt-hero__brand span {
    margin: 0;
    color: var(--green);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
}

body.gt-hero-system-v1 .gt-hero__breadcrumbs-inline {
    margin: 0 0 10px;
}

/* Prices uses a stacked brand lockup: keep the mark centred over its label. */
body.gt-hero-system-v1 .gt-hero--prices .prices-hero__eyebrow {
    width: 100%;
    max-width: none;
    justify-items: center;
    text-align: center;
}

body.gt-hero-system-v1 .gt-hero--prices .prices-hero__mark {
    margin-inline: auto;
}

/* Prices: preserve its integrated dark hero while reducing visual mass. */
body.gt-hero-system-v1 .gt-hero--prices .gt-hero__copy {
    padding: 30px 36px;
}

body.gt-hero-system-v1 .gt-hero--prices .gt-hero__facts,
body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 18px;
}

body.gt-hero-system-v1 .gt-hero--prices .gt-hero__facts span,
body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts span {
    min-width: 0;
    padding: 10px;
}

/* Promotions: compact all existing information without hiding it. */
body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__copy {
    padding: 38px 42px;
}

body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding-top: 16px;
}

body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__overlay strong {
    font-size: clamp(22px, 2.15vw, 28px);
    line-height: 1.08;
}

body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__overlay p {
    margin-top: 6px;
    font-size: 12px;
}

/* Reviews and blog use portrait source photos; a fixed frame prevents them
 * from stretching the complete grid while centre crop keeps every face. */
body.gt-hero-system-v1 .gt-hero--reviews .gt-hero__media > img,
body.gt-hero-system-v1 .gt-hero--blog .gt-hero__media > img {
    object-position: center 55%;
}

body.gt-hero-system-v1 .gt-hero--reviews .gt-hero__overlay strong {
    font-size: 17px;
}

body.gt-hero-system-v1 .gt-hero--reviews .gt-hero__overlay small {
    font-size: 11px;
}

body.gt-hero-system-v1 .gt-hero--blog .ba-category-row {
    margin-bottom: 10px;
}

body.gt-hero-system-v1 .gt-hero--blog .gt-hero__actions {
    margin-top: 0;
}

body.gt-hero-system-v1 .gt-hero--blog .gt-hero__overlay strong {
    font-size: 15px;
}

/* Branch count remains dynamic; only its presentation becomes compact. */
body.gt-hero-system-v1 .gt-hero--branches .gt-hero__copy {
    padding: 40px;
}

body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts span {
    border-radius: 14px;
    font-size: 10px;
    line-height: 1.3;
}

body.gt-hero-system-v1 .gt-hero--branches .gt-hero__overlay {
    padding: 14px 16px;
}

body.gt-hero-system-v1 .gt-hero--branches .gt-hero__overlay strong {
    font-size: 16px;
}

@media (max-width: 820px) {
    body.gt-hero-system-v1 .gt-breadcrumb-band {
        padding-top: 78px;
        padding-bottom: 7px;
    }

    body.gt-hero-system-v1 .gt-hero {
        padding-top: 10px;
        padding-bottom: 20px;
    }

    body.gt-hero-system-v1 .gt-hero--integrated {
        padding-top: 76px;
        padding-bottom: 16px;
    }

    body.gt-hero-system-v1 .gt-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    body.gt-hero-system-v1 .gt-hero__copy,
    body.gt-hero-system-v1 .gt-hero--prices .gt-hero__copy,
    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__copy,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__copy {
        min-height: 0;
        padding: 22px 20px;
    }

    body.gt-hero-system-v1 .gt-hero__copy > .gt-hero__eyebrow,
    body.gt-hero-system-v1 .gt-hero__copy > .section-label {
        margin-bottom: 7px;
    }

    body.gt-hero-system-v1 .gt-hero__copy > h1 {
        margin-bottom: 9px;
    }

    body.gt-hero-system-v1 .gt-hero__copy > .gt-hero__lead {
        margin-bottom: 14px;
    }

    body.gt-hero-system-v1 .gt-hero__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 7px;
    }

    body.gt-hero-system-v1 .gt-hero__actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        height: auto;
        padding: 8px 9px;
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
    }

    body.gt-hero-system-v1 .gt-hero__media {
        height: 260px;
        min-height: 0;
    }

    body.gt-hero-system-v1 .gt-hero__overlay {
        right: 10px;
        bottom: 10px;
        left: 10px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    body.gt-hero-system-v1 .gt-hero__brand {
        margin-bottom: 6px;
    }

    body.gt-hero-system-v1 .gt-hero__brand img {
        width: 50px;
        height: 39px;
    }

    body.gt-hero-system-v1 .gt-hero__brand p,
    body.gt-hero-system-v1 .gt-hero__brand span {
        font-size: 8.5px;
    }

    body.gt-hero-system-v1 .gt-hero__breadcrumbs-inline {
        margin-bottom: 8px;
    }

    body.gt-hero-system-v1 .gt-hero--prices .gt-hero__facts,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts,
    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    body.gt-hero-system-v1 .gt-hero--prices .gt-hero__facts,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts {
        margin-bottom: 14px;
    }

    body.gt-hero-system-v1 .gt-hero--prices .gt-hero__facts span,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts span {
        padding: 8px 6px;
        text-align: center;
    }

    body.gt-hero-system-v1 .gt-hero--prices .gt-hero__facts b,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts strong {
        display: block;
        font-size: 10.5px;
        line-height: 1.2;
        white-space: nowrap;
    }

    body.gt-hero-system-v1 .gt-hero--prices .gt-hero__facts small,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__facts span {
        font-size: 8px;
        line-height: 1.25;
    }

    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__facts {
        gap: 6px;
        margin-top: 14px;
        padding-top: 13px;
    }

    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__facts span {
        min-width: 0;
        gap: 2px;
    }

    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__facts strong {
        font-size: 9.5px;
        line-height: 1.2;
    }

    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__facts small {
        font-size: 8px;
        line-height: 1.25;
    }

    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__overlay strong {
        font-size: 21px;
    }

    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__overlay p {
        margin-top: 4px;
        font-size: 10px;
        line-height: 1.35;
    }

    body.gt-hero-system-v1 .gt-hero--reviews .gt-hero__overlay {
        gap: 8px;
    }

    body.gt-hero-system-v1 .gt-hero--reviews .gt-hero__overlay strong {
        font-size: 14px;
    }

    body.gt-hero-system-v1 .gt-hero--reviews .gt-hero__overlay small {
        font-size: 9px;
    }

    body.gt-hero-system-v1 .gt-hero--blog .gt-hero__overlay strong,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__overlay strong {
        font-size: 13px;
        line-height: 1.25;
    }
}

@media (max-width: 390px) {
    body.gt-hero-system-v1 .gt-hero__copy,
    body.gt-hero-system-v1 .gt-hero--prices .gt-hero__copy,
    body.gt-hero-system-v1 .gt-hero--promotions .gt-hero__copy,
    body.gt-hero-system-v1 .gt-hero--branches .gt-hero__copy {
        padding-right: 18px;
        padding-left: 18px;
    }

    body.gt-hero-system-v1 .gt-hero__media {
        height: 250px;
    }
}