/**
 * ARCADE DIRECT — RESPONSIVE HERO SAFETY
 * Design philosophy: preserve the dark editorial image stage while ensuring small-screen
 * visitors can see the complete proposition and first action without an unsafe crop or overflow.
 * This is a cross-template accessibility layer, limited to current bespoke hero variants.
 */

@media (max-width: 48rem) {
    .ad-home-hero,
    .ad-hire-hero,
    .ad-sale-hero,
    .ad-archive-hero--image {
        min-height: auto !important;
    }

    .ad-home-hero__copy,
    .ad-hire-hero__copy,
    .ad-sale-hero__copy,
    .ad-archive-hero--image .ad-archive-hero__copy {
        max-width: 31rem;
        position: relative;
        z-index: 1;
    }

    .ad-home-hero h1,
    .ad-hire-hero h1,
    .ad-sale-hero h1,
    .ad-archive-hero--image h1 {
        font-size: clamp(2.7rem, 12.8vw, 4.45rem) !important;
        line-height: .88 !important;
        max-width: 10ch !important;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .ad-home-hero__copy > p:not(.ad-label),
    .ad-hire-hero__intro,
    .ad-sale-hero__copy > p,
    .ad-archive-hero--image .ad-archive-hero__intro {
        font-size: 1rem !important;
        line-height: 1.48 !important;
        max-width: 29rem;
    }

    .ad-home-hero__copy .ad-action-row,
    .ad-hire-hero__actions,
    .ad-sale-hero__actions {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .ad-home-hero::after,
    .ad-archive-hero--image::after {
        background: linear-gradient(90deg, rgba(8, 18, 36, .98) 0%, rgba(8, 18, 36, .91) 64%, rgba(8, 18, 36, .56) 100%);
    }

    .ad-hire-hero__steps,
    .ad-sale-hero__note {
        margin-top: 2rem;
    }
}

@media (max-width: 30rem) {
    .ad-home-hero h1,
    .ad-hire-hero h1,
    .ad-sale-hero h1,
    .ad-archive-hero--image h1 {
        font-size: clamp(2.45rem, 12.8vw, 3.5rem) !important;
    }
}