/* ==========================================================================
   ȘCOALA DIALOGULUI — Formare și educație pentru toleranță, incluziune
   și valori democratice
   Foaie de stil principală. Structură:
     1. Variabile (custom properties)
     2. Reset și baze
     3. Utilitare
     4. Header, logouri finanțator, navigație
     5. Componente (butoane, carduri, secțiuni, accordion, formulare)
     6. Blocuri specifice de pagină
     7. Footer
     8. Responsive
     9. Print
   ========================================================================== */

/* 1. VARIABILE ============================================================ */

:root {
  /* Culori — toate perechile text/fundal folosite respectă WCAG 2.1 AA */
  --c-primary: #123a6b;          /* albastru profund — 11.4:1 pe alb */
  --c-primary-dark: #0c2a4e;
  --c-primary-soft: #e8eef6;
  --c-accent: #a8541a;           /* ocru ars — 5.3:1 pe alb */
  --c-accent-dark: #8a4415;
  --c-accent-light: #f2b65c;     /* doar suprafețe mari / decorativ */
  --c-accent-soft: #fdf2e0;

  --c-bg: #fcfaf6;
  --c-surface: #ffffff;
  --c-surface-alt: #f4efe7;
  --c-text: #24221e;             /* 15:1 pe fundal */
  --c-text-muted: #5a554d;       /* 7:1 pe fundal */
  --c-text-invert: #ffffff;
  --c-border: #e2dace;
  --c-border-strong: #cdc2b1;
  --c-focus: #a8541a;

  /* Tipografie — fonturi locale (fără cereri externe, fără implicații GDPR).
     Toate variantele acoperă latin-extended, deci diacriticele ș ț ă â î. */
  --font-head: Georgia, "Iowan Old Style", Cambria, "Palatino Linotype",
    "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: 2.75rem;

  /* Spațiere */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;

  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(18, 58, 107, 0.08);
  --shadow: 0 4px 16px rgba(18, 58, 107, 0.09);
  --shadow-lg: 0 12px 32px rgba(18, 58, 107, 0.13);

  --container: 1180px;
  --transition: 180ms ease;

  /* Pictograme desenate inline (fără fișiere și fără cereri externe) */
  --icon-gallery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='8.4' cy='10' r='1.6'/%3E%3Cpath d='m3.6 16.6 4.7-4.1a2 2 0 0 1 2.6 0l3.4 3 1.8-1.5a2 2 0 0 1 2.5 0l1.9 1.6'/%3E%3C/svg%3E");
}

/* 2. RESET ȘI BAZE ======================================================== */

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

html {
  scroll-behavior: smooth;
  /* compensează header-ul lipicios la navigarea pe ancore */
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  line-height: 1.22;
  color: var(--c-primary-dark);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-3xl);
}
h2 {
  font-size: var(--fs-2xl);
}
h3 {
  font-size: var(--fs-lg);
}
h4 {
  font-size: var(--fs-md);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--sp-4);
}

a {
  color: var(--c-accent-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--c-primary);
}

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

strong {
  font-weight: 700;
  color: var(--c-primary-dark);
}

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-6) 0;
}

/* Focus vizibil, consecvent, pe toate elementele interactive */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-accent-light);
  color: var(--c-text);
}

/* 3. UTILITARE ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.container--narrow {
  max-width: 820px;
}

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

/* Ascundere completă, inclusiv pentru cititoarele de ecran. Se folosește la
   capcana anti-spam din formularul de contact: câmpul trebuie să existe în
   HTML, dar să nu fie nici văzut, nici citit, nici focalizabil de un om.
   Pentru text care trebuie să rămână accesibil, folosiți .visually-hidden. */
.hidden {
  display: none !important;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 999;
  background: var(--c-primary-dark);
  color: var(--c-text-invert);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: var(--c-text-invert);
}

.lead {
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.text-center {
  text-align: center;
}

/* 4. HEADER =============================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}

/* --- Bandă finanțator: logourile trebuie să fie vizibile fără derulare --- */
.funder-bar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--sp-3) 0;
  transition: padding var(--transition);
}

.funder-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
}

.logo-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* Toate siglele au aceeași înălțime de afișare; sigla finanțatorului (ANR)
   este prima și nu poate fi mai mică decât celelalte. */
.logo-strip img {
  height: 46px;
  width: auto;
  transition: height var(--transition);
}

.logo-strip__item--funder img {
  height: 52px;
}

