/* =====================================================
   The Wedding House — Galería dinámica V2
   Usa las variables ya definidas en styles.css:
   --bg, --bg-alt, --bg-deep, --ink, --muted, --accent,
   --serif, --sans
   ===================================================== */

/* ---------- Grid ---------- */
.port-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 40px;
}
.port-row {
  display: flex;
  gap: 18px;
}
.port-row.beyond-batch { display: none; }

/* Tarjeta — proporción depende del tamaño de fila */
.port-row .port-card {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-deep, #EDE9E3);
  cursor: pointer;
  aspect-ratio: 4/3;
  text-decoration: none;
  color: var(--bg, #F2EFEA);
  transform: translateY(20px);
  opacity: 0;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.port-row.port-row-3 .port-card { aspect-ratio: 4/3; }
.port-row.port-row-4 .port-card { aspect-ratio: 1/1; }
.port-row.port-row-5 .port-card { aspect-ratio: 4/5; }

/* Reveal */
.port-card.reveal.in { opacity: 1; transform: translateY(0); }

.port-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.port-card .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(36,36,35,.55) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.port-card .port-card-title {
  position: absolute;
  left: 22px; bottom: 22px;
  font-family: var(--serif, "Cormorant Garamond"), Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--bg, #F2EFEA);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}
.port-card:hover img { transform: scale(1.05); }
.port-card:hover .shade { opacity: 1; }
.port-card:hover .port-card-title { transform: translateY(0); opacity: 1; }
.port-card:focus-visible { outline: 2px solid var(--accent, #CDAF87); outline-offset: 4px; }

/* ---------- Cargar más ---------- */
.port-loadmore-wrap { display: flex; justify-content: center; margin-top: 56px; }
.port-loadmore {
  display: inline-flex; align-items: center; gap: 14px;
  background: transparent;
  color: var(--accent, #CDAF87);
  border: 1px solid var(--accent, #CDAF87);
  padding: 15px 32px;
  font-family: var(--sans, "Montserrat"), sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.port-loadmore:hover {
  background: var(--accent, #CDAF87);
  color: var(--ink, #242423);
}
.port-loadmore[disabled] {
  background: transparent;
  color: var(--muted, rgba(36,36,35,.56));
  border-color: var(--muted, rgba(36,36,35,.56));
  cursor: default;
}
.port-loadmore .port-loadmore-counter {
  font-family: var(--serif, "Cormorant Garamond"), Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted, rgba(36,36,35,.56));
}
.port-loadmore:hover .port-loadmore-counter { color: var(--ink, #242423); }

/* ---------- Compatibilidad: anular grid estático antiguo si reaparece ---------- */
.gallery .gallery-grid { display: none !important; }

/* ---------- Lightbox ---------- */
body.arale-lb-locked { overflow: hidden; }

.arale-lb {
  position: fixed; inset: 0;
  background: rgba(28,28,28,.94);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 70px 80px;
  opacity: 0;
  transition: opacity .25s ease;
}
.arale-lb.open { display: flex; opacity: 1; }

.arale-lb-figure {
  position: relative;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
}
.arale-lb-img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.arale-lb-caption {
  color: rgba(242,239,234,.78);
  font-family: var(--serif, "Cormorant Garamond"), Georgia, serif;
  font-style: italic;
  font-size: 14px;
  text-align: center;
  max-width: 720px;
}

.arale-lb-counter {
  position: absolute;
  top: 22px; left: 28px;
  color: rgba(242,239,234,.7);
  font-family: var(--sans, "Montserrat"), sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.arale-lb-close,
.arale-lb-prev,
.arale-lb-next {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(242,239,234,.55);
  color: #F2EFEA;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  font-family: var(--sans, sans-serif);
  font-size: 18px;
  line-height: 1;
}
.arale-lb-close:hover,
.arale-lb-prev:hover,
.arale-lb-next:hover {
  background: var(--accent, #CDAF87);
  border-color: var(--accent, #CDAF87);
  color: #1A1A1A;
}
.arale-lb-close { top: 22px; right: 28px; }
.arale-lb-prev  { top: 50%; left: 28px;  transform: translateY(-50%); }
.arale-lb-next  { top: 50%; right: 28px; transform: translateY(-50%); }
.arale-lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.arale-lb-next:hover { transform: translateY(-50%) translateX(3px); }

/* ---------- Logo del nav (V4: tamaño doble + crisp rendering) ---------- */
.nav { height: auto !important; min-height: 96px; padding-top: 12px; padding-bottom: 12px; }
.brand { line-height: 0; display: inline-flex; align-items: center; }
.brand-logo {
  height: 72px;
  width: auto;
  display: block;
  max-width: 320px;
  /* Hints para que el navegador suavice mejor al escalar PNG/JPG */
  image-rendering: auto;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: bicubic;
  backface-visibility: hidden;
  transform: translateZ(0);
  /* SVG y formatos vectoriales se ven perfectos a cualquier tamaño */
}
.nav:not(.scrolled) .brand-logo { filter: brightness(0) invert(1); }
/* Si el menú está scrolled, reducimos un pelo para no taparlo */
.nav.scrolled { min-height: 80px; }
.nav.scrolled .brand-logo { height: 60px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .port-row { flex-wrap: wrap; }
  .port-row .port-card {
    flex: 0 0 calc(50% - 9px);
    aspect-ratio: 4/3 !important;
  }
  .port-loadmore { padding: 13px 24px; }

  .arale-lb { padding: 24px 16px; }
  .arale-lb-prev, .arale-lb-next {
    top: auto; bottom: 24px; transform: none;
    width: 40px; height: 40px;
  }
  .arale-lb-prev { left: calc(50% - 50px); }
  .arale-lb-next { right: calc(50% - 50px); }
  .arale-lb-prev:hover, .arale-lb-next:hover { transform: none; }
  .arale-lb-figure { max-height: calc(100vh - 140px); gap: 8px; }
  .arale-lb-img { max-height: calc(100vh - 200px); }
  .arale-lb-close { top: 14px; right: 14px; }
  .arale-lb-counter { top: 18px; left: 18px; }

  /* V3: logo también más grande en móvil */
  .nav { min-height: 76px; }
  .nav.scrolled { min-height: 64px; }
  .brand-logo { height: 52px; max-width: 220px; }
  .nav.scrolled .brand-logo { height: 44px; }
}
@media (max-width: 520px) {
  .port-row .port-card { flex: 0 0 100%; }
}