/* ═══════════════════════════════════════════════
   VuelaVuela — single.css v4
   Fixes: miniaturas, cross-browser, lightbox
═══════════════════════════════════════════════ */

/* ── HERO ── */
.vvs-hero {
    position: relative; width: 100%; min-height: 75vh;
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden; background: var(--vv-bg-dark);
}
.vvs-hero__bg { position: absolute; inset: 0; }
.vvs-hero__img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.vvs-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(28,25,22,.95) 0%, rgba(28,25,22,.4) 50%, rgba(28,25,22,.1) 100%);
}
.vvs-hero__content { position: relative; z-index: 2; padding: 3rem 0 4rem; }
.vvs-hero__inner { max-width: var(--vv-max-w); margin: 0 auto; padding: 0 var(--vv-gutter); }

.vvs-breadcrumb { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.vvs-breadcrumb__link {
    font-family: var(--vv-font-sans); font-size: .62rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.3); transition: color .2s;
}
.vvs-breadcrumb__link:hover { color: rgba(255,255,255,.7); }
.vvs-breadcrumb__sep { color: rgba(255,255,255,.2); }
.vvs-breadcrumb__current {
    font-family: var(--vv-font-sans); font-size: .62rem; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--vv-orange);
}

.vvs-hero__title {
    font-family: var(--vv-font-sans);
    font-weight: 700; text-transform: uppercase;
    line-height: .92; letter-spacing: -.015em; color: #fff; margin-bottom: 2.5rem;
    /* fix cross-browser: tamaños fijos por breakpoint en lugar de clamp+vw */
    font-size: 5rem;
}
@media (max-width: 1200px) { .vvs-hero__title { font-size: 4rem; } }
@media (max-width: 900px)  { .vvs-hero__title { font-size: 3rem; } }
@media (max-width: 600px)  { .vvs-hero__title { font-size: 2.2rem; } }

.vvs-hero__meta {
    display: flex; gap: 3rem; flex-wrap: wrap;
    padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08);
}
.vvs-meta-item { display: flex; flex-direction: column; gap: .3rem; }
.vvs-meta-val { font-size: .88rem; color: rgba(255,255,255,.6); font-weight: 300; }

/* ── CONTENIDO ── */
.vvs-content { background: var(--vv-bg3); padding: 5rem 0 6rem; }
.vvs-content__inner { max-width: 860px; margin: 0 auto; padding: 0 var(--vv-gutter); }

.vvs-video { margin-bottom: 4rem; }
.vvs-video__wrap { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.vvs-video__wrap iframe,
.vvs-video__wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.vvs-intro { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--vv-rule); }
.vvs-intro__text {
    font-family: var(--vv-font-serif); font-style: italic;
    font-size: 1.4rem; line-height: 1.55; color: var(--vv-gray);
}

.vvs-content__body { color: var(--vv-gray); }
.vvs-content__body p { font-size: .97rem; line-height: 1.9; color: var(--vv-gray); margin-bottom: 1.5rem; }
.vvs-content__body h2 {
    font-family: var(--vv-font-sans); font-size: 2rem;
    font-weight: 700; text-transform: uppercase; color: var(--vv-ink);
    margin: 3rem 0 1rem; letter-spacing: -.01em;
}
.vvs-content__body h3 {
    font-family: var(--vv-font-sans); font-size: 1.3rem;
    font-weight: 600; color: var(--vv-ink2); margin: 2rem 0 .8rem;
}
.vvs-content__body > p:has(a[href] img) { margin: 0; padding: 0; }

.vvs-empty {
    padding: 4rem 2rem; text-align: center;
    border: 1.5px dashed var(--vv-rule); background: var(--vv-bg);
}

/* ══════════════════════════════════════
   GRID DE IMÁGENES INLINE — vv-img-grid
   Generado por JS para párrafos <p><a><img></a></p>
   Reset agresivo para neutralizar estilos de WordPress
══════════════════════════════════════ */
.vv-img-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 2.5rem 0 !important;
    width: 100% !important;
    /* reset cualquier flex heredado */
    flex: none !important;
    align-items: unset !important;
}

.vv-img-grid-item {
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    /* aspect-ratio forzado para todas las celdas */
    aspect-ratio: 3 / 2 !important;
    background: var(--vv-bg2);
    /* sin flex */
    flex: none !important;
    width: auto !important;
    height: auto !important;
}

.vv-img-grid-item a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    cursor: zoom-in !important;
    /* neutralizar cualquier flex del <a> */
    flex: none !important;
    position: absolute !important;
    inset: 0 !important;
}

