/* BeTravel Engine — Story Deck */

.betravel-story-deck {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}


/* =========================================================
   ÁREA DO DECK
   Mantém a proporção 420 × 540 e adapta-se à altura do ecrã
   ========================================================= */

.betravel-story-deck .betravel-story-deck__stack {
    position: relative !important;
    display: block !important;

    /* Máximo: 420 × 540
       Em ecrãs baixos, encolhe proporcionalmente */
    height: auto !important;
    width: min(420px, 100%) !important;
    aspect-ratio: 7 / 9;

    max-width: 100%;

    margin-inline: auto;

    overflow: visible !important;

    perspective: 1200px;
    transform-style: preserve-3d;
    isolation: isolate;
}


/* =========================================================
   CARTÕES
   ========================================================= */

.betravel-story-deck
.betravel-story-deck__stack > .e-loop-item {
    --deck-x: 0px;
    --deck-y: 0px;
    --deck-r: 0deg;
    --deck-s: 1;
    --deck-o: 1;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;

    transform:
        translate3d(var(--deck-x), var(--deck-y), 0)
        rotate(var(--deck-r))
        scale(var(--deck-s));

    transform-origin: 50% 92%;

    opacity: var(--deck-o);

    transition:
        transform 420ms cubic-bezier(.22,.8,.24,1),
        opacity 320ms ease;

    will-change: transform, opacity;
}


.betravel-story-deck .betravel-story-card {
    width: 100%;
    height: 100%;
    min-height: 100%;
}


/* =========================================================
   PILHA
   ========================================================= */

/* Frente */
.betravel-story-deck .e-loop-item[data-deck-depth="0"] {
    --deck-x: 0px;
    --deck-y: 0px;
    --deck-r: 0deg;
    --deck-s: 1;
    --deck-o: 1;

    z-index: 8;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}


/* Carta 2 */
.betravel-story-deck .e-loop-item[data-deck-depth="1"] {
    --deck-x: clamp(2px, .4vh, 3px);
    --deck-y: clamp(5px, 1vh, 8px);
    --deck-r: 0deg;
    --deck-s: .995;
    --deck-o: 1;

    z-index: 7;
    pointer-events: none;
}


/* Carta 3 */
.betravel-story-deck .e-loop-item[data-deck-depth="2"] {
    --deck-x: clamp(3px, .7vh, 5px);
    --deck-y: clamp(9px, 1.8vh, 14px);
    --deck-r: 0deg;
    --deck-s: .990;
    --deck-o: .96;

    z-index: 6;
    pointer-events: none;
}


/* Carta 4 */
.betravel-story-deck .e-loop-item[data-deck-depth="3"] {
    --deck-x: clamp(4px, 1vh, 7px);
    --deck-y: clamp(13px, 2.6vh, 20px);
    --deck-r: 0deg;
    --deck-s: .985;
    --deck-o: .90;

    z-index: 5;
    pointer-events: none;
}


.betravel-story-deck
.e-loop-item[data-deck-depth="hidden"] {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
}


/* =========================================================
   DRAG / ANIMAÇÃO
   ========================================================= */

.betravel-story-deck
.e-loop-item.is-deck-dragging {
    cursor: grabbing;
    transition: none !important;
}


.betravel-story-deck
.e-loop-item.is-deck-leaving {
    pointer-events: none !important;

    transition:
        transform 360ms cubic-bezier(.4,0,.2,1),
        opacity 300ms ease !important;
}


/* =========================================================
   STORY DECK — CONTROLOS
   ========================================================= */

.betravel-story-deck__controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
}


/* Story Deck — botões de navegação */
.betravel-story-deck__button {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 42px;
    min-width: 58px;
    min-height: 42px;

    padding: 0;

    background: transparent;

    border:
        2px solid
        var(--e-global-color-primary);

    border-radius:
        var(--radius-main);

    color:
        var(--e-global-color-primary);

    font-family: inherit;
    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}


.betravel-story-deck__button:hover {
    background:
        var(--e-global-color-primary);

    color: #ffffff;

    transform: translateY(2px);
}


