/* ==========================================================================
   Imagini și wrappere — .media--wide (16:9) și .media--tall (4:5)
   Wrapperul fixează raportul; imaginea umple prin object-fit: cover.
   ========================================================================== */

.media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--profunzime);
}

.media img,
.media video,
.media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

.media--wide { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1 / 1; }
.media--lg { border-radius: var(--r-lg); }

/* Lățime maximă (2026-09-28, decizia clientului): o imagine mai îngustă decât
   coloana, pentru logo-uri, mockup-uri, capturi. Lățimi fixe, nu libere, la
   fel pe toate ecranele. Implicit stă la stânga; --center și --end o mută. */
.media--max-75 { max-width: 75%; }
.media--max-66 { max-width: 66.666%; }
.media--max-50 { max-width: 50%; }
.media--max-33 { max-width: 33.333%; }
.media--max-25 { max-width: 25%; }
.media--center { margin-inline: auto; }
.media--end { margin-left: auto; }

/* Imagine decupată (PNG transparent: mockup de produs, obiect pe fundal gol),
   nu fotografie. Se încadrează întreagă, fără tăiere, pe o suprafață neutră;
   raportul rămâne cel al wrapperului, deci cardurile vecine se aliniază. */
.media--contain { background: var(--liniste); }
.media--contain img {
  object-fit: contain;
  padding: var(--sp-4);
}

/* --- Placeholder generativ (până apar fotografiile) --------------------
   Negru, portocaliu și un gri cald. Fundalul e suprafața inversă, nu
   Profunzime: Profunzime e și culoare de text, deci s-ar inversa cu tema
   și placeholderul ar deveni alb în varianta întunecată. */
.media--placeholder {
  background:
    radial-gradient(115% 95% at 82% 10%, var(--reflectie) 0%, rgba(122, 116, 104, 0) 64%),
    radial-gradient(105% 90% at 8% 88%, var(--impuls) 0%, rgba(235, 99, 54, 0) 66%),
    var(--surface-invers);
}

/* Grafit — griul domină, portocaliul rămâne un accent în colț. */
.media--placeholder-grafit {
  background:
    radial-gradient(120% 100% at 18% 8%, var(--reflectie) 0%, rgba(122, 116, 104, 0) 62%),
    radial-gradient(100% 85% at 92% 86%, var(--impuls) 0%, rgba(235, 99, 54, 0) 60%),
    var(--surface-invers);
}

/* Adânc — cel mai mult negru, pentru imaginile care stau sub text. */
.media--placeholder-adanc {
  background:
    radial-gradient(110% 90% at 50% 4%, var(--impuls) 0%, rgba(235, 99, 54, 0) 58%),
    radial-gradient(95% 80% at 12% 96%, var(--reflectie) 0%, rgba(122, 116, 104, 0) 56%),
    var(--surface-invers);
}

/* Inițiala persoanei peste placeholder */
.media__initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  color: rgba(255,255,255,.85);
  letter-spacing: var(--ls-heading);
}

/* --- Buton de play peste media 16:9 ------------------------------------- */
.media__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(23,20,15,.16);
  cursor: pointer;
  transition: background-color var(--t-card) var(--ease);
  padding: 0;
  /* Când declanșatorul e un <a>, linkul nu subliniază iconița. */
  text-decoration: none;
}
.media__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  background: var(--prezenta);
  color: var(--impuls);
  padding-left: 3px;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-card) var(--ease);
}
.media__play-icon i { font-size: 24px; line-height: 0; }
.media__play:hover { background: rgba(23,20,15,.28); }
.media__play:hover .media__play-icon { transform: scale(1.08); }
.media__play:focus-visible { outline: 3px solid var(--impuls); outline-offset: -3px; }

.media__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(23,20,15,.78), rgba(23,20,15,0));
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  pointer-events: none;
}
.media__caption span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.8);
  margin-top: 2px;
}

/* --- Modal video ---------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--margin);
  background: rgba(23,20,15,.72);
  backdrop-filter: blur(4px);
}
.modal.is-open { display: flex; }

.modal__dialog {
  position: relative;
  z-index: var(--z-modal);
  width: min(960px, 100%);
  background: var(--prezenta);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
  animation: modal-in var(--t-card) var(--ease);
}
.modal__dialog .media { border-radius: 0; }
.modal__body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.modal__body h3 { margin-bottom: var(--sp-1); }
.modal__body p { color: var(--reflectie); font-size: var(--fs-sm); }

.modal__close {
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-4);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-full);
  background: var(--prezenta);
  color: var(--profunzime);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--t-btn) var(--ease), color var(--t-btn) var(--ease);
}
.modal__close i { font-size: 20px; line-height: 0; }
.modal__close:hover { transform: translateY(var(--lift-btn)); color: var(--impuls); }
.modal__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Fereastră de text (2026-09-25, decizia clientului): detaliile unei
   întâlniri de comunitate. Mai îngustă decât playerul. Imaginea, cu butonul
   de acțiune peste ea, rămâne pe loc; derulează doar zona albă cu textul,
   când e mai lung decât ecranul. */
