/* Home carousel approved in Slack 14 Oct: retain the Figma five-slot geometry,
 * fixed iPhone frame, softened neighbours, no visible Play overlays. */
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] {
    display: block;
    aspect-ratio: 1426.65 / 536.34;
    padding: 0;
    box-sizing: border-box;
    left: 50%;
    container-type: inline-size;
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] .ab-hero-phone {
    position: absolute;
    width: calc(100% * 259.39 / 1426.65);
    margin: 0;
    border-radius: 2.453cqw;
    overflow: hidden;
    /* Explicit clipping also contains filtered video compositing in Safari. */
    clip-path: inset(0 round 2.453cqw);
    isolation: isolate;
    background: #121212;
    /* JS samples one curved path for dragging and settling. CSS transitions
     * here would lag behind the pointer or take a straight shortcut between slots. */
    transition: none;
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-dragging="true"] .ab-hero-phone { transition: none; }
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-dragging="true"] .ab-hero-select { cursor: grabbing; }
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="-2"] {
    left: 0; top: calc(100% * 83.45 / 536.34); height: calc(100% * 452.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="-1"] {
    left: calc(100% * 291.86 / 1426.65); top: calc(100% * 49.1 / 536.34); height: calc(100% * 453.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="0"] {
    left: calc(100% * 586.81 / 1426.65); top: calc(100% * 1 / 536.34); height: calc(100% * 501.98 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="1"] {
    left: calc(100% * 877.9 / 1426.65); top: calc(100% * 49.1 / 536.34); height: calc(100% * 453.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="2"] {
    left: calc(100% * 1167.26 / 1426.65); top: calc(100% * 83.45 / 536.34); height: calc(100% * 452.89 / 536.34);
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] .ab-hero-phone::after { content: none; }
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives]::after {
    content: '';
    position: absolute;
    left: calc(100% * 579.71 / 1426.65);
    top: calc(-100% * 3.5 / 536.34);
    width: calc(100% * 266.39 / 1426.65);
    height: calc(100% * 508.98 / 536.34);
    background: url('../img/editorial/hero-20261012/center-frame.svg') center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 4;
    opacity: 1;
    transition: opacity 160ms ease;
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-dragging="true"]::after,
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-moving="true"]::after { opacity: 0; }
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] .ab-hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    filter: blur(1.2px);
    transition: filter 320ms ease;
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] .ab-hero-phone::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #ffffffb8, #ffffff18 65%, #ffffff00);
    transition: opacity 320ms ease;
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="1"]::before,
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="2"]::before {
    background: linear-gradient(270deg, #ffffffb8, #ffffff18 65%, #ffffff00);
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="0"]::before,
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives]:not([data-carousel-ready]) .ab-hero-phone--center::before { opacity: 0; }
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] [data-slot="0"] .ab-hero-video,
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives]:not([data-carousel-ready]) .ab-hero-phone--center .ab-hero-video { filter: none; }
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-arc-ready] .ab-hero-phone .ab-hero-video {
    filter: var(--ab-hero-filter, none);
    transition: none;
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-arc-ready] .ab-hero-phone::before {
    opacity: var(--ab-hero-veil, 1);
    transition: none;
    background: linear-gradient(90deg, #ffffffb8, #ffffff18 65%, #ffffff00);
}
.ab-editorial.page-template-mainpage .ab-hero-gallery[data-arc-ready] .ab-hero-phone[data-side="right"]::before {
    background: linear-gradient(270deg, #ffffffb8, #ffffff18 65%, #ffffff00);
}
@media (prefers-reduced-motion: reduce) {
    .ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives]::after,
    .ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] .ab-hero-phone,
    .ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] .ab-hero-video,
    .ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] .ab-hero-phone::before { transition: none; }
}
.ab-editorial.page-template-mainpage .ab-hero-motion-toggle { display: none; }
.ab-editorial.page-template-mainpage .ab-hero-select {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
}
.ab-editorial.page-template-mainpage .ab-hero-select:focus-visible { outline: 3px solid #ff8500; outline-offset: -8px; }
.ab-media-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 16px auto 0;
    color: #172033;
    font: 500 14px/1.5 Montserrat, sans-serif;
}
.ab-media-navigation button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #bfc7d2;
    border-radius: 50%;
    background: white;
    color: #172033;
    cursor: pointer;
    font: 24px/1 Arial, sans-serif;
}
.ab-media-navigation button:disabled { opacity: 0.35; cursor: default; }
.ab-media-navigation button:focus-visible,
.ab-editorial .pm-service__items[data-approved-creatives]:focus-visible { outline: 2px solid #ff8500; outline-offset: 2px; }
.ab-hero-navigation { display: flex; gap: 12px; margin-top: 4px; position: relative; }
.ab-hero-dots { display: flex; align-items: center; justify-content: center; gap: 0; }
.ab-hero-navigation .ab-hero-dot {
    width: 28px;
    height: 44px;
    border: 0;
    background: none;
}
.ab-hero-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #bfc7d2; }
.ab-hero-dot[aria-current="true"]::before { background: #ff8200; }
.ab-hero-navigation .ab-hero-arrow { display: none; }
.ab-hero-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Replace placeholder proportions only when real customer creatives exist. */
.ab-editorial.page-template-performance .pm-container--service-2:has([data-approved-creatives]) { overflow: visible; }
@media (min-width: 760px) {
    /* A tall image strip must not distribute empty space above the list. */
    .ab-editorial.page-template-performance .pm-service:has([data-approved-creatives]) {
        grid-template-rows: auto min-content 1fr;
        align-content: start;
    }
    .ab-editorial.page-template-performance .pm-service:has([data-approved-creatives]) .pm-service__features { align-self: start; }
}
.ab-editorial.page-template-performance .pm-service__items[data-approved-creatives]:not(.slick-initialized) {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: clamp(250px, 24vw, 354px);
    align-items: start;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.ab-editorial.page-template-performance .pm-service__items[data-approved-creatives] .pm-service__img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    padding: 0;
    margin: 0;
    border-radius: 20px;
    background: #f6f8fb;
    scroll-snap-align: start;
}
@media (max-width: 759px) {
    .ab-editorial.page-template-mainpage .ab-hero-gallery[data-approved-creatives] {
        width: 1050.12px;
        left: 50%;
        transform: translateX(-50%);
    }
    .ab-hero-navigation .ab-hero-arrow { display: grid; }
    .ab-editorial.page-template-performance .pm-service__items[data-approved-creatives]:not(.slick-initialized) {
        grid-auto-columns: min(76vw, 290px);
        gap: 16px;
    }
}