/* =====================================================================
   Vista de pieza individual (single.php).
   Antes estaba embebido como <style> en el <head> de single.php.
   Se carga solo en is_single(), después de style.css (misma cascada).
   ===================================================================== */

/* --- ESTILOS ORIGINALES INTACTOS --- */
.project-meta, .project-description, .project-sheet, #main-header, footer {
    opacity: 0; transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body.loaded-state .project-meta, body.loaded-state .project-description, body.loaded-state .project-sheet,
body.loaded-state #main-header, body.loaded-state footer { opacity: 1; transform: translateY(0); }
body.loaded-state #main-header { transition-delay: 0.2s; }
body.loaded-state .project-meta { transition-delay: 0.4s; }
body.loaded-state .project-description { transition-delay: 0.6s; }
body.loaded-state .project-sheet { transition-delay: 0.7s; }
body.loaded-state footer { transition-delay: 0.8s; }

#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; transition: opacity 0.5s ease; }
body.loaded-state #loader { opacity: 0; pointer-events: none; }

.project-intro { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: #fff; position: sticky; top: 0; z-index: 0; transition: filter 0.8s ease; }
/* La intro queda fijada en su sitio: no hace scroll. La galería (z-index 1+)
   sube por encima y js/single.js desvanece el texto antes de que lo tape.
   El fundido es gradual de abajo arriba (halo): una máscara con degradado
   que asciende, así se va antes la descripción y al final el título.
   --intro-fade lo mueve js/single.js: 100 + --intro-halo = texto entero,
   0 = desaparecido (el JS lee --intro-halo, así que basta cambiarlo aquí). */
.intro-content {
    --intro-fade: 210;
    --intro-halo: 110; /* alto del degradado, en % del bloque de texto */
    -webkit-mask-image: linear-gradient(to bottom,
        #000 calc((var(--intro-fade) - var(--intro-halo)) * 1%),
        transparent calc(var(--intro-fade) * 1%));
    mask-image: linear-gradient(to bottom,
        #000 calc((var(--intro-fade) - var(--intro-halo)) * 1%),
        transparent calc(var(--intro-fade) * 1%));
}
.detalle { font-size: 12px; color: #767676; display: block; margin-top: 10px; }

/* --- INTRO EN UNA COLUMNA, CENTRADA ---
   Arriba, título y descripción breve; después el texto de la entrada; y al
   final la ficha: materiales y técnica y estado de venta. Descripción breve y
   venta salen de la caja «Ficha de la pieza» del editor; materiales y técnica,
   de los párrafos con clase «detalle» del contenido (single.php los traslada).
   Ancho máximo = el de una foto vertical (2:3) en la galería, que ocupa todo
   el alto de la ventana, menos 90px por cada lado: el bloque queda centrado
   dentro de esas fotos con un margen fijo (420px a 1440×900, unos 60
   caracteres por línea). Mínimo 400px para que en ventanas muy bajas el
   texto no se estreche.
   El padding lateral deja libres «Volver» e «Información», que en escritorio
   y tablet van fijos a media altura pegados a los bordes. */
.project-intro { padding: 0 140px; }
.intro-content { flex: none; max-width: max(400px, calc(100vh * 2 / 3 - 180px)); text-align: center; }

/* Centrado vertical que respeta la flecha: dos huecos flexibles iguales,
   arriba y abajo del bloque; el de abajo nunca es menor que la zona de la
   flecha (96px + 44px del botón + 16px de aire). Con texto corto el bloque
   queda centrado como siempre; con texto largo en ventanas bajas, sube lo
   justo para no pisarla. Si aun así no cabe, sobra por abajo (flex-start),
   nunca por arriba: el título siempre se ve. */
.project-intro { flex-direction: column; justify-content: flex-start; }
.project-intro::before, .project-intro::after { content: ''; flex: 1 1 0; }
.project-intro::after { min-height: calc(156px + env(safe-area-inset-bottom, 0px)); }
.intro-content h1 { font-size: 1.8rem; line-height: 1.15; margin: 0; }
.project-subtitle { margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; color: #767676; }

.project-description { font-size: 0.95rem; margin: 2rem 0 0; }
.project-description > * + * { margin-top: 1em; }

.project-sheet { margin-top: 1.75rem; }

/* Materiales y técnica: como una cartela de museo, en cuerpo pequeño y gris
   para que se lea como dato y no compita con la historia. Un salto de línea
   (Mayús+Intro en el editor) separa cada material en su propia línea. */
.project-materials { font-size: 0.8rem; line-height: 1.6; color: #767676; }
.project-materials p + p { margin-top: 0.5em; }

/* Estado de venta: bolita pequeña y de tono suave, sin halo; el texto dice
   lo mismo, así que el color solo acompaña. */
.project-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1rem; font-size: 0.8rem; line-height: 1; color: #3C3C3B; }
.project-sheet > .project-status:first-child { margin-top: 0; } /* pieza sin ficha técnica */
.status-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; }
.is-for-sale .status-dot { background: #7DB28F; }
.is-not-for-sale .status-dot { background: #D9897E; }

@media (max-width: 768px) {
    /* Menú arriba y pie abajo: aire para ambos y para la flecha (el padding
       de abajo ya llega hasta el botón: el hueco solo añade el aire). */
    .project-intro { padding: 88px 18px 120px; }
    .project-intro::after { min-height: 16px; }
}

/* --- INDICADOR DE SCROLL ---
   Solo la punta de la flecha, siempre visible: baja 8px mientras pasa de
   tenue a opaca y vuelve, en bucle. Clic = ir a las fotos.
   js/single.js le pone .is-hidden en cuanto se hace scroll. Va dentro de la
   intro, fuera de la máscara del texto. El botón lleva la entrada y la
   salida; el svg, el bucle (así no se pisan las dos animaciones). */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    margin-left: -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: #3C3C3B;
    cursor: pointer;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s;
}
body.loaded-state .scroll-cue { opacity: 1; transition-delay: 1.1s; }
body.loaded-state .scroll-cue.is-hidden {
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.scroll-cue svg { display: block; overflow: visible; opacity: 0.4; animation: scroll-cue-bob 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.scroll-cue path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
@keyframes scroll-cue-bob {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(8px); }
}

@media (max-width: 768px) {
    .scroll-cue { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* Escritorio con ventana baja (portátiles pequeños): la flecha baja un poco
   para dejar sitio al texto; su zona reservada encoge lo mismo. */
@media (min-width: 769px) and (max-height: 760px) {
    .scroll-cue { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    .project-intro::after { min-height: calc(116px + env(safe-area-inset-bottom, 0px)); }
}

#main-header button { pointer-events: auto; }
.site-logo { display: flex; margin: 0; font-size: 1rem; font-weight: normal; }
.site-logo a { font-size: 1rem; text-decoration: none; color: #ffffff; font-weight: normal; transition: filter 0.2s; pointer-events: auto; }

.project-gallery { position: relative; width: 100%; background: #fff; }
/* 100% y no 100vw (style.css): con barra de scroll clásica (Windows, ratón)
   100vw la incluye, las fotos se descentraban unos px respecto al texto y
   aparecía scroll horizontal. Con barras flotantes (Mac) no cambia nada. */
.image-wrapper { width: 100%; transition: filter 0.8s ease; }

.related-single { position: relative; z-index: 100; background: #fff; padding: 100px 0; transition: filter 0.8s ease; }

#main-content { transition: opacity 1.2s ease; }

/* --- CONFIGURACIÓN MODAL SINGLE: CAPA BLANCA + DESENFOQUE TOTAL --- */

/* 1. Anulamos el efecto blur global de main.js para controlar nosotros qué se desenfoca */
body.single-post.blur-main #main-content {
    filter: none !important;
    opacity: 1 !important;
}

/* 2. Desenfoque aplicado individualmente a cada capa para que todas (incluso las ocultas) se empañen */
body.single-post.info-open .project-intro,
body.single-post.info-open .image-wrapper,
body.single-post.info-open .related-single {
    filter: blur(30px) grayscale(30%);
}

/* 3. Estilo del modal (Capa blanca completa) */
body.single-post #info-section {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    transform: none !important;
    background-color: rgba(255, 255, 255, 0);
    z-index: 9500 !important; /* Por encima de fotos (max 100), por debajo de header/footer (10000) */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    /* Cierre: fondo espera 0.25s a que el texto desaparezca */
    transition: background-color 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.25s,
                visibility 0s 1.1s !important;
    pointer-events: none;
}

body.single-post.info-open #info-section {
    background-color: rgba(255, 255, 255, 0.96) !important;
    visibility: visible;
    pointer-events: auto;
    /* Apertura: fondo aparece inmediatamente */
    transition: background-color 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                visibility 0s !important;
}

/* 4. Contenedor de texto del modal */
body.single-post #info-section .info-container {
    max-width: 700px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    opacity: 0;
    transform: translateY(20px);
    /* Cierre: texto desaparece rápido */
    transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

body.single-post.info-open #info-section .info-container {
    opacity: 1;
    transform: translateY(0);
    /* Apertura: texto aparece tras el fondo, con 0.3s de retraso */
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s,
                transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s !important;
}

/* --- Respeto por "reducir movimiento" (no cambia el diseño para el resto) --- */
@media (prefers-reduced-motion: reduce) {
    .project-meta, .project-description, .project-sheet, #main-header, footer,
    body.loaded-state .project-meta, body.loaded-state .project-description, body.loaded-state .project-sheet,
    body.loaded-state #main-header, body.loaded-state footer {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    #main-content, .project-intro, .image-wrapper, .related-single,
    .scroll-cue { transition: none !important; }
    /* Punta quieta y bien visible: sin el vaivén en bucle. */
    .scroll-cue svg { animation: none !important; opacity: 0.8; }
}