/*
Theme Name: Salient Child - Matías Duville
Description: Child theme de Salient para el sitio de Matías Duville
Author: [Tu nombre / estudio]
Template: salient
Version: 1.0.0
*/

/* ==========================================================================
   Este archivo queda para overrides puntuales de CSS si hacen falta.
   La jerarquía tipográfica completa (Host Grotesk) ya se carga vía
   Theme Options > Design Options > Custom CSS, según lo definido
   anteriormente. Acá solo van ajustes específicos de los templates
   custom que agrega este child theme (Patrón A y B).
   ========================================================================== */

/* ---------- Grid de miniaturas (imágenes NO panorámicas) ---------- */
.duville-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.duville-grid-cell{ display:flex; flex-direction:column; }
.duville-grid img{
  width: 100%;
  height: auto;
  display: block;
}
.duville-lightbox-item{ display:block; }

/* Caption debajo de cada pieza (título/año, opcional) */
.duville-caption{
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--fg-soft, #6b6b6b);
  letter-spacing: 0.01em;
}

/* ---------- Lightbox propio (simple, sin dependencia de WPBakery) ---------- */
.duville-lightbox-overlay{
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.97);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.duville-lightbox-overlay.open{ display:flex; }
.duville-lightbox-overlay img{
  max-width: 80vw;
  max-height: 80vh;
}
.duville-lightbox-close,
.duville-lightbox-prev,
.duville-lightbox-next{
  position:absolute;
  background:none; border:none;
  cursor:pointer;
  font-family: var(--font-site, sans-serif);
  color:#111;
}
.duville-lightbox-close{ top:24px; right:32px; font-size:14px; }
.duville-lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); font-size:26px; }
.duville-lightbox-next{ right:24px; top:50%; transform:translateY(-50%); font-size:26px; }

/* ---------- Categoría Videos ---------- */
/* ---------- Descripción (universal, cualquier patrón) ---------- */
.duville-descripcion{
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg, #111);
  margin-bottom: 26px;
}
.duville-descripcion p{ margin-bottom: 12px; }

.duville-video-wrap{ margin-bottom: 30px; }
.duville-video-embed{ position: relative; width: 100%; max-width: 900px; }
.duville-video-embed iframe{ width: 100%; aspect-ratio: 16/9; display: block; }
.duville-video-archivo{
  width: 100%;
  max-width: 900px;
  display: block;
}

/* ---------- Wrapper del scroll horizontal (Patrón A) ---------- */
.duville-scroll-wrap{ margin-bottom: 30px; }

/* ---------- Patrón A: scroll horizontal (Books / Selected Projects) ---------- */
/* El layout horizontal lo maneja Flickity (transform, no flexbox) —
   por eso acá no hay display:flex ni gap: eso lo resuelve la librería. */
.duville-scroll-row{
  overflow: hidden;
  padding-bottom: 14px;
}
.duville-scroll-row.duville-scroll-fallback{
  overflow-x: auto;
  display: flex;
}
.duville-scroll-slide{
  margin-right: 3px;
  display: flex;
  flex-direction: column;
}
.duville-scroll-slide img{
  height: 80vh !important;
  width: auto !important;
  max-width: none;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
}
.duville-scroll-video{
  height: 80vh;
  width: auto;
  display: block;
  margin-right: 3px;
}
.duville-project-caption{
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--fg-soft, #6b6b6b);
}
.duville-project-caption .inst{ font-weight: 500; color: var(--fg, #111); }