/* Approved 2026-10-26; domestic-size alignment approved 2026-10-27.
 * Loaded only on the local English homepage.
 * Keep all four slides, source artwork, copy, links and staged media intact.
 * Heights below describe the visible banner; the sticky header overlays the root.
 */
@media (min-width: 1025px) {
    body.page-id-11522 .gato-local-hero--production {
        --gato-compact-header: 70px;
        /* Match the domestic Home's 1440:380 ratio across wide screens. */
        --gato-compact-banner: max(360px, 26.3889vw);
        height: calc(var(--gato-compact-header) + var(--gato-compact-banner));
        min-height: 0;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-slides {
        min-height: 0;
        height: 100%;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-slide {
        min-height: 0;
        padding: var(--gato-compact-header) 0 0;
        background-position: center center;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-inner {
        min-height: 0;
        height: 100%;
        width: min(1480px, calc(100% - 80px));
        align-items: center;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-content {
        padding: 0;
        gap: 14px;
    }
    body.page-id-11522 .gato-local-hero--production h1 {
        font-size: clamp(36px, 2.8vw, 44px);
        line-height: 1.3;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-content > p {
        font-size: 16px;
        line-height: 1.55;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-button {
        min-height: 48px;
        font-size: 15px;
        padding: 14px 28px;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-dots {
        bottom: 18px;
    }

    /* The 1920x800 F7/E3 scenes have devices at the lower left. Give the
     * complete scene its own right-hand viewport, separate from the copy.
     * At this aspect ratio, cover crops only empty margins around the devices.
     * Reuse the staged image variable so loading/fallback behavior is unchanged.
     */
    body.page-id-11522 .gato-local-hero--production [data-element-id="9d8aab8"],
    body.page-id-11522 .gato-local-hero--production [data-element-id="c5310c0"] {
        background-image: none;
        background-color: #ececf2;
        isolation: isolate;
    }
    body.page-id-11522 .gato-local-hero--production [data-element-id="c5310c0"] {
        background-color: #e9e6e0;
    }
    body.page-id-11522 .gato-local-hero--production [data-element-id="9d8aab8"]::before,
    body.page-id-11522 .gato-local-hero--production [data-element-id="c5310c0"]::before {
        content: '';
        position: absolute;
        top: var(--gato-compact-header);
        right: 0;
        width: 55%;
        height: var(--gato-compact-banner);
        background-image: var(--gato-hero-image);
        background-position: 30% bottom;
        background-size: cover;
        background-repeat: no-repeat;
        mask-image: linear-gradient(90deg, transparent, #000 7%);
        pointer-events: none;
        z-index: -1;
    }
    body.page-id-11522 .gato-local-hero--production [data-element-id="9d8aab8"] .gato-local-hero-content,
    body.page-id-11522 .gato-local-hero--production [data-element-id="c5310c0"] .gato-local-hero-content {
        width: 48%;
        max-width: 650px;
    }
    body.page-id-11522 .gato-local-hero--production [data-element-id="9d8aab8"] h1,
    body.page-id-11522 .gato-local-hero--production [data-element-id="c5310c0"] h1 {
        font-size: clamp(30px, 2.3vw, 42px);
    }
    body.page-id-11522 .gato-local-hero--production [data-element-id="9d8aab8"] .gato-local-hero-actions,
    body.page-id-11522 .gato-local-hero--production [data-element-id="c5310c0"] .gato-local-hero-actions {
        gap: 12px;
    }
    body.page-id-11522 .gato-local-hero--production [data-element-id="9d8aab8"] .gato-local-hero-button,
    body.page-id-11522 .gato-local-hero--production [data-element-id="c5310c0"] .gato-local-hero-button {
        padding-inline: 22px;
    }

    body.page-id-11522 .gato-local-hero--production .gato-sam300-layered h1 {
        font-size: clamp(32px, 2.2vw, 42px);
    }
    body.page-id-11522 .gato-local-hero--production .gato-sam300-layered .gato-sam300-device {
        width: min(100%, calc((var(--gato-compact-banner) - 48px) * 1.276596));
    }
}

/* Tablet remains a content-driven, stacked layout. The longest slide sizes the
 * shared grid, so font loading and switching cannot clip text or move the next section.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    body.page-id-11522 .gato-local-hero--production {
        --gato-hero-media-height: clamp(220px, 28vw, 280px);
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-inner {
        padding: 96px 32px 24px;
    }
    body.page-id-11522 .gato-local-hero--production .gato-sam300-layered .gato-local-hero-inner {
        gap: 16px;
        padding-bottom: 48px;
    }
    body.page-id-11522 .gato-local-hero--production .gato-sam300-layered .gato-sam300-device {
        width: min(100%, 350px);
    }
}

@media (max-width: 767px) {
    body.page-id-11522 .gato-local-hero--production {
        --gato-hero-media-height: 180px;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-inner {
        padding: 84px 24px 20px;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-content {
        gap: 14px;
    }
    body.page-id-11522 .gato-local-hero--production h1,
    body.page-id-11522 .gato-local-hero--production .gato-sam300-layered h1 {
        font-size: 24px;
        line-height: 1.25;
    }
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-button {
        min-height: 48px;
    }
    body.page-id-11522 .gato-local-hero--production .gato-sam300-layered .gato-local-hero-inner {
        gap: 12px;
        padding-bottom: 48px;
    }
    body.page-id-11522 .gato-local-hero--production .gato-sam300-layered .gato-sam300-device {
        width: min(100%, 280px);
    }
}
@media (max-width: 359px) {
    body.page-id-11522 .gato-local-hero--production .gato-local-hero-inner {
        /* The existing header wraps to 88px at this width. */
        padding-top: 104px;
        padding-inline: 20px;
    }
}