/*
  Sistemul de design al platformei INCLUDJG+.

  Două reguli îl țin împreună:
    1. Accesibilitatea nu se negociază pentru aspect. Contrastul textului este
       peste 4,5:1, al marginilor de câmp peste 3:1, țintele de clic au cel puțin
       44 px, iar starea nu se transmite niciodată doar prin culoare.
    2. Totul trece prin jetoanele de mai jos. Modul de contrast ridicat și
       reglajele utilizatorului le redefinesc, iar restul paginii le urmează.

  Reglajele utilizatorului (M5) se aplică prin atribute pe elementul <html>:
    data-contrast="high"        contrast ridicat
    data-font="readable"        spațiere și ritm pentru dificultăți de citire
    data-text="lg" | "xl"       mărirea textului
    data-spacing="loose"        spațiere crescută între rânduri și litere
    data-motion="reduced"       eliminarea animațiilor

  Atributele sunt scrise de prefs.js din localStorage, înainte de prima randare,
  ca să nu existe o clipire cu setările implicite.
*/

/* ---------- Fontul ---------- */
/*
  Atkinson Hyperlegible, creat de Braille Institute pentru cititorii cu vedere
  redusă: literele care se confundă ușor (I, l, 1; O, 0) au forme distincte.
  Găzduit local (licență OFL, static/vendor/fonts/OFL.txt): fără cereri către
  terți. Setul latin-ext conține ă, â, î, ș, ț.
*/
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-400-normal.82a5516b3709.woff2") format("woff2");
  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; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-ext-400-normal.bee495dfc341.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-700-normal.833b135521b5.woff2") format("woff2");
  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; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-ext-700-normal.cb155ae09e92.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-400-italic.a56101834cc7.woff2") format("woff2");
  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; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../vendor/fonts/atkinson-hyperlegible-latin-ext-400-italic.9de6aa217882.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Jetoane ---------- */
:root {
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-scale: 1;
  --line-height: 1.6;
  --letter-spacing: normal;
  --word-spacing: normal;

  /* Culorile. Albastrul principal este albastrul universității (din logo). */
  --c-bg: #ffffff;
  --c-canvas: #f4f7f9;          /* fundalul secțiunilor, ușor rece */
  --c-surface: #ffffff;         /* cărțile stau pe canvas */
  --c-surface-2: #eaf1f5;
  --c-line: #dce4ea;            /* separatoare decorative */
  --c-border: #7a8a96;          /* marginea unui câmp: 3,5:1 pe alb, peste minimul de 3:1 */
  --c-text: #14212b;            /* 16:1 pe alb */
  --c-text-muted: #4a5965;      /* 7,2:1 pe alb */
  --c-accent: #006599;          /* albastrul UDJG, 6,3:1 pe alb */
  --c-accent-strong: #004b72;   /* 9,4:1, pentru apăsare și titluri accentuate */
  --c-accent-contrast: #ffffff;
  --c-accent-soft: #e2f0f7;
  --c-highlight: #f6b93b;       /* chihlimbar: doar decorativ, niciodată text pe alb */
  --c-highlight-soft: #fdf1d6;
  --c-focus: #c2410c;           /* portocaliu, distinct de albastru pe orice fundal deschis */

  --c-ok: #1b6b35;
  --c-ok-soft: #e4f4e8;
  --c-warn: #8a5300;
  --c-warn-soft: #fdf1d6;
  --c-bad: #a12010;
  --c-bad-soft: #fbe6e2;

  --shadow-sm: 0 1px 2px rgba(20, 33, 43, 0.06);
  --shadow: 0 1px 2px rgba(20, 33, 43, 0.05), 0 8px 24px -8px rgba(20, 33, 43, 0.12);
  --shadow-lg: 0 2px 4px rgba(20, 33, 43, 0.05), 0 18px 40px -12px rgba(20, 33, 43, 0.18);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --space: 1rem;
  --measure: 68ch;
  --page: 1180px;
  --transition: 160ms ease;
  --target: 44px;               /* ținta minimă de clic, WCAG 2.5.5 */
}