.vv-img-grid-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* neutralizar flex-basis y flex que WP pone en img */
    flex: none !important;
    flex-basis: auto !important;
    filter: saturate(.85) brightness(.95);
    transition: transform .5s ease, filter .4s ease;
}

.vv-img-grid-item:hover img {
    transform: scale(1.05);
    filter: saturate(1) brightness(1);
}

/* ══════════════════════════════════════
   GALERÍA CLÁSICA [gallery]
   .gallery > .gallery-item > .gallery-icon > a > img
══════════════════════════════════════ */
.vvs-content__body .gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 2.5rem 0 !important;
    width: 100% !important;
    flex: none !important;
}
.vvs-content__body .gallery.gallery-columns-1 { grid-template-columns: 1fr !important; }
.vvs-content__body .gallery.gallery-columns-2 { grid-template-columns: repeat(2,1fr) !important; }
.vvs-content__body .gallery.gallery-columns-4 { grid-template-columns: repeat(4,1fr) !important; }
.vvs-content__body .gallery.gallery-columns-5 { grid-template-columns: repeat(5,1fr) !important; }

.vvs-content__body .gallery-item {
    margin: 0 !important; padding: 0 !important;
    width: auto !important; height: auto !important;
    overflow: hidden !important;
    aspect-ratio: 3/2 !important;
    background: var(--vv-bg2);
    position: relative !important;
    flex: none !important;
}
.vvs-content__body .gallery-icon {
    position: absolute; inset: 0;
    margin: 0; padding: 0; display: block;
}
.vvs-content__body .gallery-icon a {
    display: block !important;
    width: 100% !important; height: 100% !important;
    cursor: zoom-in !important;
}
.vvs-content__body .gallery-icon img {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover !important; object-position: center;
    margin: 0 !important; padding: 0 !important; border: none !important;
    flex: none !important;
    filter: saturate(.85) brightness(.95);
    transition: transform .5s ease, filter .4s ease;
}
.vvs-content__body .gallery-item:hover .gallery-icon img {
    transform: scale(1.05); filter: saturate(1) brightness(1);
}
.vvs-content__body .gallery-caption { display: none !important; }

/* ══════════════════════════════════════
   GALERÍA GUTENBERG
   .wp-block-gallery figure img
══════════════════════════════════════ */
.vvs-content__body .wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    margin: 2.5rem 0 !important;
    flex: none !important;
}
.vvs-content__body .wp-block-gallery figure,
.vvs-content__body .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    overflow: hidden !important;
    aspect-ratio: 3/2 !important;
    position: relative !important;
    flex: none !important;
    width: auto !important; height: auto !important;
}
.vvs-content__body .wp-block-gallery figure a,
.vvs-content__body .wp-block-gallery .wp-block-image a {
    display: block !important;
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    cursor: zoom-in !important;
    flex: none !important;
}
.vvs-content__body .wp-block-gallery figure img,
.vvs-content__body .wp-block-gallery .wp-block-image img {
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover !important; object-position: center;
    margin: 0 !important;
    flex: none !important; flex-basis: auto !important;
    filter: saturate(.85) brightness(.95);
    transition: transform .5s ease, filter .4s ease;
}
.vvs-content__body .wp-block-gallery figure:hover img,
.vvs-content__body .wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.05); filter: saturate(1) brightness(1);
}

/* Fix específico para el bug de flex-basis:0% de WP en Chrome/Firefox */
.wp-block-gallery.has-nested-images.is-cropped
figure.wp-block-image:not(#individual-image) a,
.wp-block-gallery.has-nested-images.is-cropped
figure.wp-block-image:not(#individual-image) img {
    flex: none !important;
    flex-basis: auto !important;
    width: 100% !important;
    height: 100% !important;
}

/* ══════════════════════════════════════
   NAVEGACIÓN ENTRE PROYECTOS
══════════════════════════════════════ */
.vvs-nav-proj { background: var(--vv-bg2); border-top: 1px solid var(--vv-rule); }
.vvs-nav-proj__inner {
    max-width: var(--vv-max-w); margin: 0 auto; padding: 0 var(--vv-gutter);
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: 1rem; align-items: center; min-height: 90px;
}
.vvs-nav-proj__item { display: flex; align-items: center; gap: 1.2rem; padding: 1.8rem 0; transition: opacity .2s; }
.vvs-nav-proj__item:hover { opacity: .6; }
.vvs-nav-proj__item--next { justify-content: flex-end; }
.vvs-nav-proj__thumb { width: 60px; height: 40px; overflow: hidden; flex-shrink: 0; }
.vvs-nav-proj__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.vvs-nav-proj__copy { display: flex; flex-direction: column; gap: .3rem; }
.vvs-nav-proj__copy--right { text-align: right; }
.vvs-nav-proj__title { font-family: var(--vv-font-sans); font-size: .88rem; font-weight: 600; color: var(--vv-ink); text-transform: uppercase; }
.vvs-nav-proj__back { color: var(--vv-gray-2); display: flex; align-items: center; justify-content: center; padding: .8rem; transition: color .2s; }
.vvs-nav-proj__back:hover { color: var(--vv-ink); }

/* ══════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════ */
.vv-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
}
.vv-lightbox.is-open { opacity: 1; pointer-events: auto; }

