/*
 * Activity-Life — Location Benefits Rotator v2 (overlay, CSS-first)
 * Target: traveler-childtheme/assets/css/alt-location-benefits-rotator.css
 *
 * Final layout is set by CSS on first paint (no JS needed, no layout jump):
 *   >=768px : 2 cards visible (01+02), 03+04 stacked in the same grid cells, hidden
 *   <=767px : 1 card visible (01), 02-04 stacked in the same cell, hidden
 * Stacking in one grid cell also fixes the block height to the tallest card.
 * JS only switches pages: new pair slides in from the left ON TOP (wave),
 * old pair sinks underneath (scale .94 + darken).
 */

body.single-location .alt-location-benefits__grid {
    --alt-bnf-gap: 18px;
    --alt-bnf-dur: 700ms;
    --alt-bnf-wave: 110ms;
    --alt-bnf-interval: 5000ms;
    --alt-bnf-ease: cubic-bezier(.22, .61, .36, 1);
    position: relative;
    isolation: isolate;
    gap: var(--alt-bnf-gap);
    padding-bottom: 30px;              /* reserved for dots from first paint */
}

body.single-location .alt-location-benefits__grid > .alt-location-benefit {
    grid-row: 1;
    visibility: hidden;
    opacity: 0;
    min-width: 0;
}

/* ---- Desktop + tablet: 2 slots ---- */
@media (min-width: 768px) {
    body.single-location .alt-location-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    body.single-location .alt-location-benefits__grid > .alt-location-benefit:nth-child(odd)  { grid-column: 1; }
    body.single-location .alt-location-benefits__grid > .alt-location-benefit:nth-child(even) { grid-column: 2; }
    /* first paint, before JS */
    body.single-location .alt-location-benefits__grid:not(.is-bnf-ready) > .alt-location-benefit:nth-child(-n+2) {
        visibility: visible; opacity: 1;
    }
    /* wave: right card starts a bit later */
    body.single-location .alt-location-benefits__grid > .alt-location-benefit:nth-child(even) {
        --alt-bnf-delay: var(--alt-bnf-wave);
    }
}

/* ---- Mobile: 1 slot ---- */
@media (max-width: 767px) {
    body.single-location .alt-location-benefits__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    body.single-location .alt-location-benefits__grid > .alt-location-benefit { grid-column: 1; }
    body.single-location .alt-location-benefits__grid:not(.is-bnf-ready) > .alt-location-benefit:first-child {
        visibility: visible; opacity: 1;
    }
}

/* ---- States set by JS ---- */
body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-current,
body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-leaving {
    visibility: visible;
    opacity: 1;
}

body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-current { z-index: 2; }
body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-leaving { z-index: 1; }

body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-entering {
    animation: alt-bnf-in var(--alt-bnf-dur) var(--alt-bnf-ease) var(--alt-bnf-delay, 0ms) both;
    will-change: transform, opacity;
}

body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-leaving {
    animation: alt-bnf-sink var(--alt-bnf-dur) var(--alt-bnf-ease) var(--alt-bnf-delay, 0ms) both;
    transform-origin: 50% 60%;
}

@keyframes alt-bnf-in {
    0%   { transform: translate3d(calc(-100% - var(--alt-bnf-gap)), 0, 0); opacity: 0; }
    20%  { transform: translate3d(calc((-100% - var(--alt-bnf-gap)) * .7), 0, 0); opacity: 1; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* content of the entering card appears only after its background is opaque:
   no mixing with the text of the card underneath */
body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-entering > * {
    animation: alt-bnf-content var(--alt-bnf-dur) linear var(--alt-bnf-delay, 0ms) both;
}

@keyframes alt-bnf-content {
    0%, 20% { opacity: 0; }
    38%     { opacity: 1; }
    100%    { opacity: 1; }
}

@keyframes alt-bnf-sink {
    0%   { transform: scale(1);   filter: brightness(1);   opacity: 1; }
    40%  { opacity: 1; }
    100% { transform: scale(.94); filter: brightness(.82); opacity: 0; }
}

/* ---- Dots (absolute: never shifts layout) ---- */
body.single-location .alt-location-benefits__grid > .alt-bnf-dots {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}

body.single-location .alt-bnf-dot {
    appearance: none;
    position: relative;
    width: 8px; height: 8px;
    padding: 0; border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--alt-location-border, rgba(18, 38, 63, .11));
    box-shadow: inset 0 0 0 1px rgba(18, 38, 63, .08);
    cursor: pointer;
    transition: width .3s ease;
}
body.single-location .alt-bnf-dot::after { content: ""; position: absolute; inset: -8px; }
body.single-location .alt-bnf-dot[aria-current="true"] { width: 34px; }
body.single-location .alt-bnf-dot > i {
    position: absolute; inset: 0;
    background: var(--alt-location-accent, #ef7a00);
    transform: scaleX(0);
    transform-origin: left;
}
body.single-location .alt-bnf-dot[aria-current="true"] > i {
    animation: alt-bnf-timer var(--alt-bnf-interval) linear forwards;
}
body.single-location .alt-location-benefits__grid.is-bnf-paused .alt-bnf-dot > i { animation-play-state: paused; }
body.single-location .alt-bnf-dot:focus-visible { outline: 2px solid var(--alt-location-accent-dark, #d86e00); outline-offset: 3px; }

@keyframes alt-bnf-timer { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
    body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-entering,
    body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-leaving,
    body.single-location .alt-location-benefits__grid > .alt-location-benefit.is-bnf-entering > * { animation: none; }
    body.single-location .alt-bnf-dot[aria-current="true"] > i { animation: none; transform: scaleX(1); }
}