/* ==========================================================================
   Carduri — bază, feature, bandă gradient, statistici, tag-uri,
   card persoană, card curs, bandă CTA
   ========================================================================== */

/* --- Card de bază -------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--prezenta);
  color: var(--profunzime);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}

.card__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}
.card__body > * { margin-bottom: 0; }
.card__body--lg { padding: var(--sp-6); }
@media (min-width: 768px) {
  .card__body--lg { padding: var(--sp-7); }
}

.card__title { font-size: var(--fs-h4); margin: 0; }
.card__text { color: var(--reflectie); font-size: var(--fs-sm); }
.card__footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
/* În card, butonul ghost are fundalul vizibil din start: fără el, padding-ul
   lateral pare o indentare față de textul cardului. La hover se întărește. */
.card__footer .btn--ghost { background: var(--impuls-wash); }
.card__footer .btn--ghost:hover,
.card--interactive:hover .card__footer .btn--ghost { background: var(--impuls-wash-strong); }

/* Ridicare doar pe carduri clickable. Cardurile statice nu reacționează. */
.card--interactive { cursor: pointer; }
.card--interactive:hover,
.card--interactive:focus-within {
  transform: translateY(var(--lift-card));
  box-shadow: var(--shadow-card-hover);
}
.card--interactive:focus-within { outline: 2px solid var(--impuls); outline-offset: 3px; }

/* Un singur element se ridică odată. Dacă întregul card urcă la hover,
   butoanele din el rămân pe loc — altfel mișcarea se dublează și cardul
   pare că se destramă. Butonul își păstrează schimbarea de culoare. */
.card--interactive:hover .btn,
.card--interactive:hover .btn-icon,
.card--interactive .btn:hover,
.card--interactive .btn-icon:hover,
.cta-band .btn:hover { transform: none; }

/* Link care acoperă tot cardul, păstrând un singur tab stop */
.card__link { color: inherit; text-decoration: none; }
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card__link:focus-visible { outline: none; }
/* Butonul-text al unui card clickabil (<span class="btn">) nu e al doilea link:
   .btn e position: relative și stătea deasupra lui ::after, deci click-ul pe el
   nu ducea nicăieri. Click-ul trece la linkul cardului. */
.card--interactive span.btn { pointer-events: none; }

/* --- Bandă gradient în capul cardului ----------------------------------- */
.card__band {
  position: relative;
  background: var(--gradient-impuls);
  color: #FFFFFF;
  padding: var(--sp-6);
  overflow: hidden;
}
.card__band--tall { padding: var(--sp-6); }
@media (min-width: 768px) {
  .card__band--tall { padding: var(--sp-7) var(--sp-6); }
}
.card__band--thin { padding: var(--sp-4) var(--sp-6); }
.card__band h1, .card__band h2, .card__band h3, .card__band h4 { color: #FFFFFF; }
.card__band p { color: rgba(255,255,255,.9); }
.card__band > *:not(.watermark) { position: relative; z-index: 1; }
.card__band .watermark { z-index: 0; }

.card__band--profunzime { background: var(--surface-invers); color: var(--on-invers); }
.card__band--profunzime h1, .card__band--profunzime h2,
.card__band--profunzime h3, .card__band--profunzime h4 { color: var(--on-invers); }
.card__band--profunzime p { color: rgba(255,255,255,.72); }

/* Bandă cu fotografie (2026-10-01, decizia clientului): capul cardului e o
   fotografie în raport fix, până în marginile cardului (sus, stânga,
   dreapta), cu titlul peste ea, în stânga jos. Banda nu are umplutură:
   fotografia și titlul stau în aceeași celulă de grilă, iar umplutura e
   doar a titlului. Stratul se închide spre margine, ca titlul alb să aibă
   contrast pe orice fotografie. Fără fotografie, banda rămâne Profunzime. */
.card__band.card__band--photo {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--surface-invers);
}
.card__band.card__band--photo-4-3 { aspect-ratio: 4 / 3; }
.card__band.card__band--photo-1-1 { aspect-ratio: 1; }
.card__band--photo > * { grid-area: 1 / 1; }
.card__band.card__band--photo > .card__band-img {
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.card__band--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,20,15,0) 35%, rgba(23,20,15,.8) 100%);
}
.card__band--photo > .card__title {
  align-self: end;
  padding: var(--sp-6);
}

