/* =====================================================================
   CRONOLOGIE ILUSTRATĂ, infografia „Repere istorice"
   ---------------------------------------------------------------------
   Încărcată condiționat (ca assets/css/chamber-map.css), doar pe paginile
   care au o secțiune de tip `timeline`. Vezi unnpr_page_needs_timeline().

   TOATĂ geometria pornește dintr-o singură variabilă, --tl-d, diametrul
   cercului subțire exterior. Restul sunt fracții din ea, luate direct din
   fișierele-sursă ale designerului (razele 65,27 / 57,98 / 46,38) și din
   măsurători pe macheta „Repere istorice_timeline.jpg". Așa desenul rămâne
   exact la orice lățime și se scalează dintr-un singur loc.

   Nicio clasă Tailwind nu atinge un element .tl-*: antetul secțiunii este
   Tailwind curat, iar de la <ol class="tl"> în jos totul este .tl-*. Foaia
   Tailwind se tipărește ULTIMA, deci amestecul ar pierde egalitățile de
   specificitate. Păstrați separarea.
   ===================================================================== */

.tl {
  /* Desenul rulează la 70% din scara naturală a machetei (cerere client, 2026-08-19).
     La scara ei proprie macheta cerea 250px într-un container de 1180px; 175px este
     acel 250 x 0,70, deci NU o cotă a designerului. Termenul în vw este scalat la
     rândul lui, ca plafonul să intre tot la ~1179px lățime de fereastră.
     4,714 x --tl-d este lățimea totală a desenului, de la insigna dintr-o
     parte până la marginea textului din cealaltă. */
  --tl-d: clamp(105px, 14.84vw, 175px);

  --tl-ring:    calc(var(--tl-d) * 0.0889);  /* grosimea inelului colorat   */
  --tl-inset:   calc(var(--tl-d) * 0.0559);  /* contur subțire -> inel      */
  --tl-disc:    calc(var(--tl-d) * 0.7106);  /* discul alb                  */
  --tl-badge-w: calc(var(--tl-d) * 0.3899);
  --tl-badge-g: calc(var(--tl-d) * 0.047);   /* insignă -> conturul subțire */
  --tl-arm:     calc(var(--tl-d) * 0.715);   /* brațul orizontal            */
  --tl-stub:    calc(var(--tl-d) * 0.121);   /* ciocul care coboară pe cerc */
  --tl-gap:     calc(var(--tl-d) * 0.183);   /* cerc -> rigla verticală     */
  --tl-pad:     calc(var(--tl-d) * 0.044);   /* riglă -> text               */

  --tl-rule: #929497;                        /* griul liniilor din machetă  */
  --tl-ink:  #505050;                        /* griul pictogramelor         */

  list-style: none;
  margin: 0;
  padding: 0;

  /* Fără plafonul acesta cele două coloane `1fr` ale rândului înghit tot ce
     eliberează cercul mai mic, deci textul s-ar lăți în loc ca desenul să se
     micșoreze: ar fi altceva decât o depărtare. Scris ca multiplu de --tl-d,
     nu ca 825px, ca desenul să rămână reglabil dintr-o singură variabilă.
     ATENȚIE la ordine: stă DUPĂ `margin: 0`, pentru că prescurtarea aceea
     resetează margin-inline, deci deasupra ei centrarea nu se aplică. */
  max-width: calc(var(--tl-d) * 4.714);
  margin-inline: auto;
}

/* Un rând: cinci coloane simetrice față de axa centrală (coloana 3 = cercul).
   ORDINEA ÎN DOM NU SE SCHIMBĂ NICIODATĂ (an, cerc, text); alternanța stânga/
   dreapta se face doar din grid-column, ca un cititor de ecran să audă mereu
   aceeași succesiune, indiferent de partea în care cade rândul.

   min-height 1,242 x --tl-d nu este o alegere estetică: este exact înălțimea
   pentru care rigla verticală a textului, întinsă pe tot rândul, ajunge fix la
   brațul orizontal, care e ancorat de cerc la -0,621 x --tl-d față de centru. */
.tl-row {
  display: grid;
  grid-template-columns: 1fr var(--tl-badge-w) var(--tl-d) var(--tl-badge-w) 1fr;
  align-items: stretch;
  min-height: calc(var(--tl-d) * 1.242);
  --tl-accent: var(--gold);
}

/* grid-row: 1 explicit pe toate trei, NU auto-plasare. Pe rândurile oglindite ordinea
   din DOM (insignă, cerc, text) merge pe coloanele 4, 3, 1: plasarea automată nu dă
   niciodată cursorul înapoi, deci ar împinge cercul pe rândul 2 și textul pe rândul 3,
   iar reperul s-ar desfășura pe verticală. Simptomul apare DOAR pe rândurile pare, ceea
   ce îl face ușor de confundat cu o problemă de aliniere. */
