/* ============================================================
   Mariachis de Melipilla · San Antonio — versión conversación
   Galería de fotos en mosaico + visor a pantalla completa,
   y feed vertical de videos (estilo Reels).
   Se carga DESPUÉS de ../styles.css y usa sus variables.
   ============================================================ */

/* ============================================================
   1 · MOSAICO DE FOTOS (columna derecha del hero)
   ============================================================ */
.pm{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;
  width:min(430px,100%);margin:0 auto;
}
.pm-cell{
  position:relative;padding:0;border:1px solid rgba(212,162,60,.3);cursor:pointer;
  overflow:hidden;border-radius:13px;background:var(--brown-darkest);
  aspect-ratio:1;transition:border-color .18s,transform .18s;
}
.pm-cell:hover,.pm-cell:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.pm-big{
  grid-column:1/-1;aspect-ratio:16/11;border-radius:20px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.75), 0 0 0 6px rgba(212,162,60,.10);
}
.pm-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
/* La celda grande lleva el flyer de la agrupación, que trae logo y texto
   pegados a los bordes: recortarlo al 1.45 de la celda se comía el 18% del
   ancho. Se muestra entero sobre negro, que es el propio fondo del flyer,
   así el relleno no se nota. */
.pm-big{background:#0b0603}
.pm-big img{object-fit:contain}
.pm-cell:hover img{transform:scale(1.06)}

/* la última celda anuncia cuántas faltan */
.pm-more::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(36,20,7,.66);backdrop-filter:blur(1px);
}
.pm-count{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  font-family:var(--sans);font-size:1rem;font-weight:800;color:var(--cream);
  pointer-events:none;
}
.pm-foot{text-align:center;margin:14px 0 0}
.pm-foot .linkish{color:var(--gold-light);font-size:.88rem}
.pm-foot .linkish:hover{color:var(--gold-bright)}

/* ============================================================
   2 · VISOR A PANTALLA COMPLETA
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(16,8,2,.97);
  backdrop-filter:blur(10px);
  display:none;flex-direction:column;
}
.lb.is-on{display:flex}
body.lb-open{overflow:hidden}

.lb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;color:var(--cream);flex:0 0 auto;
}
.lb-count{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.06em;color:rgba(244,236,221,.75)}
.lb-close{
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:rgba(244,236,221,.1);border:1px solid rgba(212,162,60,.4);color:var(--cream);
  font-size:1.3rem;line-height:1;display:grid;place-items:center;
  transition:background .16s;
}
.lb-close:hover{background:rgba(212,162,60,.28)}

.lb-stage{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;padding:0 12px;
}
.lb-stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:12px;
  animation:lbIn .25s ease both;
}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lb-stage img{animation:none}}

.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(36,20,7,.7);border:1px solid rgba(212,162,60,.4);color:var(--cream);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;
  transition:background .16s;
}
.lb-nav:hover{background:var(--brown)}
.lb-prev{left:14px}
.lb-next{right:14px}

.lb-cap{
  flex:0 0 auto;text-align:center;padding:12px 18px 6px;color:var(--cream);
}
.lb-cap .lb-tag{
  display:block;font-family:var(--sans);font-size:.68rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin-bottom:4px;
}
.lb-cap strong{font-family:var(--serif);font-size:1.05rem;font-weight:700}

.lb-strip{
  flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;
  padding:12px 18px 18px;scrollbar-width:none;
}
.lb-strip::-webkit-scrollbar{display:none}
.lb-strip button{
  flex:0 0 auto;width:62px;height:62px;padding:0;cursor:pointer;
  border:2px solid transparent;border-radius:10px;overflow:hidden;background:var(--brown-darkest);
  opacity:.5;transition:opacity .16s,border-color .16s;
}
.lb-strip button.is-on{opacity:1;border-color:var(--gold)}
.lb-strip button:hover{opacity:1}
.lb-strip img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   3 · FILA HORIZONTAL DE VIDEOS
   ============================================================ */
.rl{width:100%;margin:0 auto}
/* Las flechas se anclan al visor, no al bloque entero. */
.rl-stage{position:relative}

/* FILA HORIZONTAL. Antes era un feed vertical estilo Reels y en pantalla
   grande dejaba media pantalla vacía a los lados. Ahora los 13 corren de
   izquierda a derecha y se ven cuatro o cinco a la vez. */
