/* ==========================================================================
   Blocuri de secțiune pe toată lățimea
   Fundalul se întinde de la margine la margine; conținutul rămâne aliniat
   la containerul paginii, deci nu iese din grila restului paginii.
   ========================================================================== */

.band {
  position: relative;
  width: 100%;
  padding-block: var(--section-y);
  overflow: hidden;
}

/* Conținutul folosește containerul obișnuit — nimic nu se aliniază diferit
   față de secțiunile fără fundal. */
.band > .container { position: relative; z-index: 1; }

.band--tight { padding-block: var(--sp-7); }
.band--flush { padding-block: 0; }

/* Traseul sus (2026-10-05): bara stă lipită de marginea de sus a benzii, iar
   spațiul obișnuit al benzii începe sub ea. */
.band--traseu { padding-top: 0; }
.band--traseu > .breadcrumb-bar { margin-bottom: var(--section-y); }
.band--traseu.band--tight > .breadcrumb-bar { margin-bottom: var(--sp-7); }
.band--traseu.band--flush > .breadcrumb-bar { margin-bottom: 0; }

/* --- Variante de fundal ---------------------------------------------------- */
.band--claritate { background: var(--claritate); }
.band--prezenta  { background: var(--prezenta); }
/* Liniște e un ton gândit pentru hairline, nu pentru suprafețe mari: pe el,
   textul secundar obișnuit scade sub prag. De aceea banda își coboară local
   cele două tonuri de text secundar. */
.band--liniste {
  background: var(--liniste);
  --reflectie: #6E695E;
  --reflectie-light: #70695C;
}
[data-theme="dark"] .band--liniste {
  --reflectie: #ABA396;
  --reflectie-light: #979083;
}

.band--profunzime {
  background: var(--surface-invers);
  color: var(--on-invers);
}
.band--impuls {
  background: var(--gradient-impuls);
  color: #FFFFFF;
}
/* Suprafață plată, nu gradient: auriul se degradează urât în amestec. */
.band--implinire {
  background: var(--implinire);
  color: #17140F;
}

/* Pe fundal închis sau colorat, ierarhia de text se recalibrează — dar numai
   pentru text „liber", pus direct în bandă. :not(:is(.card, …) *) exclude complet
   textul din componentele cu suprafață proprie (.card e pe --prezenta,
   indiferent de banda-părinte). O egalitate de specificitate nu ar fi fost
   suficientă aici: blocurile-copil (card, grid…) se randează înaintea
   blocului-părinte banda, deci CSS-ul benzii ajunge mereu ULTIMUL în cascadă
   și ar câștiga orice egalitate — de-asta excluderea explicită, nu :where().
   Lista cuprinde toate componentele cu suprafață albă proprie care nu sunt
   .card (testimonialul, recenziile, capturile, persoana pe suprafață, rândul
   de calendar, navigarea seriilor, PDF-ul); fără ele, citatul unui
   testimonial ieșea alb pe alb într-o bandă Profunzime (2026-09-27).
   :is() ia specificitatea celui mai specific argument, deci rămâne (0,1,0). */
.band--profunzime :where(h1, h2, h3, h4):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *),
.band--impuls :where(h1, h2, h3, h4):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *) { color: inherit; }

.band--profunzime :where(.lead, p):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *),
.band--impuls :where(.lead, p):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *) { color: rgba(255, 255, 255, .78); }

/* Fotografia și video-ul au strat închis peste fundal: aceeași ierarhie ca pe
   Profunzime. Fără ele, cifrele din Stats rămâneau negre pe video (2026-09-28). */
.band--profunzime .text-label,
.band--impuls .text-label,
.band--imagine .text-label,
.band--video .text-label { color: rgba(255, 255, 255, .7); }

.band--profunzime .eyebrow,
.band--imagine .eyebrow,
.band--video .eyebrow { color: var(--implinire); }
.band--impuls .eyebrow { color: rgba(255, 255, 255, .85); }
.band--profunzime .eyebrow--neutral,
.band--impuls .eyebrow--neutral,
.band--imagine .eyebrow--neutral,
.band--video .eyebrow--neutral { color: inherit; }

.band--profunzime .hairline,
.band--impuls .hairline,
.band--imagine .hairline,
.band--video .hairline,
.band--profunzime .grid > .stack + .stack,
.band--impuls .grid > .stack + .stack,
.band--imagine .grid > .stack + .stack,
.band--video .grid > .stack + .stack { border-color: rgba(255, 255, 255, .14) !important }
/* Pe Liniște, linia obișnuită are chiar culoarea fundalului și dispare. */
.band--liniste .hairline,
.band--liniste .grid > .stack + .stack { border-color: var(--profunzime-wash); }
/* Linia de deasupra statisticilor (Rând de statistici cu bordură), la fel ca
   .hairline: albă pe fundalurile închise, vizibilă pe Liniște (2026-10-05).
   Specificitatea benzii o întrece pe cea din cards.css, fără !important. */
.band--profunzime .stats--bordered,
.band--impuls .stats--bordered,
.band--imagine .stats--bordered,
.band--video .stats--bordered { border-top-color: rgba(255, 255, 255, .14); }
.band--liniste .stats--bordered { border-top-color: var(--profunzime-wash); }