/*
  Contrast ridicat: alb și galben pe negru. Umbrele și nuanțele dispar,
  marginile devin albe și groase: separarea vine din contur, nu din tentă.
*/
:root[data-contrast="high"] {
  --c-bg: #000000;
  --c-canvas: #000000;
  --c-surface: #000000;
  --c-surface-2: #141414;
  --c-line: #ffffff;
  --c-border: #ffffff;
  --c-text: #ffffff;
  --c-text-muted: #f0f0f0;
  --c-accent: #ffe14d;
  --c-accent-strong: #fff27a;
  --c-accent-contrast: #000000;
  --c-accent-soft: #2a2400;
  --c-highlight: #ffe14d;
  --c-highlight-soft: #2a2400;
  --c-focus: #4de2ff;
  --c-ok: #79f08e;
  --c-ok-soft: #000000;
  --c-warn: #ffcc4d;
  --c-warn-soft: #000000;
  --c-bad: #ff9b8f;
  --c-bad-soft: #000000;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
}

:root[data-text="lg"] { --font-scale: 1.15; }
:root[data-text="xl"] { --font-scale: 1.35; }

:root[data-spacing="loose"] {
  --line-height: 1.9;
  --letter-spacing: 0.05em;
  --word-spacing: 0.16em;
}

/* Fontul implicit este deja cel mai lizibil pe care îl avem; modul pentru citire
   mai ușoară adaugă ritmul: rânduri mai aerisite, litere mai depărtate. */
:root[data-font="readable"] {
  --line-height: 1.85;
  --letter-spacing: 0.035em;
  --word-spacing: 0.12em;
}

/* ---------- Bază ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Atributul hidden trebuie să câștige mereu. Altfel orice clasă care setează
   display (de exemplu .btn, cu inline-flex) face vizibil un element ascuns. */
[hidden] { display: none !important; }

html {
  /* Nu se fixează px pe html: pornim de la setarea de font a browserului utilizatorului. */
  font-size: calc(1rem * var(--font-scale));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  word-spacing: var(--word-spacing);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

img { max-width: 100%; height: auto; }

/* Iconițele moștenesc culoarea textului de lângă ele. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

/* ---------- Focalizare ---------- */
/* Indicatorul de focalizare este obligatoriu vizibil, în orice context. */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 0;
}

/* ---------- Structură ---------- */
.layout {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 calc(var(--space) * 1.25);
}

/* Antetul nu este fixat: la mărire 200–400 % ar acoperi conținutul. */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
:root[data-contrast="high"] .site-header { border-bottom-width: 2px; }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem calc(var(--space) * 1.25);
  max-width: var(--page);
  margin: 0 auto;
}
.site-header__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-right: auto;
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-decoration: none;
  min-height: var(--target);
}
.site-header__name span {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--c-text-muted);
}
.site-header__udjg {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--c-line);
  font-size: 0.82rem;
  color: var(--c-text);
  max-width: 14rem;
  line-height: 1.3;
  min-height: var(--target);
}
.site-header__udjg img { height: 40px; width: auto; flex: 0 0 auto; }
/* Albastrul universității nu se distinge pe negru: în contrast ridicat logo-ul
   stă pe un fond alb, fără să i se schimbe culorile. */
:root[data-contrast="high"] .site-header__udjg img {
  background: #ffffff;
  padding: 2px;
  border-radius: 4px;
}

/* Semnul platformei, în culorile temei (și în modul de contrast ridicat). */
.logo { flex: 0 0 auto; }
.logo__pin { fill: var(--c-accent); }
.logo__plus { fill: var(--c-accent-contrast); }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.4rem 0.9rem;
  color: var(--c-text);
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition);
}
.site-nav a:hover { background: var(--c-surface-2); }
/* Pagina curentă: fundal și text accentuat, plus o bordură, ca să nu depindă de culoare. */
.site-nav a[aria-current="page"] {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  border-color: var(--c-accent);
}

.prefs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--target);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--c-accent);
  background: var(--c-surface);
  color: var(--c-accent-strong);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.prefs-toggle:hover, .prefs-toggle[aria-expanded="true"] { background: var(--c-accent-soft); }

main { padding: 0 0 4.5rem; }
.page-body { padding-top: 2.25rem; }
main:focus { outline: none; }

/* ---------- Tipografie ---------- */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; color: var(--c-text); }
h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  letter-spacing: -0.015em;
}
h2 { font-size: 1.45rem; margin-top: 2.25rem; letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; margin-top: 1.5rem; }
p, li { max-width: var(--measure); }

a { color: var(--c-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-accent-strong); text-decoration-thickness: 2px; }
:root[data-contrast="high"] a:hover { color: var(--c-accent-strong); }

.lead {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--c-text-muted);
  max-width: 60ch;
}

