/*
  /educatie — page-scoped styles.
  Structure / editorial reference: docs/research/educatie-prototype-v4.html
  (a design/structure reference only — never served directly, never iframed).

  Same isolation pattern as codul-de-conduita.css / manifest.css /
  franciza-in-romania.css: reuse the site's real tokens (var(--gold),
  var(--gold-soft), var(--gold-deep), var(--serif), var(--sans),
  var(--maxw), var(--line)) plus the global primitives already loaded
  sitewide (.wrap / .crumb / .eyebrow / .btn / .btn-gold / .btn-ghost /
  .reveal). Everything specific to this page is scoped under `.edu` so it
  can never leak into the global design system.

  var(--gold) already equals the prototype's #D4AF37 exactly. The
  prototype's #020408 near-black navy has no sitewide token, so it is
  introduced ONLY as a scoped `--edu-navy` custom property, exactly the
  way codul-de-conduita.css introduces `--cod-navy`. No new global color
  values are added. The prototype's Cinzel display font is NOT imported —
  headings use the site's own var(--serif) (Cormorant Garamond), already
  loaded sitewide.

  Image-free by design (owner decision): the five prototype photographs
  and every Unsplash / external image dependency are removed. The
  educational relationship is rendered as a pure CSS/HTML editorial
  object.
*/

.edu{
  --edu-navy:#020408;
  --edu-navy-2:#080d14;
  --edu-panel:#0c121b;
  --edu-line:rgba(212,175,55,.26);
  --edu-line-soft:rgba(212,175,55,.12);
  --edu-ink:#E9E4D8;
  --edu-muted:#9AA3B2;
  --edu-heading:#ffffff;

  background:var(--edu-navy);
  color:var(--edu-ink);
}

.edu .wrap{max-width:1140px}

.edu h1,.edu h2,.edu h3{font-family:var(--serif);color:var(--edu-heading);font-weight:600;line-height:1.16}
.edu h1{font-size:clamp(38px,6vw,68px);margin:0 0 16px;letter-spacing:-.01em}
.edu h2{font-size:clamp(26px,3vw,38px);margin:0 0 14px}
.edu h3{font-size:18px;margin:0 0 10px}
.edu p,.edu li,.edu a,.edu td,.edu th,.edu summary{font-family:var(--sans)}
.edu p{margin:0 0 14px;line-height:1.68}
.edu .edu-lead{font-family:var(--serif);font-size:clamp(21px,2.4vw,29px);color:#F4F0E6;line-height:1.4;margin:0 0 16px}
.edu .edu-muted{color:var(--edu-muted)}
.edu strong{color:#F4F0E6;font-weight:600}
.edu a{color:var(--gold-soft)}
.edu .edu-crumb{padding-top:26px}

/* ---------- section rhythm ---------- */
.edu-section{padding:66px 0;border-top:1px solid var(--edu-line-soft);scroll-margin-top:96px}
.edu-section:first-of-type{border-top:0}
.edu .eyebrow{color:var(--gold-soft)}

/* ---------- HERO ---------- */
.edu-hero{padding:74px 0 30px}
.edu-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.edu-hero-copy > :last-child{margin-bottom:0}

/* code-based institutional relationship diagram (hero, right column) */
.edu-arch{
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--edu-line);
  background:linear-gradient(180deg,rgba(212,175,55,.05),transparent 40%);
  padding:6px;
}
.edu-arch-node{
  position:relative;
  background:var(--edu-navy-2);
  border:1px solid var(--edu-line-soft);
  padding:20px 22px;
  margin:6px;
}
.edu-arch-node .edu-arch-kicker{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:6px;
}
.edu-arch-node .edu-arch-name{
  display:block;font-family:var(--serif);font-size:19px;color:#fff;line-height:1.25;
}
.edu-arch-node .edu-arch-role{
  display:block;font-size:12.5px;color:var(--edu-muted);margin-top:6px;line-height:1.5;
}
.edu-arch-node.is-brand{border-color:var(--edu-line);background:rgba(212,175,55,.06)}
/* connector between nodes: a thin gold spine + arrow glyph */
.edu-arch-link{
  display:flex;align-items:center;justify-content:center;
  height:26px;color:var(--gold);font-size:13px;line-height:1;
}
.edu-arch-link::before{content:"";width:1px;height:12px;background:var(--edu-line);margin-right:8px}
.edu-arch-link::after{content:"";width:1px;height:12px;background:var(--edu-line);margin-left:8px}

/* ---------- horizontal educational chain (section B) ---------- */
.edu-chain{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--edu-line);
}
.edu-chain-step{
  padding:20px 18px;
  border-right:1px solid var(--edu-line-soft);
  background:var(--edu-navy-2);
}
.edu-chain-step:last-child{border-right:0}
.edu-chain-step .edu-chain-num{
  font-family:var(--serif);color:var(--gold);font-size:12px;letter-spacing:.16em;
}
.edu-chain-step b{
  display:block;color:var(--gold-soft);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;margin:10px 0 6px;font-weight:700;
}
.edu-chain-step span{display:block;color:#fff;font-size:13.5px;line-height:1.5}

/* ---------- generic grids ---------- */
.edu-g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.edu-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.edu-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.edu-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* ---------- cards ---------- */
.edu-card{
  background:var(--edu-panel);
  border:1px solid var(--edu-line);
  padding:24px 22px;
}
.edu-card.is-edge{box-shadow:inset 3px 0 0 var(--gold)}
.edu-card h3{margin-bottom:8px}
.edu-card p{color:var(--edu-muted);font-size:14.5px;margin:0}
.edu-card p + p{margin-top:8px}
.edu-card .edu-list{margin:10px 0 0;padding-left:18px;color:var(--edu-muted);font-size:14px;line-height:1.7}
.edu-card .edu-src{
  margin-top:14px;font-size:12px;color:#b8b3a6;line-height:1.6;
  border-top:1px solid var(--edu-line-soft);padding-top:10px;
}
.edu-card .edu-src b{color:var(--gold-soft);font-weight:600}

/* status tag */
.edu-tag{
  display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--gold);color:#020408;padding:3px 9px;margin-bottom:12px;font-weight:700;
}
.edu-tag.is-ghost{background:transparent;color:var(--gold-soft);border:1px solid var(--edu-line)}

