/* =============================================================================
   GALERÍA PREMIUM · ESTILO BARAJA (clave `deck`)
   -----------------------------------------------------------------------------
   Estilos de la galería de pantalla completa con las fotos apiladas como una
   baraja de cartas. Marcado: inc/premium/deck.php · Comportamiento: deck.js.
   Documentación: docs/galerias-premium.md y README.md.

   Índice
     1. Variables y raíz (pantalla completa)
     2. Cartas y posiciones del mazo (3D)
     3. Foto, ajuste a la pantalla y pie de foto
     4. Controles superpuestos (herramientas, contador, flechas, pista)
     5. Accesibilidad y movimiento reducido

   Integración con la web
     · Colores: solo variables de la paleta (--bg, --bg-card, --fg, --fg-soft, --accent, --line,
       --serif, --sans). Cambiar la paleta en el panel cambia esta galería.
     · Cabeceras: el bloque va debajo de la cabecera activa; al alinearse ocupa la pantalla entera.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Variables y raíz (pantalla completa)
   --------------------------------------------------------------------------- */
.gallery-section--premium {
    /* Anula el padding y el ancho máximo de la galería estándar: aquí manda la pantalla. */
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

.deck {
    /* Ajustes de la animación: pausada y suave. */
    --deck-duration: 850ms;                         /* Duración del paso de una carta: pausada, para que se aprecie la baraja. */
    --deck-ease: cubic-bezier(.22, .8, .24, 1);     /* Arranque ágil, final muy suave. */
    --deck-radius: 22px;                            /* Esquinas de las cartas que quedan debajo. */

    position: relative;
    width: 100%;
    height: 100vh;                                  /* Respaldo para navegadores sin dvh. */
    height: 100dvh;                                 /* 100 % del alto visible (también con barras móviles). */
    overflow: hidden;
    isolation: isolate;
    background: var(--bg);
    color: var(--fg);
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;                            /* Mientras la baraja no llena la pantalla, el dedo desplaza la página. Acoplada: touch-action: none (ver más abajo). */
    /* Sin overscroll-behavior: en navegadores recientes impediría que la rueda siga desplazando la página al llegar
       a la primera o última foto. El JS ya controla cuándo se captura el gesto. */
}

/* ---------------------------------------------------------------------------
   2. Cartas y posiciones del mazo (3D)
   El JS asigna a cada carta data-pos = posición respecto a la carta activa:
       0 = encima · 1, 2, 3 = mazo visible debajo · 4 = oculta · -1, -2 = ya pasada (sale por la izquierda)
   --------------------------------------------------------------------------- */
.deck__stage {
    position: absolute;
    inset: 0;
    perspective: 1500px;
    perspective-origin: 50% 40%;
    container-type: size;                           /* Las cartas se miden con cqw/cqh: mismo marco en todas. */

    /* Reservas alrededor del marco, iguales arriba y abajo (herramientas / barra de navegación) para que el conjunto
       quede centrado en vertical, y a los lados (el mazo asoma por la derecha). */
    --pad: 5.6rem;
    --side: clamp(3rem, 10cqw, 6rem);
    --pile-x: calc(var(--side) * .86);              /* Lo que el mazo asoma por la derecha. */
    --pile-y: 22px;                                 /* Lo que asoma por abajo. */
    --frame-h: calc(100cqh - var(--pad) * 2);
    --frame-w: min(calc(100cqw - var(--side) * 2), calc(var(--frame-h) * 1.6));
}

/* Todas las cartas comparten el mismo marco, centrado. Se coloca con las propiedades individuales `translate` y
   `transform` (esta última queda libre para el mazo y la animación). */
.deck__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--frame-w);
    height: min(var(--frame-h), calc(var(--frame-w) * 1.75));
    /* Centro de la pantalla; el conjunto carta + mazo (que asoma a la derecha y abajo) queda centrado en ambos ejes. */
    translate: calc(-50% - var(--pile-x) * .58) calc(-50% - var(--pile-y) * .5);
    margin: 0;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--deck-radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38), 0 0 0 1px var(--line);
    transform-origin: 50% 60%;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition:
        transform var(--deck-duration) var(--deck-ease),
        opacity calc(var(--deck-duration) * .8) var(--deck-ease),
        filter var(--deck-duration) var(--deck-ease),
        visibility 0s linear var(--deck-duration);  /* Se oculta al terminar de moverse. */
}

.deck__card[hidden] { display: none !important; }