.funder-note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  max-width: 42ch;
  line-height: 1.45;
}

.funder-note strong {
  color: var(--c-primary);
}

/* Starea compactă (aplicată din JS la derulare): siglele rămân vizibile
   permanent, dar ocupă mai puțin spațiu pe ecrane mici. */
.site-header.is-compact .funder-bar {
  padding: var(--sp-2) 0;
}

.site-header.is-compact .logo-strip img {
  height: 34px;
}

.site-header.is-compact .logo-strip__item--funder img {
  height: 38px;
}

.site-header.is-compact .funder-note {
  display: none;
}

/* --- Bara de navigație --- */
.nav-bar {
  background: var(--c-primary);
}

.nav-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: var(--c-text-invert);
  padding: var(--sp-2) 0;
  flex-shrink: 0;
}

.brand:hover {
  color: var(--c-accent-light);
}

.brand__title {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.brand__sub {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cddcf0;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-sm);
  color: var(--c-text-invert);
  font: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  min-height: 44px;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.nav-toggle__icon {
  display: block;
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.nav-toggle__icon::before {
  top: -6px;
}
.nav-toggle__icon::after {
  top: 6px;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}

.nav__list a {
  display: block;
  padding: var(--sp-3) var(--sp-3);
  color: var(--c-text-invert);
  text-decoration: none;
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
  border-bottom: 3px solid transparent;
}

.nav__list a:hover {
  background: var(--c-primary-dark);
  color: var(--c-text-invert);
}

.nav__list a[aria-current="page"] {
  border-bottom-color: var(--c-accent-light);
  font-weight: 700;
  color: #ffffff;
}

/* 5. COMPONENTE =========================================================== */

/* --- Butoane --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text-invert);
}

.btn--primary:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: var(--c-text-invert);
}

.btn--secondary {
  background: var(--c-surface);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.btn--secondary:hover {
  background: var(--c-primary);
  color: var(--c-text-invert);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.8);
  color: var(--c-text-invert);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-text-invert);
}

/* --- Secțiuni --- */
.section {
  padding-block: var(--sp-8);
}

.section--tight {
  padding-block: var(--sp-7);
}

.section--alt {
  background: var(--c-surface-alt);
}

.section--primary {
  background: var(--c-primary);
  color: var(--c-text-invert);
}

.section--primary h2,
.section--primary h3 {
  color: var(--c-text-invert);
}

.section--primary a {
  color: var(--c-accent-light);
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--sp-6);
}

.section__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: var(--sp-2);
}

.section--primary .section__eyebrow {
  color: var(--c-accent-light);
}

/* --- Grile --- */
.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

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

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* --- Carduri --- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.card > :last-child {
  margin-bottom: 0;
}

.card--link {
  transition: box-shadow var(--transition), transform var(--transition),
    border-color var(--transition);
}

.card--link:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--c-border-strong);
}

.card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.card__title {
  margin-bottom: var(--sp-2);
}

.card__title a {
  text-decoration: none;
  color: var(--c-primary-dark);
}

.card__title a:hover {
  color: var(--c-accent-dark);
  text-decoration: underline;
}

.card__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.card__more {
  margin-top: auto;
  font-weight: 600;
  font-size: var(--fs-sm);
}

/* --- Cifre cheie / contoare --- */
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 4px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}

.stat__value {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.05;
}

.stat__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-top: var(--sp-2);
}

/* --- Casetă de date (buget, perioadă) --- */
.factbox {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--c-primary);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.factlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.factlist > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px dashed var(--c-border);
  padding-bottom: var(--sp-3);
}

.factlist > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.factlist dt {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.factlist dd {
  margin: 0;
  font-weight: 700;
  color: var(--c-primary-dark);
  text-align: right;
}

/* --- Casetă evidențiată / notă --- */
.callout {
  background: var(--c-accent-soft);
  border: 1px solid #efd9b4;
  border-left: 5px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-block: var(--sp-5);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout--info {
  background: var(--c-primary-soft);
  border-color: #c6d5e9;
  border-left-color: var(--c-primary);
}

/* Marcaj vizibil pentru conținutul care urmează să fie completat */
.placeholder-note {
  display: inline-block;
  background: #fff4d6;
  border: 1px dashed #c08a1e;
  border-radius: var(--radius-sm);
  color: #6b4a05;
  font-size: var(--fs-xs);
  padding: var(--sp-1) var(--sp-3);
}

/* --- Accordion (elemente native details/summary) --- */
.accordion {
  display: grid;
  gap: var(--sp-4);
}

.accordion__item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.accordion__item[open] {
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow);
}

.accordion__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-primary-dark);
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary:hover {
  background: var(--c-surface-alt);
}

