/* ═══════════════════════════════════════════════════════════════════
   CONȚINUTUL ARTICOLELOR
   ═══════════════════════════════════════════════════════════════════
   Referința e pagina de politica de confidențialitate, adică `.legal-prose`
   din legal.css: acolo e felul în care site-ul ăsta așează text lung.
   Titlu de secțiune cu o linie subțire sub el, paragrafe de 16px margine,
   liste cu bulină, tabel cu chenar fin, link verde subliniat. Valorile de
   aici sunt aceleași, nu aproximări.

   Articolele veneau fiecare cu propriul CSS: patru palete, patru scări
   tipografice și patru vocabulare de clase care nu se suprapun
   (`fr-short`, `summary-box`, `quick-answer`, `fr-callout`, `fact`, `us`,
   `who`). Prima încercare a fost să le rescriu doar culorile și fonturile.
   Nu a fost destul: culorile s-au schimbat, formele au rămas, și articolul
   arăta tot ca o pagină străină, doar recolorată.

   Acum stilul articolelor vine de aici, iar blocurile <style> din fișiere
   au fost scoase. Stilizăm elementele HTML, nu clasele lor. Pentru casetele
   cu zeci de nume diferite folosim selectori pe fragment de clasă
   (`[class*="callout"]`), ca să prindem toate variantele fără să le știm
   numele. Foaia servește și articolele viitoare: dacă autorul nu aduce
   niciun stil, articolul arată corect oricum.
   ═══════════════════════════════════════════════════════════════════ */

.articol-continut {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  max-width: 70ch;
}

.articol-continut > :first-child { margin-top: 0; }
.articol-continut > :last-child  { margin-bottom: 0; }

/* ─── Text, ca pe paginile legale ────────────────────────────────── */

.articol-continut p { margin: 0 0 16px; }
.articol-continut strong { color: var(--text); font-weight: 700; }

.articol-continut a {
  color: var(--green); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(61,97,71,0.35);
}
.articol-continut a:hover { text-decoration-color: var(--green); }

/* ─── Titluri ────────────────────────────────────────────────────── */

.articol-continut h1,
.articol-continut h2 {
  font-family: var(--serif);
  font-size: 1.45rem; font-weight: 500; color: var(--text);
  line-height: var(--lh-head);
  margin: 44px 0 14px;
  padding: 0 0 10px;
  border: 0; border-bottom: 1px solid var(--border);
  background: none;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.articol-continut h1:first-child,
.articol-continut h2:first-child { margin-top: 0; }

.articol-continut h3 {
  font-family: var(--serif);
  font-size: 1.15rem; font-weight: 500; color: var(--text);
  line-height: var(--lh-head);
  margin: 30px 0 10px; padding: 0; border: 0; background: none;
}

/* Al patrulea nivel devine o etichetă, ca supratitlurile din site. */
.articol-continut h4 {
  font-family: var(--sans);
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--green);
  margin: 26px 0 8px; padding: 0; border: 0; background: none;
}

/* ─── Liste ──────────────────────────────────────────────────────── */

.articol-continut ul, .articol-continut ol { margin: 0 0 18px 0; padding-left: 22px; }
.articol-continut ul { list-style: disc; }
.articol-continut ol { list-style: decimal; }
.articol-continut li {
  margin-bottom: 8px; font-size: var(--fs-body);
  color: var(--muted); line-height: var(--lh-body);
}

/* Listele cu bifă: aceeași bifă verde ca la dotările vilelor. */
.articol-continut ul[class*="check"],
.articol-continut ul[class*="bif"] { list-style: none; padding-left: 0; }
.articol-continut ul[class*="check"] > li,
.articol-continut ul[class*="bif"] > li { position: relative; padding-left: 26px; }
.articol-continut ul[class*="check"] > li::before,
.articol-continut ul[class*="bif"] > li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}

/* ─── Tabele, ca pe paginile legale ─────────────────────────────── */

