/*
 * assets/css/components/hero.css
 * Component layer: the genuinely shared `.ad-page-hero` family only.
 * Selectors, declarations, and @media values are byte-identical to the
 * originals (moved, not rewritten).
 *
 * Page-specific hero families (`.ad-about-hero`, `.ad-service-hero`,
 * `.ad-location-hero`, `.ad-dentist-hero`, `.ad-pricing-hero`,
 * `.ad-low-risk-hero`, `.ad-careers-hero`, `.ad-static-hero`,
 * `.ad-blog-hero`/`.ad-blog-post__hero`, `.ad-locations-page__hero`) are
 * DIFFERENT components (own class names, own markup) and are intentionally
 * NOT moved — they stay in their own bundles.
 *
 * Page-scoped overrides of `.ad-page-hero` itself (e.g.
 * `.ad-page-page--home .ad-page-hero`, `.ad-page-page--airway-dentistry
 * .ad-page-hero`) are higher-specificity (two classes) and are intentionally
 * left in their page bundles — they still load later and win regardless, so
 * the cascade is unchanged.
 *
 * Rules whose selector list mixes `.ad-page-hero__*` with the unrelated
 * `.ad-page-split`/`.ad-page-split__media` component (e.g.
 * `.ad-page-hero__grid, .ad-page-split {...}`) were left in place in
 * airway-pages.css — splitting a joint selector list would risk
 * duplicating or losing shared declarations.
 *
 * Loads immediately after tokens.css (deps: airways-dentist-tokens), i.e.
 * BEFORE every page bundle.
 */

/* from: airway-pages.css */
.ad-page-hero {
    padding-top: 96px;
    background: var(--ad-color-cream);
}

.ad-page-hero__copy {
    max-width: 680px;
}

.ad-page-hero__media {
    aspect-ratio: 616 / 640;
    border-radius: var(--ad-radius-xl);
    overflow: hidden;
    box-shadow: var(--ad-shadow-card);
}

@media (max-width: 640px) {
    .ad-page-hero {
        padding-top: 60px;
    }
}