.accordion__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-text-invert);
  font-size: var(--fs-base);
}

.accordion__summary::after {
  content: "";
  margin-left: auto;
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.55rem;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.accordion__item[open] .accordion__summary::after {
  transform: rotate(-135deg);
}

.accordion__body {
  padding: 0 var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-5);
}

.accordion__body > :last-child {
  margin-bottom: 0;
}

.accordion__tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-4);
}

.btn-link {
  background: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  color: var(--c-primary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  min-height: 40px;
}

.btn-link:hover {
  background: var(--c-primary-soft);
}

/* --- Legătură către albumul foto al unei activități --- */
.link-gallery {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 42px;
  margin-top: var(--sp-5);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4);
  background: var(--c-primary-soft);
  border: 1px solid #c6d5e9;
  border-radius: 999px;
  color: var(--c-primary-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}

.link-gallery::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-gallery) center / contain no-repeat;
  mask: var(--icon-gallery) center / contain no-repeat;
}

.link-gallery:hover,
.link-gallery:focus-visible {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-text-invert);
}

/* --- Listă de indicatori --- */
.indicators {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.indicators li {
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  border-radius: 999px;
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-4);
}

/* --- Listă cu bifă --- */
.check-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.check-list li {
  position: relative;
  padding-left: 2rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.85rem;
  border-right: 3px solid var(--c-accent);
  border-bottom: 3px solid var(--c-accent);
  transform: rotate(45deg);
}

/* --- Cronologie --- */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 3px solid var(--c-border);
  display: grid;
  gap: var(--sp-5);
}

.timeline > li {
  position: relative;
  padding-left: var(--sp-5);
}

.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-3px - 0.4rem);
  top: 0.55rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-bg);
}

.timeline__label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-primary-dark);
}

/* --- Formulare --- */
.form {
  display: grid;
  gap: var(--sp-4);
  max-width: 40rem;
}

.form__row {
  display: grid;
  gap: var(--sp-2);
}

.form label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-primary-dark);
}

.form input,
.form textarea,
.form select {
  font: inherit;
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  width: 100%;
  min-height: 48px;
}

.form textarea {
  min-height: 9rem;
  resize: vertical;
}

.form__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* --- Tabel simplu --- */
.table-wrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
}

th,
td {
  text-align: left;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}

th {
  background: var(--c-surface-alt);
  color: var(--c-primary-dark);
}

/* 6. BLOCURI DE PAGINĂ ==================================================== */

/* --- Hero (pagina Acasă) --- */
.hero {
  position: relative;
  background: linear-gradient(150deg, var(--c-primary-dark) 0%, var(--c-primary) 55%, #1c4f8c 100%);
  color: var(--c-text-invert);
  padding-block: var(--sp-8);
  overflow: hidden;
}

/* Motiv decorativ, desenat în CSS — fără fișiere imagine suplimentare */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      circle at 82% 18%,
      rgba(242, 182, 92, 0.28) 0,
      transparent 42%
    ),
    radial-gradient(circle at 12% 88%, rgba(255, 255, 255, 0.1) 0, transparent 45%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.hero__kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-light);
  margin-bottom: var(--sp-3);
}

.hero h1 {
  color: var(--c-text-invert);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-3);
}

.hero__subtitle {
  font-size: var(--fs-lg);
  color: #e4ecf7;
  margin-bottom: var(--sp-5);
}

.hero__funding {
  font-size: var(--fs-sm);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --- Antet de pagină interioară --- */
.page-head {
  background: var(--c-primary-soft);
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--sp-7);
}

.page-head h1 {
  margin-bottom: var(--sp-2);
}

.page-head p {
  margin-bottom: 0;
  color: var(--c-text-muted);
  max-width: 52rem;
}

.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--sp-2);
  color: var(--c-border-strong);
}

/* --- Noutăți --- */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}

.news-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.news-item > :last-child {
  margin-bottom: 0;
}

.news-item__date {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: var(--sp-2);
}

.news-item__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

/* --- Galerie: carduri de album (privirea de ansamblu) --- */
.album-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--sp-5);
}

.album-grid > li {
  display: flex;
}

.album-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition),
    border-color var(--transition);
}