/* ---------- Componente ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
:root[data-contrast="high"] .card { border-width: 2px; }

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.65rem 1.35rem;
  border-radius: 10px;
  border: 2px solid var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn:hover {
  background: var(--c-accent-strong);
  border-color: var(--c-accent-strong);
  color: var(--c-accent-contrast);
  box-shadow: var(--shadow);
}
.btn--secondary {
  background: var(--c-surface);
  color: var(--c-accent-strong);
  border-color: var(--c-accent);
}
.btn--secondary:hover { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.btn--lg { min-height: 56px; padding: 0.8rem 1.6rem; font-size: 1.05rem; }
.btn .icon { width: 1.2em; height: 1.2em; }

/* Starea unei facilități nu se transmite prin culoare: are text și simbol propriu. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.65rem 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.5;
  border: 1px solid currentColor;
}
.status::before { font-size: 0.95rem; line-height: 1; }
.status--functional { color: var(--c-ok); background: var(--c-ok-soft); }
.status--functional::before { content: "✓"; }
.status--temporary_out, .status--planned { color: var(--c-warn); background: var(--c-warn-soft); }
.status--temporary_out::before, .status--planned::before { content: "!"; }
.status--out_of_order { color: var(--c-bad); background: var(--c-bad-soft); }
.status--out_of_order::before { content: "✕"; }
.status--unknown { color: var(--c-text-muted); background: var(--c-canvas); }
.status--unknown::before { content: "?"; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Panoul de reglaje (M5) ---------- */
.prefs {
  border-top: 1px solid var(--c-line);
  background: var(--c-canvas);
}
.prefs__inner { padding: 1.75rem calc(var(--space) * 1.25) 2.25rem; }
.prefs h2 { margin-top: 0; font-size: 1.35rem; }
.prefs__note, .prefs__hint {
  color: var(--c-text-muted);
  font-size: 0.95rem;
  max-width: var(--measure);
}
.prefs__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 1rem;
}
.prefs__group {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0;
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
:root[data-contrast="high"] .prefs__group { border-width: 2px; }
/*
  Legenda nu se lasă în golul din chenar: la text mărit se rupe pe două rânduri
  și al doilea rând iese peste bordură. O scoatem deasupra conținutului, în
  interiorul chenarului, unde se poate întinde oricât.
*/
.prefs__group legend {
  float: left;
  width: 100%;
  font-weight: 700;
  padding: 0;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
.prefs__group::after { content: ""; display: table; clear: both; }
.prefs__options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.prefs__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* Ținta de interacțiune include eticheta, nu doar caseta. */
.chk {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--target);
  cursor: pointer;
}
.chk input { width: 22px; height: 22px; accent-color: var(--c-accent); flex: 0 0 auto; }
/* În formulare, „.form label” ar face eticheta bloc și textul ar trece sub căsuță. */
.form label.chk { display: flex; align-items: flex-start; margin-bottom: 0.2rem; line-height: 1.4; }
.form label.chk input { margin: 0.1rem 0 0; }
.radio-list .chk { font-weight: 400; }

/* ---------- Formulare ---------- */
.form { max-width: var(--measure); }
.form__row { margin-bottom: 1.4rem; }
.form label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.form input[type="text"], .form input[type="email"], .form textarea, .form select, .form input[type="file"] {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  border: 2px solid var(--c-border);
  border-radius: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form input[type="file"] { padding: 0.4rem; color: var(--c-text-muted); }
.form input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-right: 0.75rem;
  padding: 0.35rem 0.95rem;
  font: inherit;
  font-weight: 700;
  color: var(--c-accent-strong);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  border-radius: 8px;
  cursor: pointer;
}
.form input:hover, .form textarea:hover, .form select:hover { border-color: var(--c-text-muted); }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible {
  border-color: var(--c-accent);
}
.form .helptext {
  display: block;
  font-size: 0.92rem;
  color: var(--c-text-muted);
  margin: -0.1rem 0 0.45rem;
  font-weight: 400;
}
/* Eroarea se transmite prin text și simbol, niciodată doar prin culoare. */
.form__errors {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  color: var(--c-bad);
  font-weight: 700;
}
.form__errors li::before { content: "✕ "; }
.form__row--invalid input, .form__row--invalid textarea, .form__row--invalid select {
  border-color: var(--c-bad);
  border-width: 3px;
}
.form__summary {
  border: 2px solid var(--c-bad);
  border-left-width: 8px;
  border-radius: var(--radius);
  background: var(--c-bad-soft);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
}
.form__summary h2 { margin-top: 0; font-size: 1.15rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.messages li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: none;
  border: 1px solid var(--c-ok);
  border-left-width: 6px;
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  background: var(--c-ok-soft);
  font-weight: 700;
}
.messages li::before { content: "✓"; color: var(--c-ok); }

.breadcrumb { font-size: 0.92rem; margin-bottom: 1.25rem; color: var(--c-text-muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.breadcrumb li::after { content: "›"; margin-left: 0.45rem; color: var(--c-text-muted); }
.breadcrumb li:last-child::after { content: ""; }

/* ---------- Căutare ---------- */
.search {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  background: var(--c-canvas);
  margin: 1.75rem 0;
}
:root[data-contrast="high"] .search { border-width: 2px; }
.search__title { font-size: 1.05rem; margin: 0 0 0.75rem; }
.search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.search__row label { font-weight: 700; }
.search__row input[type="search"] {
  flex: 1 1 16rem;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  border: 2px solid var(--c-border);
  border-radius: 10px;
}

/* O casetă de informare urmată direct de un formular are nevoie de aer sub ea. */
.notice + .form { margin-top: 1.5rem; }

/* Lista corecțiilor din declarația de accesibilitate. */
.corrections { padding-left: 1.25rem; }
.corrections li { margin-bottom: 1rem; }
.corrections .feature__checked { display: block; font-size: 0.88rem; color: var(--c-text-muted); }
.corrections p { margin: 0.25rem 0 0; }

/* Opțiuni radio una sub alta, cu ținta de clic pe toată eticheta. */
.radio-list { display: grid; gap: 0.25rem; clear: both; }
.radio-list .chk { font-weight: 400; margin: 0; }

/* ---------- Pagina principală ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 420px at 85% -10%, var(--c-accent-soft), transparent 70%),
    var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 0.75rem;
}
:root[data-contrast="high"] .hero { background: var(--c-bg); border-bottom-width: 2px; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  /* Doar sus și jos: lateral rămâne spațiul din .layout. */
  padding-top: 3.5rem;
  padding-bottom: 3.75rem;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-accent-strong);
  font-weight: 700;
  font-size: 0.88rem;
}
.hero h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); margin-bottom: 1rem; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--c-highlight-soft) 62%);
  padding: 0 0.1em;
}
:root[data-contrast="high"] .hero h1 em { background: none; text-decoration: underline; text-decoration-color: var(--c-accent); }
.hero .lead { font-size: 1.2rem; margin-bottom: 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero__art { width: 100%; height: auto; max-width: 520px; justify-self: end; }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; padding-top: 2.5rem; padding-bottom: 2.75rem; }
  .hero__art { justify-self: start; max-width: 420px; }
}

