/* ==========================================================================
   Carusele — scroll nativ + scroll-snap. Swipe funcționează din prima,
   fără JavaScript. Săgețile apar doar pe desktop; punctele de progres
   arată poziția pe orice lățime.
   Tipuri: wide (1) · grid (3-4) · video 16:9 · tall 4:5
   --grid-lg: grilă de la 1024px, carusel dedesubt
   Deck: galerie foto în teanc, o fotografie în față (la final)
   ========================================================================== */

.carousel { position: relative; }

.carousel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.carousel__head h3 { margin: 0; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--slide, 82%);
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Banda de derulare iese din container până la marginile ecranului
     (--bleed): în repaus primul card stă aliniat cu conținutul paginii, iar
     la derulare cardurile ajung până în capete, nu se taie la container.
     Padding-ul are aceeași lățime, deci aliniamentul nu se schimbă, iar
     scroll-padding face ca fiecare oprire să cadă tot pe marginea
     containerului. Sus și jos, loc pentru umbra cardurilor, compensat cu
     margini negative ca ritmul secțiunii să rămână același. */
  --bleed: var(--margin);
  padding: var(--sp-5) var(--bleed) var(--sp-8);
  margin: calc(var(--sp-2) - var(--sp-5)) calc(var(--bleed) * -1) calc(var(--sp-6) - var(--sp-8));
  scroll-padding-inline: var(--bleed);
}
.carousel__track::-webkit-scrollbar { display: none; }

/* Peste 1200px containerul se oprește la --container, deci distanța până la
   marginea ecranului crește. 100cqw e lățimea benzii (fără bara de derulare
   a ferestrei); banda taie deja ce iese din ea (overflow: hidden). */
.band:has(.carousel) { container-type: inline-size; }
@media (min-width: 1200px) {
  .carousel__track {
    --bleed: max(var(--margin), calc((100cqw - var(--container)) / 2 + var(--margin)));
  }
}

/* În banda încadrată suprafața se oprește la container: derularea rămâne
   în ramă. */
.band--rama .carousel__track { --bleed: var(--margin); }

/* .carousel--edge: primul card pornește de la marginea din stânga a
   ecranului (la --margin de ea, ca umbra să nu se taie), nu de la marginea
   conținutului. Dreapta rămâne ca în varianta de bază. Contează doar peste
   1200px; sub această lățime cele două margini coincid. */
.carousel--edge .carousel__track {
  padding-inline-start: var(--margin);
  scroll-padding-inline-start: var(--margin);
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
}

.carousel__slide {
  scroll-snap-align: start;
  min-width: 0;
  display: flex;
}
.carousel__slide > * { width: 100%; }

/* --- Tipuri --------------------------------------------------------------- */
.carousel--wide  { --slide: 88%; }
.carousel--grid  { --slide: 78%; }
.carousel--video { --slide: 84%; }
.carousel--tall  { --slide: 62%; }
.carousel--video-4 { --slide: 78%; }

@media (min-width: 768px) {
  .carousel--wide  { --slide: 64%; }
  .carousel--grid  { --slide: calc((100% - var(--gutter)) / 2); }
  .carousel--video { --slide: calc((100% - var(--gutter)) / 2); }
  .carousel--tall  { --slide: calc((100% - var(--gutter) * 2) / 3); }
  .carousel--video-4 { --slide: calc((100% - var(--gutter)) / 2); }
}

@media (min-width: 1200px) {
  .carousel--wide  { --slide: 100%; }
  .carousel--grid  { --slide: calc((100% - var(--gutter) * 2) / 3); }
  .carousel--video { --slide: calc((100% - var(--gutter) * 2) / 3); }
  .carousel--tall  { --slide: calc((100% - var(--gutter) * 3) / 4); }
  .carousel--video-4 { --slide: calc((100% - var(--gutter) * 3) / 4); }
}

/* --- Săgeți — doar desktop ----------------------------------------------- */
.carousel__nav { display: none; }

@media (min-width: 1024px) {
  .carousel__nav { display: flex; gap: var(--sp-2); }
}

