/* --- REELS DE LA FESTA ---------------------------------------
   Requadres verticals amb el reel i el compte d'Instagram que
   l'ha publicat. El visor (#visor-videos) reaprofita les classes
   .lb del visor de fotos: mateixa barra, mateixes fletxes. */

.reels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
  justify-content: center;
  gap: var(--sp-6) var(--sp-4);
}

.reel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.reel__obre {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.reel__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ease);
}
.reel__obre:hover .reel__poster,
.reel__obre:focus-visible .reel__poster { transform: scale(1.04); }

/* vel inferior perquè la durada es llegeixi sobre qualsevol fotograma */
.reel__obre::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(58,15,54,.72), rgba(58,15,54,0));
  pointer-events: none;
}

.reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--cream2);
  color: var(--vi);
  box-shadow: var(--shadow-lg);
  transition: transform var(--ease);
}
.reel__obre:hover .reel__play,
.reel__obre:focus-visible .reel__play { transform: translate(-50%, -50%) scale(1.08); }
.reel__play svg { width: 22px; height: 22px; margin-left: 3px; }

.reel__durada {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  z-index: 1;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  background: rgba(58,15,54,.82);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.reel__autor {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.reel__autor a {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--cream);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 700;
  border-bottom: 1px solid transparent;
}
.reel__autor a:hover,
.reel__autor a:focus-visible { border-bottom-color: var(--or2); }
.reel__autor svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--or2); }
.reel__autor span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ressenya sota el compte: nomes la porten els reels fets per la festa
   mateixa (Josep, 23-09-2026). El marge negatiu es menja el gap de .reel
   perque la linia quedi lligada al compte i no sembli un element a part */
.reel__credit {
  margin: calc(var(--sp-1) - var(--sp-3)) 0 0;
  min-width: 0;
  color: var(--cream);
  opacity: .62;
  font-size: var(--text-xs);
  line-height: 1.35;
}

/* --- visor de vídeos (reaprofita .lb) --- */
/* el compte d'Instagram va tal com s'escriu: ni majuscules ni espaiat */
.lb--video .lb__sede {
  text-transform: none;
  letter-spacing: .01em;
  font-size: var(--text-sm);
  color: var(--cream);
  opacity: .85;
}
.lb__video {
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  background: #000;
  box-shadow: var(--shadow-xl);
}
.lb__thumb--video { width: 40px; height: 66px; }

@media (max-width: 560px) {
  .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: var(--sp-5) var(--sp-3); }
  .reel__play { width: 46px; height: 46px; }
  .reel__play svg { width: 18px; height: 18px; }
  .reel__autor a { font-size: var(--text-xs); }
  .lb__thumb--video { width: 34px; height: 56px; }
}



/* el boto d'Instagram nomes apareix si el reel te enllac original:
   .lb__share declara display, i per tant cal apagar-lo explicitament */
.lb__share[hidden] { display: none; }

/* amb pocs reels la tira de miniatures va centrada; els marges automatics
   la mantenen accessible tambe quan n'hi ha prou per desbordar */
.lb--video .lb__thumbs--tira > :first-child { margin-inline-start: auto; }
.lb--video .lb__thumbs--tira > :last-child  { margin-inline-end: auto; }

@media (max-width: 560px) {
  /* el visor de fotos col·loca les fletxes amb data-lb; aqui son data-vi */
  .lb--video .lb__nav[data-vi="anterior"] { left: 0; }
  .lb--video .lb__nav[data-vi="seguent"]  { right: 0; }
  /* pujades respecte del centre perque no tapin els controls del video */
  .lb--video .lb__nav { top: 42%; }
}

/* mentre no sabem qui va publicar cada reel, el requadre ho diu clar:
   mateix pes visual que un compte, pero sense enllac i mes apagat */
.reel__autor--pendent {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--cream);
  opacity: .6;
  font-size: var(--text-sm);
  font-style: normal;
}

@media (max-width: 560px) {
  .reel__autor--pendent { font-size: var(--text-xs); }
}

/* numero de referencia del requadre: permet parlar d'un reel concret
   ("el 4 es d'en...") sense haver de descriure el fotograma */
.reel__num {
  flex: 0 0 auto;
  min-width: 1.5em;
  padding: 0 .3em;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12);
  color: var(--or2);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- VIDEOS DE LA GENT ---------------------------------------
   Apartat a part del de reels (Josep, 21-09-2026). Aqui hi van
   els trossos curts que envia la gent des de /envia-fotos/, de
   mig minut com a molt. Es veuen al lloc, sense visor: son pocs
   i curts, i el reproductor del navegador ja fa la feina.
   Requadres mes amples i menys alts que els reels, perque es
   vegi d'un cop d'ull que no son el mateix. */

.vidgent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: var(--sp-8) var(--sp-5);
}

.vidgent__peca {
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Els videos arriben drets i ajaguts alhora: la caixa te una mida
   fixa i el video hi cap sencer a dins, mai retallat. */
.vidgent__video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  background: var(--vi3);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.vidgent__peu {
  color: var(--cream);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.vidgent__credit {
  display: block;
  margin-top: var(--sp-1);
  color: var(--or2);
  font-size: var(--text-xs);
  letter-spacing: .02em;
}

@media (max-width: 560px) {
  .vidgent {
    grid-template-columns: minmax(0, 320px);
    gap: var(--sp-6);
  }
}