.album-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--c-border-strong);
  color: inherit;
}

.album-card__media {
  position: relative;
  display: block;
  overflow: hidden;
}

.album-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-surface-alt);
  transition: transform 320ms ease;
}

.album-card:hover .album-card__media img {
  transform: scale(1.045);
}

.album-card__count {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  background: rgba(12, 42, 78, 0.9);
  color: var(--c-text-invert);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
}

.album-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  flex: 1;
}

.album-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 700;
}

/* Album fără număr de activitate (evenimente de proiect) */
.album-card__badge--mark::before,
.accordion__badge--mark::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
}

.album-card__title {
  font-family: var(--font-head);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.28;
  color: var(--c-primary-dark);
}

.album-card__cta {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent-dark);
}

.album-card__cta::after {
  content: " ›";
  font-weight: 700;
}

.album-card:hover .album-card__cta {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* --- Galerie: albumele desfășurate --- */
.album__meta {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-muted);
  margin-top: var(--sp-1);
}

.album__intro {
  color: var(--c-text-muted);
  max-width: 60ch;
}

.album__link {
  margin-top: var(--sp-5);
  margin-bottom: 0;
  font-weight: 600;
  font-size: var(--fs-sm);
}

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.gallery figure {
  margin: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--c-surface-alt);
}

.gallery figcaption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* Album cu fotografii panoramice (de exemplu cele de la evenimentul de
   lansare, în raport 2,54:1): coloane mai late și miniaturi 2:1, ca să nu
   se piardă jumătate din cadru la decupare. */
.gallery--panoramic {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.gallery--panoramic img {
  aspect-ratio: 2 / 1;
}

/* Miniatura care deschide fotografia mare */
.gallery-item__link {
  display: block;
  position: relative;
  overflow: hidden;
  line-height: 0;
}

.gallery-item__link img {
  transition: transform 320ms ease;
}

.gallery-item__link:hover img,
.gallery-item__link:focus-visible img {
  transform: scale(1.05);
}

.gallery-item__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(12, 42, 78, 0.88)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.6 15.6 21 21'/%3E%3C/svg%3E")
    center / 1.1rem no-repeat;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
}

.gallery-item__link:hover .gallery-item__zoom,
.gallery-item__link:focus-visible .gallery-item__zoom {
  opacity: 1;
  transform: translateY(0);
}

/* Pe ecrane tactile nu există hover: pictograma rămâne vizibilă */
@media (hover: none) {
  .gallery-item__zoom {
    opacity: 1;
    transform: none;
  }
}

/* --- Fereastra cu fotografia mare (construită din JavaScript) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 20, 36, 0.93);
  cursor: zoom-out;
}

.lightbox__panel {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 4.75rem var(--sp-4) var(--sp-5);
  overflow: auto;
  cursor: zoom-out;
}

/* margin:auto centrează fereastra și, spre deosebire de place-items,
   nu taie conținutul mai înalt decât ecranul */
.lightbox__dialog {
  margin: auto;
  width: min(1100px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  cursor: default;
}

.lightbox__figure {
  margin: 0;
  min-width: 0;
  background: var(--c-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.lightbox__img {
  width: auto;
  max-width: 100%;
  max-height: min(70vh, 760px);
  margin-inline: auto;
  object-fit: contain;
  background: var(--c-surface-alt);
}

.lightbox__caption {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.lightbox__counter {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: var(--sp-1);
}

.lightbox__btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-text-invert);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transition);
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox__btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.lightbox__btn--prev::before,
.lightbox__btn--next::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.lightbox__btn--prev::before {
  transform: rotate(45deg);
  margin-left: 0.25rem;
}

.lightbox__btn--next::before {
  transform: rotate(-135deg);
  margin-right: 0.25rem;
}

.lightbox__btn--close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
}

.lightbox__btn--close::before,
.lightbox__btn--close::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.lightbox__btn--close::before {
  transform: rotate(45deg);
}

.lightbox__btn--close::after {
  transform: rotate(-45deg);
}

/* Blochează derularea paginii cât timp fereastra este deschisă */
.has-lightbox-open {
  overflow: hidden;
}

@media (max-width: 639px) {
  .lightbox__dialog {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "figura figura"
      "prev next";
    justify-items: center;
  }

  .lightbox__figure {
    grid-area: figura;
    width: 100%;
  }

  .lightbox__btn--prev {
    grid-area: prev;
  }

  .lightbox__btn--next {
    grid-area: next;
  }

  .lightbox__img {
    max-height: 56vh;
  }
}

/* --- Bandă parteneri --- */
.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6) var(--sp-8);
}