/* --- Card feature — fundal Profunzime, accent Împlinire ----------------- */
.card--feature {
  background: var(--surface-invers);
  color: var(--on-invers);
  border: var(--card-border);
}
.card--feature h1, .card--feature h2, .card--feature h3, .card--feature h4 { color: var(--on-invers); }
.card--feature .card__text,
.card--feature p { color: rgba(255,255,255,.72); }
.card--feature .stat__value { color: var(--implinire); }
.card--feature .icon-duo { background: rgba(255,255,255,.1); color: var(--impuls-light); box-shadow: none; }
.card--feature .stat__label { color: rgba(255,255,255,.72); }
.card--feature .hairline { border-color: rgba(255,255,255,.12); }

.card--gift { position: relative; }
/* Cardul cadou poartă Împlinire ca suprafață plată. Auriul nu intră în
   gradient: amestecat cu portocaliul dă o zonă noroioasă, fără contur. */
.card--gift .card__band {
  background: var(--implinire);
  color: var(--profunzime);
}
.card--gift .card__band h1, .card--gift .card__band h2,
.card--gift .card__band h3, .card--gift .card__band h4 { color: #17140F; }
.card--gift .card__band p { color: rgba(23, 20, 15, .78); }

/* --- Iconiță duotone ----------------------------------------------------- */
.icon-duo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--impuls-wash-strong);
  color: var(--impuls);
  box-shadow: var(--shadow-icon);
}
.icon-duo i { font-size: 24px; line-height: 0; }

.icon-duo--sm { width: 40px; height: 40px; border-radius: var(--r-sm); }
.icon-duo--sm i { font-size: 18px; }
.icon-duo--lg { width: 64px; height: 64px; }
.icon-duo--lg i { font-size: 28px; }

.icon-duo--implinire { background: var(--implinire-wash); color: var(--implinire-text); box-shadow: none; }
.icon-duo--on-dark { background: rgba(255,255,255,.1); color: var(--impuls-light); box-shadow: none; }
.icon-duo--on-band { background: rgba(255,255,255,.18); color: #FFFFFF; box-shadow: none; }

/* --- Imagine pătrată în capul cardului (2026-09-23) -----------------------
   Alternativa la .icon-duo: o fotografie sau un logo, decupat pătrat.
   Mărimile vin din scala de spațiere: 64 / 96 / 128px. */
.card__thumb {
  display: block;
  width: var(--sp-9);
  height: var(--sp-9);
  flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--liniste);
  box-shadow: var(--shadow-icon);
}
.card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__thumb--sm { width: var(--sp-8); height: var(--sp-8); border-radius: var(--r-sm); }
.card__thumb--lg { width: var(--sp-10); height: var(--sp-10); }

/* --- Rând de statistici -------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-5);
}
.stats--bordered { border-top: var(--hairline); padding-top: var(--sp-5); }

.stat { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.stat--center { align-items: center; text-align: center; }

.stat__icon {
  color: var(--impuls);
  font-size: 20px;
  line-height: 0;
  margin-bottom: var(--sp-2);
  display: inline-flex;
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  line-height: 1.1;
  letter-spacing: var(--ls-heading);
  color: var(--profunzime);
}
.stat__value--implinire { color: var(--implinire-text); }
.stat__label {
  font-size: var(--fs-xs);
  color: var(--reflectie);
  line-height: 1.35;
}

/* Mărimea cifrei (2026-09-29, decizia clientului). Implicit mare; --md mai
   mică, tot în Poppins; --sm are mărimea și fontul paragrafului, iar
   iconița e cât textul. */