/* Contador */
.betravel-story-deck__count {
    min-width: auto;
    margin-left: 10px;

    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}


/* =========================================================
   RESPONSIVO — STORY DECK
   Escala por largura e mantém sempre a proporção 7 / 9
   ========================================================= */

@media (max-width: 1366px) {
    .betravel-story-deck .betravel-story-deck__stack {
        width: min(390px, 34vw) !important;
        height: auto !important;
        aspect-ratio: 7 / 9;
    }
}

@media (max-width: 1024px) {
    .betravel-story-deck {
        width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .betravel-story-deck .betravel-story-deck__stack {
        width: min(370px, 39vw) !important;
        height: auto !important;
        aspect-ratio: 7 / 9;
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .betravel-story-deck {
        width: 100%;
        overflow: visible;
        padding-inline: 0;
    }

    .betravel-story-deck .betravel-story-deck__stack {
        width: min(360px, 78vw) !important;
        height: auto !important;
        aspect-ratio: 7 / 9;
        margin-inline: auto;
    }

    .betravel-story-deck .betravel-story-deck__stack > .e-loop-item {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .betravel-story-deck .betravel-story-deck__stack {
        width: min(360px, calc(100vw - 64px)) !important;
        height: auto !important;
        aspect-ratio: 7 / 9;
    }

    .betravel-story-deck .e-loop-item[data-deck-depth="1"] {
        --deck-x: 2px;
        --deck-y: 5px;
    }

    .betravel-story-deck .e-loop-item[data-deck-depth="2"] {
        --deck-x: 3px;
        --deck-y: 9px;
    }

    .betravel-story-deck .e-loop-item[data-deck-depth="3"] {
        --deck-x: 4px;
        --deck-y: 13px;
    }
}

@media (max-width: 374px) {
    .betravel-story-deck .betravel-story-deck__stack {
        width: calc(100vw - 48px) !important;
        max-width: 330px;
    }
}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .betravel-story-deck
    .betravel-story-deck__stack > .e-loop-item,

    .betravel-story-deck__button {
        transition: none !important;
    }
}


/* =========================================================
   STORY CARD
   ========================================================= */

.betravel-story-card {
    position: relative;
    overflow: hidden;

    border-radius:
        var(--radius-main);

    isolation: isolate;
}


/* =========================================================
   STORY DECK — PROFUNDIDADE
   ========================================================= */

/* Cartão principal */
/* Carta da frente — sombra de contacto + profundidade */
.betravel-story-deck .e-loop-item[data-deck-depth="0"] {
    filter:
        drop-shadow(0 3px 2px rgba(18, 22, 30, 0.30))
        drop-shadow(0 8px 7px rgba(18, 22, 30, 0.20))
        drop-shadow(0 20px 22px rgba(18, 22, 30, 0.14))
        drop-shadow(0 34px 42px rgba(18, 22, 30, 0.08));
}

/* =========================================================
   SOMBRA ENTRE AS CARTAS
   Cria separação física quando uma carta é puxada
   ========================================================= */

.betravel-story-deck
.e-loop-item[data-deck-depth="1"],
.betravel-story-deck
.e-loop-item[data-deck-depth="2"],
.betravel-story-deck
.e-loop-item[data-deck-depth="3"] {
    filter:
        drop-shadow(0 4px 5px rgba(20, 24, 32, 0.20))
        drop-shadow(0 10px 14px rgba(20, 24, 32, 0.12));
}

/* =========================================================
   STORY CARD — OVERLAY
   ========================================================= */

.betravel-story-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(12, 16, 24, 0.00) 0%,
        rgba(12, 16, 24, 0.00) 30%,
        rgba(12, 16, 24, 0.08) 42%,
        rgba(12, 16, 24, 0.30) 58%,
        rgba(12, 16, 24, 0.68) 78%,
        rgba(12, 16, 24, 0.88) 100%
    );

    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Impede o drag nativo das imagens/links do Story Deck */
.betravel-story-deck img,
.betravel-story-deck a {
    -webkit-user-drag: none;
    user-drag: none;
}

.betravel-story-deck img {
    user-select: none;
    -webkit-user-select: none;
}