.rl-viewport{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding:0 4px;
  padding:4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rl-viewport::-webkit-scrollbar{display:none}
.rl-viewport:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Los videos son de teléfono: 10 de 13 vienen verticales. La tarjeta usa una
   proporción intermedia y el fondo desenfocado rellena lo que sobra, así los
   tres horizontales no quedan como un parche. */
.rl-item{
  flex:0 0 auto;
  width:232px;
  aspect-ratio:3/4;
  scroll-snap-align:center;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .22s, box-shadow .22s;
  box-shadow:0 14px 30px -18px rgba(36,20,7,.55);
}
.rl-item:hover{transform:translateY(-3px)}
/* el que está sonando manda: crece y se despega del resto */
.rl-item.is-loud{
  width:330px;
  box-shadow:0 26px 52px -20px rgba(36,20,7,.6), 0 0 0 3px rgba(212,162,60,.5);
}

.rl-frame{position:relative;height:100%;overflow:hidden;isolation:isolate;background:var(--brown-darkest)}
.rl-bg{
  position:absolute;inset:-12%;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(30px) brightness(.45);transform:scale(1.1);
}
.rl-poster{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:contain;
  transition:opacity .3s;
}
.rl-item.is-playing .rl-poster{opacity:0}
.rl-frame video{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:contain;background:transparent;
}
.rl-shade{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 100%);
}
.rl-tap{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;gap:7px;
  align-content:center;background:transparent;border:0;cursor:pointer;
  color:var(--cream);transition:opacity .2s;
}
.rl-item.is-loud .rl-tap{opacity:0;pointer-events:none}
.rl-tap-ico{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(20,12,5,.55);backdrop-filter:blur(3px);
}
.rl-tap-ico svg{width:22px;height:22px;fill:var(--cream);stroke:var(--cream)}
.rl-tap-txt{
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.rl-meta{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:10px 12px 12px}
.rl-title{
  margin:0 0 7px;font-family:var(--serif);font-size:.86rem;line-height:1.25;
  color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.7);
}
/* el botón de reservar sólo aparece en el que está sonando: en una fila de
   trece, trece botones dorados es puro ruido */
.rl-cta{
  display:none;
  padding:6px 12px;border:0;border-radius:99px;cursor:pointer;
  background:var(--gold);color:var(--brown-darkest);
  font-family:var(--sans);font-size:.72rem;font-weight:800;
  transition:filter .16s,transform .16s;
}
.rl-item.is-loud .rl-cta{display:inline-block}
.rl-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}

.rl-dur{
  position:absolute;top:8px;right:8px;z-index:5;
  padding:2px 7px;border-radius:99px;
  background:rgba(20,12,5,.6);color:var(--cream);
  font-family:var(--sans);font-size:.68rem;font-weight:700;
}

/* flechas a los lados */
.rl-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:var(--cream);border:1px solid rgba(107,66,32,.2);color:var(--brown-dark);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;
  box-shadow:var(--shadow-sm);transition:background .16s,opacity .16s;
}
.rl-nav:hover{background:var(--gold-light)}
.rl-nav[disabled]{opacity:.3;cursor:default}
.rl-prev{left:-14px}
.rl-next{right:-14px}

.rl-count{
  text-align:center;margin:30px 0 0;
  font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--muted);
}

/* ============================================================
   4 · PANTALLAS CHICAS
   ============================================================ */
@media (max-width:900px){
  .pm{width:100%;max-width:430px}
  .rl{width:100%;max-width:none}
  .rl-nav{display:none}
  /* en el teléfono se muestran una y media: suficiente para ver bien al
     mariachi y para que se note que hay más al lado */
  .rl-item{width:min(62vw,236px)}
  .rl-item.is-loud{width:min(80vw,300px)}
  .lb-nav{width:40px;height:40px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
}
@media (max-width:520px){
  .pm{gap:7px}
  .pm-cell{border-radius:11px}
  .pm-big{border-radius:16px}
  .lb-strip button{width:52px;height:52px}
  .rl-item{width:min(64vw,230px)}
  .rl-item.is-loud{width:min(84vw,290px)}
}