/* Carta activa: encima del mazo. */
.deck__card[data-pos="0"] {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: none;
    opacity: 1;
    z-index: 50;
    visibility: visible;
    transition-delay: 0s, 0s, 0s, 0s;
}

/* Mazo visible debajo: cada carta asoma por la derecha y por abajo, más al fondo y con un giro distinto,
   como cartas apiladas a mano. La perspectiva encogería las cartas del fondo (y descentraría el conjunto según el ancho de la
   pantalla), así que cada una se compensa con scale(): el tamaño aparente es el mismo y la profundidad se nota con el giro y
   un tono más oscuro (filter: brightness). Así el conjunto se centra igual en cualquier tamaño. */
.deck__card[data-pos="1"] {
    transform: translate3d(calc(var(--side) * .34), 8px, -30px) rotate(1.6deg) scale(1.02);
    filter: brightness(.9);
    opacity: 1;
    z-index: 40;
    visibility: visible;
    transition-delay: 0s, 0s, 0s, 0s;
}

.deck__card[data-pos="2"] {
    transform: translate3d(calc(var(--side) * .62), 15px, -60px) rotate(-1.4deg) scale(1.04);
    filter: brightness(.8);
    opacity: 1;
    z-index: 30;
    visibility: visible;
    transition-delay: 0s, 0s, 0s, 0s;
}

.deck__card[data-pos="3"] {
    transform: translate3d(calc(var(--side) * .86), 22px, -90px) rotate(2.2deg) scale(1.06);
    filter: brightness(.7);
    opacity: 1;
    z-index: 20;
    visibility: visible;
    transition-delay: 0s, 0s, 0s, 0s;
}

.deck__card[data-pos="4"] {
    transform: translate3d(calc(var(--side) * 1.05), 28px, -120px) rotate(-2deg);
    opacity: 0;
    z-index: 10;
    visibility: hidden;
    pointer-events: none;
}

/* Cartas ya pasadas: salen hacia la izquierda, se encogen y se desvanecen. Van por encima del mazo. */
.deck__card[data-pos="-1"],
.deck__card[data-pos="-2"] {
    transform: translate3d(-70%, -2%, 60px) scale(.55) rotate(-9deg) rotateY(18deg);
    opacity: 0;
    z-index: 60;
    visibility: hidden;
    pointer-events: none;
}

/* Pie de foto y corazones: solo los de la carta activa, y sin solaparse con los de la que se va.
   La carta que sale los oculta enseguida; la que llega los muestra cuando ya casi ha terminado de moverse. */
.deck__card:not([data-pos="0"]) .deck__caption,
.deck__card:not([data-pos="0"]) .deck__hearts {
    opacity: 0;
    transition: opacity .12s ease;
}

.deck__card[data-pos="0"] .deck__caption,
.deck__card[data-pos="0"] .deck__hearts {
    opacity: 1;
    transition: opacity .45s ease calc(var(--deck-duration) * .55);
}

/* ---------------------------------------------------------------------------
   3. Foto, ajuste a la pantalla y pie de foto
   Ajuste adaptativo (lo decide el JS según la proporción de la foto y de la pantalla):
       sin clase     → la foto cubre la carta entera (object-fit: cover)
       .is-contain   → la foto se ve completa, sobre el fondo de la carta (sin recortes)
   --------------------------------------------------------------------------- */
.deck__link {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.deck__picture {
    position: absolute;
    inset: 0;
    display: block;
}

.deck__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;
}

.deck__card.is-contain .deck__img { object-fit: contain; }

.deck__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 3vw, 2.2rem) clamp(.9rem, 2.4vw, 1.6rem);
    background: linear-gradient(0deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0));
    color: #fff;
    pointer-events: none;
}