/* --- Puncte de progres ---------------------------------------------------- */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--liniste);
  cursor: pointer;
  transition: width var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease);
}
.carousel__dot.is-active { width: 26px; background: var(--impuls); }
.carousel__dot:focus-visible { outline: 2px solid var(--impuls); outline-offset: 3px; }

/* Zona de atingere 44px fără a îngroșa punctul vizual */
.carousel__dots { position: relative; }
.carousel__dot { position: relative; }
.carousel__dot::after {
  content: "";
  position: absolute;
  inset: -18px -9px;
}

/* --- Card de slide video -------------------------------------------------- */
.video-card { position: relative; }
.video-card .media { border-radius: 0; }
.video-card__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.video-card__title { font-size: var(--fs-h4); margin: 0 0 var(--sp-1); }
.video-card__meta { font-size: var(--fs-xs); color: var(--reflectie); margin: 0; }

/* --- Slide tall (format reel) --------------------------------------------- */
.tall-card { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.tall-card .media { border-radius: 0; }

/* Titlurile de episod sunt lungi: pe card se taie la două rânduri, iar
   titlul întreg apare în player. */
.video-card__title--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Când toate elementele încap pe ecran, săgețile și punctele nu mai au ce
   arăta: dispar, iar rândul rămâne o grilă obișnuită. */
.carousel.is-static .carousel__nav,
.carousel.is-static .carousel__dots { display: none; }

/* --- .carousel--grid-lg (2026-10-05, decizia clientului) -------------------
   Carusel pe telefon și tabletă, grilă de la 1024px: patru coloane la
   --video-4, trei la --video, rânduri cât e nevoie. Banda nu mai iese din
   container și nu se mai derulează; săgețile și punctele dispar.
   .carousel__slide--extra: elementele de dincolo de numărul de rânduri ales
   rămân doar în caruselul de pe telefon. */
@media (min-width: 1024px) {
  .carousel--grid-lg .carousel__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    margin-inline: 0;
  }
  .carousel--grid-lg.carousel--video .carousel__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carousel--grid-lg .carousel__head,
  .carousel--grid-lg .carousel__dots,
  .carousel--grid-lg .carousel__slide--extra { display: none; }
}

/* --- Deck (2026-09-29, decizia clientului) ----------------------------------
   Galerie foto în teanc: o fotografie în față, iar în spatele ei cel mult două
   de fiecare parte, micșorate, care ies doar cu --deck-peek pe treaptă (8px pe
   telefon, 12px de la 768px). Săgețile stau pe laturile fotografiei (de la
   768px), punctele (.carousel__dot) dedesubt; pe telefon, swipe.
   components.js (initDecks) pune pe fiecare fotografie [data-pos], distanța
   față de cea activă (-3 … 3), și .is-ready pe .deck. Fără JavaScript
   fotografiile stau pe un rând derulant, cu snap, la aceeași lățime și
   înălțime ca fotografia activă: pagina nu sare când se formează teancul.
   Raportul îl dă .media (--wide / --tall / --square); înălțimea fotografiei
   nu trece de 75% din ecran, deci verticalele și pătratele sunt mai înguste. */
.deck {
  --deck-peek: var(--sp-2);
  --deck-max-h: 75vh;
  position: relative;
}
@media (min-width: 768px) { .deck { --deck-peek: var(--sp-3); } }

.deck__viewport {
  position: relative;
  margin-inline: auto;
}
.deck--wide .deck__viewport   { max-width: calc(var(--deck-max-h) * 16 / 9 + var(--deck-peek) * 4); }
.deck--tall .deck__viewport   { max-width: calc(var(--deck-max-h) * 4 / 5 + var(--deck-peek) * 4); }
.deck--square .deck__viewport { max-width: calc(var(--deck-max-h) + var(--deck-peek) * 4); }