.vv-lightbox__backdrop {
    position: absolute; inset: 0;
    background: rgba(8,8,8,.97); cursor: zoom-out;
}

.vv-lightbox__close,
.vv-lightbox__prev,
.vv-lightbox__next {
    position: absolute; z-index: 2;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s, color .2s, transform .2s;
}
.vv-lightbox__close {
    top: 1.5rem; right: 1.5rem;
    width: 2.8rem; height: 2.8rem; border-radius: 50%;
}
.vv-lightbox__close:hover { background: rgba(255,255,255,.18); color: #fff; transform: rotate(90deg); }

.vv-lightbox__prev,
.vv-lightbox__next {
    top: 50%; transform: translateY(-50%);
    width: 3.2rem; height: 3.2rem; border-radius: 2px;
}
.vv-lightbox__prev { left: 1.5rem; }
.vv-lightbox__next { right: 1.5rem; }
.vv-lightbox__prev:hover { color: #fff; background: rgba(255,255,255,.15); transform: translateY(-50%) translateX(-2px); }
.vv-lightbox__next:hover { color: #fff; background: rgba(255,255,255,.15); transform: translateY(-50%) translateX(2px); }

.vv-lightbox__stage {
    position: relative; z-index: 1;
    max-width: min(92vw, 1300px);
    max-height: 85vh;
    display: flex; align-items: center; justify-content: center;
}
.vv-lightbox__img {
    display: block !important;
    max-width: min(92vw, 1300px) !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    /* reset total de flex para que no sea afectado por estilos de WP */
    flex: none !important;
    flex-basis: auto !important;
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 32px 80px rgba(0,0,0,.7);
    user-select: none;
}
.vv-lightbox__img.vv-lb-loading { opacity: 0; transform: scale(.96); }

.vv-lightbox__footer {
    position: absolute; bottom: 1.2rem; left: 0; right: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    gap: 2rem; padding: 0 5rem;
}
.vv-lightbox__caption { font-size: .75rem; color: rgba(255,255,255,.35); letter-spacing: .06em; text-align: center; }
.vv-lightbox__counter {
    font-family: var(--vv-font-sans); font-size: .6rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.22); white-space: nowrap;
}

/* ══════════════════════════════════════
   PÁGINAS ESTÁTICAS
══════════════════════════════════════ */
.vvp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.vvp-lead {
    font-family: var(--vv-font-serif); font-style: italic;
    font-size: 1.4rem; line-height: 1.5; color: var(--vv-gray);
    margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--vv-rule);
}
.vvp-body-content p { font-size: .95rem; line-height: 1.9; color: var(--vv-gray); margin-bottom: 1.2rem; }
.vvp-img-wrap { width: 100%; aspect-ratio: 3/4; overflow: hidden; position: sticky; top: 6rem; }
.vvp-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.vvp-pilares-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3rem; }
.vvp-pilar-line { width: 2rem; height: 3px; margin-bottom: 1rem; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 860px) {
    .vvs-hero { min-height: 60vh; }
    .vvs-nav-proj__inner { grid-template-columns: 1fr 1fr; }
    .vvs-nav-proj__back { display: none; }
    .vvp-two-col { grid-template-columns: 1fr; gap: 3rem; }
    .vvp-img-wrap { position: static; aspect-ratio: 16/9; }
    .vvp-pilares-grid { grid-template-columns: 1fr; gap: 2rem; }
    .vv-lightbox__prev { left: .5rem; }
    .vv-lightbox__next { right: .5rem; }
    .vv-img-grid,
    .vvs-content__body .gallery,
    .vvs-content__body .wp-block-gallery {
        grid-template-columns: repeat(2,1fr) !important;
    }
}
@media (max-width: 480px) {
    .vvs-nav-proj__thumb { display: none; }
}