.stats--md .stat__value { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); }
.stats--sm .stat__value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-heading);
  letter-spacing: normal;
}
.stats--sm .stat__icon { font-size: var(--fs-body); margin-bottom: var(--sp-1); }

.card__band .stat__value,
.card__band .stat__icon { color: #FFFFFF; }
.card__band .stat__label { color: rgba(255,255,255,.85); }

/* Pe telefon (2026-10-01, decizia clientului): fiecare statistică e un rând
   în trei coloane — iconița, valoarea pe o lățime fixă, eticheta — ca
   valorile și etichetele să stea aliniate de la un rând la altul. Între
   rânduri, o linie fină, translucidă. Fără iconițe în tot blocul, rămân
   două coloane. Peste 768px, rândul de statistici rămâne ca înainte. */
@media (max-width: 767px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stat,
  .stat--center {
    display: grid;
    grid-template-columns: var(--sp-6) minmax(0, 5fr) minmax(0, 4fr);
    column-gap: var(--sp-4);
    align-items: center;
    text-align: left;
    padding-block: var(--sp-4);
  }
  .stat + .stat { border-top: 1px solid var(--profunzime-wash); }
  .stat:first-child { padding-top: 0; }
  .stat:last-child { padding-bottom: 0; }
  .stat__icon { grid-column: 1; margin-bottom: 0; justify-content: center; }
  .stat__value { grid-column: 2; }
  .stat__label { grid-column: 3; }
  .stats:not(:has(.stat__icon)) .stat { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
  .stats:not(:has(.stat__icon)) .stat__value { grid-column: 1; }
  .stats:not(:has(.stat__icon)) .stat__label { grid-column: 2; }
  .stats--sm .stat__icon { margin-bottom: 0; }
  /* Valoarea stă lângă etichetă, nu deasupra: „Mare” și „Mediu” au pe
     telefon aceeași mărime potrivită rândului; „Mic” rămâne cât textul. */
  .stats:not(.stats--sm) .stat__value { font-size: var(--fs-h4); line-height: var(--lh-heading); }

  /* Pe suprafețele închise, linia e albă, la fel de discretă. */
  .card--feature .stat + .stat,
  .card__band .stat + .stat,
  .band--profunzime .stat + .stat,
  .band--impuls .stat + .stat,
  .band--imagine .stat + .stat,
  .band--video .stat + .stat { border-top-color: rgba(255, 255, 255, .12); }
}

/* --- Tag-uri ------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--impuls-wash);
  color: var(--impuls-text);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.tag i { font-size: 14px; line-height: 0; }

/* Intr-un corp de card (flex column) tag-ul nu se intinde pe latime */
.card__body > .tag,
.course__body > .tag,
.video-card__body > .tag { align-self: flex-start; }

.tag--implinire { background: var(--implinire-wash); color: var(--implinire-text); }
.tag--neutru { background: var(--profunzime-wash); color: var(--profunzime); }
.tag--solid { background: var(--impuls); color: #FFFFFF; }
/* Sta peste o fotografie, nu peste o suprafata de tema: ramane deschis
   in ambele teme, ca sa fie lizibil peste orice imagine. */
.tag--on-media {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 2;
  background: #FFFFFF;
  color: var(--impuls-dark);
  box-shadow: var(--shadow-card);
}

/* --- Meta cu iconițe ----------------------------------------------------- */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  color: var(--reflectie);
  font-size: var(--fs-sm);
}
.meta__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.meta__item i { font-size: 16px; line-height: 0; color: var(--impuls); }

/* --- Preț ---------------------------------------------------------------- */
.price { display: flex; align-items: baseline; gap: var(--sp-2); }
.price__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: var(--ls-heading);
  color: var(--profunzime);
}
.price__note { font-size: var(--fs-xs); color: var(--reflectie-light); }
/* Preț redus: prețul întreg, tăiat, înaintea celui curent. <s> îl marchează
   ca nemaivalabil; textul ascuns („Preț întreg:”, „Preț redus:”) îl spune și
   cititoarelor de ecran, care nu anunță tăietura. */
.price__old {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--reflectie-light);
  text-decoration-thickness: 1px;
}