.band--profunzime .stat__value,
.band--impuls .stat__value,
.band--imagine .stat__value,
.band--video .stat__value { color: inherit; }
.band--profunzime .stat__icon,
.band--imagine .stat__icon,
.band--video .stat__icon { color: var(--impuls-light); }
.band--impuls .stat__icon { color: #FFFFFF; }
.band--profunzime .stat__label,
.band--impuls .stat__label,
.band--imagine .stat__label,
.band--video .stat__label { color: rgba(255, 255, 255, .7); }

.band--implinire h1, .band--implinire h2,
.band--implinire h3, .band--implinire h4 { color: #17140F; }
.band--implinire .lead,
.band--implinire p { color: rgba(23, 20, 15, .78); }

/* --- Bandă încadrată --------------------------------------------------------
   Suprafața nu mai merge de la margine la margine: se oprește la container,
   cu hairline și colțuri mari. Pentru secțiunile care trebuie desprinse de
   restul paginii fără să devină o bandă colorată. */
.band--rama > .container {
  background: var(--prezenta);
  border: var(--hairline);
  border-radius: var(--r-lg);
  padding-block: var(--sp-6);
}
@media (min-width: 768px) {
  .band--rama > .container { padding-block: var(--sp-7); }
}
/* Pe telefon .container ține toată lățimea ecranului, deci rama ar atinge
   marginile lui: se retrage la marginea paginii (--margin), iar conținutul
   păstrează un spațiu mai mic în interiorul ramei (2026-09-28). */
@media (max-width: 767px) {
  .band--rama > .container {
    width: auto;
    margin-inline: var(--margin);
    padding-inline: var(--sp-4);
  }
}

/* --- Fundal din imagine ----------------------------------------------------
   Imaginea intră ca fundal pe wrapper; peste ea stă un strat Profunzime,
   fără de care textul nu are contrast garantat. */
.band--imagine {
  background: var(--surface-invers);
  color: var(--on-invers);
}
.band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,20,15,.82) 0%, rgba(23,20,15,.68) 100%);
}
.band--imagine :where(h1, h2, h3, h4):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *),
.band--video :where(h1, h2, h3, h4):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *) { color: inherit; }
.band--imagine :where(.lead, p):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *),
.band--video :where(.lead, p):not(:is(.card, .testimonial, .reviews, .proof, .person--card, .calendar__row, .series-nav, .pdf-viewer) *) { color: rgba(255, 255, 255, .8); }

/* --- Fundal din video (YouTube) -------------------------------------------
   Playerul îl pune components.js după încărcarea paginii și devine vizibil
   abia când rulează; până atunci se vede imaginea (poster). Stratul colorat
   stă peste player, cu culoarea și acoperirea alese din opțiuni finite. */
.band--video {
  background: var(--surface-invers);
  color: var(--on-invers);
}
.band__bg--video {
  overflow: hidden;
  container-type: size;
}
.band__bg--video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Acoperă banda la orice raport, ca object-fit: cover pe un 16:9, apoi
     încă un sfert, ca marginile playerului (titlul, eticheta de promovare,
     logo-ul YouTube) să cadă în afara benzii. */
  --video-zoom: 1.25;
  width: calc(max(100cqw, 177.78cqh) * var(--video-zoom));
  height: calc(max(100cqh, 56.25cqw) * var(--video-zoom));
  translate: -50% -50%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease-reveal);
}
.band__bg--video.is-playing iframe { opacity: 1; }
/* Imaginea de așteptare dispare după ce video-ul a apărut complet: altfel, pe
   telefon, se vede prin trecerea în fundal de sub video (masca de la „Sus, N%”).
   La pauză revine imediat, cât playerul se estompează. */
.band__bg--video img { transition: visibility 0s; }
.band__bg--video.is-playing img { visibility: hidden; transition-delay: var(--t-reveal); }

.band__bg--video::after {
  background: var(--strat-bg, var(--surface-invers));
  opacity: var(--strat-opacitate, .65);
}
.band__bg--profunzime { --strat-bg: var(--surface-invers); }
.band__bg--impuls     { --strat-bg: var(--gradient-impuls); }
.band__bg--strat-50   { --strat-opacitate: .5; }
.band__bg--strat-65   { --strat-opacitate: .65; }
.band__bg--strat-80   { --strat-opacitate: .8; }

/* Pe telefon, o bandă înaltă ar mări video-ul până rămân doar fețele.
   „Sus, N%”: video-ul (și imaginea până pornește) stă lipit sus, la N ori
   lățimea benzii, cu același zoom care ascunde marginile playerului, și se
   pierde în jos în fundalul benzii. Stratul colorat rămâne peste tot. */
@media (max-width: 767px) {
  .band__bg--mobil-100 { --video-mobil: 1; }
  .band__bg--mobil-200 { --video-mobil: 2; }
  .band__bg--mobil-300 { --video-mobil: 3; }
  .band__bg--mobil-400 { --video-mobil: 4; }
  .band__bg--mobil iframe,
  .band__bg--mobil img {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100cqw * var(--video-mobil) * var(--video-zoom, 1.25));
    height: calc(56.25cqw * var(--video-mobil) * var(--video-zoom, 1.25));
    /* Zoomul taie o zecime sus, ca pe desktop; jos taie masca. */
    translate: -50% -10%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
}

/* --- Filigran în bandă ------------------------------------------------------ */
.band > .watermark {
  z-index: 0;
  right: -60px;
  bottom: -80px;
  width: 320px;
}

/* --- Bandă împărțită în două ------------------------------------------------
   Jumătate colorată, jumătate pe canvas — pentru un bloc care trebuie să
   iasă din pagină fără să devină o secțiune portocalie întreagă. */
.band--split {
  padding-block: 0;
  background: linear-gradient(to bottom, transparent 0 50%, var(--claritate) 50% 100%);
}
.band--split > .container { padding-block: var(--sp-7); }