.tl-badge,
.tl-circle,
.tl-text { grid-row: 1; }

.tl-circle,
.tl-badge { align-self: center; }

/* ---- cercul: contur subțire + inel colorat + disc alb + pictogramă ---- */

.tl-circle {
  position: relative;
  grid-column: 3;
  margin: 0;
  width: var(--tl-d);
  aspect-ratio: 1;
  border: 1px solid var(--tl-rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* Inelul colorat. Umbra difuză gri din machetă era, în SVG-ul original, un PNG
   base64 de 184 KB: un simplu disc gri (#a6a8ab) neclar, decalat spre stânga.
   Un drop-shadow îl reproduce și scoate 1,2 MB din livrabil. */
.tl-circle::before {
  content: "";
  position: absolute;
  inset: var(--tl-inset);
  border: var(--tl-ring) solid var(--tl-accent);
  border-radius: 50%;
  filter: drop-shadow(calc(var(--tl-d) * -0.03) calc(var(--tl-d) * 0.005)
                      calc(var(--tl-d) * 0.036) rgba(140, 142, 146, .85));
}

.tl-disc {
  position: relative;
  width: var(--tl-disc);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 calc(var(--tl-d) * 0.038) rgba(0, 0, 0, .40);
}

/* viewBox-ul fișierului ESTE caseta discului alb, deci pictograma se așază la
   scara și în centrul din desenul original, fără nicio ajustare per pictogramă. */
.tl-icon {
  width: 100%;
  height: 100%;
  color: var(--tl-ink);
}

/* ---- insigna cu anul ---- */

.tl-badge {
  position: relative;               /* ancoră pentru .tl-year, ascuns vizual */
  grid-column: 2;
  justify-self: end;
  margin: 0 var(--tl-badge-g) 0 0;
  width: var(--tl-badge-w);
  aspect-ratio: 50.77 / 69.51;      /* <rect> din fișierele *_anul.svg */
  background: var(--tl-accent);
  border-radius: 8.4%;              /* rx 4,25 / 50,77 */
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Anul, text real, ascuns vizual: singura sursă a anului pentru un cititor de
   ecran. Definit local, nu prin utilitarul Tailwind `sr-only`: acesta nu apare
   nicăieri în foaia compilată, deci nu există. */
.tl-year {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tl-glyph,
.tl-digits { display: block; width: 100%; height: 100%; }

/* Rezervă pentru un an pe care designerul nu l-a desenat: livrarea conține doar
   cifrele 0 1 2 5 7 9, deci un „2013" adăugat din CMS nu are fișier. Atunci
   insigna se scrie cu Inter 800 strâmtat pe orizontală, ca să semene cu grotescul
   condensat din machetă. Nu înlocuiește desenul acolo unde există. */
.tl-digits--text {
  display: grid;
  align-content: center;
  justify-items: center;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: calc(var(--tl-badge-w) * 0.72);
  line-height: .89;
  letter-spacing: -.01em;
  font-feature-settings: "tnum", "lnum";
  transform: scaleX(.82);
}

/* ---- blocul de text ---- */

.tl-text {
  grid-column: 4 / -1;
  margin-inline-start: var(--tl-gap);
  padding-inline-start: var(--tl-pad);
  border-inline-start: 1px solid var(--tl-rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.tl-title {
  margin: 0;
  font-family: 'Lora', serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tl-accent);
  font-size: calc(var(--tl-d) * 0.142);
  line-height: 1.12;
}

.tl-body {
  margin-top: calc(var(--tl-d) * 0.05);
  color: rgba(26, 26, 46, .82);
  font-size: calc(var(--tl-d) * 0.096);
  line-height: 1.42;
}

.tl-body p { margin: 0; }
.tl-body p + p { margin-top: .6em; }

/* Conectorul în „L". Ancorat de CERC, nu de text: brațul pornește de la
   marginea de sus a cercului în sus, cât --tl-stub, apoi merge orizontal până
   exact la rigla verticală a textului. Așa ciocul atinge întotdeauna cercul,
   oricât de lung ar fi textul, iar rigla (bordura lui .tl-text, întinsă pe tot
   rândul) îl întâlnește la capăt. Un pseudo-element nu are conținut, deci este
   invizibil pentru tehnologiile de asistare prin construcție. */
.tl-circle::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  width: var(--tl-arm);
  height: var(--tl-stub);
  border-top: 1px solid var(--tl-rule);
}

.tl-row--r .tl-circle::after {
  left: calc(50% - var(--tl-d) * 0.032);
  border-left: 1px solid var(--tl-rule);
}

/* ---- rândurile oglindite (textul în stânga) ---- */

.tl-row--l .tl-badge {
  grid-column: 4;
  justify-self: start;
  margin: 0 0 0 var(--tl-badge-g);
}

.tl-row--l .tl-text {
  grid-column: 1 / 3;
  margin-inline: 0 var(--tl-gap);
  padding-inline: 0 var(--tl-pad);
  /* Explicit start/end: `border-inline` este o scurtătură cu O SINGURĂ valoare, deci
     `border-inline: 0 1px solid ...` este invalidă și se pierde toată declarația. */
  border-inline-start: 0;
  border-inline-end: 1px solid var(--tl-rule);
  text-align: right;
}

.tl-row--l .tl-circle::after {
  right: calc(50% - var(--tl-d) * 0.032);
  border-right: 1px solid var(--tl-rule);
}

/* =====================================================================
   MOBIL
   Sub 900px cele două insigne de 0,39 x --tl-d plus cercul nu mai încap în
   jurul axei, deci alternanța se pierde: toate rândurile trec pe aceeași
   parte, ca ochiul să mai poată urmări o axă. Conectorul dispare, pentru că
   nu mai are ce lega.
   ===================================================================== */

@media (max-width: 900px) {
  /* max-width: none, pentru că sub 900px rândul are trei coloane, conectorul
     dispare și alternanța se pierde: raportul 4,714 nu mai descrie desenul, iar
     coloana de text trebuie să ia în continuare spațiul rămas. */
  .tl { --tl-d: clamp(78px, 18.2vw, 133px); max-width: none; }

  .tl-row {
    grid-template-columns: var(--tl-badge-w) var(--tl-d) 1fr;
    align-items: start;
    min-height: 0;
    padding-block: calc(var(--tl-d) * 0.16);
  }

  .tl-row .tl-badge {
    grid-column: 1;
    justify-self: end;
    align-self: start;
    margin: calc(var(--tl-d) * 0.14) var(--tl-badge-g) 0 0;
  }

  .tl-row .tl-circle { grid-column: 2; align-self: start; }
  .tl-circle::after { display: none; }

  .tl-row .tl-text {
    grid-column: 3;
    margin-inline: calc(var(--tl-d) * 0.12) 0;
    padding-inline: 0;
    border-inline-start: 0;
    border-inline-end: 0;
    text-align: left;
    justify-content: flex-start;
  }

  .tl-title { font-size: calc(var(--tl-d) * 0.165); }
  .tl-body  { font-size: calc(var(--tl-d) * 0.115); }
}

@media (max-width: 620px) {
  /* Sub 620px cercul și insigna nu mai lasă loc unei coloane de text lizibile,
     deci textul trece sub ele, pe toată lățimea, iar reperul se așază pe o axă
     centrală: insigna și cercul centrate împreună, textul centrat sub ele
     (cerere client, 2026-08-20).

     Cele două coloane `1fr` din margini sunt ceea ce centrează grupul; fără ele
     pistele grilei ar măsura exact insigna plus cercul, deci și rândul de text
     întins pe `1 / -1` ar rămâne la lățimea aceea (~1,39 x --tl-d) în loc să ia
     toată lățimea containerului. Padding-ul lateral rămâne cel al secțiunii
     (px-5), nu se adaugă altul aici. */
  .tl { --tl-d: clamp(104px, 30vw, 150px); }

  .tl-row {
    grid-template-columns: 1fr var(--tl-badge-w) var(--tl-d) 1fr;
    padding-block: calc(var(--tl-d) * 0.20);
  }

  /* Coloanele se mută cu unu la dreapta față de blocul de 900px, care le așeza
     pe 1 și 2, lipite de marginea stângă. */
  .tl-row .tl-badge  { grid-column: 2; }
  .tl-row .tl-circle { grid-column: 3; }

  .tl-row .tl-text {
    grid-row: 2;                    /* sub cerc, nu lângă el */
    grid-column: 1 / -1;
    margin-inline: 0;
    margin-top: calc(var(--tl-d) * 0.14);
    text-align: center;
  }

  .tl-title { font-size: clamp(19px, 5.2vw, 24px); }
  .tl-body  { font-size: clamp(14px, 3.9vw, 16px); }
}

/* Umbrele se tipăresc ca pete gri, iar conectorul subțire dispare oricum. */
@media print {
  .tl-circle::before { filter: none; }
  .tl-disc { box-shadow: none; }
}