/* --- Card persoană (§13) ------------------------------------------------- */
.person { text-align: left; }
.person__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--liniste);
  margin-bottom: var(--sp-4);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--profunzime);
  margin: 0 0 var(--sp-1);
}
.person__role { font-size: var(--fs-sm); color: var(--reflectie); margin: 0; }

/* --- Card curs (§14) ----------------------------------------------------- */
.course .media { border-radius: 0; }
.course__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
}
.course__title { font-size: var(--fs-h4); margin: 0; }
.course__footer {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* --- Rând de acreditări -------------------------------------------------- */
.credentials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
}
.credential {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--reflectie);
}
.credential i { font-size: 18px; line-height: 0; color: var(--impuls); }

/* --- Rând de logo-uri (acreditări) ------------------------------------------
   Logo-urile sunt ale altor organizații, cu culorile lor. Monocrome, ca rândul
   să nu concureze cu paleta paginii; culoarea revine la hover, doar pe cele
   cu link. Înălțime fixă, lățime liberă — logo-urile late nu domină, cele
   pătrate nu dispar.
   Fiecare acreditare poate avea o variantă pentru fundal închis
   (.logo-row__logo--inchis). Fundalul îl spune rândul (.logo-row--inchis) sau
   tema întunecată. Fără variantă, logo-ul pentru fundal deschis devine alb:
   un logo negru sau color nu are pe fundal închis contrast garantat. */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5) var(--sp-6);
}
.logo-row__item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.logo-row__logo {
  display: block;
  width: auto;
  height: var(--sp-6);
  max-width: calc(var(--sp-10) + var(--sp-5));
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter var(--t-btn) var(--ease), opacity var(--t-btn) var(--ease);
}
a.logo-row__item:hover .logo-row__logo,
a.logo-row__item:focus-visible .logo-row__logo { filter: none; opacity: 1; }

/* Pe fundal deschis se vede doar varianta pentru fundal deschis. */
.logo-row__logo--inchis { display: none; }

