/* ===========================================================
   APOCALIP — componente v2
   Regula casei: nicio linie de separare. Ierarhia se face din
   suprafață, spațiu, umbră moale și sticlă.
   =========================================================== */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- aparat redacțional ---------- */
/* Accentul casei e rezervat: editorialul zilei, rubricile evidențiate și
   meniul. Restul aparatului redacțional stă pe `--ink-3` — dacă totul e roșu,
   nimic nu mai e evidențiat. */
.kicker {
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.kicker--acc { color: var(--accent); }
.meta { font-size: var(--t-meta); color: var(--muted); }
.dot { margin-inline: .45em; opacity: .45; }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.85rem;
}
.sec-head h2 { font-size: var(--t-h2); }
.sec-head .more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-meta); font-weight: 600; color: var(--muted);
  padding: .4rem .8rem; border-radius: var(--r-pill);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.sec-head .more:hover { color: var(--accent); background: var(--accent-soft); }
.sec-head .more .ico { width: 13px; height: 13px; transition: transform .22s var(--ease); }
.sec-head .more:hover .ico { transform: translateX(2px); }

/* ---------- sticlă, panouri ---------- */
.panel {
  background: var(--surface-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  backdrop-filter: var(--blur-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-glass);
}
.panel--solid { background: var(--surface); box-shadow: var(--sh-sm); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.masthead.is-scrolled { box-shadow: 0 8px 28px -20px rgba(23,21,15,.55); }

.masthead__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding-block: .9rem;
}
/* `margin: 0` nu e cosmetică: fiind un <p>, data purta marginea implicită de
   1em sus și jos (26 px), iar ea, nu butoanele, dădea înălțimea rândului de sus
   al antetului. Antetul era cu 13 px mai înalt decât avea nevoie, pe toate
   paginile. */
.masthead__date { font-size: var(--t-meta); color: var(--muted); margin: 0; }
.wordmark {
  font-weight: 700; font-size: 1.32rem;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.wordmark span { color: var(--accent); }
.masthead__act { display: flex; align-items: center; gap: .5rem; justify-self: end; }

/* Capul se strânge după ce pagina s-a mișcat: 118 px de antet peste fiecare
   ecran de laptop sunt prea mulți. Rândul de sus se îndeasă, iar rubricile se
   pliază — se întorc de cum urci înapoi, cu tot cu data zilei. Rămân marca
   (du-te acasă), lupa și abonarea.

   Numai pe desktop: pe telefon antetul e deja mic și derularea e cu degetul.
   Totul se animă: antetul e în flux, deci când scade cu 74 px conținutul de sub
   el urcă cu 74 px, iar saltul trebuie să se vadă ca o mișcare, nu ca o
   smucitură. */
@media (min-width: 900px) {
  .masthead__top { transition: padding-block .28s var(--ease); }
  /* `max-height` cu o margine largă, nu `height: auto` → 0, care nu se animă.
     `overflow-y` taie rândul în timp ce se pliază; `overflow-x` rămâne `auto`,
     că la 1024 px rubricile tot nu încap toate. */
  .navrow { max-height: 5rem; overflow-y: hidden; transition: max-height .28s var(--ease), opacity .2s var(--ease), padding-bottom .28s var(--ease); }
  .wordmark { transition: font-size .28s var(--ease); }
  .masthead__date { transition: opacity .2s var(--ease); }
  .masthead .iconbtn { transition: color .22s var(--ease), transform .22s var(--ease), background .22s var(--ease), width .28s var(--ease), height .28s var(--ease); }
  .masthead__act .btn { transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), padding .28s var(--ease), font-size .28s var(--ease); }

  .masthead.is-mic .navrow { max-height: 0; opacity: 0; padding-bottom: 0; }
  .masthead.is-mic .masthead__top { padding-block: .34rem; }
  .masthead.is-mic .masthead__date { opacity: 0; }
  .masthead.is-mic .wordmark { font-size: 1.04rem; }
  .masthead.is-mic .iconbtn { width: 32px; height: 32px; }
  .masthead.is-mic .masthead__act .btn { padding: .42rem .95rem; font-size: .8rem; }
}

.iconbtn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  -webkit-backdrop-filter: var(--blur-soft);
  backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass); color: var(--ink-2);
  transition: color .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
}
.iconbtn:hover { color: var(--ink); background: var(--surface); transform: translateY(-1px); }

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600;
  padding: .62rem 1.15rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  box-shadow: 0 6px 16px -10px rgba(23,21,15,.8);
  transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn:hover { background: var(--accent); transform: translateY(-1px); box-shadow: 0 10px 22px -12px var(--accent-glow); }