/* Ilustrația din pagina principală: decorativă, în culorile temei. */
.art-ground { fill: var(--c-surface); stroke: var(--c-line); }
.art-block { fill: var(--c-surface-2); }
.art-block--accent { fill: var(--c-accent-soft); stroke: var(--c-accent); stroke-width: 1.5; }
.art-path { fill: none; stroke: var(--c-line); stroke-width: 10; stroke-linecap: round; }
.art-route { fill: none; stroke: var(--c-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.art-pin { fill: var(--c-accent); }
.art-pin-plus { fill: var(--c-accent-contrast); }
.art-dot { fill: var(--c-ok); }
.art-dot--warn { fill: var(--c-highlight); }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-text);
}
.trust .icon { color: var(--c-ok); width: 1.35em; height: 1.35em; }

.section { margin: 3.25rem 0 0; }
.section__head { max-width: 60ch; margin-bottom: 1.5rem; }
.section__head h2 { margin: 0 0 0.35rem; font-size: 1.65rem; }
.section__head p { margin: 0; color: var(--c-text-muted); }

/* Alegerea nevoii: dale mari, fiecare duce la harta filtrată. */
.needs {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.needs li { max-width: none; }
.need {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-content: center;
  height: 100%;
  min-height: 88px;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  color: var(--c-text);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.need:hover {
  color: var(--c-text);
  border-color: var(--c-accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
:root[data-contrast="high"] .need { border-width: 2px; }
.need__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}
.need__icon .icon { width: 24px; height: 24px; }
.need__hint { font-weight: 400; font-size: 0.9rem; color: var(--c-text-muted); }

/* Modulele: cărți cu o singură legătură care acoperă toată cartea. */
.modules {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.modules li { max-width: none; }
.module {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.5rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.module:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--c-accent); }
.module:focus-within { border-color: var(--c-accent); }
:root[data-contrast="high"] .module { border-width: 2px; }
.module__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}
.module__icon .icon { width: 26px; height: 26px; }
.module h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.module p { margin: 0 0 1.1rem; color: var(--c-text-muted); flex: 1; }
.module__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--c-accent-strong);
  text-decoration: none;
}
/* Legătura se întinde peste toată cartea: o singură țintă, un singur nume. */
.module__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.module__link:focus-visible { outline: none; }
.module__link:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 3px; }

.callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--c-accent-strong);
  color: var(--c-accent-contrast);
}
.callout h2 { color: inherit; margin: 0 0 0.25rem; font-size: 1.3rem; }
.callout p { margin: 0; opacity: 0.92; }
.callout .icon { width: 36px; height: 36px; }
.callout .btn { background: var(--c-accent-contrast); color: var(--c-accent-strong); border-color: var(--c-accent-contrast); }
.callout .btn:hover { background: var(--c-accent-soft); }
:root[data-contrast="high"] .callout { background: var(--c-bg); border: 2px solid var(--c-text); color: var(--c-text); }
:root[data-contrast="high"] .callout .btn { background: var(--c-accent); color: var(--c-accent-contrast); }
@media (max-width: 700px) {
  .callout { grid-template-columns: 1fr; }
}

/* ---------- Subsol ---------- */
.site-footer {
  margin-top: 1rem;
  border-top: 1px solid var(--c-line);
  background: var(--c-canvas);
  padding: 2.5rem 0 2rem;
  color: var(--c-text-muted);
  font-size: 0.95rem;
}
:root[data-contrast="high"] .site-footer { border-top-width: 2px; }
.site-footer__grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
}
.site-footer h2 {
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
  color: var(--c-text);
  letter-spacing: 0.02em;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer__brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--c-text); font-size: 1.1rem; margin-bottom: 0.5rem; }
.site-footer__legal {
  max-width: none;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.88rem;
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* Pe ecran îngust, legătura către universitate trece sub numele platformei:
   bara despărțitoare nu mai are ce despărți. */
@media (max-width: 600px) {
  .site-header__udjg {
    border-left: 0;
    padding-left: 0;
    max-width: none;
    margin-left: calc(40px + 0.65rem);  /* aliniată cu textul de lângă semn */
  }
}

/* Întrebările frecvente din pagina principală. */
.topics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.topic {
  max-width: none;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--c-highlight);
  background: var(--c-canvas);
}
:root[data-contrast="high"] .topic { border: 2px solid var(--c-text); border-left-width: 6px; }
.topic h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.topic p { margin: 0; }

/* Caseta de informare de pe pagina principală (în afara paginii hărții). */
.layout > .notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: none;
  margin: 0;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--c-warn);
  border-left-width: 6px;
  background: var(--c-warn-soft);
  font-weight: 700;
}
.layout > .notice .icon { color: var(--c-warn); }


/* ======================================================================
   Paginile interioare
   ====================================================================== */

/* ---------- Antetul de pagină ---------- */
.page-head {
  background:
    radial-gradient(900px 300px at 90% -40%, var(--c-accent-soft), transparent 70%),
    var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
}
:root[data-contrast="high"] .page-head { background: var(--c-bg); border-bottom-width: 2px; }
.page-head__inner { padding-top: 2rem; padding-bottom: 2.25rem; }
.page-head .breadcrumb { margin-bottom: 1.1rem; }
.page-head h1 { margin: 0 0 0.6rem; }
.page-head .lead { margin: 0; }
.page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--c-accent-strong);
}
.page-head__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}
.page-head__icon .icon { width: 20px; height: 20px; }
.page-head__back { margin: 0 0 1rem; font-size: 0.95rem; }
.page-head__back a { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; text-decoration: none; }
.icon--flip { transform: scaleX(-1); }
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  color: var(--c-text-muted);
  font-size: 0.95rem;
}
.page-head__meta li { display: inline-flex; align-items: center; gap: 0.45rem; max-width: none; }
.page-head__meta .icon { color: var(--c-accent); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }

/* ---------- Așezare: conținut și panou lateral ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 2.5rem;
  align-items: start;
}
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 1.75rem; } }

.aside-card {
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--c-canvas);
  border: 1px solid var(--c-line);
}
:root[data-contrast="high"] .aside-card { border-width: 2px; }
.aside-card h2 { font-size: 1.1rem; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.aside-card h2 .icon { color: var(--c-accent); }
.aside-card ol, .aside-card ul { padding-left: 1.2rem; margin: 0; }
.aside-card li { margin-bottom: 0.5rem; }
.aside-card p { margin: 0 0 0.75rem; }
.aside-card > :last-child { margin-bottom: 0; }
.aside-card + .aside-card { margin-top: 1.25rem; }

/* ---------- Panou cu titlu ---------- */
.panel {
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow);
  margin-bottom: 1.75rem;
}
:root[data-contrast="high"] .panel { border-width: 2px; }
.panel > h2:first-child, .panel__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-size: 1.2rem;
}
.panel > h2:first-child .icon, .panel__title .icon { color: var(--c-accent); }
.panel > :last-child { margin-bottom: 0; }

/* ---------- Fapte cheie: etichetă și valoare ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.1rem 1.75rem;
  margin: 0;
}
.facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start; }
.facts .icon { grid-row: 1 / span 2; color: var(--c-accent); margin-top: 0.15rem; width: 1.3em; height: 1.3em; }
.facts dt { font-size: 0.85rem; color: var(--c-text-muted); font-weight: 700; letter-spacing: 0.02em; }
.facts dd { margin: 0.1rem 0 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Grilă de dale cu legătură ---------- */
.tiles {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.tiles > li { max-width: none; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-accent); }
.tile:focus-within { border-color: var(--c-accent); }
:root[data-contrast="high"] .tile { border-width: 2px; }
.tile h3, .tile h4 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.tile h3 a, .tile h4 a { color: var(--c-text); text-decoration: none; }
.tile h3 a::after, .tile h4 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.tile h3 a:focus-visible, .tile h4 a:focus-visible { outline: none; }
.tile h3 a:focus-visible::after, .tile h4 a:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.tile p { margin: 0 0 0.6rem; color: var(--c-text-muted); }
.tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  font-size: 0.88rem;
  color: var(--c-text-muted);
}
.tile__meta li { display: inline-flex; align-items: center; gap: 0.35rem; max-width: none; }
.tile__meta .icon { color: var(--c-accent); }
/* Legături secundare dintr-o dală stau deasupra legăturii întinse. */
.tile__links { position: relative; z-index: 1; margin: 0 0 0.6rem; }
.tile__arrow { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--c-accent); }

/* ---------- Pași numerotați (trasee, proceduri) ---------- */
.steps-list {
  counter-reset: pas;
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps-list li {
  counter-increment: pas;
  position: relative;
  max-width: 62ch;
  padding: 0 0 1.4rem 3.4rem;
  min-height: 2.5rem;
}
.steps-list li::before {
  content: counter(pas);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  font-weight: 700;
}
.steps-list li::after {
  content: "";
  position: absolute;
  left: calc(1.15rem - 1px);
  top: 2.4rem;
  bottom: 0.2rem;
  border-left: 2px solid var(--c-line);
}
.steps-list li:last-child::after { display: none; }
.steps-list li:last-child { padding-bottom: 0; }

/* ---------- Text de citit (articole) ---------- */
.prose { font-size: 1.08rem; max-width: 70ch; }
.prose h2 { font-size: 1.4rem; margin: 2rem 0 0.6rem; }
.prose h3 { font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
.prose p, .prose li { max-width: none; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: 0.35rem; }
.prose li::marker { color: var(--c-accent); font-weight: 700; }
.prose strong { color: var(--c-text); }
.prose > :first-child { margin-top: 0; }

/* ---------- Confirmare după trimitere ---------- */
.success {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}
.success__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-ok-soft);
  color: var(--c-ok);
  border: 2px solid var(--c-ok);
}
.success__mark .icon { width: 34px; height: 34px; stroke-width: 2.5; }

/* ---------- Copiere de adresă ---------- */
.copy-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--c-border);
  background: var(--c-canvas);
  overflow-wrap: anywhere;
  font-weight: 700;
}

/* ---------- Istoric (cronologie) ---------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 1.1rem 1.75rem;
  max-width: none;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--c-accent);
}
.timeline li::after {
  content: "";
  position: absolute;
  left: calc(0.65rem - 1px);
  top: 1.25rem;
  bottom: 0;
  border-left: 2px solid var(--c-line);
}
.timeline li:last-child::after { display: none; }
.timeline time { display: block; font-size: 0.88rem; color: var(--c-text-muted); }

/* ---------- Secțiuni cu titlu în pagină ---------- */
.block { margin-top: 2.5rem; }
.block > h2:first-child { margin-top: 0; display: flex; align-items: center; gap: 0.55rem; }
.block > h2:first-child .icon { color: var(--c-accent); }
.page-body > :first-child, .page-body > .split:first-child > * > :first-child { margin-top: 0; }