/* Pe fundal închis: varianta proprie, dacă există... */
:is(.logo-row--inchis, [data-theme="dark"] .logo-row) .logo-row__logo:not(.logo-row__logo--inchis):not(:only-child) { display: none; }
:is(.logo-row--inchis, [data-theme="dark"] .logo-row) .logo-row__logo--inchis { display: block; }
/* ...altfel logo-ul pentru fundal deschis, alb, și la hover. */
:is(.logo-row--inchis, [data-theme="dark"] .logo-row) .logo-row__logo:only-child {
  filter: brightness(0) invert(1);
  opacity: .8;
}
:is(.logo-row--inchis, [data-theme="dark"] .logo-row) a.logo-row__item:is(:hover, :focus-visible) .logo-row__logo:only-child {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* --- Bandă CTA ----------------------------------------------------------- */
.cta-band {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--gradient-impuls);
  color: #FFFFFF;
  padding: var(--sp-6);
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.cta-band > *:not(.watermark) { position: relative; z-index: 1; }
.cta-band h2, .cta-band h3 { color: #FFFFFF; margin: 0 0 var(--sp-2); }
.cta-band p { color: rgba(255,255,255,.9); margin: 0; }
.cta-band__text { max-width: 46ch; }
.cta-band .btn--secondary { background: var(--prezenta); color: var(--profunzime); }
.cta-band .btn--secondary:hover { background: var(--prezenta); color: var(--impuls-dark); }

@media (min-width: 768px) {
  .cta-band { padding: var(--sp-8) var(--sp-7); }
}

/* --- Listă cu bife -------------------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.check-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
.check-list i { color: var(--impuls); font-size: 16px; line-height: 0; margin-top: 4px; flex: none; }
.card__band .check-list i,
.card--feature .check-list i { color: var(--implinire); }
.card__band .check-list li { color: rgba(255,255,255,.95); }
/* Linkurile din listă: pe suprafețele închise, culoarea textului, subliniate.
   --impuls-text nu trece acolo de 4.5:1. */
.card__band .check-list a,
.card--feature .check-list a,
:where(.band--profunzime, .band--impuls) .check-list a:not(.card *) { color: inherit; }
/* Varianta numerotată (<ol>): cifra albă într-un cerc Impuls, în locul bifei.
   Impuls dark, nu Impuls: cifra albă trece de 4.5:1 doar pe treapta închisă. */
.check-list--numbered { counter-reset: check-list; }
.check-list--numbered li { counter-increment: check-list; }
.check-list--numbered li::before {
  content: counter(check-list);
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-5);
  height: var(--sp-5);
  border-radius: var(--r-full);
  background: var(--impuls-dark);
  color: var(--on-invers);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
}

/* Sub-listă într-un rând (2026-10-05, decizia clientului): <ul class="check-list__sub">
   după textul punctului. Bulină Impuls în locul bifei, la 14px de marginea bifei
   (valoare cerută de client, fără token). Rândul trece pe două linii: bifa și
   textul sus, sub-lista dedesubt, pe toată lățimea. */
.check-list li:has(> .check-list__sub) { flex-wrap: wrap; row-gap: var(--sp-2); }
.check-list li:has(> .check-list__sub) > span { flex: 1 1 0; min-width: 0; }
.check-list__sub {
  flex-basis: 100%;
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  display: grid;
  gap: var(--sp-2);
}
.check-list__sub li { gap: var(--sp-2); }
.check-list--numbered .check-list__sub li { counter-increment: none; }
.check-list .check-list__sub li::before {
  content: "";
  flex: none;
  display: block;
  width: .375em;
  height: .375em;
  margin-top: .6em;
  border-radius: var(--r-full);
  background: var(--impuls);
}
.card__band .check-list__sub li::before,
.card--feature .check-list__sub li::before { background: var(--implinire); }

/* Bandă CTA fără suprafață proprie — când stă deja într-un bloc colorat pe
   toată lățimea, nu mai are nevoie de fundal și umbră. */
.cta-band--plain {
  background: none;
  box-shadow: none;
  padding: 0;
}

/* ==========================================================================
   Întâlnire de comunitate Premium (2026-09-25, decizia clientului)
   Întâlnirile țin de abonamentul Premium, nu de cursuri: rândul nu seamănă
   cu .calendar__row. Poartă registrul ofertei (.card--feature): suprafața
   cerneală, auriul Împlinire pe iconițe, eticheta „Comunitate
   Premium” (.eyebrow--implinire). Nu se inversează cu tema. Butoanele iau
   contextul .on-dark, pus pe rând.
   ========================================================================== */

.meeting-list { display: grid; gap: var(--sp-4); }

.meeting {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface-invers);
  color: var(--on-invers);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) {
  .meeting {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-6);
  }
}

/* Imaginea: pătrat mic în stânga (.media--square); fără imagine, fundalul
   grafic al sistemului (.media--placeholder). Data stă în .meta, lângă oră.
   Selectorul are două clase: .media (media.css, width: 100%) se încarcă după
   cards.css și, la egalitate, ar întinde imaginea pe tot rândul (2026-09-28). */
