/* Rebríčky obcí Slovenska — samostatná podstránka.
   Všetko je scopnuté pod .reb, aby sa to nebilo so styles.css (ten má vlastné
   .section, .field, .hero, .container). Farebné tokeny sa berú z kampaňovej
   palety v styles.css; tu dopĺňam len tie, ktoré tam nie sú. */

.reb {
  --reb-navy-950: #061a37;
  --reb-line-strong: #c8d6e5;
  --reb-green: #198b65;
  --reb-grey: #7391b2;
  /* Červená pre číslo miesta. Zámerne tmavšia než červená poslednej pätiny
     v pruhu (#d6402c): číslo stojí priamo nad pruhom a v rovnakom odtieni by
     sa obe čítali ako jeden údaj. Na bielej má kontrast 6,2 : 1, takže je
     čitateľná aj v drobnom písme v bunke porovnania. */
  --reb-red: #c1121f;
  display: block;
  color: var(--ink);
  background: var(--bg-soft);
}

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

.reb-container {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
}

/* ---------------------------------------------------------------- hlavička */

.reb-hero {
  color: #fff;
  background: linear-gradient(118deg, var(--navy-900) 0%, var(--navy-800) 67%, #0b5398 100%);
}
.reb-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 64px;
  padding: 58px 0 52px;
}
.reb-eyebrow,
.reb-kicker {
  margin: 0 0 13px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.reb h1,
.reb h2,
.reb h3,
.reb p { margin-top: 0; }
.reb h1 {
  max-width: 650px;
  margin-bottom: 18px;
  color: #fff;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -.05em;
}
.reb h1 span { color: var(--orange); }
.reb-hero-lead {
  max-width: 620px;
  margin-bottom: 24px;
  color: #d7e2f0;
  font-size: 17px;
  line-height: 1.55;
}
.reb-spat { margin: 0; padding-top: 24px; font-size: 14px; }
.reb-spat a { color: #bed0e6; text-decoration: none; }
.reb-spat a:hover { text-decoration: underline; }

.reb-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.reb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  color: #fff;
  background: var(--blue);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.reb-btn:hover { background: #0a4b91; }
.reb-btn--orange { color: var(--reb-navy-950); background: var(--orange); }
.reb-btn--orange:hover { background: #f6a33e; }
.reb-btn--ghost { color: #fff; background: transparent; border-color: rgba(255, 255, 255, .28); }
.reb-btn--ghost:hover { background: rgba(255, 255, 255, .08); }

/* Hlavička stránky škôl. Nemá bočný panel „Čo je v porovnaní" ako stránka
   obcí — rozsah nesú dlaždice pod textom, takže druhý stĺpec by zíval prázdny.
   Odsadenie je rovnaké ako pri .reb-hero-inner, nech obe hlavičky sedia. */
.reb-hero-solo { padding: 58px 0 52px; }
.reb-hero-solo .reb-chapter-stats { max-width: 760px; margin-bottom: 26px; }

.reb-hero-side {
  padding: 22px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
}
.reb-hero-side-title { margin-bottom: 15px; color: #fff; font-size: 14px; font-weight: 800; }
.reb-hero-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.reb-hero-stat strong { font-size: 24px; letter-spacing: -.04em; }
.reb-hero-stat span { color: #bbcbdf; font-size: 12px; text-align: right; }

/* ----------------------------------------------------------------- sekcie */

.reb-main { padding: 38px 0 72px; }
.reb-section { margin-top: 44px; scroll-margin-top: 90px; }
.reb-section:first-child { margin-top: 0; }
.reb-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.reb-section-head h2 {
  margin-bottom: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.reb-section-head > p {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}
.reb-kicker { color: var(--blue); margin-bottom: 8px; }

.reb-panel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------- 01 / profil obce */

.reb-control-panel { padding: 20px; }
.reb-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(200px, .9fr);
  gap: 14px;
  align-items: end;
}
/* Tlačidlo na porovnanie je až pod kartami zdrojov, nie v ovládacom paneli.
   Klient 19. 9. 2026: „Toto porovnanie by som dal pod zakladny prehlad obce" —
   nad kartami ponúkalo odchod zo sekcie skôr, než návštevník uvidel, prečo by
   mal porovnávať. */
.reb-profile-cta { display: flex; justify-content: center; margin: 18px 0 0; }
.reb-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reb select,
.reb input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--reb-line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 15px;
  outline: 0;
}
.reb select:focus,
.reb input[type="search"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(12, 91, 172, .12);
}
.reb-control-note {
  margin: 14px 0 0;
  padding-top: 14px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.reb-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 16px;
  color: #465b73;
  background: var(--bg-soft2);
  border: 1px solid #d9e7f5;
  border-left: 4px solid var(--orange);
  border-radius: 10px;
  font-size: 13px;
}
.reb-notice strong { color: var(--navy-800); }

.reb-source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reb-source-card {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  padding: 19px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.reb-source-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: var(--orange);
}
.reb-source-card:nth-child(2)::before { background: var(--blue); }
.reb-source-card:nth-child(3)::before { background: var(--reb-grey); }
.reb-source-card:nth-child(4)::before { background: var(--reb-green); }
.reb-source-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.reb-source-name { margin: 0; font-size: 14px; line-height: 1.25; }
.reb-source-tag { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.reb-source-year {
  padding: 4px 7px;
  color: var(--navy-800);
  background: var(--bg-soft2);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
/* Klient 19. 9. 2026: „Mozno by som urobil cervenym 602 (cervene) z 2974
   (ciernym) - velkym". Červené je len samotné číslo miesta; bodka za ním
   aj „z 2 924“ sú čierne. Platí naraz v karte zdroja (01), v bunke
   porovnania (02) aj v karte vybranej obce (03), nech to nie je na každom
   mieste inak. */
.reb-rank-number { color: var(--reb-red); }

.reb-source-rank {
  margin: 24px 0 5px;
  color: var(--navy-900);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
}
/* „z 2 924" hneď za veľkým poradím, menšie a sivé — spolu čítajú ako jeden
   údaj „602. z 2 924", ale veľké číslo zostáva dominantné. Klient 19. 9. 2026:
   „ak sa da urobit dominantne: 31 z 71", „nech je to bold a prvy riadok". */
.reb-source-of {
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.reb-source-score { color: var(--blue); font-size: 13px; font-weight: 800; }

/* ------------------------------------------------------------------ pruhy

   Vzor poslal klient 19. 9. 2026 (Obce v dátach): hodnota, pod ňou pruh,
   farba podľa pätiny rebríčka. Farby sú vlastné — zelená/červená z paléty
   webu by splynuli s oranžovou kampaňovou, tu musí byť rozdiel čitateľný
   na prvý pohľad. Pruh je `aria-hidden`: nesie to isté, čo číslo vedľa
   neho, a čítačke by ho len zdvojoval. */
.reb-bar {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  background: #e8edf3;
  border-radius: 999px;
}
.reb-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
}
.reb-q1 { color: #1a9e57; }
.reb-q2 { color: #7fb833; }
.reb-q3 { color: #e8b21e; }
.reb-q4 { color: #e87d1e; }
.reb-q5 { color: #d6402c; }

.reb-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.reb-bar-legend-scale { display: inline-flex; gap: 3px; align-items: center; }
.reb-bar-legend-scale span {
  display: block;
  width: 16px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.reb-source-scope { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.reb-source-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.reb-source-link:hover { text-decoration: underline; }

/* -------------------------------------------------------- 02 / porovnanie */

.reb-compare-panel { overflow: hidden; }
.reb-compare-head,
.reb-compare-row {
  display: grid;
  grid-template-columns: minmax(180px, .75fr) repeat(3, 1fr);
  gap: 1px;
}
.reb-compare-head {
  padding: 12px 16px;
  color: #58708b;
  background: var(--bg-soft2);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reb-compare-select {
  min-height: 38px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
/* Rýchle hľadanie pri každej z troch obcí — klient 19. 9. 2026 poslal screenshot
   obtiahnutých rozbaľovačiek: „A tu mozno nejake rychle hladanie tiez?". Vyberať
   z takmer 3 000 položiek v natívnom výbere je na mobile trápenie, rovnaké pole
   je aj v sekcii 01. Selektor je `.reb input.reb-compare-search`, nie samotná
   trieda — inak by vyhralo všeobecné `.reb input[type="search"]` a pole by malo
   rovnakú výšku aj písmo ako rozbaľovačka nad ním. */
.reb-compare-pick { display: grid; gap: 6px; min-width: 0; }
.reb input.reb-compare-search {
  min-height: 34px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.reb-compare-row { border-bottom: 1px solid var(--line); }
.reb-compare-row:last-child { border-bottom: 0; }
.reb-compare-cell { min-height: 69px; padding: 14px 16px; background: #fff; }
.reb-compare-row .reb-compare-cell:not(:first-child) { border-left: 1px solid var(--line); }
.reb-compare-source { font-size: 13px; font-weight: 800; line-height: 1.3; }
.reb-compare-source small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.reb-compare-main { display: block; color: var(--navy-900); font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.reb-compare-of { color: var(--navy-900); font-size: 13px; letter-spacing: -.02em; white-space: nowrap; }
.reb-compare-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.reb-compare-empty { color: #97a5b4; font-size: 13px; }
/* popisok obce nad hodnotou — na mobile, kde stĺpce nie sú pod rozbaľovačkou */
.reb-compare-who { display: none; }

/* ----------------------------------------------------- 03 / detail rebríčka */

.reb-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  gap: 16px;
  align-items: start;
}
/* Karta „Vybraná obec" je v HTML pred tabuľkou (aby pod 950 px, kde sa layout
   zbalí do jedného stĺpca, stála nad ňou — tak to chcel klient 19. 9. 2026).
   Na širokej obrazovke to ale nesmie prehodiť stĺpce, tabuľka zostáva vľavo
   a karta vpravo, obe od vrchu. */
.reb-ranking-panel { grid-column: 1; grid-row: 1; }
.reb-detail-card { grid-column: 2; grid-row: 1; }
.reb-ranking-panel { overflow: hidden; }
.reb-ranking-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 17px;
  border-bottom: 1px solid var(--line);
}
.reb-ranking-summary { padding: 0 17px 12px; color: var(--muted); font-size: 12px; }

/* Pruh nad tabuľkou: kde v rebríčku stojí vybraná obec, plus tlačidlo na jej
   stranu, keď je práve mimo obrazovky. `flex-wrap` je podstatné — pri 320 px
   sa dlhý názov obce a tlačidlo nezmestia vedľa seba a bez zalomenia by panel
   roztiahli do šírky a stránka by dostala vodorovný posuv. */
.reb-ranking-locate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 17px 15px;
  font-size: 12px;
}
.reb-ranking-locate:empty { display: none; }
.reb-locate-text { color: var(--muted); }
.reb-locate-text strong { color: var(--navy-900); font-weight: 800; }
.reb-locate-here { color: var(--reb-grey); font-size: 11px; font-weight: 700; }

/* Stránkovanie. Klient 20. 9. 2026: „pri ineku nám neukazuje všetky obce
   (iba do 100)". Tabuľka ide po stovkách a „Posledná" je vždy na jeden klik. */
.reb-ranking-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 17px;
  border-top: 1px solid var(--line);
}
.reb-ranking-pager:empty { display: none; }
.reb-page-btn {
  min-height: 40px;
  padding: 0 13px;
  color: var(--navy-800);
  background: #fff;
  border: 1px solid var(--reb-line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.reb-page-btn:hover:not(:disabled) { color: #fff; background: var(--blue); border-color: var(--blue); }
.reb-page-btn:disabled { color: #a8b6c6; border-color: var(--line); cursor: default; }
.reb-page-btn--go { color: #fff; background: var(--blue); border-color: var(--blue); }
.reb-page-btn--go:hover:not(:disabled) { background: #0a4b91; }
.reb-page-status {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.reb table { width: 100%; border-collapse: collapse; font-size: 12px; }
.reb th {
  padding: 11px 12px;
  color: #58708b;
  background: var(--bg-soft2);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.reb td { padding: 10px 12px; border-bottom: 1px solid #edf1f5; white-space: nowrap; }
.reb tbody tr:hover td { background: #fafcff; }
/* Riadok vybranej obce. Podfarbenie aj ľavý prúžok: samotné podfarbenie by sa
   pri rolovaní strácalo a zafarbiť text načerveno nejde — červená je na tejto
   stránke vyhradená číslu miesta. */
.reb tbody tr.reb-row-current td { background: #fff4e3; }
.reb tbody tr.reb-row-current:hover td { background: #ffeed5; }
.reb tbody tr.reb-row-current td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.reb td.reb-rank { width: 58px; color: var(--muted); font-variant-numeric: tabular-nums; }
.reb td.reb-score { color: var(--navy-900); font-weight: 800; font-variant-numeric: tabular-nums; }
.reb-row-name { color: var(--navy-800); font-weight: 800; text-decoration: none; }
.reb-row-name:hover { color: var(--blue); text-decoration: underline; }
.reb-row-region { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.reb-grade {
  display: inline-grid;
  place-items: center;
  min-width: 29px;
  min-height: 24px;
  padding: 0 5px;
  color: var(--navy-900);
  background: #eef4fb;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
}
.reb-detail-card { padding: 21px; }
.reb-detail-card h3 { margin-bottom: 6px; font-size: 19px; letter-spacing: -.03em; }
.reb-detail-card .reb-muted { margin-bottom: 17px; color: var(--muted); font-size: 12px; }
.reb-mini-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* „602. miesto z 2 924" sa na úzkej karte vedľa popisku nezmestí — nech
     radšej spadne na vlastný riadok, než aby sa zalomilo uprostred údaja. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
/* Priamy potomok, nie ľubovoľný span: hodnota vedľa popisku má vnútri
   `.reb-rank-number` a to je tiež span — pri `.reb-mini-stat span` by
   popisok prebil červenú na špecificite a číslo by ostalo sivé. */
.reb-mini-stat > span { color: var(--muted); font-size: 12px; }
.reb-mini-stat strong { color: var(--navy-900); font-size: 19px; letter-spacing: -.04em; white-space: nowrap; }
.reb-parameter-list { margin-top: 13px; }
.reb-parameter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #edf1f5;
}
.reb-parameter-row .reb-bar { grid-column: 1 / -1; margin-top: 2px; height: 5px; }
.reb-parameter-row--pillar .reb-parameter-name { color: var(--navy-800); font-weight: 700; }
.reb-parameter-name { color: #3e536b; font-size: 11px; line-height: 1.35; }
.reb-parameter-value {
  color: var(--navy-800);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.reb-detail-footnote {
  margin: 16px 0 0;
  padding-top: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.5;
}

/* ------------------------------------------ 05 / benchmark parametrov

   Sekcia pribudla 20. 9. 2026 z podkladu klienta. Vzhľad sa neberie z jeho
   súboru (tam je zelená paleta a Inter), ale zo zvyšku tejto stránky: rovnaké
   panely, rovnaké pruhy, rovnaké červené číslo miesta. */

.reb-bench-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 14px;
}
.reb-bench-tab,
.reb-bench-pill {
  min-height: 40px;
  padding: 0 15px;
  color: var(--navy-800);
  background: #fff;
  border: 1px solid var(--reb-line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.reb-bench-tab:hover,
.reb-bench-pill:hover { color: #fff; background: var(--blue); border-color: var(--blue); }
.reb-bench-tab.is-active,
.reb-bench-pill.is-active { color: #fff; background: var(--navy-900); border-color: var(--navy-900); }
.reb-bench-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.reb-bench-pills:empty { display: none; }
.reb-bench-pill { min-height: 36px; padding: 0 13px; font-size: 12px; }

.reb-bench-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
}

.reb-bench-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.reb-bench-summary:empty { display: none; }
.reb-bench-stat { padding: 16px 18px; }
.reb-bench-stat > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.reb-bench-stat strong {
  display: block;
  color: var(--navy-900);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.reb-bench-stat small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }

.reb-bench-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.reb-bench-card { padding: 19px; }
.reb-bench-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.reb-bench-card-head h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; letter-spacing: -.02em; }
.reb-bench-code {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.reb-bench-badge {
  display: inline-block;
  padding: 4px 9px;
  color: #465b73;
  background: var(--bg-soft2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.reb-bench-badge--strong { color: #10613f; background: #e4f4ec; }
.reb-bench-priority {
  color: var(--orange);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.reb-bench-scores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.reb-bench-box {
  min-width: 0;
  padding: 12px;
  background: var(--bg-soft2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* Vybrané mesto má vlastné podfarbenie — v dvojici boxov musí byť na prvý
   pohľad jasné, ktorý je „my" a ktorý je vzor. */
.reb-bench-box--city { background: #fff6ec; border-color: #f3ddc2; }
.reb-bench-box small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.reb-bench-box strong { display: block; margin: 4px 0 2px; color: var(--navy-900); font-size: 16px; letter-spacing: -.02em; }
.reb-bench-place {
  display: block;
  margin: 4px 0 2px;
  color: var(--navy-900);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.1;
}
.reb-bench-place--value { color: var(--navy-900); }
.reb-bench-sub { display: block; margin-bottom: 3px; color: var(--navy-800); font-size: 12px; font-weight: 700; }

.reb-bench-gap { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.reb-bench-gap strong { color: var(--navy-900); }
.reb-bench-list { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.reb-bench-list strong { color: var(--navy-800); }
.reb-bench-recommend {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.reb-bench-recommend strong { color: var(--navy-900); }
.reb-bench-recommend ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.reb-bench-recommend li { margin-bottom: 5px; line-height: 1.5; }
.reb-bench-recommend p { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }
.reb-bench-details { margin-top: 12px; }
.reb-bench-details details { border-top: 1px solid #edf1f5; }
.reb-bench-details summary {
  padding: 9px 0;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.reb-bench-details p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.55; }

.reb-bench-note-panel { grid-column: 1 / -1; padding: 21px; }
.reb-bench-note-panel h3 { margin-bottom: 8px; font-size: 17px; letter-spacing: -.02em; }
.reb-bench-note-panel p { margin: 0 0 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.reb-bench-note-panel p:last-child { margin-bottom: 0; }
.reb-bench-footnote { margin-top: 18px; }

/* ----------------------------------------------- 04 / metodika, 06 / zdroje */

.reb-source-grid-large { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.reb-source-info { padding: 19px; border-left: 5px solid var(--orange); }
.reb-source-info:nth-child(2) { border-left-color: var(--blue); }
.reb-source-info:nth-child(3) { border-left-color: var(--reb-grey); }
.reb-source-info:nth-child(4) { border-left-color: var(--reb-green); }
.reb-source-info h3 { margin-bottom: 4px; font-size: 16px; line-height: 1.3; }
.reb-source-info .reb-source-meta { color: var(--blue); font-size: 11px; font-weight: 800; }
.reb-source-info p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.reb-source-info a {
  display: inline-block;
  margin-top: 13px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.reb-source-info a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- responzív */

/* ------------------------------------------- 06 / základné školy INEKO

   Sekcia beží na tých istých triedach ako sekcia 03 (.reb-detail-layout,
   .reb-ranking-panel, .reb-detail-card, .reb-table-scroll, .reb-page-btn)
   a na prepínačoch zo sekcie 05 (.reb-bench-tabs, .reb-bench-tab). Vlastné
   je tu len to, čo pri obciach nebolo: hodnoty v tabuľke a zmena hodnotenia
   so znamienkom. */

/* Dlaždice s rozsahom v hlavičke stránky škôl (počet škôl, obdobie, škála).
   Do 21. 9. 2026 večer boli súčasťou tmavého predelu, ktorý oddeľoval sekciu
   06 od obcí nad ňou. Predel zanikol spolu so sekciou — školy majú vlastnú
   stránku a oddeľovať ich už netreba — dlaždice zostali a stoja v hlavičke,
   kde robia to isté: hneď povedia, aký veľký ten rebríček je. */
.reb-chapter-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.reb-chapter-stats span {
  padding: 13px 15px;
  color: #bbcbdf;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  font-size: 12px;
}
.reb-chapter-stats strong {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 19px;
  letter-spacing: -.03em;
}

/* Odkaz na stránku škôl na mieste, kde do 21. 9. 2026 večer stála sekcia 06.
   Je to rozcestník, nie ďalšia téma — preto svetlá karta s oranžovým pásikom
   a nie tmavý pás cez celú šírku: tmavý pás tu klient prečítal ako
   pokračovanie stránky a školy mu pod mestami „trčali". */
.reb-dalej {
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius);
}
.reb-dalej h2 {
  margin-bottom: 10px;
  font-size: clamp(21px, 2.4vw, 27px);
  letter-spacing: -.03em;
}
.reb-dalej > p { max-width: 640px; margin-bottom: 0; color: var(--muted); font-size: 14px; }
.reb-dalej-cta { margin: 18px 0 0; }

/* Uzatvárací odstavec stránky obcí ide hneď za poznámkou o spracovaní dát.
   Dve čiary tesne pod sebou by vyzerali ako chyba, druhá sa preto ruší. */
.reb-zaver { margin-top: 10px; padding-top: 0; border-top: 0; }

/* Karta zdroja pod rebríčkom škôl. Je to tá istá karta ako v sekcii 07, len
   stojí sama — pásik má preto tmavomodrý, nie oranžový: v sekcii 07 je piata
   v poradí a farby pásikov tam rozlišujú jednotlivé zdroje. */
.reb-skoly-source { margin-top: 16px; }
.reb-source-info--skoly { border-left-color: var(--navy-800); }

/* Bez `color` zámerne: farbu si v týchto bunkách určuje .reb-delta--* nižšie
   a `.reb td.reb-skoly-value` by ju svojou špecificitou prebilo. */
.reb td.reb-skoly-value { font-variant-numeric: tabular-nums; }

/* Zmena hodnotenia. Zelená a červená sú tu odtiene pruhov (prvá a posledná
   pätina), nie kampaňová paleta a nie --reb-red — tá je na celej stránke
   vyhradená číslu miesta a „+1,6" nie je poradie. Nula ostáva čierna:
   „žiadna zmena" nie je ani dobrá, ani zlá správa.
   Selektor je dvojtriedny (.reb pred triedou), aby prebil aj
   `.reb-parameter-value` v karte školy — tá má vlastnú farbu. */
.reb .reb-delta--up { color: #157a4c; font-weight: 800; }
.reb .reb-delta--down { color: #b3391f; font-weight: 800; }

/* Nadpis skupiny v karte školy. Karta má pod sebou dva zoznamy s pruhmi,
   ktoré znamenajú niečo iné (pozícia v rebríčku vs. podiel k desiatke) —
   nadpis to pri každej skupine pomenuje, aby sa nečítali ako jedna stupnica. */
.reb-skoly-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 17px 0 0;
  color: var(--navy-800);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.reb-skoly-group span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Hľadanie je v tejto tabuľke jediné ovládanie — výber rebríčka nahradil
   prepínač rozsahu nad panelom. Bez tohto by input zostal v ľavej polovici
   dvojstĺpcovej mriežky a vedľa neho by zívala diera. */
.reb-skoly-toolbar-full { grid-column: 1 / -1; }

@media (max-width: 950px) {
  .reb-hero-inner { grid-template-columns: 1fr; gap: 26px; padding-top: 42px; }
  .reb-hero-side { max-width: 620px; }
  .reb-source-grid { grid-template-columns: repeat(2, 1fr); }
  .reb-bench-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reb-bench-grid { grid-template-columns: 1fr; }
  .reb-detail-layout { grid-template-columns: 1fr; }
  /* Jeden stĺpec — rozhoduje poradie v HTML, teda karta nad tabuľkou. */
  .reb-ranking-panel,
  .reb-detail-card { grid-column: auto; grid-row: auto; }
}

@media (max-width: 680px) {
  .reb-container { width: min(100% - 28px, 1180px); }
  .reb-main { padding-top: 26px; }
  .reb-hero-inner { padding: 34px 0 40px; }
  .reb-hero-lead { font-size: 16px; }
  .reb-hero-solo { padding: 34px 0 40px; }
  /* Dlaždice s rozsahom pod sebou — v troch stĺpcoch by sa „hodnotených
     základných škôl" lámalo na štyri riadky. */
  .reb-chapter-stats { grid-template-columns: 1fr; gap: 8px; }
  .reb-dalej { padding: 22px 20px; }
  .reb-section-head { display: block; }
  .reb-section-head > p { margin-top: 10px; }
  .reb-controls,
  .reb-bench-controls,
  .reb-ranking-toolbar { grid-template-columns: 1fr; }
  /* Štyri prepínače zdrojov a štyri piliere — na dotyku aspoň 44 px vysoké
     a nech sa pokojne zalomia, len nech nikam netlačia stránku do šírky. */
  .reb-bench-tab { min-height: 44px; }
  .reb-bench-summary { grid-template-columns: 1fr; }
  .reb-bench-scores { grid-template-columns: 1fr; }
  /* Na dotyku má byť tlačidlo aspoň 44 px a päť tlačidiel sa na jeden riadok
     nezmestí — nech sa teda zalomia a zostanú kliknuteľné. */
  .reb-ranking-pager { gap: 7px; padding: 13px 14px; }
  .reb-page-btn { min-height: 44px; padding: 0 11px; }
  .reb-page-status { flex-basis: 100%; text-align: center; }
  .reb-ranking-locate,
  .reb-ranking-summary { padding-left: 14px; padding-right: 14px; }
  .reb-source-grid,
  .reb-source-grid-large { grid-template-columns: 1fr; }
  .reb-profile-cta .reb-btn { width: 100%; }

  /* Porovnanie na mobile: rovnaké riadky a rovnaké bunky, len sa zalomia pod
     seba namiesto vodorovného posúvania panela. Klient 19. 9. 2026 písal, že
     „dost divne sa to ovláda cez mobil“ — pôvodná verzia mala tabuľku širokú
     690 px vo vnútornom scrolleri, takže sa hodnota a jej stĺpec nedali vidieť
     naraz. Štruktúra sekcie ani jej logika sa nemenia, len rozloženie. */
  /* gap 18px medzi dvojicami, 8px vnútri dvojice (.reb-compare-pick) — na mobile
     je pod sebou šesť rovnako širokých polí a bez toho rozdielu nie je vidieť,
     ktoré hľadanie patrí ku ktorej rozbaľovačke. */
  .reb-compare-head { grid-template-columns: 1fr; gap: 18px; padding: 14px; }
  .reb-compare-head > div:first-child { display: none; }
  .reb-compare-select { min-height: 44px; font-size: 15px; }
  .reb-compare-pick { gap: 8px; }
  .reb input.reb-compare-search { min-height: 40px; font-size: 15px; }
  /* minmax(0, …), nie 1fr: pri „1fr" je spodná hranica min-content, takže dlhý
     názov obce („BRATISLAVA - RUŽINOV") rozšíri svoj stĺpec a susedovi uberie —
     „662. miesto" sa potom zalamovalo na dva riadky. Takto sú tretiny naozaj
     rovnaké a dlhý názov sa orezáva trojbodkou, ako sa zamýšľalo. */
  .reb-compare-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-bottom: 4px; }
  .reb-compare-row .reb-compare-cell:first-child {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 12px 14px 8px;
    background: var(--bg-soft2);
  }
  .reb-compare-cell { min-width: 0; min-height: 0; padding: 10px 10px 14px; }
  .reb-compare-cell:nth-child(2) { padding-left: 14px; }
  .reb-compare-row .reb-compare-cell:not(:first-child) { border-left: 0; }
  .reb-compare-who {
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .reb-compare-main { font-size: 17px; white-space: nowrap; }
  .reb-compare-of { font-size: 11px; }
  /* Pod 360 px sa „2 318. z 2 926" do tretiny riadku nezmestí a keďže je hlavná
     hodnota `nowrap`, pretlačila by stránku do strán. „z 2 926" ide preto na
     vlastný riadok, a to vo VŠETKÝCH bunkách naraz, nie len v tých dlhých —
     inak by mali bunky v jednom riadku rôznu výšku a pruhy pod nimi by sa
     rozišli. Poradie zostáva prvé a tučné, tak ako má byť. */
  @media (max-width: 359px) {
    .reb-compare-of { display: block; }
  }
  .reb-compare-sub { white-space: nowrap; }
  .reb-compare-cell .reb-bar { height: 5px; margin-top: 6px; }
}