/* meta line (EUTM facts) */
.edu-meta{
  font-size:12.5px;color:var(--edu-muted);letter-spacing:.02em;
  border-left:2px solid var(--gold);padding-left:14px;margin:14px 0 4px;
}

/* numbered curriculum list */
.edu-steps{margin:14px 0 0;padding-left:22px;color:var(--edu-muted);line-height:1.85;font-size:14.5px}
.edu-steps li{margin:2px 0}

/* ---------- "Cine face ce" matrix ---------- */
.edu-matrix-wrap{overflow-x:auto}
table.edu-matrix{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
table.edu-matrix th,table.edu-matrix td{
  border-bottom:1px solid var(--edu-line-soft);
  padding:12px 10px;text-align:left;vertical-align:top;color:var(--edu-ink);
}
table.edu-matrix thead th{
  color:var(--gold-soft);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--edu-line);
}
table.edu-matrix tbody th{color:var(--gold-soft);font-weight:600;white-space:nowrap}
table.edu-matrix tbody tr:last-child td,table.edu-matrix tbody tr:last-child th{border-bottom:0}

/* mobile: the matrix is rebuilt as per-entity cards (see markup); the
   table is hidden and the cards are shown below 760px */
.edu-matrix-cards{display:none}
.edu-matrix-card{
  background:var(--edu-panel);border:1px solid var(--edu-line);
  padding:18px 16px;margin-bottom:14px;
}
.edu-matrix-card > h3{margin:0 0 10px;font-size:16px}
.edu-matrix-card dl{margin:0;display:grid;grid-template-columns:1fr;gap:8px}
.edu-matrix-card dt{
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);
  margin-top:6px;
}
.edu-matrix-card dd{margin:2px 0 0;font-size:14px;color:var(--edu-ink);line-height:1.55}

/* ---------- FAQ (native <details>) ---------- */
.edu-faq details{
  border-bottom:1px solid var(--edu-line-soft);padding:14px 0;
}
.edu-faq details[open]{padding-bottom:16px}
.edu-faq summary{
  cursor:pointer;color:#fff;font-weight:600;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.edu-faq summary::-webkit-details-marker{display:none}
.edu-faq summary::after{content:"+";color:var(--gold);font-weight:400;font-size:20px;line-height:1}
.edu-faq details[open] summary::after{content:"–"}
.edu-faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.edu-faq details p{margin:10px 0 0;color:var(--edu-muted);font-size:14.5px;line-height:1.7}

/* ---------- governance note ---------- */
.edu-note{
  margin-top:16px;font-size:13px;color:#b8b3a6;line-height:1.65;
  border-top:1px solid var(--edu-line-soft);padding-top:14px;
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .edu-hero-grid{grid-template-columns:1fr;gap:36px}
  .edu-g4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .edu-section{padding:52px 0}
  .edu-hero{padding:56px 0 20px}
  .edu-hero-grid{gap:30px}
  .edu-chain{grid-template-columns:1fr}
  .edu-chain-step{border-right:0;border-bottom:1px solid var(--edu-line-soft)}
  .edu-chain-step:last-child{border-bottom:0}
  .edu-g2,.edu-g3,.edu-g4,.edu-split{grid-template-columns:1fr}
  .edu-split{gap:24px}
  .edu-matrix-wrap{display:none}
  .edu-matrix-cards{display:block}
}

/* respect reduced motion for the site's .reveal animation on this page */
@media (prefers-reduced-motion:reduce){
  .edu .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}