/* ============================================================
   CIRCULARIS — page-local components
   Layered ON TOP of the SAGROD design system (assets/system.css,
   kept verbatim from design.ddnet.ro so it stays replaceable).
   Every value below is taken from the system's existing idiom:
   clamp() section rhythm, 14/18/20px radii, 18-22px grid gaps.
   ============================================================ */

/* logo used in place of the letter .seal */
.seal-img{width:42px;height:42px;border-radius:50%;background:var(--surface);object-fit:contain;flex:none;padding:2px;border:1px solid var(--line)}
.hub-top .seal-img{width:40px;height:40px}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(44px,6vw,80px);border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(34px,5.4vw,68px);line-height:1.02;margin:18px 0 22px;max-width:19ch}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{font-size:clamp(16.5px,1.5vw,20px);color:var(--muted);max-width:62ch}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* ---------- stat strip ---------- */
.stats{display:flex;gap:clamp(22px,4vw,48px);flex-wrap:wrap;margin-top:36px}
.stats div b{font-family:var(--font-display);font-size:clamp(26px,3vw,34px);color:var(--brand);display:block;line-height:1}
.stats div span{font-size:13px;color:var(--muted);font-weight:600}

/* ---------- sections ---------- */
.sec{padding-block:clamp(48px,6vw,84px)}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(26px,3.4vw,42px);margin-top:14px}
.sec-head .lead{font-size:17.5px;color:var(--muted);margin-top:14px}

/* ---------- card grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--surface)}
.card .ico{width:44px;height:44px;border-radius:12px;background:var(--halo);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.card .ico svg{width:22px;height:22px}
.card h3{font-size:18.5px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted)}

/* ---------- numbered direction list ---------- */
.dirs{display:grid;gap:14px;margin-top:38px}
.dir{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--surface);transition:border-color .2s}
.dir:hover{border-color:var(--brand)}
.dir .n{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--brand);letter-spacing:.1em;padding-top:3px;flex:none;min-width:36px}
.dir h3{font-size:19px;margin-bottom:7px}
.dir p{font-size:14.5px;color:var(--muted);max-width:70ch}

/* ---------- call-to-action band ---------- */
.band{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:clamp(26px,3.4vw,40px);
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:8px}
.band .txt{flex:1 1 340px}
.band h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:10px}
.band p{color:var(--muted);font-size:15.5px;max-width:56ch}
.band .act{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- press announcement ---------- */
.press{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(24px,3vw,40px);align-items:start;margin-top:38px}
.press figure{margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.press figure img{width:100%;height:auto}
.press figcaption{font-size:12.5px;color:var(--muted);padding:12px 14px;border-top:1px solid var(--line)}
.press .body h3{font-size:20px;margin-bottom:12px}
.press .body p{color:var(--muted);font-size:15.5px;margin-bottom:14px}
.press .body .act{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* ---------- header EU/ADR lockup ----------
   Sits immediately right of the brand, on its own white plate. White is not a
   theme choice: the official artwork is supplied for light reproduction and is
   not transparent, so it needs a white ground in dark mode too (same rule as
   .viz-band below). .brand carries margin-right:auto in system.css — move it to
   the plate so the pair stays glued together and the nav still flushes right. */
.v1-nav .brand{margin-right:0}
.hdr-eu{margin-right:auto;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 14px 9px;
  transition:border-color .2s,box-shadow .2s,transform .2s}
/* it links to the start-of-project announcement, so it needs to read as clickable */
.hdr-eu:hover{border-color:var(--brand);box-shadow:0 6px 18px -10px rgba(0,0,0,.45);transform:translateY(-1px)}
.hdr-eu:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.hdr-eu-t{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#4a4a4a;line-height:1;white-space:nowrap;transition:color .2s}
.hdr-eu:hover .hdr-eu-t{color:var(--brand)}
/* The artwork is the official lockup with its outer whitespace trimmed off
   (547x103 -> 521x77, flattened onto white), so the marks fill the box and the
   header keeps its original 74px height. 26px is the floor at which the Regio
   and ADR wordmarks stay legible; re-trimming the source would change it. */
.hdr-eu img{height:26px;width:auto;display:block}

@media (max-width:1080px){
  .v1-nav{gap:20px}
  .hdr-eu img{height:23px}
}
/* below the nav-collapse breakpoint the plate takes its own row under the brand */
@media (max-width:640px){
  .v1-nav{flex-wrap:wrap;height:auto;padding-block:12px;gap:12px 16px}
  .v1-nav .brand{margin-right:auto}
  .hdr-eu{order:3;width:100%;margin-right:0;flex-direction:row;justify-content:center;
    gap:12px;padding:7px 12px}
  .hdr-eu img{height:22px}
}

/* ---------- theme/accent widget: hidden on this microsite ----------
   theme.js is kept verbatim upstream (it still applies the default palette/mode
   from the <html> attributes); only its floating control surface is suppressed. */
#sg-fab,#sg-panel{display:none!important}

/* ---------- mandatory visibility band (MIV PR Nord-Est) ----------
   Always on white, in both light and dark mode: the official logos are supplied
   for light reproduction and one of them (ADR) ships without transparency, so a
   themed background would put a white box on a dark surface. Heights are set per
   logo because the lockups differ — the EU mark carries its caption inside the
   file, so it needs more height to read at the same optical weight as the rest. */
.viz-band{margin-top:40px;padding:22px 26px;border:1px solid var(--line);border-radius:16px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.viz-band img{width:auto;display:block}
.viz-band .l-eu{height:62px}
.viz-band .l-gov{height:52px}
.viz-band .l-regio{height:40px}
.viz-band .l-adr{height:40px}

@media (max-width:520px){
  .viz-band{gap:24px 32px;padding:20px}
  .viz-band .l-eu{height:52px}
  .viz-band .l-gov{height:44px}
  .viz-band .l-regio,.viz-band .l-adr{height:34px}
}

/* ---------- footer EU visibility note ---------- */
.eu-note{margin-top:16px;padding:24px 26px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.eu-note p{font-size:13.5px;line-height:1.65;margin-bottom:10px}
.eu-note p:last-child{margin-bottom:0}
/* .foot a is display:block in system.css — keep these inline so the line reads as one */
.eu-note a{display:inline;margin:0;opacity:1}
.eu-note .slogan{font-weight:700;color:var(--brand)}
.eu-note .slogan a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .press{grid-template-columns:1fr}
  .press figure{max-width:340px}
}
@media (max-width:600px){
  .cards,.cards.two{grid-template-columns:1fr}
  .dir{flex-direction:column;gap:10px}
}