/* Formularele în panou: câmpurile se lățesc pe toată lățimea panoului. */
.panel .form { max-width: none; }

/* Pași compacți, în panoul lateral. */
.steps-list--compact li { padding: 0 0 0.9rem 2.6rem; font-size: 0.95rem; min-height: 1.9rem; }
.steps-list--compact li::before { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; top: 0; }
.steps-list--compact li::after { left: calc(0.9rem - 1px); top: 1.9rem; }
.aside-card .steps-list { padding-left: 0; }
.form.panel { max-width: none; }
.form.panel > button[type="submit"] { margin-top: 0.5rem; }

/* Etichetă neutră de stare, pentru stări care nu sunt nici bune, nici rele. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.7rem 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.5;
  white-space: nowrap;
}
.pill .icon { width: 1em; height: 1em; }

/* Fapte una sub alta, în panoul lateral. */
.facts--stack { grid-template-columns: 1fr; gap: 0.9rem; }
.aside-card .facts { margin-bottom: 1rem; }

/* Stare goală: nimic de arătat, spus frumos. */
.empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 3rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--c-canvas);
  border: 1px dashed var(--c-line);
}
.empty-state h2 { margin: 0.5rem 0 0; }
.empty-state p { margin: 0; color: var(--c-text-muted); }
.success.page-head__inner { align-items: center; }

/* Listă cu bife, pentru enumerări pozitive. */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 1.9rem; margin-bottom: 0.55rem; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--c-ok-soft);
  color: var(--c-ok);
  font-size: 0.8rem;
  font-weight: 700;
}
.topics + .empty, .section__head + .topics { margin-top: 0; }

/* Căutarea mare din antetul paginii de informare. */
.search--head { margin: 1.5rem 0 0; padding: 0; background: none; border: 0; max-width: 46rem; }
.search--head .search__row { position: relative; gap: 0.6rem; flex-wrap: nowrap; }
.search--head input[type="search"] { flex: 1 1 auto; min-width: 0; }
.search--head input[type="search"] {
  min-height: 56px;
  padding-left: 3rem;
  font-size: 1.05rem;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.search--head .btn { min-height: 56px; border-radius: 14px; }
.search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}
.section-lead { color: var(--c-text-muted); margin: -0.25rem 0 1rem; }
.page-head .notice { margin: 0 0 1rem; }
/* Titlul unei dale nu trece pe sub săgeata din colț. */
.tile:has(.tile__arrow) h3, .tile:has(.tile__arrow) h4 { padding-right: 1.9rem; }

/* ---------- Antetul pe telefon ---------- */
/*
  Pe ecran îngust: numele platformei și butonul de reglaje pe primul rând,
  apoi cele patru secțiuni ca o bară cu patru butoane egale. „Raportează o
  problemă” devine „Raportează”, ca să încapă pe un singur rând. Legătura către
  universitate rămâne în subsol.
*/
@media (max-width: 600px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.65rem 0.75rem;
    padding-top: 0.65rem;
    padding-bottom: 0.75rem;
  }
  .site-header__identity { grid-row: 1; grid-column: 1; margin: 0; min-width: 0; }
  .prefs-toggle { grid-row: 1; grid-column: 2; }
  .site-header__udjg { display: none; }
  .site-header__brand { font-size: 1.15rem; min-height: 40px; }
  .site-header__brand .logo { width: 30px; height: 30px; }
  .site-header__name span { display: none; }
  .prefs-toggle { min-height: 40px; padding: 0.3rem 0.8rem; font-size: 0.92rem; }
  .site-nav { grid-row: 2; grid-column: 1 / -1; }
  .site-nav ul {
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: space-between;
    gap: 0.2rem;
    padding: 0.25rem;
    border-radius: 14px;
    background: var(--c-canvas);
    border: 1px solid var(--c-line);
  }
  .site-nav a {
    justify-content: center;
    min-height: 40px;
    padding: 0.3rem 0.55rem;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.15;
    text-align: center;
  }
  .site-nav a[aria-current="page"] { background: var(--c-surface); box-shadow: var(--shadow-sm); }
  .nav-extra { display: none; }
  .page-head__inner { padding-top: 1.4rem; padding-bottom: 1.5rem; }
  .page-body { padding-top: 1.5rem; }
}

