:root{
  --bg:#ffffff; --fg:#1f2937; --muted:#6b7280;
  --brand:#0f172a; --accent:#0b5fff;
  --line:#e6e8f0; --card:#ffffff; --soft:#f7f8fb;
  --wrap:1180px; --gutter:24px;
  --badge-bg:#6b7280; --badge-fg:#ffffff;
  --logo-blue: #1500BE;   /* logó kék (R21 G0 B190) */
  --logo-red:  #A90015;   /* logó vörös/bordó (R169 G0 B21) */
  --gold: #D4AF37; /* arany a gauge-hoz */
}

/* LAYERING NOTE: global corporate styles live here; page-specific rules go in per-page CSS (e.g., document.css for charts). Avoid redefining globals in page CSS. */

*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16.5px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
header.container{padding:24px 20px}

.site-header{position:sticky; top:0; z-index:10; background:#ffffffcc; backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line)}
.header-inner{display:flex; align-items:center; gap:16px; padding:10px var(--gutter)}
.brand{display:flex; align-items:center; gap:16px; font-weight:800; color:var(--brand); text-decoration:none}
.logo{
  height:40px;           /* layout magasság – a sáv ehhez igazodik */
  width:auto;
  display:block;
  transform: scale(1.0); /* vizuális nagyítás, a layout nem nő meg */
  transform-origin: left center;
}
.nav{margin-left:auto}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:6px 10px; cursor:pointer}
.nav-menu{display:flex; gap:16px; list-style:none; margin:0; padding:0}
/* NAV: unified weight for all items (index+document). Keep active neutral (see rule at bottom). */
.nav-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 700; /* make all links same visual weight */
}
.nav-menu a:hover{background:#f2f3f6}

/* INDEX-ONLY: hero section styling (not used on document page). */
.hero{background:linear-gradient(180deg,#0b1020 0%, #101a3a 70%, #0b1020 100%); color:#fff}
.hero-inner{padding:72px 0 64px}
.hero h1{font-size:clamp(28px,5.2vw,56px); margin:0 0 12px}
.lede{max-width:900px; opacity:.95; margin:0 0 18px}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap}
.hero h2{ margin: 0 0 6px; color:#fff; }
.hero .hint, .hero .updated{ color:#e6e8f0; opacity:.9; }
.btn{display:inline-block; padding:10px 14px; border-radius:10px; background:#fff; color:#0b1020; text-decoration:none; font-weight:700; border:1px solid #ffffff55}
.btn-quiet{background:transparent; color:#fff; border-color:#ffffff55}
.btn-quiet:hover{background:#ffffff10}

/* GLOBAL SECTIONS: shared section spacing and separators (index + document). */
.section{padding:56px 0; border-top:1px solid var(--line)}
/* Speciális szekció a metrikákhoz */
.section.metrics-section {
  padding-top: 6px; /* kisebb távolság a felső vonaltól */
}
.section-emphasis{background:var(--soft)}
.section.alt{ background: var(--soft); }
.section-head{margin:0 0 16px}
.section-head .hint{color:var(--muted); margin-top:4px}

.prose p{max-width:1000px}

/* ORG CHART */
.org{position:relative}
.org-grid{position:relative; padding:10px 0 0}
.org-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; width:100%; display:flex; flex-direction:column; height:100%}
.org-title{font-weight:600; color:var(--brand)}
.org-title a{color:inherit; text-decoration:none; font-weight:500}
.org-title a:hover{text-decoration:underline}
.org-meta{color:var(--muted); font-size:.95rem; margin-top:2px}

.org-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:80px}
.org-node{display:flex} /* equal height cards */
.badge{display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px; background:var(--badge-bg); color:var(--badge-fg); font-size:.9rem}

.reveal-child{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal-child.show{opacity:1; transform:none}

/* === CONTACT BLOCK (egységesített) === */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: start;
}

.contact-card {
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 24px rgba(16,24,40,0.06);
}

.flag-card {
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 24px rgba(16,24,40,0.06);
  text-align: center;
}
.flag-card img.flag-hero {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
}
.flag-caption {
  color: #6b7280;
  font-size: 0.95rem;
  margin-top: 6px;
}

/* Kiegészítő változat (dokument-oldalhoz pl.) */
.contact-card--alt {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.contact-card--alt p {
  margin: 10px 0;
  font-size: 1rem;
}
.contact-card--alt i {
  margin-right: 8px;
  color: #1e2a78;
}

/* Chips & row */
.chip {
  background: #eef2f7;
  border: 1px solid #dde2ea;
  padding: 8px 12px;
  border-radius: 999px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.chip span { color: var(--muted); }
.chip a { color: #1f2937; text-decoration: none; }
.chip a:hover { text-decoration: underline; }
.contact-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Kontakt: address link polish */
.contact-address-link {
  color: inherit;
  text-decoration: none;
}
.contact-address-link:hover,
.contact-address-link:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
}

/* Kontakt ikonok finomhangolás */
.contact-card .fa-solid {
  font-size: 0.95rem;
  vertical-align: -1px;
  color: #1e2a78;
}

/* === Utilities === */
.hint {
  color: var(--muted);
  margin: .5rem 0 0;
  font-size: 0.9rem;
}
.mb-16{ margin-bottom:16px; }
.pad-24{ padding:24px; }
.pad-22{ padding:22px; }
.text-center{ text-align:center; }

/* Optional card-styled hero (use only if needed) */

/* Optional card-styled hero (use only if needed) */
.hero-card{
  background: linear-gradient(180deg,#0b1020 0%, #101a3a 70%, #0b1020 100%);
  color:#fff;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 30px rgba(2,6,23,0.25);
  padding: 36px 24px;
}

/* Metric feliratok */
.metric-label{
  margin-top: 6px;
  text-align: center;
  font-weight: 600;
}
.metric-sub{
  margin-top: 2px;
  font-size: .9rem;
  color: var(--muted);
}

/* === Alap: base styles for metric values === */
.metric .value {
  font-weight: 800;
  font-size: clamp(28px, 5vw, 46px);
  letter-spacing: .2px;
  line-height: 1.1;
  text-align: center;
}

/* === Modifier: optional size variants for metric values (use only if needed) === */
.value--xl { font-size: clamp(36px, 6vw, 64px); } /* optional */
.value--lg { font-size: clamp(30px, 5vw, 52px); } /* optional */

/* === Per-metric override: specific metric counters with stronger specificity to override base styles === */
.metric .value.value-users {
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 500;
  font-family: inherit;
  letter-spacing: .2px;
  line-height: 1.3;
  text-align: center;
}

.metric .value.value-downloads {
  font-size: clamp(10px, 5vw, 54px);
  font-weight: 800;
  font-family: inherit;
  letter-spacing: .2px;
  line-height: 1.3;
  text-align: center;
}

/* Labels (three distinct text lines) */
.label-users{        /* "Elégedett felhasználó" */
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
.sub-users{          /* "2020‑tól" */
  font-size: .95rem;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
}
.label-downloads{    /* "Letöltések száma" */
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

/* ORG CHART */
.org{position:relative}
.org-grid{position:relative; padding:10px 0 0}
.org-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; width:100%; display:flex; flex-direction:column; height:100%}
.org-title{font-weight:600; color:var(--brand)}
.org-title a{color:inherit; text-decoration:none; font-weight:500}
.org-title a:hover{text-decoration:underline}
.org-meta{color:var(--muted); font-size:.95rem; margin-top:2px}

.org-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:80px}
.org-node{display:flex} /* equal height cards */
.badge{display:inline-block; margin-top:8px; padding:4px 10px; border-radius:999px; background:var(--badge-bg); color:var(--badge-fg); font-size:.9rem}

.reveal-child{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal-child.show{opacity:1; transform:none}

/* === CONTACT BLOCK (egységesített) === */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: start;
}

.contact-card {
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 24px rgba(16,24,40,0.06);
}

.flag-card {
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 24px rgba(16,24,40,0.06);
  text-align: center;
}
.flag-card img.flag-hero {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
}
.flag-caption {
  color: #6b7280;
  font-size: 0.95rem;
  margin-top: 6px;
}

/* Kiegészítő változat (dokument-oldalhoz pl.) */
.contact-card--alt {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.contact-card--alt p {
  margin: 10px 0;
  font-size: 1rem;
}
.contact-card--alt i {
  margin-right: 8px;
  color: #1e2a78;
}

/* Chips & row */
.chip {
  background: #eef2f7;
  border: 1px solid #dde2ea;
  padding: 8px 12px;
  border-radius: 999px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.chip span { color: var(--muted); }
.chip a { color: #1f2937; text-decoration: none; }
.chip a:hover { text-decoration: underline; }
.contact-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Kontakt: address link polish */
.contact-address-link {
  color: inherit;
  text-decoration: none;
}
.contact-address-link:hover,
.contact-address-link:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
}

/* Kontakt ikonok finomhangolás */
.contact-card .fa-solid {
  font-size: 0.95rem;
  vertical-align: -1px;
  color: #1e2a78;
}

/* === Utilities === */
.hint {
  color: var(--muted);
  margin: .5rem 0 0;
  font-size: 0.9rem;
}
.mb-16{ margin-bottom:16px; }
.pad-24{ padding:24px; }
.pad-22{ padding:22px; }
.text-center{ text-align:center; }

/* Optional card-styled hero (use only if needed) */

/* Optional card-styled hero (use only if needed) */
.hero-card{
  background: linear-gradient(180deg,#0b1020 0%, #101a3a 70%, #0b1020 100%);
  color:#fff;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 30px rgba(2,6,23,0.25);
  padding: 36px 24px;
}

/* === Metrics (reusable counters) === */
.metrics-head {
  padding-top: 0px;    /* távolság a felső vonaltól */
  margin-top: 0;       /* margin helyett padding */
  margin-bottom: 10px; /* távolság a számlálóktól */
}
.metrics-title {
  font-size: 1.8rem;   /* vagy px-ben pl. 24px */
  font-weight: 600;    /* félkövér, ha kell */
  text-align: center;  /* ha középre akarod */
}
.metrics-divider { margin: 8px 0 14px; border: 0; border-top: 1px solid var(--line); }

.metrics-grid { display: grid; gap: 16px; }
.metrics-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 820px){
  .metrics-grid--2 { grid-template-columns: 1fr; }
}

/* === ORG tiles === */
.parent-emphasis{ text-align:center; margin-bottom:14px; }
.org-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }
.org-tile{
  text-decoration:none; color:#0f172a; background:#fff;
  border:1px solid #e6e8f0; border-radius:12px; padding:14px 16px;
  box-shadow:0 6px 18px rgba(16,24,40,.06); text-align:center; display:block;
}
.org-tile-title{ font-weight:700; font-size:1.15rem; }
.org-fallback{ margin-top:8px; }

/* === CONTACT layout pieces moved from inline === */
.contact-flag{ text-align:center; }
.contact-flag-img{ width:100%; max-height:220px; object-fit:cover; border-radius:12px; box-shadow:0 6px 20px rgba(16,24,40,.12); }

/* Quote block at footer */
.quote blockquote{margin:0; font-size:1.05rem}
.quote footer{color:var(--muted); margin-top:8px}

.site-footer{border-top:1px solid var(--line); padding:18px 0; color:#555}

@media (max-width: 720px){
  .nav-toggle{display:inline-block}
  .nav-menu{display:none; position:absolute; right:var(--gutter); top:54px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px}
  .nav-menu.show{display:block}
  .contact-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}


/* === v9.3 additions (non-breaking) === */

/* Hide 'skip to content' visually but keep accessible */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Generic card look for prose blocks */
.card {
  background: #ffffff;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(16,24,40,0.06);
  padding: 20px;
}

/* Fine-tune spacing in prose */
.prose h2 { margin-top: 4px; }
.prose p { margin-top: 0.6rem; margin-bottom: 0; }

/* Alap számláló stílus */
.value {
  font-weight: bold;
  text-align: center;
  color: var(--primary, #222);
}

/* Egyedi szabályok */
.metric .value.counter-euro { font-size: 3rem; color: var(--logo-blue); }

.metric .value.counter-percent { font-size: 2rem; color: var(--logo-red); }

/* Quote block at footer */
.pullquote {
  background: #0f172a;
  color: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 30px rgba(2,6,23,0.25);
}
.pullquote cite { display:block; margin-top: 8px; opacity:.85; font-style: normal; }
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* Pullquote layout (shared index + document) */
.pullquote{
  display:grid;
  grid-template-columns: 1fr auto; /* szöveg nyúlik, szerző a jobb szélen */
  gap:18px;
  align-items:center;
}
.pullquote .text{
  font-size:1.05rem;
  line-height:1.6;
  white-space: nowrap;      /* ha a hely engedi, egy sorban marad */
}
.pullquote .author{
  text-align:right;
  font-weight:700;
  font-size:1.15rem;
  justify-self: end;        /* jobb szélre igazít */
}
@media (max-width: 820px){
  .pullquote{ grid-template-columns: 1fr; }
  .pullquote .text{ white-space: normal; }
  .pullquote .author{ justify-self: start; text-align:left; margin-top:8px; }
}

/* MODAL (index-only component). */
/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
}
.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 0;
  border-radius: 8px;
  width: 80%;
  max-width: 800px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin: 10px;
  cursor: pointer;
}
.close:hover {
  color: #000;
}

/* === Org parent highlight === */
.org-card.parent {
  display: inline-block;
  padding: 16px 22px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(16,24,40,.05), 
              0 0 0 1px rgba(212,175,55,0.15) inset, 
              0 6px 14px rgba(212,175,55,0.10), 
              0 10px 24px rgba(212,175,55,0.08);
  background: linear-gradient(135deg, #0f172a, #1b2540);
  color: #fff;
  border: 1px solid rgba(212,175,55,0.18);
}
.org-card.parent .org-meta {
  display: block;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  font-size: .95rem;
}

/* === Bernard Baruch quote emphasis === */
.quote-small blockquote {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
}
.quote-small footer {
  margin-top: 8px;
  color: var(--muted);
  font-style: normal;
  font-size: 0.95rem;
}

/* === Highlighted stat card (Seit 5 Jahren) === */
.stat-card {
  background: linear-gradient(135deg, #0b1020, #1b2540);
  color: #fff;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
}
/* ACTIVE LINK: neutral highlight only (no blue pill). Do not override in page CSS. */
.nav-menu .active {
  background: none !important;
  font-weight: 700 !important;
  color: inherit !important;
}

/* === Document-only diagram spacing === */

.section.diagrams .chart-card {
  margin-bottom: 32px; /* extra spacing so stacked diagrams don't touch */
}

/* Vertical spacing between stacked chart cards on the document page */
.chart-row { 
  margin-bottom: 32px; /* separate consecutive charts so cards do not touch */
}
.chart-row:last-of-type {
  margin-bottom: 0; /* no extra space after the last chart row */
}

/* --- Hardening: ensure stacked chart rows never collapse together --- */
.section.diagrams .chart-row { display: flow-root; }
.section.diagrams .chart-row + .chart-row { margin-top: 32px; }
/* neutralize per-card bottom margins in this section to avoid double-spacing */
.section.diagrams .chart-card { margin-bottom: 0; }

/* === Robust spacing for stacked charts (document page) === */
.section.diagrams .chart-row,
.section.diagrams .chart-card {
  margin: 0;                  /* nullázzuk a belső marginokat, hogy ne ütközzenek */
}

.section.diagrams .chart-row { 
  display: flow-root;         /* megszünteti a margin-összeomlást */
}

/* ha .chart-row elemek egymás után jönnek */
.section.diagrams .chart-row + .chart-row {
  margin-top: 32px !important;
}

/* ha közvetlenül chart-cardok egymás szomszédai */
.section.diagrams .wrap > .chart-card + .chart-card,
.section.diagrams .chart-row > .chart-card + .chart-card {
  margin-top: 32px !important;
}

/* opcionális, finom elválasztó vonal a kártyák közé (ha szeretnéd) */
.section.diagrams .chart-row + .chart-row::before {
  content: "";
  display: block;
  border-top: 1px solid var(--line);
  margin: 16px 0;            /* a vonal körüli légrés */
}
/* === Final guard: enforce spacing between stacked chart rows (document) === */
main .chart-row { display: block; }
main .chart-row + .chart-row { margin-top: 32px !important; }

/*
 * === Chart cards: unified thin border & card look (index + document) ===
 * Non-breaking: only adds styling for .chart-card elements that weren't using .card.
 */
.chart-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(16,24,40,0.06);
  padding: 16px 18px; /* harmonize with .card defaults */
}

/* Optional hover lift (keeps spacing, purely visual) */
.chart-card:hover{
  box-shadow: 0 8px 28px rgba(16,24,40,0.10);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Enforce thin border on chart cards inside document diagrams */
.section.diagrams .chart-card{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

/* Ensure first two bar charts also get thin border & card style */
#bar-red.chart-card,
#bar-red-second.chart-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(16,24,40,0.06);
  padding: 16px 18px;
}

/* Datalabel backgrounds per bar chart */

/* First three bar charts: labels use the hero/header blue */
#bar-red .chartjs-datalabels,
#bar-red-second .chartjs-datalabels,
#bar-blue .chartjs-datalabels {
  background: var(--rah-blue);
  color: #fff;
}

/* Fourth bar chart: labels use custom gold */
#bar-third .chartjs-datalabels {
  background: rgb(179, 135, 36); /* custom dark gold */
  color: #fff;
}

/* === Gauges (félkör számlálók) === */
.gauges-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.gauge{
  text-align:center;
  padding:18px 8px;
}
.gauge svg{
  width: 220px;  /* igény szerint: 180–260px */
  height: 110px; /* félkör */
  display:block;
  margin: 0 auto;
}
.gauge-value{
  font-weight:800;
  margin-top:-6px;
  font-size: 1.15rem;
}
.gauge-caption{
  color: var(--muted);
  font-size: .95rem;
  margin-top: 6px;
}
.gauges-note{
  margin-top:12px;
  color: var(--muted);
  text-align:center;
}

/* márka színek, ha még nem lennének */
:root{
  --rah-blue: #1500BE;  /* R21 G0 B190 */
  --rah-red:  #A90015;  /* R169 G0 B21 */
  --rah-gold: #D4AF37;
}

/* === Chart card frame (minden chart kártyára, az első kettőre is) === */
.chart-card {
  border: 1px solid var(--line);   /* vékony keret */
  border-radius: 14px;             /* lekerekített sarok */
  background: #fff;                /* kontrasztos háttér */
  box-shadow: 0 6px 24px rgba(16,24,40,0.06); /* finom árnyék */
}
/* ORG chart: mobil -> 1 oszlop, tablet -> 2, desktop -> 4 */
.org-row{
  display: grid;
  grid-template-columns: 1fr;      /* mobil: egy oszlop */
  gap: 16px;
}

/* tablet álló/fekvő kb. */
@media (min-width: 600px){
  .org-row{ grid-template-columns: repeat(2, 1fr); }
}

/* meglévő 980-as szabályt felülírjuk egységesen */
@media (min-width: 980px){
  .org-row{ grid-template-columns: repeat(4, 1fr); }
}

/* overflow védelem, hogy a kártyák ne feszítsék szét a rácsot */
.org-node, .org-card{ min-width: 0; }
.org-card{ width: 100%; }

/* --- Mobile fix: ORG kártyák egymás alá, ne vízszintes sorban --- */
@media (max-width: 767px){
  .org-row,
  .org-grid{
    display: grid !important;
    grid-template-columns: 1fr !important; /* egy oszlop */
    grid-auto-flow: row;
    gap: 16px !important;
    overflow: visible !important;          /* tiltsd a vízszintes görgetést */
    white-space: normal !important;
  }
  .org-node, .org-card{ min-width: 0 !important; width: 100% !important; }
}