/**
 * cg/valuation-hero block.
 *
 * Hero band of the valuation-calculator pages — rules moved verbatim from
 * src/css/pages/valuation-calculator.css so the block also styles correctly in the
 * editor canvas (that file only loads on the page template, never in the
 * editor). Colours come from var(--color-theme-*) — stone on these pages.
 */

.cg-valuation__hero {
    background-color: var(--color-theme-900);
    color: var(--color-theme-100);
}

.cg-valuation__hero-inner {
    display: flex;
    flex-direction: column;
    max-width: 1512px;
    margin-inline: auto;
}

.cg-valuation__hero-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 5rem);
    padding: 1.5rem clamp(1.5rem, 5vw, 5rem) 3rem;
}

.cg-valuation__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cg-valuation__breadcrumb a,
.cg-valuation__breadcrumb span[aria-hidden] {
    color: var(--color-theme-400);
    text-decoration: none;
}
.cg-valuation__breadcrumb [aria-current="page"] {
    color: var(--color-theme-100);
}

.cg-valuation__title {
    margin: 0;
    max-width: 32rem;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.15;
    letter-spacing: -0.2px;
}

.cg-valuation__subtitle {
    margin: 0;
    max-width: 38rem;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.5;
}

.cg-valuation__hero-media {
    width: 100%;
    height: 253px;
    overflow: hidden;
}
.cg-valuation__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 1024px) {
    .cg-valuation__hero-inner { flex-direction: row; align-items: stretch; }
    .cg-valuation__hero-copy {
        flex: 1 1 0;
        justify-content: space-between;
        padding: 1.5rem 5rem 4rem;
    }
    .cg-valuation__hero-media { flex: 1 1 0; height: auto; min-height: 540px; }
}