/* IvaniaPhoto · publico/assets/css/portafolio.css
 * Ocampo-Infra Agent System · autor Roberto Ocampo · 9/19/2026
 *
 * Estilos propios del módulo NUEVO w-portafolio (`/portafolio`, ADR-003 en
 * `docs/web-publica-20260919/02-DISENO-ARQUITECTURA.md` §3). Usa
 * EXCLUSIVAMENTE los tokens de base.css (--ip-*, --serif, --sans, --fs-*) —
 * mismo criterio que catalogo.css: una sola marca en todo el front público.
 * data-tema="portafolio" (ADR-002 §2) hoy no trae un tema-portafolio.css
 * propio porque el requisito es "Demo1 mejorado": los tokens base ya SON el
 * estilo correcto, no hace falta redefinir nada scoped.
 *
 * Reutiliza `.ip-lb-*` (lightbox de imagen suelta, catalogo.css) para el
 * caso degradado (foto sin sesión enlazada) — NO se duplican esas reglas.
 */

.pf-caja { max-width: 1180px; margin: 0 auto; padding: 24px 16px 56px; }
.pf-caja h1 { font-weight: 400; font-size: var(--fs-h2); line-height: 1.2; font-family: var(--serif); margin: 0 0 6px; }
.pf-caja .ip-vacia { padding: 24px 0; text-align: center; color: var(--ip-humo); font-size: 14px; }
.pf-cta { margin-top: 28px; }

/* ── Mosaico nested multi-aspect-ratio (ADR §3a) ──────────────────────────
 * CSS Grid puro, sin JS de layout. Cada celda trae `--ar` (ancho/alto de la
 * imagen ORIGINAL, `archivo.ancho/alto` vía PHP) como número, no fracción:
 * verticales (--ar < 1) ocupan más filas que horizontales (--ar > 1).
 *
 * La fórmula `grid-row: span calc(K / var(--ar))` es una aproximación
 * conocida de "masonry sin JS" (columna real es fluida por auto-fill; K se
 * calibra para el ancho de columna BASE de cada breakpoint). Con columnas
 * más angostas o más anchas que la base, el recorte de `object-fit: cover`
 * absorbe el margen de error — es la misma concesión de "recorte mínimo"
 * que pide el diseño (ADR §3a). No es una alternativa a `grid-template-
 * rows: masonry` (soporte de navegador aún parcial); es CSS-only tal como
 * pide el requisito.
 */
.pf-mosaico {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 8px;
  gap: 8px;
}
.pf-celda {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ip-noche-alta);
  /* K=30 calibrado para columna base ~238px (230+gap) / fila 8px+gap. */
  grid-row: span calc(30 / var(--ar));
}
.pf-celda img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease; background: var(--ip-noche-alta);
}
.pf-celda:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
  .pf-mosaico { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pf-celda { grid-row: span calc(23 / var(--ar)); }
}
@media (max-width: 640px) {
  .pf-caja { padding: 16px 12px 40px; }
  .pf-mosaico { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 6px; gap: 6px; }
  .pf-celda { grid-row: span calc(25 / var(--ar)); }
}

/* ── Modal-sesión (ADR-003 §3b, `portafolio-modal.js`, window.
   __ipPortafolioModal) — separado del lightbox de imagen suelta a propósito,
   mismo patrón visual (overlay oscuro, prev/next flotantes, Esc). ────────── */
.ip-pfm-overlay {
  display: none; position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.94); overflow-y: auto;
}
.ip-pfm-overlay.ip-pfm-abierto { display: block; }
body.ip-pfm-bloqueo-scroll { overflow: hidden; }

.ip-pfm-cuerpo { max-width: 980px; margin: 0 auto; padding: 60px 16px 60px; color: var(--ip-marfil); }

.ip-pfm-cerrar {
  position: fixed; top: 14px; right: 18px; background: none; border: 0;
  color: var(--ip-marfil); font-size: 34px; line-height: 1; cursor: pointer; z-index: 2;
}
.ip-pfm-prev, .ip-pfm-next {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.08); border: 1px solid rgba(244,238,228,.14); color: var(--ip-marfil);
  font-size: 30px; width: 46px; height: 46px; border-radius: 999px; cursor: pointer; z-index: 2;
}
.ip-pfm-prev { left: 14px; } .ip-pfm-next { right: 14px; }
.ip-pfm-prev:hover, .ip-pfm-next:hover, .ip-pfm-cerrar:hover { color: var(--ip-oro); }

.ip-pfm-cabecera { margin-bottom: 18px; }
.ip-pfm-titulo { font: 400 clamp(1.4rem, 3vw, 2.1rem) var(--serif); margin: 0 0 6px; }
.ip-pfm-caption { color: var(--ip-humo); font-size: .95rem; margin: 0; max-width: 68ch; }

.ip-pfm-video {
  width: 100%; max-height: 60vh; display: block; margin: 0 0 22px;
  border: 1px solid rgba(244,238,228,.14); border-radius: 6px; background: #000;
}

.ip-pfm-figura { margin: 0; }
.ip-pfm-img {
  display: block; width: 100%; max-height: 66vh; object-fit: contain;
  background: var(--ip-noche-alta); border: 1px solid rgba(244,238,228,.14); border-radius: 4px;
}
.ip-pfm-foto-cap { margin-top: 10px; font-size: 13px; color: var(--ip-marfil); }
.ip-pfm-foto-titulo { font-weight: 600; }
.ip-pfm-foto-caption { color: var(--ip-humo); }
.ip-pfm-foto-favorita { color: var(--ip-oro); margin-left: 6px; }

.ip-pfm-contador { margin-top: 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ip-humo); }

.ip-pfm-cargando, .ip-pfm-error { text-align: center; padding: 90px 16px; color: var(--ip-humo); }

@media (max-width: 640px) {
  .ip-pfm-cuerpo { padding: 54px 12px 40px; }
  .ip-pfm-prev, .ip-pfm-next { width: 38px; height: 38px; font-size: 24px; }
}