.modal__dialog--text {
  width: min(640px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.modal__media { position: relative; flex: none; }
/* Pe ecranele joase imaginea cedează loc textului. */
.modal__media .media { max-height: 40vh; }
.modal__action {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
}
.modal__dialog--text .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal__dialog { animation: none; }
}

/* Fereastra de abonare (2026-10-05, decizia clientului): titlu, text,
   formularul Substack în iframe și „Nu-mi mai arăta acest mesaj”, pe centru.
   Iframe-ul nu se poate stiliza din afară și nu derulează: înălțimea lui e
   cea în care încape conținutul Substack (mai înalt pe telefon, unde textul
   lui se rupe pe mai multe rânduri). */
.modal__dialog--newsletter { width: min(560px, 100%); text-align: center; }
.modal__dialog--newsletter .modal__body { padding-top: var(--sp-7); }
.modal__dialog--newsletter h2 { margin-bottom: var(--sp-2); }
.modal__embed { margin-block: var(--sp-5) var(--sp-3); }
.modal__embed iframe {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--r-md);
}
@media (max-width: 767px) {
  .modal__embed iframe { height: 440px; }
}

/* --- Durata episodului, în colțul imaginii ------------------------------- */
.media__duration {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 1;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: rgba(23, 20, 15, .82);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  pointer-events: none;
}

/* --- Progresul ascultării, pe coperta episodului (2026-09-26) ------------
   Linia de la baza copertei, ca în aplicațiile video: cât a ascultat
   vizitatorul (components.js, doar în browserul lui). Stă peste fotografie,
   deci păstrează fundalul etichetei de durată în ambele teme. */
.media__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 4px;
  background: rgba(23, 20, 15, .82);
  pointer-events: none;
}
.media__progress-fill {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--impuls);
}

/* ==========================================================================
   Document PDF (2026-09-25, decizia clientului)
   Un PDF din Biblioteca Media, în vizualizatorul browserului, cu bara
   fișierului dedesubt: iconița, numele, tipul și mărimea, Deschide și
   Descarcă. Fără bibliotecă JS: nimic în plus de încărcat. Sub 768px
   previzualizarea dispare — browserele de pe telefon nu afișează PDF-uri
   în pagină — și rămâne bara, cu aceleași acțiuni.
   ========================================================================== */

.pdf-viewer {
  margin: 0;
  overflow: hidden;
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.pdf-viewer__frame {
  height: min(75vh, 760px);
  background: var(--liniste);
  border-bottom: var(--hairline);
}
.pdf-viewer--tall .pdf-viewer__frame { height: min(90vh, 1100px); }
.pdf-viewer__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.pdf-viewer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}
.pdf-viewer__info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 240px;
  min-width: 0;
}
.pdf-viewer__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--profunzime);
  overflow-wrap: anywhere;
}
.pdf-viewer__meta {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--reflectie);
}

@media (max-width: 767px) {
  .pdf-viewer__frame { display: none; }
}

/* ==========================================================================
   Prezentare SlideShare (2026-09-25, decizia clientului)
   Cadrul are raportul slide-urilor; până la click stă în el o copertă cu
   butonul de pornire (.media__play), iar playerul SlideShare — greu și cu
   cookie-uri de la terți — se încarcă abia la click, pe loc
   (components.js). Fără JavaScript, coperta e un link către player.
   ========================================================================== */

.slides { margin: 0; }

.slides__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-invers);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.slides--4-3 .slides__frame { aspect-ratio: 4 / 3; }
.slides--doc .slides__frame { aspect-ratio: 3 / 4; }
/* Documentul vertical nu ocupă toată lățimea: pe desktop ar fi mai înalt
   decât ecranul. width: 100% ține lățimea când părintele e flex (Coloană):
   acolo marginile automate l-ar strânge la lățimea titlului. */
.slides--doc { width: 100%; max-width: 720px; margin-inline: auto; }

.slides__frame img,
.slides__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.slides__frame img { object-fit: cover; }

/* Titlul stă deasupra cadrului. */
.slides__caption {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--reflectie);
}
.slides__caption strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--profunzime);
}