.partners figure {
  margin: 0;
  text-align: center;
  max-width: 20rem;
}

.partners img {
  height: 64px;
  width: auto;
  margin: 0 auto var(--sp-3);
}

/* Sigla finanțatorului rămâne cea mai mare și în banda de parteneri și în
   footer. Se țintește direct fișierul, ca regula să se aplice pe toate
   paginile fără a modifica marcajul. */
.partners img[src$="anr.png"] {
  height: 74px;
}

.footer-logos img[src$="anr.png"] {
  height: 46px;
}

.partners figcaption {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* --- Contact --- */
.contact-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.contact-list dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
}

.contact-list dd {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-md);
  color: var(--c-primary-dark);
  font-weight: 600;
  word-break: break-word;
}

/* 7. FOOTER =============================================================== */

.site-footer {
  background: var(--c-primary-dark);
  color: #dbe4f0;
  padding-block: var(--sp-7) var(--sp-5);
  margin-top: var(--sp-8);
  font-size: var(--fs-sm);
}

.site-footer h2,
.site-footer h3 {
  color: var(--c-text-invert);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-3);
}

.site-footer a {
  color: var(--c-accent-light);
}

.site-footer a:hover {
  color: var(--c-text-invert);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
}

.footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.footer-logos img {
  height: 40px;
  width: auto;
}

.footer-disclaimer {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: rgba(255, 255, 255, 0.07);
  border-left: 4px solid var(--c-accent-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: #b9c6d8;
}

.footer-bottom p {
  margin: 0;
}

/* 8. RESPONSIVE =========================================================== */

/* Navigație pliabilă sub 1024 px */
@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--c-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    max-height: 70vh;
    overflow-y: auto;
  }

  .nav.is-open {
    display: block;
  }

  .nav-bar {
    position: relative;
  }

  .nav__list {
    flex-direction: column;
    gap: 0;
  }

  .nav__list a {
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    font-size: var(--fs-base);
  }

  .nav__list a[aria-current="page"] {
    border-left: 4px solid var(--c-accent-light);
    border-bottom-color: rgba(255, 255, 255, 0.14);
    padding-left: var(--sp-3);
    background: var(--c-primary-dark);
  }
}

@media (max-width: 767px) {
  :root {
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.125rem;
    --sp-8: 3rem;
    --sp-9: 3.5rem;
  }

  /* Înălțimile de mai jos sunt calculate pentru rapoartele reale ale
     siglelor (ANR 3,93:1 · USDR 3,83:1 · ADPAI 3,12:1), astfel încât cele
     trei sigle să încapă pe un singur rând până la 360 px lățime de ecran. */
  .logo-strip {
    gap: var(--sp-4);
    width: 100%;
    justify-content: space-between;
  }

  .logo-strip img {
    height: 34px;
  }

  .logo-strip__item--funder img {
    height: 38px;
  }

  .funder-note {
    max-width: none;
    font-size: 0.75rem;
  }

  .brand__sub {
    display: none;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .factlist > div {
    justify-content: flex-start;
  }

  .factlist dd {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .logo-strip {
    gap: var(--sp-3);
  }

  .logo-strip img {
    height: 28px;
  }

  .logo-strip__item--funder img {
    height: 32px;
  }

  .partners img {
    height: 52px;
  }

  .partners img[src$="anr.png"] {
    height: 60px;
  }
}

@media (max-width: 380px) {
  .logo-strip {
    gap: var(--sp-2);
  }

  .logo-strip img {
    height: 24px;
  }

  .logo-strip__item--funder img {
    height: 27px;
  }
}

/* Respectă preferința de reducere a mișcării */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .btn:hover,
  .card--link:hover,
  .album-card:hover {
    transform: none;
  }

  .album-card:hover .album-card__media img,
  .gallery-item__link:hover img,
  .gallery-item__link:focus-visible img {
    transform: none;
  }
}

/* Contrast sporit */
@media (forced-colors: active) {
  .card,
  .stat,
  .accordion__item {
    border: 1px solid CanvasText;
  }
}

/* 9. PRINT ================================================================ */

@media print {
  .site-header,
  .nav,
  .nav-toggle,
  .hero__actions,
  .skip-link,
  .accordion__tools {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .accordion__body {
    display: block !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }
}