.deck__title {
    margin: 0;
    max-width: 18ch;
    font: italic 400 clamp(1.4rem, 3.6vw, 2.8rem) / 1.08 var(--serif);
    letter-spacing: -.01em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

.deck__category {
    margin: .6rem 0 0;
    /* Mezcla el acento de la paleta con blanco: legible sobre cualquier foto y fiel a la paleta. */
    color: color-mix(in srgb, var(--accent) 55%, #fff);
    font: 600 .72rem / 1.2 var(--sans);
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* Corazones: arriba a la izquierda (las herramientas ocupan la derecha). */
.deck__hearts {
    top: max(.9rem, env(safe-area-inset-top));
    right: auto;
    left: max(.9rem, env(safe-area-inset-left));
}

/* ---------------------------------------------------------------------------
   4. Controles superpuestos
   --------------------------------------------------------------------------- */
.deck__ui {
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;                           /* Solo los controles reciben clics. */
}

.deck__tools {
    position: absolute;
    top: max(.9rem, env(safe-area-inset-top));
    right: max(.9rem, env(safe-area-inset-right));
    display: flex;
    gap: .5rem;
    pointer-events: auto;
}

.deck__tools .gallery-app-tool {
    /* Fondo casi opaco y SIN desenfoque de fondo (backdrop-filter): junto al borde superior de la pantalla, el desenfoque de Safari en
       iPhone tomaba luz de fuera y pintaba una sombra clara en el borde de arriba de los botones. Sin sombras propias. */
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    border-color: color-mix(in srgb, var(--fg) 24%, transparent);
    color: var(--fg);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.deck__tools .gallery-app-tool:hover,
.deck__tools .gallery-app-tool[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.deck__nav {
    position: absolute;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.deck__arrow {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.deck__arrow svg { width: 20px; height: 20px; }
.deck__arrow:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.deck__arrow:disabled { opacity: .3; cursor: default; }

.deck__nav-sep {
    align-self: stretch;
    width: 1px;
    margin: .55rem .1rem;
    background: var(--line);
}

/* Botones «Salir» (abajo) y «Salir hacia arriba»: salen del modo pantalla completa hacia lo que hay a cada lado. */
.deck__exit {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 44px;
    margin: 0;
    padding: 0 .95rem 0 .75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--fg);
    font: 600 .72rem / 1 var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.deck__exit[hidden],
.deck__nav-sep[hidden] { display: none; }
.deck__exit svg { width: 18px; height: 18px; }
.deck__exit:hover { background: var(--accent-soft); color: var(--accent); }

.deck__counter {
    min-width: 4.4ch;
    margin: 0;
    color: var(--fg);
    font: 600 .8rem / 1 var(--sans);
    letter-spacing: .08em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.deck__counter-sep { margin: 0 .35em; color: var(--fg-soft); }

/* Pista inicial: desaparece al usar la galería por primera vez. */
.deck__hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: .7rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--fg);
    font: 600 .72rem / 1.2 var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .95;
    transition: opacity .5s ease;
    pointer-events: none;
}

.deck.is-used .deck__hint { opacity: 0; }
.deck__hint--touch { display: none; }

@media (hover: none) and (pointer: coarse) {
    .deck__hint--touch { display: inline; }
    .deck__hint--pointer { display: none; }
}

.deck__empty[hidden] { display: none; }

.deck__empty {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--fg-soft);
    font: italic 400 1.4rem var(--serif);
}

@media (max-width: 520px) {
    .deck__tools .gallery-app-tool { padding: .55rem .8rem; font-size: .68rem; }
    .deck__nav { gap: .35rem; }
    .deck__arrow { width: 40px; height: 40px; }
    .deck__exit { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .deck__exit-text { display: none; }               /* En móvil estrecho solo el icono (con su etiqueta accesible). */
}

/* Pantallas bajas (móvil apaisado): menos pie de foto y controles más pequeños para que nada se pise. */
@media (max-height: 520px) {
    .deck__stage { --pad: 3.9rem; }
    .deck__caption { padding-top: 1.2rem; padding-bottom: .7rem; }
    .deck__title { font-size: clamp(1.15rem, 5.5vh, 1.7rem); max-width: 28ch; }
    .deck__category { margin-top: .3rem; font-size: .62rem; }
    .deck__nav { bottom: max(.5rem, env(safe-area-inset-bottom)); padding: .2rem; gap: .35rem; }
    .deck__arrow, .deck__exit { height: 36px; }
    .deck__arrow { width: 36px; }
    .deck__hint { display: none; }
}

/* Baraja acoplada (llena la pantalla): el navegador no desplaza la página con el dedo. Los gestos los gestiona
   deck.js, que también sale de la galería al deslizar más allá de la primera o la última foto. Sin esto, iOS y
   Android empiezan a desplazar la página antes de que el JS pueda impedirlo. */
html.deck-engaged .deck { touch-action: none; }

/* Mientras la baraja llena la pantalla se apartan los botones flotantes de la web («Añadir foto» y «Subir»):
   se pisaban con la barra inferior y con el pie de foto. Vuelven al salir de la galería. */
html.deck-engaged .upload-fab,
html.deck-engaged .top-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s ease;
}

/* ---------------------------------------------------------------------------
   5. Accesibilidad y movimiento reducido
   --------------------------------------------------------------------------- */
.deck__link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -6px;
}

.deck:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .deck { --deck-duration: 1ms; }
}