/* GENERAT de tools/_machete/css.js — nu se editează de mână.
   Paleta e cea din 4.9.4; valorile se schimbă în tools/_machete/comun.js.
   Metrica iese din bugetul de unități din tools/_machete/metrica.js. */

/* ── Fontul, servit local (4.9.6) ─────────────────────────────────────── */
/* Latină plus diacriticele românești; ș și ț cu virgulă dedesubt, nu cu
   sedilă. Dacă fișierul nu se încarcă, pagina cade pe fontul de sistem al
   aparatului: mai puțin frumos, complet lizibil. */

@font-face {
  font-family: 'Inter';
  src: url('inter/inter-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('inter/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Paleta (4.9.4) ───────────────────────────────────────────────────── */

:root {
  --fundal-pagina: #303E58;
  --fundal-alternanta: #2B3850;
  --cap-tabel: #222D42;
  --text-principal: #FFFFFF;
  --text-secundar: #A0B0C6;
  --accent: #F5B324;
  --alarma: #FF8A80;
  --banda-fundal: #F5B324;
  --banda-text: #3A2600;
  --eticheta-terminal: rgba(255,255,255,0.12);
  --linie-separare: rgba(255,255,255,0.07);

  /* Lățimile nu sunt alese din ochi: ies din ce s-a măsurat în pagină cu
     tools/masoara-depasirile.js. Coloana de ghișee ține și cazul cu două
     terminale — „T1 1,2  T2 7,8,9" —, care e cel mai lat lucru din tabel. */
  /* LĂȚIMILE SUNT ALE PISTEI, NU ALE CONȚINUTULUI. De la runda 4 de
     modificări, coloanele nu mai sunt despărțite de column-gap, ci fiecare
     celulă își poartă spațiul înăuntru, ca padding. Aritmetica e aceeași —
     cele 7 spații de 1,2 unități au devenit 1,2 unități de padding în fiecare
     celulă —, dar acum caseta celulei ajunge de la o coloană la alta, deci
     conținutul poate umple toată suprafața: o linie verticală merge pe toată
     înălțimea, un fundal acoperă tot, o imagine se poate întinde.

     Prima și ultima celulă n-au padding spre exterior, ca rândul să rămână
     din margine în margine.

     Față de runda 3, destinația a cedat 16 unități observațiilor: ea avea de
     ținut 17 caractere, iar cealaltă 33. */
  --col-logo: 16rem;
  --col-zbor: 14rem;
  --col-ora: 9rem;
  --col-est: 9rem;
  --col-ghisee: 22rem;
  --col-poarta: 15rem;
  --col-status: 52rem;
  /* Marjă laterală înapoi: conținutul lipit de marginea ecranului arată
     nefinisat. 1,5 unități de fiecare parte, la rând, la header și la bandă. */
  --marja: 1rem;
  --padding-celula: 0.6rem;
}

.ecran--portrait {
  --col-logo: 12rem;
  --col-zbor: 13.1rem;
  --col-ora: 8.2rem;
  --col-est: 8.2rem;
  --col-ghisee: 17rem;
  --col-poarta: 10rem;
  --col-status: 30rem;
  --marja: 1rem;
  --padding-celula: 0.45rem;
}

/* ── Temelia ──────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html {
  /* Valoarea reală o pune ecran.js din înălțimea ferestrei. Asta e doar
     plasa de siguranță, dacă JS-ul nu rulează. */
  font-size: 21px;
}

body {
  margin: 0;
  background: var(--fundal-pagina);
  color: var(--text-principal);
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Cifre tabulare la ore, numere de zbor, ghișee și porți (4.9.6) — altfel un
   „1" ocupă mai puțin decât un „8" și coloanele de timp par strâmbe. */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Limbajul de culori (4.9.3). În zona de date, culoarea înseamnă abatere. */
.ton-normal { color: var(--text-principal); }
.ton-accent { color: var(--accent); }
.ton-alarma { color: var(--alarma); }

.taiat { text-decoration: line-through; text-decoration-thickness: 0.07em; }

/* ── Ecranul: patru benzi, exact cât înălțimea ───────────────────────── */

.ecran {
  display: grid;
  grid-template-rows: 10rem 9rem 1fr 9rem 0.5rem;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Repausul și eroarea n-au header și n-au bandă (4.7, 4.8). */
.ecran--simplu { grid-template-rows: 1fr; }

/* ── Headerul (4.9.1) ─────────────────────────────────────────────────── */
/* Logo stânga, titlu în centru, ora în dreapta, cu cifre tabulare și în
   chihlimbar. Înălțimea nu crește cu conținutul.

   TITLUL STĂ PE UN RÂND, la dimensiunea ceasului — abatere de la 4.9.2,
   care cere etichetele fixe pe două niveluri. Vezi §6 din JURNAL.md. */

.antet {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 var(--marja);
  background: var(--fundal-pagina);
  overflow: hidden;
}

/* Înălțime fixă, lățimea după proporția fișierului — ca la logourile de
   companie din rânduri. La o imagine cu doar înălțimea scrisă, lățimea e deja
   auto, deci nu trebuie declarată. Logoul aeroportului are raportul 4,55:1
   (vezi nota din dummy-data/README.txt), deci la 8 unități iese lat de vreo 36.

   PLAFONUL EXISTĂ PENTRU ZIUA ÎN CARE SE SCHIMBĂ CEVA. Headerul e un grid
   auto / 1fr / auto: logo, titlu, ceas. Coloana logoului ia exact cât cere
   imaginea, iar titlul strânge din 1fr. Dacă cineva urcă înălțimea headerului
   sau aeroportul dă un logo cu altă proporție, logoul crește nelimitat și
   mănâncă titlul, tăcut. Plafonul e cinci înălțimi — peste ce cere raportul de
   acum —, iar object-fit e acolo doar ca imaginea să nu se turtească atunci
   când plafonul chiar mușcă. Cât nu mușcă, nu face nimic. */
.antet__logo {
  height: 8rem;
  max-width: 40rem;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.antet__titlu {
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.antet__titlu-ro {
  font-size: 5.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-principal);
}

/* Engleza rămâne mai puțin contrastată: ochiul nu citește același lucru de
   două ori la aceeași greutate (4.9.2). */
.antet__titlu-en {
  font-size: 5.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-secundar);
}

.antet__mediana {
  font-size: 5.4rem;
  font-weight: 700;
  color: var(--text-secundar);
}

.antet__ceas {
  font-size: 5.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  text-align: right;
}

/* ── Capul de tabel ───────────────────────────────────────────────────── */
/* Cât un rând de zbor, cu textele la stânga pe toate coloanele. */

/* Capul de tabel are ACELAȘI fundal ca rândul de zi: 4.9.4 le dă pe amândouă
   culoarea cap-tabel. Când un rând de zi cade imediat sub cap — și de la
   runda 2 încoace prima pagină începe mereu așa —, cele două se lipesc
   într-un bloc întunecat fără formă. Linia de jos le desparte.

   (Fără accente grave în comentariile de aici: fișierul e un șablon, iar un
   accent grav îi închide șirul. S-a întâmplat exact o dată.) */
.cap {
  background: var(--cap-tabel);
  display: grid;
  align-items: stretch;
  padding: 0 var(--marja);
  overflow: hidden;
  text-align: left;
  border-bottom: 0.2rem solid var(--eticheta-terminal);
}

/* Capetele de coloană au același padding ca celulele rândurilor, deci se
   aliniază exact cu ele. */
/* INTERLINIA NU COBOARĂ SUB 1,25 NICĂIERI UNDE SE TAIE CONȚINUTUL.
   Româna are diacritice DEASUPRA majusculelor — Î, Â, Ă —, iar ele urcă peste
   înălțimea capitalei. La Inter, o majusculă accentuată cere circa 1,22 em de
   casetă; o interlinie de 1,05 face caseta liniei mai mică decât litera, iar
   overflow ascuns taie exact accentul. Se vedea la „ÎNTÂRZIAT": căciulile lui
   Î și  erau retezate.
   Regula se aplică oriunde textul e cu majuscule ȘI elementul își taie
   conținutul: capul de tabel, destinația, observațiile. */
.cap__celula {
  line-height: 1.28;
  overflow: hidden;
  padding: 0 var(--padding-celula);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cap__celula:first-child { padding-left: 0; }
.cap__celula:last-child { padding-right: 0; }



.cap__ro {
  display: block;
  font-size: 2.2rem;
  color: var(--text-principal);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  white-space: nowrap;
}

.cap__en {
  display: block;
  font-size: 1.6rem;
  color: var(--text-secundar);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Corpul: fereastra prin care alunecă lista ───────────────────────── */

.corp { overflow: hidden; position: relative; background: var(--fundal-pagina); }

/* Alunecarea de pagină: ca un bloc, circa 600 ms cu decelerare (4.1).
   E singura animație din zona de date (4.9.9). */
.corp__lista {
  position: absolute;
  left: 0; right: 0; top: 0;
  will-change: transform;
}

.corp__lista--aluneca {
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Grilele de coloane ───────────────────────────────────────────────── */
/* Aceleași coloane la capul de tabel și la rânduri, dintr-un singur loc.
   Orientarea schimbă doar numărul de rânduri pe pagină; coloanele sunt
   aceleași în landscape și portrait (4.1, 4.2). */

/* Fără spațiu între piste: spațiul stă în celule (vezi nota de la :root). */
.grila { column-gap: 0; }

.grila--plecari {
  grid-template-columns:
    var(--col-logo) var(--col-zbor) minmax(0, 1fr)
    var(--col-ora) var(--col-est) var(--col-ghisee) var(--col-poarta) var(--col-status);
}

/* Panoul din zona airside dezactivează coloana de ghișee: pasagerul a trecut
   deja de ele, iar spațiul câștigat merge la celelalte coloane (4.1). */
.grila--plecari-fara-ghisee {
  grid-template-columns:
    var(--col-logo) var(--col-zbor) minmax(0, 1fr)
    var(--col-ora) var(--col-est) var(--col-poarta) var(--col-status);
}

.grila--sosiri {
  grid-template-columns:
    var(--col-logo) var(--col-zbor) minmax(0, 1fr)
    var(--col-ora) var(--col-est) var(--col-ghisee) var(--col-status);
}

/* Orele și coloanele de resursă se aliniază la dreapta; textul, la stânga. */
.la-dreapta { text-align: right; }
.la-centru { text-align: center; }

/* ── Rândul de zbor ───────────────────────────────────────────────────── */
/* Înălțimea e fixată de numărul de rânduri configurat, nu de conținut (4.1):
   patru zboruri într-o configurare de opt înseamnă patru rânduri normale și
   restul suprafeței goală. */

/* Celulele se ÎNTIND pe toată înălțimea rândului, nu se centrează în el.
   Altfel caseta fiecăreia ar fi înaltă cât textul din ea, iar linia verticală
   dintre coloane ar ieși de lungimi diferite pe fiecare rând. Centrarea se
   mută înăuntru, în celulă. */
.rand {
  height: 9rem;
  display: grid;
  align-items: stretch;
  padding: 0 var(--marja);
  border-bottom: 1px solid var(--linie-separare);
  overflow: hidden;
}

/* Alternanța repornește la fiecare pagină, cu primul rând pe fundalul de
   pagină (4.1). Clasa o pune emitentul, nu :nth-child — fiindcă rândurile de
   zi nu intră în alternanță și nici n-o resetează. */
.rand--alternant { background: var(--fundal-alternanta); }

/* Slotul rămas liber la capătul unei pagini scurtate: suprafață goală, pe
   fundalul de pagină, fără linie de separare. Nu e un rând. */
.rand-gol {
  height: 9rem;
  background: var(--fundal-pagina);
}

/* Celulele sunt containere flex ca să-și centreze conținutul pe verticală —
   rândul le întinde pe toată înălțimea lui, altfel linia de la coloanele de
   resursă ar ieși de lungimi diferite pe fiecare rând.
   Flexbox FĂRĂ gap: proprietatea gap în flex a apărut în Chrome 84 și se
   ignoră tăcut (§3 din PLAN.md). Aici nici n-avem nevoie de ea — un copil. */
.rand__celula {
  overflow: hidden;
  min-width: 0;
  padding: 0 var(--padding-celula);
  display: flex;
  align-items: center;
}

.rand__celula:first-child { padding-left: 0; }
.rand__celula:last-child { padding-right: 0; }

/* Copilul unei celule-flex are nevoie de min-width 0 ca trunchierea cu puncte
   de suspensie să funcționeze: fără el, lățimea minimă implicită a unui item
   e cea a conținutului, deci nu se strânge niciodată. */
.rand__celula > * { min-width: 0; max-width: 100%; }

/* COLOANELE SEPARATE — ghișeu, poartă, bandă și observații. Sunt cele patru
   care poartă ce trebuie făcut: unde te duci și ce se întâmplă cu zborul.
   Restul tabelului spune care e zborul. Linia la stânga și respirația mai
   largă despart cele două jumătăți fără să adauge nicio culoare.
   Linia merge pe toată înălțimea rândului, fiindcă celula e întinsă.

   ⚠ REGULA STĂ AICI, DUPĂ .rand__celula, ȘI NU MAI SUS. Prima oară a fost
     pusă lângă capul de tabel, adică ÎNAINTEA lui .rand__celula. Aceeași
     specificitate, dar cealaltă folosea scurtătura padding, care rescrie și
     stânga și dreapta — deci câștiga ultima din fișier. Ieșise un cap de tabel
     cu 1 unitate de padding și rânduri cu 0,6, adică un tabel nealiniat.

   La ultima coloană, observațiile, marja rândului lucrează deja: 1 unitate
   până la marginea ecranului. Deci padding-ul ei din dreapta e 0,5, ca suma
   să dea tot 1,5 — cât are stânga celorlalte coloane separate.
   Regula pentru ultima are aceeași specificitate ca :last-child de mai sus,
   deci trebuie să vină DUPĂ ea ca s-o bată. */
.rand__celula--separata,
.cap__celula--separata {
  border-left: 1px solid var(--linie-separare);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.rand__celula--separata:last-child,
.cap__celula--separata:last-child {
  padding-right: 0.5rem;
}

/* Ghișeul, poarta și banda se aliniază la DREAPTA, și în cap, și în rânduri.
   Celula e un container flex, deci text-align singur n-ar face nimic: copilul
   e lat cât conținutul lui, iar textul e deja aliniat în el. Se mută tot
   copilul, cu justify-content. La cap, unde flexul e pe coloană, spanurile se
   întind pe toată lățimea, deci acolo text-align chiar lucrează. */
.rand__celula--dreapta { justify-content: flex-end; text-align: right; }
.cap__celula--dreapta { text-align: right; }

/* Logoul nu se strânge: dacă vreodată nu încape, se taie — iar tăierea o
   prinde sonda de măsurare. Strâns, s-ar turti fără să spună nimeni nimic. */
.rand__logo { flex: 0 0 auto; }

/* Înălțime fixă, lățime după proporția fișierului. Logourile de companie sunt
   toate 3:1 (3.3), deci ies 18 unități late — cât conținutul coloanei. Dacă
   vreunul vine cu altă proporție, se lățește și îl taie celula; sonda de
   măsurare prinde asta. */
.rand__logo {
  height: 5rem;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.rand__text {
  font-size: 2.6rem;
  line-height: 1.28;
  font-weight: 500;
  white-space: nowrap;
}

/* Denumirile care nu încap se trunchiază cu puncte de suspensie (4.1).
   O singură mărime, aceeași cu restul rândului: o denumire mai mică decât
   vecinele ei nu spune nimic cititorului, o denumire tăiată spune că textul
   continuă. Majusculele sunt o hotărâre de la runda 1 de modificări; 4.9.6
   cere „denumirile de locuri în literă mică", deci e abatere — §6 din
   jurnal. */
.rand__oras {
  font-size: 2.6rem;
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rand__zbor { font-weight: 500; }

/* Statusul: majuscule, un singur rând, o singură mărime. Ce nu încape se taie.
   E abatere dublă de la 4.1 — care îl dă drept singura coloană care NU se
   trunchiază și care trece pe două rânduri la nevoie. Hotărât la runda 5 de
   modificări; §6 din JURNAL.md. */
.rand__status {
  font-size: 2.6rem;
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Valorile bilingve stau pe un rând, cu punct median între limbi (4.9.2). */
.rand__status-en { color: inherit; opacity: 0.82; }

/* ── Resursele și eticheta de terminal ────────────────────────────────── */
/* Eticheta apare o dată per terminal, nu la fiecare resursă; e neutră,
   necolorată (4.1). Resursele din terminale diferite formează grupuri
   separate, ordonate după ordinea de afișare a terminalelor. */

.resursa__grup { display: inline-block; white-space: nowrap; }
.resursa__grup + .resursa__grup { margin-left: 1.1rem; }

.terminal {
  display: inline-block;
  background: var(--eticheta-terminal);
  color: var(--text-principal);
  font-size: 2.2rem;
  font-weight: 500;
  border-radius: 0.35rem;
  padding: 0.05rem 0.5rem;
  margin-right: 0.45rem;
  vertical-align: 0.1em;
}

/* Când zborul are resurse în două terminale, grupurile ocupă cât două valori
   plus două etichete. Se strâng, ca să nu ceară o coloană cât destinația. */
/* Numerele de ghișeu și de poartă au corpul lor, mai mic decât al orelor:
   sunt scurte și se citesc dintr-o privire. */
.rand__resursa {
  font-size: 2.6rem;
  line-height: 1.28;
  font-weight: 500;
  white-space: nowrap;
}

/* Grupurile din două terminale nu se mai strâng: același corp ca la un
   terminal singur, iar coloana e lățită cât să-i ajungă. */
.rand__resursa--multi { font-size: 2.6rem; }

/* ── Rândul de zi (4.1) ───────────────────────────────────────────────── */
/* Data, pe fundalul capului de tabel; text alb, fără culoare — nu e o
   abatere. Ziua curentă se scrie „Azi · Today"; celelalte, doar data. */

.rand-zi {
  height: 9rem;
  display: flex;
  align-items: center;
  padding: 0 var(--marja);
  background: var(--cap-tabel);
  overflow: hidden;
  border-bottom: 1px solid var(--linie-separare);
}

.rand-zi__data {
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-principal);
}

.rand-zi__en { color: var(--text-secundar); font-weight: 500; }

/* ── Banda de mesaje (4.9.7) ──────────────────────────────────────────── */
/* Spațiul e rezervat permanent în grilă. Când nu e niciun mesaj activ rămâne
   gol, pe fundalul paginii — dacă ar apărea și ar dispărea, s-ar schimba
   înălțimea rândurilor de deasupra la fiecare mesaj. */

.banda {
  background: var(--banda-fundal);
  color: var(--banda-text);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--marja);
}

.banda--goala { background: var(--fundal-pagina); }

.banda__pista {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  /* Fade la apariția și la dispariția conținutului (4.9.9). */
  transition: opacity 300ms linear;
}

.banda__pista--stins { opacity: 0; }

/* ── Reclama (4.9.8, 4.9.9) ───────────────────────────────────────────── */
/* Acoperă toată suprafața, peste conținutul oricărui tip. Fade de 300 ms la
   intrare și la ieșire. Fișierul se încadrează păstrându-și proporția, fără
   decupare: restul suprafeței rămâne pe fundalul paginii. */

.reclama {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--fundal-pagina);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 300ms linear;
  z-index: 10;
}

.reclama--vizibila { opacity: 1; }

.reclama__fisier {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Repausul (4.7) ───────────────────────────────────────────────────── */
/* Fără header. Logoul aeroportului centrat, iar sub el data și ora curentă. */

.repaus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--fundal-pagina);
}

.repaus__logo {
  height: 14rem;
  width: 42rem;
  object-fit: contain;
  display: block;
  margin-bottom: 4rem;
}

.repaus__ceas {
  font-size: 9rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1.4rem;
}

.repaus__data {
  font-size: 4.5rem;
  font-weight: 400;
  color: var(--text-secundar);
  letter-spacing: 0.06em;
}

/* ── Eroarea (4.8) ────────────────────────────────────────────────────── */
/* Fără header. Logoul centrat, sub el mesajul, iar sub acesta ora curentă.
   Ceasul e prezent intenționat: un ecran complet static nu lasă să se vadă
   dacă pagina mai trăiește. */

.eroare {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--fundal-pagina);
  text-align: center;
  padding: 0 8rem;
}

.eroare__logo {
  height: 11.200000000000001rem;
  width: 33.6rem;
  object-fit: contain;
  display: block;
  margin-bottom: 3.4rem;
}

.eroare__ro {
  font-size: 6.5rem;
  font-weight: 700;
  color: var(--text-principal);
  line-height: 1.1;
}

.eroare__en {
  font-size: 4.2rem;
  font-weight: 400;
  color: var(--text-secundar);
  line-height: 1.1;
  margin-top: 0.9rem;
}

.eroare__ceas {
  font-size: 5.58rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 3.4rem;
  line-height: 1;
}

/* ── Panourile de resursă, layoutul plin (4.3 – 4.5) ─────────────────── */

.panou {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  padding: 2.2rem var(--marja) 0 var(--marja);
  overflow: hidden;
}

.panou__resursa {
  font-size: 5rem;
  font-weight: 700;
  color: var(--text-principal);
  letter-spacing: 0.02em;
}

.panou__resursa-en {
  font-size: 3rem;
  font-weight: 400;
  color: var(--text-secundar);
  letter-spacing: 0.05em;
}

.panou__zbor {
  font-size: 9rem;
  font-weight: 700;
  line-height: 1;
}

.panou__eticheta {
  font-size: 2.4rem;
  color: var(--text-secundar);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  display: block;
}

.panou__valoare {
  font-size: 5.4rem;
  font-weight: 500;
  line-height: 1.05;
  display: block;
}

/* Categoria: pe fundalul culorii ei, fără etichetă de câmp. Culoarea textului
   se derivă din luminanța fundalului (4.3, 4.9.5). E singura excepție de la
   regula de aur, și e mărginită la etichetă (4.9.3). */
.categorie {
  display: inline-block;
  font-size: 3.6rem;
  font-weight: 700;
  padding: 0.35rem 1.2rem;
  border-radius: 0.4rem;
  line-height: 1.1;
}

/* ── Generalul (4.6) ──────────────────────────────────────────────────── */

.general {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 10rem;
}

.general__imagine {
  height: 26rem;
  width: 26rem;
  object-fit: contain;
  display: block;
  margin-bottom: 3.4rem;
}

.general__titlu-ro {
  font-size: 8rem;
  font-weight: 700;
  line-height: 1.05;
}

.general__titlu-en {
  font-size: 5.2rem;
  font-weight: 400;
  color: var(--text-secundar);
  line-height: 1.05;
  margin-top: 0.6rem;
}

.general__detalii-ro {
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1.25;
  margin-top: 3rem;
  max-width: 100rem;
}

.general__detalii-en {
  font-size: 3.4rem;
  font-weight: 400;
  color: var(--text-secundar);
  line-height: 1.25;
  margin-top: 1.2rem;
  max-width: 100rem;
}