/* FOTOGRAFÍA (fotolog) — maquetación común a TODOS los temas.
   Un FEED: una foto tras otra, todas en marcos del mismo tamaño. En
   escritorio, foto y texto se alternan a izquierda y derecha; en el móvil,
   foto a todo el ancho y el texto debajo. Las fotos no se pueden ver en
   grande (sin visor, sin botón derecho, capa transparente encima).
   Solo estructura: tipografías y colores salen del tema activo. Se carga ANTES
   de la hoja del tema, así que cualquier tema puede afinar estas reglas.
   La plantilla es themes/base/photography.php. */

.photo-page { --lado: min(720px, 84vh); padding-bottom: clamp(3rem, 10vh, 6rem); }   /* lado largo: 720 en escritorio (antes 600, +20 %) */
/* Margen lateral propio: algunos temas (Timeline, Broadcast…) le quitan el
   relleno a «.section» y el contenido tocaba los bordes de la ventana. Doble
   clase para ganar a esa regla aunque esta hoja cargue antes que la del tema. */
.container.photo-page { padding-left: var(--gutter, clamp(16px, 3.2vw, 56px)); padding-right: var(--gutter, clamp(16px, 3.2vw, 56px)); }

.photo-head { margin: clamp(1.5rem, 5vh, 3rem) 0 clamp(3rem, 10vh, 6rem); text-align: center; }
.photo-head h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; }
.photo-count {
    margin: .7rem 0 0;
    color: var(--text-muted, #888);
    font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.photo-sep { display: inline-block; margin: 0 .9em; opacity: .7; }   /* el punto entre «21 photos» y el texto libre */
.photo-empty { text-align: center; color: var(--text-muted, #888); padding: 4rem 0; }

/* ---------- El feed ---------- */
.photo-feed { display: flex; flex-direction: column; gap: clamp(4.5rem, 14vh, 10rem); max-width: 1340px; margin: 0 auto; }
.photo-entry {
    display: grid; align-items: center; gap: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: "foto texto";
}
.photo-frame { grid-area: foto; }
.photo-text { grid-area: texto; }
/* Zigzag: en las pares la foto pasa a la derecha y el texto, pegado a ella, se alinea a la derecha */
.photo-entry:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); grid-template-areas: "texto foto"; }
.photo-entry:nth-child(even) .photo-text { text-align: right; align-items: flex-end; }
.photo-entry:nth-child(even) .photo-frame { justify-self: start; }

/* El marco: cada foto con SU forma (--ar, de sus medidas reales) y el mismo
   lado largo para todas (--lado), como copias impresas del mismo formato: una
   horizontal mide --lado de ancho; una vertical, --lado de alto. Dentro, la
   foto es algo más alta que el marco para poder deslizarse al hacer scroll.
   Se arrima al texto: a la derecha de su columna cuando el texto va a la
   derecha, a la izquierda cuando va a la izquierda. */
.photo-frame {
    position: relative; overflow: hidden;
    aspect-ratio: var(--ar, 1.5);
    width: min(100%, calc(var(--lado) * min(1, var(--ar, 1.5))));
    justify-self: end;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;    /* iPhone: sin «guardar / abrir imagen» al mantener pulsado */
}
.photo-frame img {
    position: absolute; left: 0; top: -7%;
    width: 100%; height: 114%; object-fit: cover; display: block;
    -webkit-user-drag: none; pointer-events: none;
    will-change: transform;
}
/* Capa transparente encima: el botón derecho cae sobre ella, no sobre la
   foto, así que el navegador no ofrece «abrir imagen» ni aunque falle el JS */
.photo-frame::after { content: ''; position: absolute; inset: 0; z-index: 1; }

/* PASPARTÚ (2026-10-18): un cartón alrededor de cada foto, como una copia
   montada. Tres estilos, a elegir en Panel > Photography (ajuste photo_mat, que
   pone la clase photo-mat-* en .photo-page):
     · fino   — un borde de papel estrecho e igual por los cuatro lados;
     · museo  — cartón blanco roto ancho y con más margen abajo que arriba (el
                «peso óptico» de los enmarcadores), bisel blanco con su luz y su
                sombra, la foto un poco hundida bajo el corte y el cartón con una
                sombra suave sobre la página;
     · negro  — cartón negro mate de galería con el bisel blanco como única línea
                de luz.
   El cartón es el BORDE del propio marco (transparente: lo que se ve en él es el
   fondo, en tres capas: el fondo de espera de la foto solo dentro, la textura y el
   color del papel), así que entra con la animación de aparición y la fecha impresa
   sigue sobre la foto. La textura es una SVG de ruido que genera el navegador, sin
   descargas. El bisel va en la capa protectora de encima. Un tema puede cambiar
   cualquier pieza con las variables --photo-mat* y --photo-fondo. */
.photo-page {
    --photo-mat: #e8e5de;
    --photo-mat-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .31 0 0 0 -1.3 .78'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .22 0 0 0 -1.7 1.08'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .32' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .98 0 0 0 -2.2 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29' opacity='.5'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29' opacity='.55'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29' opacity='.5'/%3E%3C/svg%3E");
    --photo-mat-w: clamp(7px, .9vw, 13px);
    --photo-mat-bisel: inset 0 0 0 1px rgba(255, 253, 248, .7), inset 0 0 0 2px rgba(0, 0, 0, .28);
}
.photo-page.photo-mat-museo {
    --photo-mat: #ece8df;
    --photo-mat-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .31 0 0 0 -1.4 .8'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .22 0 0 0 -1.6 1'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .45' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .98 0 0 0 -2.4 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29' opacity='0.22'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29' opacity='0.16'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29' opacity='0.25'/%3E%3C/svg%3E");
    --photo-mat-w: clamp(16px, 3.4vw, 46px);
    --photo-mat-wb: clamp(22px, 4.6vw, 62px);
    --photo-mat-bisel:
        inset 3px 3px 0 0 #fbfaf6,              /* bisel con luz (arriba e izquierda) */
        inset -3px -3px 0 0 #d6d1c6,            /* bisel en sombra (abajo y derecha) */
        inset 0 0 0 3.5px rgba(0, 0, 0, .18),   /* filo del corte */
        inset 6px 7px 12px -3px rgba(0, 0, 0, .55);   /* la foto, hundida bajo el cartón */
    --photo-mat-sombra: 0 40px 70px -30px rgba(0, 0, 0, .85), 0 12px 24px -12px rgba(0, 0, 0, .6);
    --photo-mat-clip: inset(-60px -70px -110px -70px);   /* que la animación de aparición no recorte la sombra */
}
.photo-page.photo-mat-negro {
    --photo-mat: #1b1a18;
    --photo-mat-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .94 0 0 0 -1.5 .95'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .95 0 0 0 -1.3 .75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29' opacity='.05'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29' opacity='.07'/%3E%3C/svg%3E");
    --photo-mat-w: clamp(14px, 3vw, 42px);
    --photo-mat-wb: clamp(19px, 4.1vw, 56px);
    --photo-mat-bisel:
        inset 1.5px 1.5px 0 0 rgba(244, 241, 234, .95),   /* el alma blanca del cartón: con luz arriba e izquierda */
        inset -1.5px -1.5px 0 0 rgba(200, 195, 186, .8),  /* y en sombra abajo y derecha */
        inset 0 0 0 2.5px rgba(0, 0, 0, .45),
        inset 5px 6px 12px -3px rgba(0, 0, 0, .6);
    --photo-mat-sombra: 0 0 0 1px rgba(255, 255, 255, .045), 0 40px 70px -30px rgba(0, 0, 0, .9);
    --photo-mat-clip: inset(-60px -70px -110px -70px);
}
.photo-frame {
    border-style: solid; border-color: transparent;
    border-width: var(--photo-mat-w) var(--photo-mat-w) var(--photo-mat-wb, var(--photo-mat-w));
    background:
        linear-gradient(var(--photo-fondo, var(--bg-panel, rgba(128, 128, 128, .12))), var(--photo-fondo, var(--bg-panel, rgba(128, 128, 128, .12)))) padding-box,
        var(--photo-mat-tex) border-box,
        var(--photo-mat) border-box;
    box-shadow: var(--photo-mat-sombra, none);
}
.photo-frame::after { box-shadow: var(--photo-mat-bisel, none); }

/* Fecha impresa en la esquina, en el naranja de las compactas de carrete */
.photo-stamp {
    position: absolute; right: 4.5%; bottom: 4%; z-index: 2;
    font: 600 clamp(.72rem, 1.15vw, .95rem)/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .08em; color: #ff9a3c;
    text-shadow: 0 0 6px rgba(255, 122, 26, .75), 0 0 1px rgba(255, 190, 120, .9);
    opacity: .92; pointer-events: none;
}

.photo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; min-width: 0; }
.photo-num {
    font-size: clamp(3.6rem, 9vw, 8rem); line-height: .82; font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    /* Número hueco: se vacía el RELLENO, no el color (si no, currentColor del trazo
       también sería transparente y el número desaparecía en algunos temas) */
    -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px currentColor; opacity: .45;
}
.photo-title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.08; letter-spacing: normal; text-transform: none; max-width: 16em; }
.photo-data {
    margin: .4rem 0 0; padding-top: 1rem; min-width: min(100%, 18rem);
    display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.4rem;
    border-top: 1px solid var(--border, rgba(128, 128, 128, .3));
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; text-align: left;
}
.photo-data dt { color: var(--text-muted, #888); }
.photo-data dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Canción (opcional): botón ▶/❚❚ propio, sin reproductor ajeno. Hereda la
   letra, el tamaño y el color de la lista Date/Place (es una fila más de ella);
   el anillo que se va llenando con los 30 s usa el acento del tema.
   Composición: el anillo va EN LA LÍNEA DEL TÍTULO, como una viñeta, así que
   «SONG», ▶ y el título comparten fila; artista y enlace quedan debajo,
   alineados con el título. El anillo es algo más alto que la línea y sobresale
   arriba y abajo (margen negativo) sin empujar el texto, para que el título
   siga a la altura exacta de «SONG». (Antes medía casi tres líneas y se
   centraba entre título y artista: pesaba más que el texto y no casaba con nada.) */
.photo-song-dd { --ring: 2.05em; --ring-gap: .85em; display: flex; flex-direction: column; align-items: flex-start; gap: .55em; min-width: 0; }
.photo-song {
    --photo-accent: var(--accent, currentColor);
    -webkit-appearance: none; appearance: none;
    display: grid; grid-template-columns: var(--ring) minmax(0, max-content) auto;
    column-gap: var(--ring-gap); row-gap: .3em; align-items: center; justify-content: start;
    max-width: 100%;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; line-height: 1.35;
    cursor: pointer;
}
.photo-song:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.photo-song-ico {
    grid-column: 1; grid-row: 1;
    position: relative; width: var(--ring); height: var(--ring); margin-block: calc((1.35em - var(--ring)) / 2);
    border-radius: 50%; display: grid; place-items: center;
}
.photo-song-ico::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; opacity: .4; transition: opacity .3s ease; }
.photo-song:hover .photo-song-ico::before, .photo-song.sonando .photo-song-ico::before { opacity: .8; }
.photo-song-ico::after {
    content: ''; position: absolute; inset: -1px; border-radius: 50%;
    background: conic-gradient(var(--photo-accent) calc(var(--p, 0) * 360deg), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.photo-song-ico i {   /* ▶ dibujado: sale con el color del tema, sin depender de un icono */
    display: block; width: 0; height: 0; margin-left: .14em;   /* el triángulo se ve centrado si se corre un poco a la derecha */
    border-style: solid; border-width: .34em 0 .34em .56em;
    border-color: transparent transparent transparent currentColor;
}
.photo-song[aria-pressed="true"] .photo-song-ico i {   /* ❚❚ */
    width: .52em; height: .62em; margin: 0; border: 0;
    border-left: .17em solid currentColor; border-right: .17em solid currentColor;
}
.photo-song-txt { display: contents; }   /* título y artista se colocan en la rejilla del botón */
.photo-song-title { grid-column: 2; grid-row: 1; min-width: 0; }
.photo-song-artist { grid-column: 2; grid-row: 2; min-width: 0; color: var(--text-muted, #888); }
.photo-song-eq { grid-column: 3; grid-row: 1; display: inline-flex; align-items: flex-end; gap: 2px; height: .95em; opacity: 0; transition: opacity .3s ease; }
.photo-song-eq i { width: 2px; height: 100%; background: var(--photo-accent); transform-origin: bottom; transform: scaleY(.3); }
.photo-song.sonando .photo-song-eq { opacity: 1; }
.photo-song.sonando .photo-song-eq i { animation: photo-eq .9s ease-in-out infinite alternate; }
.photo-song.sonando .photo-song-eq i:nth-child(2) { animation-duration: .65s; animation-delay: -.3s; }
.photo-song.sonando .photo-song-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
@keyframes photo-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.photo-song.sin-audio { opacity: .45; cursor: default; }
.photo-song-link { margin-left: calc((var(--ring) + var(--ring-gap)) / .9); font-size: .9em;   /* /.9: el em del enlace es más pequeño */ color: var(--text-muted, #888); text-decoration: none; }
.photo-song-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Contador de escritorio: «07 / 21» abajo a la derecha mientras se ve el feed */
.photo-counter {
    position: fixed; right: var(--gutter, 32px); bottom: 26px; z-index: 50;
    font-size: .72rem; letter-spacing: .18em; font-variant-numeric: tabular-nums;
    color: var(--text-muted, #888);
    opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
.photo-counter.on { opacity: 1; transform: none; }
.photo-counter-n { color: var(--text, currentColor); }
.photo-counter i { display: block; margin-top: 8px; height: 1px; background: var(--border, rgba(128, 128, 128, .3)); }
.photo-counter b { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }

/* Aparición (solo con JS y sin «reducir movimiento»): la foto se abre como
   una persiana y el texto sube */
.photo-feed.photo-anim .photo-frame { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.76, 0, .24, 1); }
.photo-feed.photo-anim .photo-entry.visto .photo-frame { clip-path: var(--photo-mat-clip, inset(0 0 0 0)); }
.photo-feed.photo-anim .photo-frame img { scale: 1.12; transition: scale 1.6s cubic-bezier(.16, 1, .3, 1); }
.photo-feed.photo-anim .photo-entry.visto .photo-frame img { scale: 1; }
.photo-feed.photo-anim .photo-text > * { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.photo-feed.photo-anim .photo-entry.visto .photo-text > * { opacity: 1; transform: none; }
.photo-feed.photo-anim .photo-entry.visto .photo-text > :nth-child(2) { transition-delay: .12s; }
.photo-feed.photo-anim .photo-entry.visto .photo-text > :nth-child(3) { transition-delay: .24s; }
.photo-feed.photo-anim .photo-num { opacity: 0; }
.photo-feed.photo-anim .photo-entry.visto .photo-num { opacity: .45; }

@media (max-width: 860px) {
    .photo-head { text-align: left; }
    .photo-feed { gap: clamp(3.5rem, 10vh, 5rem); }
    .photo-entry, .photo-entry:nth-child(even) { grid-template-columns: 1fr; grid-template-areas: "foto" "texto"; gap: 1.1rem; }
    .photo-entry:nth-child(even) .photo-text { text-align: left; align-items: flex-start; }
    .photo-page { --lado: 100%; }
    .photo-frame, .photo-entry:nth-child(even) .photo-frame { justify-self: start; width: calc(100% * min(1, var(--ar, 1.5))); }
    .photo-text { gap: .7rem; }
    .photo-num { font-size: 2.6rem; }
    .photo-title { font-size: 1.45rem; }
    .photo-data { padding-top: .8rem; margin-top: .2rem; }
    .photo-counter { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .photo-song.sonando .photo-song-eq i { animation: none; transform: scaleY(.7); }
    .photo-frame img { will-change: auto; }
    .photo-counter, .photo-counter b { transition: none; }
}