/* ---------- Paginile pe telefon ---------- */
/*
  Pe ecran îngust: mai puțin spațiu gol, cărțile mai compacte, butoanele
  principale pe toată lățimea. Ilustrația din pagina principală e decorativă
  și ar împinge conținutul cu un ecran mai jos, așa că lipsește.
*/
@media (max-width: 600px) {
  .hero__art { display: none; }
  .hero__inner { padding-top: 1.75rem; padding-bottom: 2rem; }
  .hero h1 { font-size: 2rem; }
  .hero .lead { font-size: 1.08rem; margin-bottom: 1.35rem; }
  .hero__actions .btn,
  .page-head .btn { width: 100%; justify-content: center; }

  .section { margin-top: 2.5rem; }
  .section__head { margin-bottom: 1rem; }
  .section__head h2 { font-size: 1.4rem; }

  .needs { gap: 0.6rem; }
  .need { min-height: 72px; padding: 0.8rem 0.95rem; }

  /* Modulele: iconița lângă titlu, nu deasupra lui. */
  .modules { gap: 0.75rem; }
  .module {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    padding: 1.1rem 1.1rem 1rem;
  }
  .module__icon { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .module__icon .icon { width: 22px; height: 22px; }
  .module h3 { font-size: 1.1rem; }
  .module p { margin-bottom: 0.6rem; font-size: 0.95rem; }

  .panel { padding: 1.15rem 1.1rem; }
  .aside-card { padding: 1.1rem 1.1rem; }
  .form__row { margin-bottom: 1.15rem; }
  .form > .btn, .form button[type="submit"] { width: 100%; justify-content: center; }
  .search--head input[type="search"] { font-size: 1rem; }
  .search--head .btn { padding-left: 1rem; padding-right: 1rem; }
}

/*
  Ecran foarte îngust (sub 360 px: cerința de reflow din WCAG, 320 px, sau text mărit):
  secțiunile pe două rânduri, iar sub 300 px butonul de reglaje păstrează
  doar iconița sub 340 px. Numele lui rămâne pentru cititorul de ecran.
*/
@media (max-width: 360px) {
  .site-header__brand { font-size: 1.05rem; }
  .site-nav ul { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .site-nav a { width: 100%; }
}
@media (max-width: 340px) {
  .prefs-toggle { padding: 0.3rem 0.6rem; }
  .prefs-toggle__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Recomandări după nevoie (M5) ---------- */
/* Buton care arată ca o legătură, în interiorul unui text. */
.link-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.link-btn:hover { color: var(--c-accent); }
.personal {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-line);
}
:root[data-contrast="high"] .personal { background: var(--c-bg); border: 2px solid var(--c-text); }
.personal__need + .personal__need { margin-top: 1.5rem; }
.personal__title { font-size: 1.15rem; margin: 0 0 0.75rem; }
.rec__kind {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem !important;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-accent-strong) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Mențiunea dintr-o listă: textul spune de ce, nu doar culoarea. */
.match {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--c-ok-soft);
  border: 1px solid var(--c-ok);
  color: var(--c-text);
  font-size: 0.85rem;
  font-weight: 700;
}
@media (max-width: 600px) {
  .personal { padding: 1.1rem 1rem; margin-left: -0.25rem; margin-right: -0.25rem; }
}
@media (max-width: 600px) {
  .personal .tiles { gap: 0.6rem; }
  .personal .tile { padding: 0.9rem 1rem; }
  .personal .tile p:last-of-type { margin-bottom: 0; }
}

/* ---------- Comutatorul de locație de pe hartă ---------- */
.site-switch { margin: 1.25rem 0 0.25rem; }
.site-switch__title { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--c-text-muted); }
.site-switch ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.site-switch li { max-width: none; }
.site-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: 700;
  text-decoration: none;
}
.site-switch a:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
/* Locația curentă: fundal plin și bifă, nu doar culoare. */
.site-switch a[aria-current="page"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-contrast); }
.site-switch a[aria-current="page"]::before { content: "✓"; margin-right: 0.4rem; }
:root[data-contrast="high"] .site-switch a { border-color: var(--c-text); }
.site-switch__near { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; min-height: 44px; }
.site-switch__near[hidden] { display: none !important; }
.site-switch__status { margin: 0.25rem 0 0; font-size: 0.95rem; }
.site-switch__status:empty { display: none; }
@media (max-width: 600px) {
  .site-switch ul { display: grid; grid-template-columns: 1fr 1fr; }
  .site-switch a { width: 100%; justify-content: center; text-align: center; padding: 0.4rem 0.6rem; font-size: 0.92rem; line-height: 1.2; }
}