.btn .ico { transition: transform .22s var(--ease); }
.btn:hover .ico { transform: translateX(2px); }
.btn--ghost {
  background: var(--surface-soft); color: var(--ink);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: .45rem .9rem; font-size: .78rem; }

.navrow { display: flex; align-items: center; gap: .35rem; overflow-x: auto; padding-bottom: .75rem; scrollbar-width: none; }
.navrow::-webkit-scrollbar { display: none; }
.navrow a {
  font-size: .86rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  padding: .32rem .7rem; border-radius: var(--r-pill);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.navrow a:hover { color: var(--ink); background: rgba(255,255,255,.55); }
.navrow a[aria-current] { color: var(--accent); background: var(--accent-soft); }
.navrow a.navrow__ev { color: var(--accent); }
.navrow a.navrow__ev::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: .45rem; vertical-align: .12em;
}
.navrow a.navrow__ev:hover { background: var(--accent-soft); }

/* ---------- segmentat de format (sticlă) ---------- */
.segment {
  display: inline-flex; gap: .2rem; padding: .28rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: var(--blur-soft);
  backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
}
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .95rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; color: var(--muted);
  transition: color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease), transform .18s var(--ease);
}
.pill:hover { color: var(--ink); }
.pill:active { transform: scale(.97); }
.pill[aria-pressed="true"] {
  background: var(--ink); color: var(--paper);
  box-shadow: 0 6px 14px -8px rgba(23,21,15,.75);
}
.pill .ico { width: 14px; height: 14px; }

/* pilule libere (în afara segmentului) */
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
  background: var(--surface-soft);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
  transition: color .22s var(--ease), background .22s var(--ease), transform .2s var(--ease);
}
.chip:hover { color: var(--ink); background: var(--surface); transform: translateY(-1px); }
.chip[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.chip[aria-pressed="true"] .ico { fill: currentColor; }
.chip .ico { width: 15px; height: 15px; }

/* ---------- identitate autor ---------- */
.av {
  width: var(--s, 30px); height: var(--s, 30px); flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--t, var(--paper-2)); color: var(--ink);
  font-weight: 700; font-size: calc(var(--s, 30px) * .34);
  letter-spacing: .01em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 2px 6px -3px rgba(23,21,15,.35);
}
.byline { display: flex; align-items: center; gap: .55rem; font-size: var(--t-meta); color: var(--muted); }
.byline b { font-weight: 600; color: var(--ink-2); }

/* ---------- format ---------- */
.fmt {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.fmt .ico { width: 13px; height: 13px; }
.fmtbadge {
  position: absolute; left: .75rem; top: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .34rem .68rem .34rem .56rem; border-radius: var(--r-pill);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff; font-size: .655rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.fmtbadge .ico { width: 12px; height: 12px; }
/* Mărimea implicită contează: un `<svg>` fără width/height și fără o regulă
   care să-l încadreze se desenează la 300×150, nu la cât e locul lui. Fiecare
   componentă își pune mărimea ei mai jos; asta e plasa de siguranță. */
.ico { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2rem, 4vw, 3.25rem) var(--sec); }
.hero__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero__title { font-size: var(--t-display); margin-block: .75rem .95rem; }
.hero__dek { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: 33rem; margin: 0 0 1.6rem; }
.hero__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-2); box-shadow: var(--sh-lg);
}
.hero__media img { width: 100%; aspect-ratio: 4/3.1; object-fit: cover; transition: transform .9s var(--ease); }
@media (min-width: 900px) { .hero__media img { aspect-ratio: 4/4.2; } }
.hero__media:hover img { transform: scale(1.02); }
.hero__foot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }

/* rubricile evidențiate — banda de sub masthead.
   Ce rubrici intră aici se alege din panou (Setări), nu din cod.

   Suprafața, nu aranjamentul, face evidențierea: prima variantă era o spălătură
   de accent la 10%, care pe hârtia caldă a casei iese exact la valoarea hârtiei
   — blocul se topea în pagină. Aici suprafața e cerneală caldă, cu accentul pe
   pastilă și în lumina de sus: banda se desparte de fundal din prima privire,
   nu din mărimea literei. (Emil a ales varianta 4 din cele cinci încercate.) */
.kicker--ev { color: var(--accent); }
.kicker--ev::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: .45rem; vertical-align: .12em;
}
.evidenta { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.evidenta__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .evidenta__grid { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); } }
.ev {
  position: relative; overflow: hidden;
  padding: 1.35rem 1.6rem 1.45rem; border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--night-cald), var(--night-cald-2) 70%);
  color: var(--on-night);
  box-shadow: var(--sh-lg);
}
/* aceeași lumină de sus ca la banda audio, ca panoul să nu fie o plachetă plată */
.ev::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 90%;
  background: radial-gradient(55% 100% at 22% 0%, rgba(184, 55, 31, .20), transparent 72%);
  pointer-events: none;
}
.ev > * { position: relative; }
.ev__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.ev .kicker--ev {
  display: inline-block; color: #fff; background: var(--accent);
  padding: .3rem .7rem; border-radius: var(--r-pill);
}
.ev .kicker--ev::before { display: none; }
.ev .meta { color: rgba(245, 243, 238, .66); }
.ev__title { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-block: .8rem .55rem; }
.ev__title a:hover { color: #e8927c; }
.ev__text { font-style: italic; font-size: 1.02rem; line-height: 1.65; color: rgba(245, 243, 238, .86); max-width: 62rem; margin: 0; }
.ev__foot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.1rem; }
.ev .byline, .ev .byline b { color: var(--on-night); }
.ev .btn { background: var(--paper); color: var(--ink); box-shadow: 0 6px 16px -10px rgba(0,0,0,.6); }
.ev .btn:hover { background: var(--accent); color: #fff; }
.ev__more {
  margin-left: auto; font-size: var(--t-meta); font-weight: 600; color: rgba(245, 243, 238, .72);
  padding: .4rem .8rem; border-radius: var(--r-pill);
  transition: color .22s var(--ease), background .22s var(--ease);
}
.ev__more:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* trei materiale sub hero, ca panouri */
.trio { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.trio a {
  display: block; padding: 1.3rem 1.4rem 1.4rem;
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.trio a:hover { transform: translateY(-3px); box-shadow: var(--sh-md), var(--glass-edge); background: rgba(255,255,255,.82); }
.trio h3 { font-size: 1.1rem; margin-block: .5rem .6rem; }

/* ---------- carduri ---------- */
.grid-cards {
  display: grid; gap: clamp(1.75rem, 2.6vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.card { display: flex; flex-direction: column; }
.card__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); background: var(--paper-2);
  margin-bottom: 1.1rem; box-shadow: var(--sh-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card__media img { width: 100%; aspect-ratio: 16/11; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media { box-shadow: var(--sh-md); transform: translateY(-2px); }
.card:hover .card__media img { transform: scale(1.04); }
.card__title { font-size: var(--t-h3); margin-block: .5rem .55rem; transition: color .22s var(--ease); }
.card:hover .card__title { color: var(--accent); }
.card__dek { font-size: .95rem; line-height: 1.55; color: var(--muted); margin: 0 0 1rem; }
.card__foot { margin-top: auto; }
.card.is-hidden { display: none; }

/* ---------- listă densă, fără linii ---------- */
.rows {
  display: grid; gap: .15rem; padding: .5rem;
  border-radius: var(--r-lg);
  background: var(--surface-soft);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
}
.row {
  display: grid; gap: .3rem 1.1rem; align-items: center;
  grid-template-columns: 4.5rem 1fr;
  padding: .95rem 1rem; border-radius: var(--r-md);
  transition: background .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
@media (min-width: 820px) { .row { grid-template-columns: 4.6rem 5.6rem minmax(0,1fr) 8rem 4rem; column-gap: 1.4rem; } }
.row:hover { background: var(--surface); box-shadow: var(--sh-sm); }
.row__date { font-size: .74rem; font-weight: 600; color: var(--muted-2); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.row__title { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.row:hover .row__title { color: var(--accent); }
.row__dur { font-size: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Pe telefon rândul nu mai e tabel. Titlul nimerea în coloana de 4,5rem a datei
   și se rupea în cinci rânduri; acum stă pe linia lui, cu data, formatul și
   autorul dedesubt. */
@media (max-width: 819px) {
  .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem; }
  .row__title { order: -1; flex-basis: 100%; }
  .row__dur { display: none; }
}
@media (min-width: 820px) { .row__dur { text-align: right; } }

/* ---------- bandă audio (panou întunecat) ---------- */
.band {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--night-2), var(--night) 60%);
  color: var(--on-night);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem);
  margin-block: var(--sec);
  box-shadow: var(--sh-lg);
}
.band::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 100% at 30% 0%, rgba(184,55,31,.24), transparent 70%);
  pointer-events: none;
}
.band .kicker { color: #e08a74; }
.band .meta, .band .byline { color: var(--on-night-m); }
.band .byline b { color: var(--on-night); }
.band .sec-head .more { color: var(--on-night-m); }
.band .sec-head .more:hover { color: #fff; background: rgba(255,255,255,.1); }

.audio-list { display: grid; gap: .4rem; position: relative; }
.audio-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem;
  align-items: center; padding: 1.1rem 1.15rem; border-radius: var(--r-md);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
@media (min-width: 880px) { .audio-item { grid-template-columns: auto 1.5fr 1fr auto; } }
.audio-item:hover { background: rgba(255,255,255,.055); transform: translateX(2px); }
.audio-item h3 { font-size: 1.08rem; color: var(--on-night); }
.audio-item:hover h3 { color: #fff; }

.playbtn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--on-night); color: var(--night);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.9);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.playbtn:hover { transform: scale(1.07); background: var(--accent); color: #fff; }
.playbtn .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 2px; }
.playbtn.is-playing .ico { margin-left: 0; }

/* ---------- formă de undă ---------- */
.wave { display: flex; align-items: center; gap: 2px; height: 34px; width: 100%; cursor: pointer; }
.wave i {
  flex: 1; border-radius: 2px; background: currentColor; opacity: .26;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wave i.on { opacity: 1; }
.wave:hover i { opacity: .4; }
.wave:hover i.on { opacity: 1; }

/* ---------- editori ---------- */
.editors { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .editors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .editors { grid-template-columns: repeat(4, 1fr); } }
.editor {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.5rem 1.4rem; border-radius: var(--r-lg);
  background: var(--surface-soft);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.editor:hover { transform: translateY(-3px); box-shadow: var(--sh-md), var(--glass-edge); background: rgba(255,255,255,.84); }
.editor .av { --s: 52px; }
.editor .chip { align-self: start; }
/* Sub 620 px cartonașul devine rând: patru editori pe verticală, fiecare cu
   avatar, nume și buton în același rând, înseamnă un ecran în loc de patru. */
@media (max-width: 619px) {
  .editor {
    display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .1rem .9rem; padding: 1rem 1.1rem;
  }
  /* avatar și buton puțin mai strânse, ca numele să încapă pe un rând la 360 px */
  .editor .av { --s: 46px; grid-row: 1 / 3; }
  .editor .chip { padding: .45rem .85rem; font-size: .76rem; }
  .editor > div { grid-column: 2; grid-row: 1; }
  .editor .chip { grid-column: 3; grid-row: 1; align-self: center; }
  /* statistica trece pe toată lățimea, pe sub buton: altfel „61 editoriale ·
     24 episoade" prinde 128 px și se rupe în două rânduri */
  .editor__stat { grid-column: 2 / -1; grid-row: 2; margin-top: .15rem; }
}
.editor__name { font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
.editor__role { font-size: var(--t-meta); color: var(--muted); margin: .15rem 0 0; }
.editor__stat { font-size: .76rem; color: var(--muted-2); margin: 0; }

/* ---------- pagina de editorial ---------- */
.reading { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; }
.reading i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

.art-hero { position: relative; }
.art-hero img { width: 100%; height: clamp(18rem, 48vh, 32rem); object-fit: cover; }
.art-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,18,13,.34) 0%, rgba(20,18,13,.04) 40%, rgba(20,18,13,.28) 100%);
}
.art-hero__back { position: absolute; top: 1.1rem; left: 0; right: 0; z-index: 3; }
.art-hero__back .iconbtn {
  background: var(--glass-dark); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.art-hero__back .iconbtn:hover { background: rgba(20,19,15,.78); }

.sheet {
  position: relative; z-index: 4;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: -5.5rem; padding-top: clamp(2.25rem, 4vw, 3.25rem);
  box-shadow: 0 -20px 50px -34px rgba(23,21,15,.6), var(--glass-edge);
}
.art-head { max-width: var(--readw); margin-inline: auto; }
.art-title { font-size: var(--t-h1); margin-block: .8rem 1rem; }
.art-sub { font-size: 1.14rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.75rem; }
.art-byline { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding-block: .35rem 1.6rem; }
.art-byline .who { display: flex; align-items: center; gap: .7rem; }
.art-byline .who b { font-size: .92rem; font-weight: 600; display: block; letter-spacing: -.01em; }
.art-byline .who span { font-size: var(--t-meta); color: var(--muted); }
.art-byline .btn { margin-left: auto; }

.prose { max-width: var(--readw); margin-inline: auto; font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); }
.prose p { margin-block: 0 1.4rem; }
.prose h2 { font-size: 1.5rem; margin-block: 2.6rem 1rem; color: var(--ink); }
.prose a { color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent-glow); }
.prose a:hover { box-shadow: inset 0 -2px 0 var(--accent); }
.prose strong { font-weight: 700; color: var(--ink); }
.lead {
  font-size: 1.15rem; line-height: 1.65; color: var(--ink);
  padding: 1.1rem 1.25rem; margin-bottom: 1.9rem;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(184,55,31,.075), rgba(184,55,31,.035));
}
.pullquote {
  margin: 2.6rem 0; font-size: 1.5rem; line-height: 1.32;
  letter-spacing: -.028em; font-weight: 700; color: var(--ink); text-wrap: balance;
}
.pullquote::before {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--accent); border-radius: 2px; margin-bottom: 1.1rem;
}
.figure { margin: 2.6rem 0; }
.figure img { border-radius: var(--r-md); width: 100%; box-shadow: var(--sh-sm); }
.figure figcaption { font-size: .78rem; color: var(--muted); margin-top: .7rem; }

.actionbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1.5rem; z-index: 70;
  display: flex; align-items: center; gap: .2rem;
  padding: .35rem; border-radius: var(--r-pill);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .45s var(--ease);
}
.actionbar button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .95rem; border-radius: var(--r-pill);
  color: var(--on-night); font-size: .82rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.actionbar button:hover { background: rgba(255,255,255,.12); }
.actionbar button[aria-pressed="true"] { color: #ff9077; }
.actionbar button[aria-pressed="true"] .ico { fill: currentColor; }
.actionbar .ico { width: 16px; height: 16px; }
.actionbar .sep { width: 1px; height: 20px; background: rgba(255,255,255,.14); margin-inline: .25rem; }
body:has(.mini.is-up) .actionbar { transform: translate(-50%, -4.8rem); }

/* ---------- player audio ---------- */
.player-head { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 780px) { .player-head { grid-template-columns: 17rem 1fr; } }
.player-head img { border-radius: var(--r-lg); aspect-ratio: 1; object-fit: cover; box-shadow: var(--sh-lg); }
.player-title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-block: .7rem .85rem; }

.player-card {
  padding: 1.25rem 1.4rem 1.35rem; border-radius: var(--r-lg);
  background: var(--surface-soft);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
}
.transport { display: flex; align-items: center; gap: .85rem; }
.transport .big {
  width: 60px; height: 60px; flex: none; border-radius: 50%;
  background: var(--ink); color: var(--paper); display: grid; place-items: center;
  box-shadow: 0 12px 26px -14px rgba(23,21,15,.9);
  transition: transform .22s var(--ease), background .22s var(--ease);
}
.transport .big:hover { transform: scale(1.06); background: var(--accent); }
.transport .big .ico { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.transport .skip { flex: none; color: var(--muted); padding: .5rem; border-radius: 50%; transition: color .2s var(--ease), background .2s var(--ease); }
.transport .skip:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.transport .skip .ico { width: 20px; height: 20px; }
.speed {
  font-size: .76rem; font-weight: 700; color: var(--ink-2);
  padding: .42rem .75rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.62); box-shadow: var(--sh-glass);
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.speed:hover { color: var(--accent); background: #fff; }
.times { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: .55rem; }

.transcript { max-width: 46rem; font-size: 1.22rem; line-height: 1.7; letter-spacing: -.012em; }
.transcript span { color: var(--muted-2); transition: color .35s var(--ease); cursor: pointer; }
.transcript span.said { color: var(--ink); }
.transcript span.now {
  color: var(--ink); background: var(--accent-soft);
  border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: .1em .18em; margin-inline: -.18em;
}

/* ---------- video ---------- */
.video-stage { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--night); box-shadow: var(--sh-lg); }
.video-stage img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .94; }
.video-stage__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-stage__play span {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(20,19,15,.46);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  display: grid; place-items: center;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.video-stage__play:hover span { transform: scale(1.07); background: var(--accent); }
.video-stage__play .ico { width: 26px; height: 26px; fill: #fff; stroke: none; margin-left: 4px; }
.video-bar {
  position: absolute; left: .8rem; right: .8rem; bottom: .8rem;
  padding: .7rem .95rem; border-radius: var(--r-pill);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  color: #fff; display: flex; align-items: center; gap: .9rem;
}
.video-bar .track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); cursor: pointer; }
.video-bar .track i { display: block; height: 100%; width: 28%; background: var(--accent); border-radius: 2px; }
.video-bar .t { font-size: .74rem; font-variant-numeric: tabular-nums; opacity: .88; }

.chapters { display: grid; gap: .3rem; }
.chapter {
  text-align: left; padding: .85rem 1rem; border-radius: var(--r-md);
  display: grid; grid-template-columns: 3.4rem 1fr; gap: .9rem; align-items: baseline;
  transition: background .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.chapter:hover { background: rgba(255,255,255,.62); box-shadow: var(--sh-sm); transform: translateX(2px); }
.chapter[aria-current="true"] { background: var(--surface); box-shadow: var(--sh-sm); }
.chapter[aria-current="true"] time { color: var(--accent); }
.chapter time { font-size: .78rem; color: var(--muted-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.chapter b { font-size: 1rem; font-weight: 600; letter-spacing: -.018em; }
.chapter .ch { display: block; }
.chapter .ch-sub { display: block; margin-top: .18rem; font-size: var(--t-meta); color: var(--muted); font-weight: 400; }

/* ---------- mini-player ---------- */
.mini {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 75;
  transform: translate(-50%, 160%); opacity: 0;
  width: min(640px, calc(100vw - 2rem));
  display: grid; grid-template-columns: auto auto minmax(0,1fr) 9rem auto; gap: .9rem;
  align-items: center; padding: .55rem .9rem .55rem .55rem;
  border-radius: var(--r-pill);
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  color: var(--on-night);
  box-shadow: 0 22px 54px -26px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform .5s var(--ease), opacity .35s var(--ease);
}
.mini.is-up { transform: translate(-50%, 0); opacity: 1; }
.mini img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mini__t { min-width: 0; }
.mini__t b { display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__t span { font-size: .72rem; color: var(--on-night-m); }
.mini .wave { height: 26px; }
.mini .playbtn { width: 38px; height: 38px; box-shadow: none; }
.mini .playbtn .ico { width: 13px; height: 13px; }
.mini .close { color: var(--on-night-m); padding: .4rem; border-radius: 50%; transition: color .2s var(--ease), background .2s var(--ease); }
.mini .close:hover { color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 720px) { .mini { grid-template-columns: auto auto minmax(0,1fr) auto; } .mini .wave { display: none; } }

/* ---------- subsol ---------- */
.foot { margin-top: var(--sec); padding-block: 3rem 4rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot h4 { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.foot li a { font-size: .9rem; color: var(--ink-2); transition: color .2s var(--ease); }
.foot li a:hover { color: var(--accent); }
.foot__note { font-size: .95rem; line-height: 1.6; color: var(--muted); max-width: 26rem; }
.foot__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; font-size: .76rem; color: var(--muted-2); }

/* ---------- două coloane (audio/video) ---------- */
.vgrid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .vgrid { grid-template-columns: 1.55fr .95fr; align-items: start; }
  .vgrid > aside { position: sticky; top: 5.5rem; }
}

/* ---------- câmp de e-mail ---------- */
.field {
  flex: 1; min-width: 16rem; padding: .8rem 1.1rem;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
  box-shadow: var(--sh-glass);
  font: inherit; font-size: .9rem; color: var(--ink);
}
.field::placeholder { color: var(--muted-2); }
.field:focus { outline: 2px solid var(--accent); outline-offset: 2px; background: #fff; }

/* ---------- ecrane mici ---------- */
@media (max-width: 720px) {
  .masthead__date { display: none; }
  .masthead__top { padding-block: .7rem; }
  .wordmark { font-size: 1.1rem; }
  .masthead__act .iconbtn[aria-label="Notificări"] { display: none; }
  .masthead__act .btn { padding: .48rem .85rem; font-size: .78rem; }
  .transport .hint { display: none; }
  .art-byline .btn { margin-left: 0; }
  .sheet { margin-top: -3.5rem; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .band { border-radius: var(--r-lg); }
  .row { padding: .85rem .75rem; }
}

/* ---------- buletin ---------- */
.news { display: grid; gap: 2rem; align-items: center; padding: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 880px) { .news { grid-template-columns: 1.15fr .85fr; gap: 3rem; } }
.news form { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Navigarea fără reîncărcare (nav.js): semn discret cât se aduce pagina nouă.
   Nu mișcă nimic în layout — doar cursorul și o urmă de transparență. */
body.se-incarca { cursor: progress; }
body.se-incarca #continut { opacity: .72; transition: opacity .12s ease; }
#continut:focus { outline: none; }

/* ===========================================================
   CASETA DE CĂUTARE (cauta.js)
   Se deschide peste pagină, din lupa din masthead. Fără linii de separare,
   ca tot restul: o foaie de sticlă cu umbră joasă, care coboară o idee.
   =========================================================== */
.csearch { position: fixed; inset: 0; z-index: 60; }
.csearch[hidden] { display: none; }

.csearch__scrim {
  position: absolute; inset: 0;
  background: rgba(23, 21, 15, .16);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s ease;
}

.csearch__panel {
  position: absolute; left: 50%; top: clamp(4rem, 9vh, 7rem);
  width: min(38rem, calc(100vw - 2 * var(--gut)));
  transform: translate(-50%, -10px);
  opacity: 0;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg), var(--glass-edge);
  padding: .5rem .55rem .35rem;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .7, .25, 1);
}
.csearch.is-up .csearch__scrim { opacity: 1; }
.csearch.is-up .csearch__panel { opacity: 1; transform: translate(-50%, 0); }

.csearch__form { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; }
.csearch__form .ico { color: var(--muted); flex: none; }
.csearch__input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0;
  font: 600 1.08rem/1.5 var(--sans); letter-spacing: -.02em; color: var(--ink);
}
.csearch__input:focus { outline: none; }
.csearch__input::placeholder { color: var(--muted-2); font-weight: 400; letter-spacing: 0; }
.csearch__input::-webkit-search-cancel-button { display: none; }

.csearch__lista { list-style: none; margin: .2rem 0 0; padding: 0; max-height: min(52vh, 25rem); overflow: auto; }
.csearch__op {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: .8rem;
  padding: .6rem .8rem; border-radius: var(--r-sm); cursor: pointer;
  transition: background .22s ease, box-shadow .22s ease;
}
.csearch__op:hover, .csearch__op[aria-selected="true"] { background: var(--surface); box-shadow: var(--sh-xs); }
.csearch__op .ico { color: var(--muted); }
.csearch__op[aria-selected="true"] .ico { color: var(--accent); }
.csearch__t { min-width: 0; }
.csearch__t b { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csearch__t span { display: block; font-size: var(--t-meta); color: var(--muted); margin-top: .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csearch__op mark { background: var(--accent-soft); color: var(--accent); border-radius: 5px; padding: 0 .14em; }
.csearch__go { opacity: 0; color: var(--muted-2); transition: opacity .22s ease; }
.csearch__op[aria-selected="true"] .csearch__go { opacity: 1; }

.csearch__gol { padding: 1.1rem .85rem 1.3rem; color: var(--muted); font-size: var(--t-meta); }

.csearch__hint {
  display: flex; gap: 1rem; flex-wrap: wrap;
  padding: .6rem .85rem .55rem; margin: 0;
  color: var(--muted-2); font-size: .72rem; letter-spacing: .01em;
}
.csearch__hint kbd {
  font: 600 .72rem/1 var(--sans); color: var(--muted);
  background: var(--surface-soft); border-radius: 6px; padding: .2rem .35rem;
  box-shadow: var(--sh-xs);
}

@media (prefers-reduced-motion: reduce) {
  .csearch__panel, .csearch__scrim, .csearch__op { transition: none; }
  .csearch__panel { transform: translate(-50%, 0); }
}

/* Un material fără imagine: suprafață caldă cu semnul formatului, nu o poză ruptă.
   Se întâmplă la orice material scris din panou înainte să i se pună o imagine. */
.card__media--gol { display: grid; place-items: center; background: var(--paper-2); min-height: 11rem; }
.card__semn { color: var(--muted-2); }
.card__semn .ico { width: 34px; height: 34px; }
.art-hero--gol { min-height: 8rem; background: var(--paper-2); }

/* Paginarea arhivei: rămâne sub panou, fără linii, ca restul. */
.paginare { display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 1.6rem; }

/* Video fără fișier: scena rămâne, dar spune de ce e goală. */
.video-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-stage--gol { background: var(--paper-2); min-height: 18rem; }
.video-stage__nota {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  margin: 0; color: var(--muted); font-size: var(--t-meta);
}
.video-stage__play[disabled], .playbtn[disabled], .transport .big[disabled] { opacity: .45; cursor: not-allowed; }

/* Note și surse: o listă, fără linii, ca restul. */
.surse { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.surse li { font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2); }
.surse a { color: var(--accent); font-weight: 600; text-decoration: none; }
.surse a:hover { text-decoration: underline; }