.deck__stage {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--gutter);
  padding-inline: calc(var(--deck-peek) * 2);
  scroll-padding-inline: calc(var(--deck-peek) * 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.deck__stage::-webkit-scrollbar { display: none; }

.deck__card {
  position: relative;
  min-width: 0;
  border-radius: var(--r-md);
  scroll-snap-align: start;
}
.deck__card .gallery-item { border-radius: inherit; }
.deck__card .media { border-radius: inherit; }
.deck__card img { -webkit-user-drag: none; user-select: none; }

/* --- Teancul (cu JavaScript) --------------------------------------------- */
.deck.is-ready .deck__stage {
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "card";
  overflow: visible;
  touch-action: pan-y;
}

/* Scalarea pornește din centru; deplasarea (în % din propria lățime) aduce
   marginea fotografiei micșorate exact la marginea celei active, plus
   --deck-peek pe fiecare treaptă. */
.deck.is-ready .deck__card {
  --deck-scale: 1;
  --deck-shift: 0px;
  grid-area: card;
  z-index: 3;
  box-shadow: var(--shadow-card);
  transform: translateX(var(--deck-shift)) scale(var(--deck-scale));
  transition: transform var(--t-reveal) var(--ease), opacity var(--t-reveal) var(--ease),
              visibility var(--t-reveal);
}
.deck.is-ready .deck__card[data-pos="1"]  { --deck-scale: .92; --deck-shift: calc(4% + var(--deck-peek)); z-index: 2; }
.deck.is-ready .deck__card[data-pos="-1"] { --deck-scale: .92; --deck-shift: calc(-4% - var(--deck-peek)); z-index: 2; }
.deck.is-ready .deck__card[data-pos="2"]  { --deck-scale: .84; --deck-shift: calc(8% + var(--deck-peek) * 2); z-index: 1; }
.deck.is-ready .deck__card[data-pos="-2"] { --deck-scale: .84; --deck-shift: calc(-8% - var(--deck-peek) * 2); z-index: 1; }
/* Dincolo de a doua treaptă, fotografia așteaptă ascunsă în spatele ei. */
.deck.is-ready .deck__card[data-pos="3"]  { --deck-scale: .76; --deck-shift: calc(12% + var(--deck-peek) * 2); z-index: 0; opacity: 0; visibility: hidden; }
.deck.is-ready .deck__card[data-pos="-3"] { --deck-scale: .76; --deck-shift: calc(-12% - var(--deck-peek) * 2); z-index: 0; opacity: 0; visibility: hidden; }

/* Fotografiile din spate se estompează spre suprafața închisă (aceeași în
   ambele teme), ca atenția să rămână pe cea din față. */
.deck.is-ready .deck__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface-invers);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-reveal) var(--ease);
}
.deck.is-ready .deck__card[data-pos="1"]::after,
.deck.is-ready .deck__card[data-pos="-1"]::after { opacity: .2; }
.deck.is-ready .deck__card[data-pos="2"]::after,
.deck.is-ready .deck__card[data-pos="-2"]::after { opacity: .4; }

/* --- Săgeți: pe laturile fotografiei active, de la 768px ------------------ */
.deck__nav { display: none; }
@media (min-width: 768px) {
  .deck.is-ready .deck__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    padding-inline: calc(var(--deck-peek) * 2 + var(--sp-2));
    transform: translateY(-50%);
    pointer-events: none;
  }
  .deck__nav .deck__arrow { pointer-events: auto; }
}

/* Doar săgeata, fără cerc: albă (--on-invers, deschisă în ambele teme), cu o
   umbră închisă care o desprinde și de o fotografie albă. Zona de atingere
   rămâne 44×44. */
.deck__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-invers);
  cursor: pointer;
  opacity: .85;
  text-shadow: 0 1px 2px rgba(23, 20, 15, .55), 0 0 12px rgba(23, 20, 15, .35);
  transition: opacity var(--t-btn) var(--ease), transform var(--t-btn) var(--ease);
}
.deck__arrow i { font-size: 48px; line-height: 0; }
.deck__arrow:hover { opacity: 1; }
.deck__arrow[data-deck-prev]:hover { transform: translateX(calc(var(--sp-1) * -1)); }
.deck__arrow[data-deck-next]:hover { transform: translateX(var(--sp-1)); }
.deck__arrow:focus-visible { outline: none; opacity: 1; box-shadow: var(--focus-ring); }

/* --- Punctele ------------------------------------------------------------ */
.deck__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.deck__controls:empty,
.deck:not(.is-ready) .deck__controls { display: none; }
.deck__controls .carousel__dots { margin-top: 0; }