.articol-continut [class*="tablewrap"],
.articol-continut [class*="table-wrap"] { overflow-x: auto; margin: 0 0 20px; }
.articol-continut table {
  width: 100%; border-collapse: collapse; margin: 0 0 20px;
  font-size: var(--fs-small); background: none;
}
.articol-continut th, .articol-continut td {
  padding: 10px 12px; border: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.articol-continut th { background: var(--cream); font-weight: 700; color: var(--text); }

/* ─── Imagini ────────────────────────────────────────────────────── */

.articol-continut figure { margin: 28px 0; }
.articol-continut img { width: 100%; height: auto; display: block; border-radius: 0; }
.articol-continut figure > img {
  box-shadow: 0 2px 6px rgba(14,24,18,0.08), 0 14px 34px rgba(14,24,18,0.12);
}
.articol-continut figcaption {
  margin-top: 12px; text-align: center;
  font-size: var(--fs-small); color: var(--muted-2); font-style: italic;
}

.articol-continut [class*="gallery"],
.articol-continut [class*="galerie"] {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0;
}
.articol-continut [class*="gallery"] figure,
.articol-continut [class*="galerie"] figure { margin: 0; }
.articol-continut [class*="gallery"] > * { min-width: 0; }

/* ─── Casete ─────────────────────────────────────────────────────── */
/* Una singură formă, aceeași ca `.legal-box`: fond crem, chenar subțire,
   fără bară de accent în stânga și fără colțuri rotunjite. */

.articol-continut [class*="callout"],
.articol-continut [class*="snippet"],
.articol-continut [class*="summary"],
.articol-continut [class*="quick"],
.articol-continut [class*="note"],
.articol-continut [class*="short"],
.articol-continut [class*="box"],
.articol-continut [class*="def"],
.articol-continut [class*="voice"],
.articol-continut [class*="steps"],
.articol-continut [class*="toc"],
.articol-continut blockquote {
  background: var(--cream); border: 1px solid var(--border);
  border-left-width: 1px; border-radius: 0;
  padding: 24px; margin: 0 0 20px; color: var(--muted);
}
.articol-continut [class*="callout"] > :first-child,
.articol-continut [class*="snippet"] > :first-child,
.articol-continut [class*="summary"] > :first-child,
.articol-continut [class*="box"] > :first-child,
.articol-continut [class*="toc"] > :first-child,
.articol-continut blockquote > :first-child { margin-top: 0; }
.articol-continut [class*="callout"] > :last-child,
.articol-continut [class*="snippet"] > :last-child,
.articol-continut [class*="summary"] > :last-child,
.articol-continut [class*="box"] > :last-child,
.articol-continut [class*="toc"] > :last-child,
.articol-continut blockquote > :last-child { margin-bottom: 0; }

/* Titlul dintr-o casetă: ca la `.legal-box`, fără linia de secțiune. */
.articol-continut [class*="callout"] :is(h1,h2,h3),
.articol-continut [class*="snippet"] :is(h1,h2,h3),
.articol-continut [class*="summary"] :is(h1,h2,h3),
.articol-continut [class*="quick"]   :is(h1,h2,h3),
.articol-continut [class*="box"]     :is(h1,h2,h3),
.articol-continut [class*="toc"]     :is(h1,h2,h3) {
  font-size: var(--fs-h3); margin: 0 0 8px;
  padding: 0; border: 0;
}

/* Introducerea: serif, puțin mai mare, fără bară în stânga. */
.articol-continut [class*="lead"],
.articol-continut [class*="lede"] {
  font-family: var(--serif); font-size: var(--fs-lead);
  line-height: 1.6; color: var(--text); font-weight: 400;
  border: 0; padding: 0; background: none;
  margin: 0 0 20px; max-width: 60ch;
}

/* Supratitluri și etichete. */
.articol-continut [class*="kicker"],
.articol-continut [class*="eyebrow"],
.articol-continut [class*="label"] {
  display: block;
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green);
  background: none; border: 0; padding: 0; border-radius: 0; margin: 0 0 8px;
}
.articol-continut span[class*="tag"] {
  display: inline-block; padding: 4px 10px; margin: 0 4px 4px 0;
  background: var(--cream); border: 1px solid var(--border);
  font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dk);
}
.articol-continut [class*="meta"],
.articol-continut [class*="small"] { font-size: var(--fs-small); color: var(--muted-2); }

/* ─── Video, fațadă cu click ─────────────────────────────────────── */

.articol-continut [class*="video"] { max-width: 340px; margin: 28px auto; }
.articol-continut [class*="frame"] {
  position: relative; width: 100%; aspect-ratio: 9/16;
  overflow: hidden; border-radius: 0; background: #000;
  box-shadow: 0 2px 6px rgba(14,24,18,0.08), 0 14px 34px rgba(14,24,18,0.12);
}
.articol-continut [class*="frame"] > img,
.articol-continut [class*="frame"] > iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; object-fit: cover;
}
.articol-continut [class*="facade"] { cursor: pointer; }
.articol-continut [class*="play"] {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 44px; background: rgba(14,24,18,0.72);
  border-radius: 0; transition: background 0.2s;
}
.articol-continut [class*="play"]::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-40%,-50%);
  border-style: solid; border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.articol-continut [class*="facade"]:hover [class*="play"] { background: var(--green); }

.articol-continut hr { border: 0; border-top: 1px solid var(--border); margin: 36px 0; }

/* ─── Telefon ────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  .articol-continut [class*="gallery"],
  .articol-continut [class*="galerie"] { grid-template-columns: 1fr; gap: 12px; }
  .articol-continut [class*="callout"],
  .articol-continut [class*="snippet"],
  .articol-continut [class*="summary"],
  .articol-continut [class*="quick"],
  .articol-continut [class*="note"],
  .articol-continut [class*="short"],
  .articol-continut [class*="box"],
  .articol-continut [class*="toc"],
  .articol-continut blockquote { padding: 20px; }
  .articol-continut h1, .articol-continut h2 { margin-top: 34px; }
}

/* Pe calculator, articolul folosește lățimea întregului site (ca restul paginilor),
   nu coloana îngustă de 780px. Pozele înalte nu depășesc 80% din ecran. 2026-09-28 */
@media (min-width: 1025px) {
  .wrap-ingust { max-width: var(--wrap); }
  .articol-cap .wrap { max-width: var(--wrap); }
  .articol-cap h1 { max-width: none; }
  .articol-continut { max-width: none; }
  .articol-continut img { max-height: 80vh; object-fit: contain; }
}