/* DS Outdoor Media — shared internal-page hero spacing
   Keeps every page aligned to the same desktop, tablet and mobile rhythm. */

:root {
    --ds-hero-inline: 40px;
    --ds-hero-block: 82px;
    --ds-hero-min-height: 570px;
    --ds-hero-content-width: 1180px;
}

body:not(.page-index) :is(
    .service-hero,
    .ds-service-hero,
    .about-hero,
    .contact-page-banner,
    .locations-hero,
    .ds-standard-hero,
    .ds-blog-hero,
    .cs-hero,
    .solutions-hero,
    .ds-profile-hero,
    .detail-hero,
    .gantry-hero,
    .pk-hero,
    .up-hero
) {
    min-height: var(--ds-hero-min-height) !important;
    box-sizing: border-box;
}

/* Normalize the content area's top/bottom breathing room without changing
   any page's typography, colours, columns, buttons or animation. */
body:not(.page-index) :is(
    .service-hero-content,
    .ds-service-hero__container,
    .about-hero__container,
    .contact-page-banner > .container,
    .locations-hero > .locations-shell,
    .ds-standard-hero-content,
    .ds-blog-hero > .ds-blog-wrap,
    .cs-hero > .cs-wrap,
    .solutions-hero > .container,
    .ds-profile-hero > .ds-container,
    .detail-hero > .container,
    .gantry-hero__content,
    .pk-hero__content,
    .up-hero-content
) {
    box-sizing: border-box;
    padding-top: var(--ds-hero-block) !important;
    padding-bottom: var(--ds-hero-block) !important;
}

@media (max-width: 991px) {
    :root {
        --ds-hero-inline: 30px;
        --ds-hero-block: 68px;
        --ds-hero-min-height: 470px;
    }
}

@media (max-width: 767px) {
    :root {
        --ds-hero-inline: 28px;
        --ds-hero-block: 42px;
        --ds-hero-min-height: 285px;
    }

    body:not(.page-index) :is(
        .service-shell,
        .ds-service-hero__container,
        .about-hero__container,
        .contact-page-banner > .container,
        .locations-shell,
        .ds-standard-hero-content,
        .ds-blog-wrap,
        .cs-wrap,
        .solutions-hero > .container,
        .ds-container,
        .detail-hero > .container,
        .gantry-container,
        .pk-container,
        .up-container
    ) {
        width: calc(100% - var(--ds-hero-inline)) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (max-width: 420px) {
    :root {
        --ds-hero-inline: 24px;
        --ds-hero-block: 36px;
    }
}