/* Local extension: keeps the v1 hero layout (Katy, 2026-10-06: "adhere to the
   current version as much as possible"). No shared pattern provides a centered
   tinted panel with an inline ZIP + CTA row, so the arrangement, the panel
   surface and the narrow-container stacking are local. Typography comes from
   the shared cta-card title/note classes and clvr-button. */

.clo-offers-cta-hero-block {
    container-type: inline-size;
}

.clo-offers-cta-hero-block .clo-offers-cta-hero__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--clvr-space-6);
    padding: var(--clvr-space-10) var(--clvr-space-8);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-brand-band);
    text-align: center;
}

/* Wordmark: fixed display height, width follows the 3:1 image. */
.clo-offers-cta-hero-block .clo-offers-cta-hero__logo {
    display: block;
    width: auto;
    height: 2rem;
}

/* The shared title is a flex row; centre its single inline child. */
.clo-offers-cta-hero-block .clo-offers-cta-hero__heading {
    justify-content: center;
    text-wrap: balance;
}

/* On LWC the title colour equals the brand blue, which would swallow the stat.
   The sentence takes body text so the stat reads as the accent, as in v1. */
.clo-offers-cta-hero-block .clo-offers-cta-hero__headline {
    color: var(--clvr-color-text);
}

.clo-offers-cta-hero-block .clo-offers-cta-hero__stat {
    color: var(--clvr-color-primary);
}

/* Keep the tooltip trigger with the stat when the headline wraps. */
.clo-offers-cta-hero-block .clo-offers-cta-hero__nowrap {
    white-space: nowrap;
}

/* ZIP field and CTA share one row, as in v1. */
.clo-offers-cta-hero-block .clo-offers-cta-hero__form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--clvr-space-2);
}

.clo-offers-cta-hero-block .clo-offers-cta-hero__field {
    width: 12.5rem;
    border-radius: var(--clvr-radius-sm);
}

.clo-offers-cta-hero-block .clo-offers-cta-hero__cta {
    min-height: 2.75rem;
    padding: var(--clvr-space-2) var(--clvr-space-6);
    border-radius: var(--clvr-radius-sm);
    white-space: nowrap;
}

/* v1 sets the trust line in body text colour, not the muted note colour. */
.clo-offers-cta-hero-block .clo-offers-cta-hero__trust {
    color: var(--clvr-color-text);
}

/* Narrow container: stack the form, as v1 does below 560px. */
@container (max-width: 35rem) {
    .clo-offers-cta-hero-block .clo-offers-cta-hero__panel {
        padding: var(--clvr-space-8) var(--clvr-space-6);
    }
    .clo-offers-cta-hero-block .clo-offers-cta-hero__form {
        flex-direction: column;
        align-self: stretch;
        align-items: stretch;
    }
    .clo-offers-cta-hero-block .clo-offers-cta-hero__field {
        width: 100%;
    }
}