.meeting > .meeting__media {
  width: 96px;
  justify-self: start;
  align-self: start;
}
@media (min-width: 768px) {
  .meeting > .meeting__media { width: 128px; align-self: center; }
}
.meeting__main { display: grid; gap: var(--sp-2); min-width: 0; }
.meeting__main .eyebrow { margin-bottom: 0; }
.meeting__title { margin: 0; font-size: var(--fs-h4); color: var(--on-invers); }
/* Titlul și imaginea deschid detaliile. */
.meeting__title a { color: inherit; text-decoration: none; transition: color var(--t-btn) var(--ease); }
.meeting__title a:hover { color: var(--implinire); }
.meeting__title a:focus-visible { outline: none; border-radius: var(--r-sm); box-shadow: var(--focus-ring); }
a.meeting__media img { transition: transform var(--t-card) var(--ease); }
a.meeting__media:hover img { transform: scale(1.04); }
.meeting .meta { color: rgba(255, 255, 255, .7); }
.meeting .meta__item i { color: var(--implinire); }
.meeting .tag--neutru { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); }
.meeting__text { margin: 0; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }

.meeting__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .meeting__side { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Grilă de carduri cu imagine, pe telefon doar imaginile (2026-09-25,
   decizia clientului)
   .grid--tiles, sub 768px: cardurile cu imagine (.card__thumb) devin
   pătrate, câte două pe rând — imaginea pe tot cardul, titlul în stânga
   jos, peste un gradient; textul și butonul se ascund, linkul rămâne pe tot
   cardul. Cardurile fără imagine rămân carduri obișnuite. Pe tabletă și
   desktop nu se schimbă nimic.
   ========================================================================== */
@media (max-width: 767px) {
  .grid--tiles { --cols: 2; gap: var(--sp-5); }

  /* Imaginea stă sub text prin z-index negativ, în contextul propriu al
     cardului; titlul rămâne static, ca .card__link::after să acopere tot
     cardul, nu doar titlul. */
  .grid--tiles > .card:has(.card__thumb) {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    isolation: isolate;
  }
  .grid--tiles > .card:has(.card__thumb) .card__body {
    justify-content: flex-end;
    padding: var(--sp-4);
  }
  .grid--tiles .card__thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    z-index: -1;
  }
  .grid--tiles .card__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 20, 15, .78), rgba(23, 20, 15, 0) 60%);
  }
  .grid--tiles > .card:has(.card__thumb) .card__title {
    font-size: var(--fs-body);
    color: #FFFFFF;
  }
  .grid--tiles > .card:has(.card__thumb) .card__text,
  .grid--tiles > .card:has(.card__thumb) .card__footer { display: none; }

  /* Marginile pătratelor (2026-09-30, decizia clientului): pe fotografiile
     închise la margini cardul se confunda cu fundalul. Un contur fin și o
     umbră de separare, prin box-shadow, ca dimensiunile să nu se schimbe.
     Imaginea stă sub z-index negativ și ar acoperi un contur inset pus pe
     card, deci conturul stă pe ::after, deasupra ei, fără să prindă click-ul.
     La apăsare, la hover (pe telefon, atingerea) și la focus de la tastatură
     pătratul crește ușor, nu se ridică ca un card obișnuit, iar conturul se
     aprinde. */
  .grid--tiles > .card:has(.card__thumb) {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .8);
    transition: transform var(--t-btn) var(--ease), box-shadow var(--t-btn) var(--ease);
  }
  .grid--tiles > .card:has(.card__thumb)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .28);
    pointer-events: none;
    transition: box-shadow var(--t-btn) var(--ease);
  }
  .grid--tiles > .card--interactive:has(.card__thumb):hover,
  .grid--tiles > .card--interactive:has(.card__thumb):active,
  .grid--tiles > .card--interactive:has(.card__thumb):has(:focus-visible) {
    transform: scale(1.02);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .8);
  }
  .grid--tiles > .card--interactive:has(.card__thumb):hover::after,
  .grid--tiles > .card--interactive:has(.card__thumb):active::after,
  .grid--tiles > .card--interactive:has(.card__thumb):has(:focus-visible)::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .38);
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .grid--tiles > .card--interactive:has(.card__thumb):hover,
  .grid--tiles > .card--interactive:has(.card__thumb):active,
  .grid--tiles > .card--interactive:has(.card__thumb):has(:focus-visible) { transform: none; }
}