/* =========================================================
   Proyecto Raíces — PAGES · Galería (galeria.html)
   ---------------------------------------------------------
   Fotos en filas justificadas y formulario "Enviá tus fotos".
   Comunidad Raíces vive en patterns.css (también la usa Inicio).
   ========================================================= */

/* ---------- Galería — filas justificadas ----------
   .gal-row es un flex simple (fallback sin JS); assets/js/pages/
   galeria.js calcula alto/ancho de cada foto para que cada fila ocupe
   todo el ancho respetando la proporción real de cada imagen (sin
   recortar). Sin overlays de color sobre las fotos. */
.galeria-head{max-width:640px; margin-bottom:var(--space-6);}
.galeria-head h1{font-size:clamp(36px,5vw,60px); line-height:0.94; margin:10px 0 12px; color:var(--text-primary);}
.galeria-head p{color:var(--text-secondary); font-size:var(--text-lg); line-height:1.6; margin-top:var(--space-2);}
.gal-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3);}
.gal-row img{height:300px; width:auto; max-width:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); cursor:zoom-in; display:block; transition:transform var(--duration-base) var(--ease);}
.gal-row img:hover{transform:translateY(-4px);}
.fotos-form{margin-top:var(--space-5); background:var(--color-blanco); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-6); max-width:520px;}
.fotos-form[hidden]{display:none;}
.fotos-form > *{min-width:0;}
.fotos-seleccionadas{list-style:none; margin:10px 0 0; padding:0; max-height:132px; overflow-y:auto; overflow-x:hidden; border-top:1px solid var(--border-color);}
.fotos-seleccionadas:empty{display:none; margin:0; border-top:none;}
.fotos-seleccionadas li{max-width:100%; padding:7px 2px; font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid var(--border-color);}
.fotos-seleccionadas li:last-child{border-bottom:none;}
@media (max-width: 860px){
  .gal-row img{height:220px;}
}
@media (max-width: 640px){
  .gal-row{gap:var(--space-2);}
  .gal-row img{height:140px;}
  .galeria-head h1{font-size:clamp(28px,10vw,36px);}
}
/* Sobre papel: foco marrón y texto secundario oscuro (ver tokens). */
.fotos-form{--focus-ring:var(--focus-ring-on-paper); --text-secondary:var(--text-secondary-on-paper); --text-muted:var(--text-secondary-on-paper);}