/* ============================================================
   Letisko Nitra — spoločné štýly

   Vizuálny jazyk je prevzatý z portálu platieb, nie vymyslený nanovo:
   rovnaká modrá, rovnaké písmo, rovnaký spôsob práce s kartami.
   Klub tak pôsobí ako jedna vec, nie ako tri rôzne weby.
   ============================================================ */

:root {
  --ink:     #1a1a1a;
  --muted:   #6b7280;
  --line:    #e5e7eb;
  --bg:      #f7f8fa;
  --card:    #ffffff;
  /* Klubová modrá je #4984c8 (odtieň 212°, sýtosť 54 %, svetlosť 53 %).
     Používa sa tu ako rodina troch odtieňov s rovnakým odtieňom
     aj sýtosťou — mení sa len svetlosť, takže je to stále tá istá farba.

     Prečo nie je pracovná farba priamo #4984c8: biely text na nej má
     kontrast 3,88:1, čo je pod hranicou 4,5:1 pre bežný text. Rovnaký
     problém má aj modrý odkaz na bielom podklade. Stmavenie o 16 %
     svetlosti dvíha kontrast na 6,86:1 a odtieň nechá nedotknutý. */
  --brand:    #2c5c93;   /* pracovná — text a plochy s bielym textom */
  --brand-d:  #234874;   /* tmavšia — prejazd myšou */
  --brand-sv: #4984c8;   /* presná klubová — plochy a akcenty, nie text */
  --ok:      #1a7f37;
  --warn:    #b45309;
  --bad:     #c0392b;
  --radius:  10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; }

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

.topbar {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 0 22px;
}
.topbar img { height: 34px; width: auto; display: block; }
.topbar .brand { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.topbar .brand b { font-size: 15px; font-weight: 600; letter-spacing: .01em; }

.topbar nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.topbar nav a {
  color: #cfe0f5;
  text-decoration: none;
  padding: 13px 14px;
  font-size: 14px;
  border-bottom: 3px solid transparent;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a.on { color: #fff; border-bottom-color: #fff; font-weight: 600; }

/* ── Prepínač jazyka ──────────────────────────────────────────────────
   Prvá verzia bola jedno slovo „EN" v rovnakom štýle ako položky menu
   a zanikalo — vyzeralo ako ďalšia sekcia, nie ako iný jazyk.

   Preto sú tu obe skratky naraz, v jednom rámčeku, s vyplnenou tou
   aktuálnou. Dvojica sa číta ako prepínač na prvý pohľad; jedno slovo
   sa čítať tak nedá, nech je akokoľvek zvýraznené.

   Skratky, nie vlajky. Angličtinou sa na letisku dohovorí Poliak aj
   Maďar a britská vlajka by im tvrdila niečo iné — nie je to jazyk
   Britov, je to spoločný jazyk. Slovenská vlajka by zase bola sama,
   bez páru, čo vyzerá ako chyba. */
.topbar nav .jazyk {
  display: flex;
  align-self: center;
  margin-left: 12px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 5px;
  overflow: hidden;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
}
/* Prebíja .topbar nav a — trojica tried má vyššiu váhu než dve triedy
   a element, takže sa nemusí nič označovať ako !important. */
.topbar nav .jazyk > * {
  padding: 4px 9px;
  line-height: 1.4;
  border-bottom: none;
}
.topbar nav .jazyk a { color: #cfe0f5; text-decoration: none; }
.topbar nav .jazyk a:hover { background: rgba(255,255,255,.2); color: #fff; }
/* Aktuálny jazyk nie je odkaz — nemá kam viesť. Je to <span>, takže sa
   naň nedá kliknúť ani sa naň nedostane tabulátorom. */
.topbar nav .jazyk .jazyk-on { background: #fff; color: var(--brand); }

/* Telefón patrí hore, nie do pätičky. Pilot, ktorý sa rozhoduje deň
   vopred alebo je už vo vzduchu, nemá čas listovať. */
.topbar .tel {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.14);
  color: #fff; text-decoration: none;
  padding: 7px 14px; border-radius: 20px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  margin: 8px 0;
}
.topbar .tel:hover { background: rgba(255,255,255,.24); }

/* --- rozloženie --------------------------------------------------------- */

.wrap { max-width: 1080px; margin: 0 auto; padding: 26px 22px 60px; }
.wrap.uzky { max-width: 860px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.card h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 14px; font-weight: 600;
}

/* --- oznam -------------------------------------------------------------- */

/* Stav letiska aj oznam sú jedna vec, nie dve. Keď je pole prázdne,
   blok sa nezobrazí vôbec — dva samostatné mechanizmy by sa časom
   rozišli a jeden by ostal neaktuálny. */
.oznam {
  background: #fef6e7; border: 1px solid #f6e0b4; color: #8a5a08;
  border-radius: var(--radius); padding: 13px 18px; margin-bottom: 18px;
  font-size: 15px;
}
.oznam b { color: #6b4606; }

/* --- vstupná brána ------------------------------------------------------ */

.hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #24405f;
  min-height: 320px;
  display: flex; align-items: flex-end;
  margin-bottom: 18px;
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .prekryv {
  position: relative; width: 100%;
  background: linear-gradient(to top, rgba(8,20,36,.86) 0%, rgba(8,20,36,.55) 45%, rgba(8,20,36,0) 100%);
  padding: 60px 26px 22px;
  color: #fff;
}
.hero h1 { margin: 0 0 4px; font-size: 30px; font-weight: 700; }
.hero .ident {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 15px; color: #bcd3ee; letter-spacing: .02em;
}
/* Zástupné pozadie, keby sa fotka nenačítala. Tu je klubová farba použitá
   v presnom odtieni — text nad ňou má vlastný tmavý prechod, takže sa
   nemusí obetovať kvôli kontrastu. */
.hero.bez-fotky { background: linear-gradient(150deg, var(--brand-sv) 0%, var(--brand) 55%, var(--brand-d) 100%); }

/* --- údajové dlaždice --------------------------------------------------- */

/* auto-fit, nie pevné tri stĺpce: keď sa počet dlaždíc zmení, mriežka sa
   prispôsobí sama a nezostane po nich prázdne miesto. */
.dlazdice { display: grid; gap: 18px;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.dlazdice .card { margin: 0; }

/* --- pás predpovede ------------------------------------------------------
   Sedí hneď pod dvojicou dlaždíc a uzatvára ich zdola. Preto nemá vrchný
   odstup — dvojica a pás sú jeden blok, nie dve nesúvisiace karty.

   Vnútro je flex, nie mriežka s auto-fit. Mriežka by dni na mobile
   zalomila do dvoch nerovnakých radov a z pásu by zostal odrezok. Takto
   sa dni na širokej obrazovke rovnomerne rozložia a na úzkej sa pás
   posúva prstom doprava — čo je presne to, čo človek od pásu čaká. */

.predpoved { padding: 6px 8px 8px; margin-top: 18px; }
.predpoved h2 { margin: 12px 14px 4px; }

.pred-dni {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.pred-den {
  flex: 1 0 0;
  min-width: 96px;
  scroll-snap-align: start;
  padding: 10px 4px 12px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.pred-den:first-child { border-left: none; }

/* Dnešok sa neodlišuje výplňou, ale prúžkom navrchu. Výplň by v páse
   s deliacimi čiarami vyzerala ako chyba zarovnania. */
.pred-den.dnes { box-shadow: inset 0 2px 0 var(--brand-sv); }

.pred-nazov { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.pred-datum { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pred-ikona { display: block; margin: 7px auto 5px; }

/* Tabuľkové číslice: bez nich sa stĺpce teplôt pri „9" a „22" rozídu
   a pás prestane pôsobiť ako mriežka. */
.pred-teplota { font-size: 14px; font-variant-numeric: tabular-nums; }
.pred-teplota b { font-weight: 700; }
.pred-teplota span { color: var(--muted); font-weight: 600; }

.pred-vietor {
  font-size: 12px; color: var(--muted); margin-top: 5px;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
/* Šípka ukazuje, KAM vietor fúka — rovnaký dohovor ako šípka v ružici
   vyššie na stránke. Dve šípky s opačným významom na jednej stránke by
   bola pasca. */
.pred-vietor svg { flex: none; color: #94a3b8; }
.pred-vietor.silny { color: var(--warn); font-weight: 600; }
.pred-vietor.silny svg { color: var(--warn); }

.pred-zrazky {
  font-size: 11px; color: var(--brand); margin-top: 3px;
  font-variant-numeric: tabular-nums; min-height: 15px;
}

.pred-pata {
  font-size: 12px; color: var(--muted);
  margin: 2px 14px 6px; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.pred-pata a { color: var(--muted); }

@media print { .predpoved { display: none; } }

.velke {
  font-size: 30px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.velke small { font-size: 15px; font-weight: 600; color: var(--muted); }
.pod { font-size: 13px; color: var(--muted); margin-top: 4px; }

.dvojica { display: flex; gap: 26px; flex-wrap: wrap; }
.dvojica > div { min-width: 120px; }
.stitok { font-size: 12px; color: var(--muted); text-transform: uppercase;
          letter-spacing: .05em; font-weight: 600; margin-bottom: 2px; }

/* --- výber cieľového letiska -------------------------------------------
   Jediné miesto na stránke, kde návštevník niečo ovláda. Rámik a iný
   podklad sú tu preto, aby to bolo vidieť — medzi vypísanými údajmi by
   sa holý <select> stratil.

   Na papieri nemá zmysel, preto má v HTML triedu `netlacit`. */

.ciel {
  margin-top: 16px; padding: 12px 14px;
  background: #f4f7fb; border: 1px solid #dbe5f2;
  border-radius: var(--radius);
}
.ciel label { display: block; margin-bottom: 7px; }

/* 16 px nie je estetika: pod túto veľkosť Safari na iPhone pri kliknutí
   do poľa priblíži celú stránku a späť sa už nevráti. */
.ciel select {
  width: 100%; font: inherit; font-size: 16px;
  padding: 9px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.ciel select:focus-visible { outline: 3px solid #9dc0ee; outline-offset: 1px; }

.ciel-vysledok { margin-top: 11px; font-size: 14px; }
.ciel-vysledok .velke { font-size: 26px; }
.ciel-vysledok .pod { margin-top: 2px; }
.ciel-kde { font-weight: 600; }
.ciel-kde span { color: var(--muted); font-weight: 400; }
/* Rozdiel voči Nitre je celá pointa výberu, preto je zvýraznený.
   Oranžová, nie červená: nie je to výstraha, je to údaj, ktorý si má
   človek všimnúť. */
.ciel-rozdiel { color: var(--warn); font-weight: 600; }

/* --- mapka v karte ------------------------------------------------------ */
/* Obrázok sa roztiahne na šírku karty a nechá si vlastný pomer strán.
   Rozmery sú v atribútoch <img>, takže si prehliadač miesto rezervuje
   dopredu a karta pri načítaní nepodskočí. */
.mapka { margin: 14px 0 0; }
.mapka img { display: block; width: 100%; height: auto;
             border-radius: var(--radius); border: 1px solid var(--line); }
.mapka figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
/* Na papieri sa neklikne, tak nech to ani nevyzerá ako odkaz. */
@media print { .mapka figcaption { color: #000; } }

/* --- bunky s hodnotami zo stanice --------------------------------------- */
/* Päť údajov v jednom sivom riadku oddelených bodkami sa nedalo prehľadať.
   Každý má teraz vlastnú bunku so štítkom; mriežka sa sama zlomí podľa
   šírky karty, takže na mobile ide do dvoch stĺpcov a nie do siedmich
   riadkov. */
.hodnoty  { display: grid; gap: 12px 16px; margin-top: 16px;
            grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.hodnota  { font-size: 17px; font-weight: 600; line-height: 1.25;
            font-variant-numeric: tabular-nums; margin-top: 1px; }
.hodnota small { font-size: 12px; font-weight: 500; color: var(--muted);
                 margin-left: 3px; }

/* Šípka trendu. Zámerne v sivej, nie v červenej a modrej: farba by
   znamenala „dobre/zle" a pri tlaku ani teplote to tak jednoducho nie je.
   Nesie smer, nie hodnotenie. */
.tr { font-size: 10px; color: var(--muted); margin-left: 4px;
      vertical-align: 1px; cursor: help; }

/* --- veterný rukáv ------------------------------------------------------ */
/* Štyri fotografie podľa sily vetra. Sú predpripravené tak, že stožiar je
   vo všetkých na rovnakom mieste — pri zmene stavu sa teda hýbe len samotný
   rukáv a obrázok neposkočí.

   Obrázok je čisto doplnkový: to isté hovoria čísla vedľa neho. Preto má
   prázdny alt, keď sa nenačíta, a v tlači sa vynecháva. */
.udaje-rukav { display: flex; align-items: center; gap: 14px;
               justify-content: space-between; }
/* Všetky štyri obrázky majú rovnaké plátno 200×212, takže sa dlaždica pri
   zmene vetra nepreskladá. Veľkosť sa riadi výškou — tá určuje, ako sa
   rukáv vyváži voči dvom číslam vedľa neho. */
.rukav-foto  { height: 96px; width: auto; flex: 0 0 auto; }

@media print { .rukav-foto { display: none; } }

/* --- veterná ružica ----------------------------------------------------- */
/* Zmysel ružice nie je ozdoba, ale premietnutie smeru vetra na os dráhy.
   Preto je dráha nakreslená rovnako výrazne ako samotná šípka a všetko
   ostatné (rysky, svetové strany) ide do pozadia. */

/* Ružica hore cez šírku karty, čísla pod ňou. Vo dvoch stĺpcoch vedľa
   seba bola tak malá, že sa z plánu dráh nedalo nič prečítať — a plán
   je dôvod, prečo tam ružica je. */
.ruzica-riadok { display: block; }
.ruzica        { display: block; width: 80%; max-width: 420px; height: auto;
                 margin: 0 auto 10px; }
.ruzica-cisla  { display: block; }
.ruz-zdroj     { font-size: 11px; color: var(--muted); text-align: center;
                 margin: -8px 0 16px; }

/* Čiary, ktoré nenesú rozmer (kruh, rysky, šípka), majú hrúbku v pixeloch
   bez ohľadu na to, ako je ružica veľká — inak by pri 340 px zhrubli
   dvojnásobne. Dráhy naopak MUSIA škálovať, ich šírka je skutočný údaj. */
.ruz-ring, .ruz-tick, .ruz-tick30, .ruz-sipka { vector-effect: non-scaling-stroke; }

.ruz-ring   { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ruz-tick   { stroke: var(--line);  stroke-width: 1; }
.ruz-tick30 { stroke: #cbd5e1;      stroke-width: 1.5; }
/* Veľkosti písma sú v jednotkách viewBoxu, teda sa zväčšujú spolu
   s ružicou. Naladené na ~340 px: 5,6 jednotky ≈ 12 px na obrazovke. */
.ruz-svet   { font-size: 5.6px; font-weight: 700; fill: var(--muted); }
/* Označenia dráh ležia na mape, nie na bielom. Biely lem pod písmom ich
   drží čitateľné aj nad zástavbou; paint-order vykreslí lem POD text —
   bez neho by ho obtiahol zvonka aj zvnútra a písmo by stučnelo. */
.ruz-cislo  { font-size: 5.2px; font-weight: 700; fill: #3c424c;
              stroke: #fff; stroke-width: 1.6px; paint-order: stroke; }

/* Mapový podklad je len na zorientovanie sa. Mierne stlmený, aby modrá
   šípka a rysky zostali to prvé, čo oko na obrázku nájde. */
.ruz-mapa   { opacity: .88; }
.ruz-sipka  { stroke: var(--brand); stroke-width: 3.5; stroke-linecap: round; }
.ruz-hrot   { fill: var(--brand); }
.ruz-stred  { fill: var(--muted); }

/* Bublina s rýchlosťou vetra. Stojí mimo kruhu, na predĺžení šípky —
   vnútri by kryla rysky aj mapu, vonku bolo doteraz prázdne miesto.
   Vodidlo je tenké schválne: má len ukázať, že číslo patrí k šípke,
   nie súperiť s ňou o pozornosť. */
.ruz-vodidlo { stroke: var(--brand); stroke-width: 1; }
.ruz-bublina { fill: #fff; stroke: var(--brand); stroke-width: 1.5; }
.ruz-bublina-cislo { font-size: 5.6px; font-weight: 700; fill: var(--brand); }
.ruz-bublina-jedn  { font-size: 4.2px; font-weight: 600; fill: var(--brand); }

/* --- kamera ------------------------------------------------------------- */

.kamera {
  background: #0f1b2b; border-radius: 8px; overflow: hidden;
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  color: #7f93ab; font-size: 13px; text-align: center; padding: 16px;
}
.kamera img,
.kamera video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dve kamery vedľa seba. Strop šírky je na dvojici, nie na jednotlivej
   kamere: cez celú šírku stránky by mali pri pomere 16:9 vyše 280 px na
   výšku každá a spolu by zabrali celú prvú obrazovku.

   Pod 820 px sa skladajú pod seba. Dve kamery vedľa seba na telefóne by
   mali po 160 px — v tej veľkosti sa z obrazu nedá prečítať ani
   oblačnosť, ani stav plochy, čiže by tam boli zbytočne obe. */
.kamery {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
  max-width: 900px; margin: 0 auto;
}
.kam { margin: 0; min-width: 0; }
.kam figcaption { font-size: 12.5px; color: var(--muted); margin-top: 7px; }
@media (max-width: 820px) { .kamery { grid-template-columns: 1fr; max-width: 560px; } }

/* Panoráma zo Zobora má pomer 2,2:1 — do okna 16:9 sa vojde celá len
   s pruhmi hore a dole. `contain`, nie `cover`: orezaním na 16:9 by sa
   z panorámy odkrojili práve tie kraje, pre ktoré je to panoráma.
   Pruhy splynú s tmavým pozadím okna, takže nevyzerajú ako chyba.
   Rámček a zaoblenie si nesie okno, nie obrázok — inak by v ňom vznikol
   druhý rám o pixel menší. */
.kamera.panorama img { object-fit: contain; border: none; border-radius: 0; }

/* Stred okna kamery — tlačidlo play a pod ním stav. */
.kamera .stred { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.prehrat {
  width: 64px; height: 64px; border-radius: 50%; padding: 0;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(15,27,43,.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s, transform .12s;
}
/* Trojuholník sa opticky nestredí sám — jeho ťažisko je vľavo od
   geometrického stredu, preto ten posun o 3 px doprava. */
.prehrat svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.prehrat:hover { background: rgba(15,27,43,.78); transform: scale(1.06); }
.prehrat:focus-visible { outline: 3px solid #9dc0ee; outline-offset: 3px; }

/* --- pás fotiek ---------------------------------------------------------
   Zámerne výber, nie úplná galéria. Neúplný výber pôsobí ako voľba,
   neúplná mriežka ikon pri každom riadku pôsobí ako chyba — a to je
   dôvod, prečo fotky nie sú v tabuľke.

   Jeden súbor na lietadlo: náhľad je ten istý obrázok zmenšený cez CSS
   a kliknutie ho otvorí v pôvodnej veľkosti. Žiadna knižnica, funguje
   všade vrátane mobilu. */

.fotky {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin: 0 0 16px;
}
.fotky a { display: block; text-decoration: none; color: var(--muted); }
.fotky img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 8px; display: block; background: #eef1f5;
}
.fotky a:hover img { filter: brightness(1.05); }
.fotky span { display: block; font-size: 12.5px; margin-top: 5px; }

/* --- tabuľky ------------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #f1f2f4;
         vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
     color: var(--muted); font-weight: 600; }
tbody tr:last-child td, table tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; white-space: nowrap;
                 font-variant-numeric: tabular-nums; }
/* Dvojstĺpcová tabuľka údajov — vľavo názov, vpravo hodnota. */
table.udaje td:first-child { color: var(--muted); width: 40%; }

/* --- METAR pod kamerou -------------------------------------------------- */

/* Surové znenie sa NEZALAMUJE po písmenách a nezmenšuje pod čitateľnosť —
   METAR je reťazec kódov a zlomený uprostred skupiny sa číta zle. Radšej
   sa zalomí medzi skupinami, na medzerách. */
.metar { margin-top: 14px; }

/* Hlásenie z CUDZIEHO letiska v dlaždici s vlastným meraním. Odsadené
   čiarou a podfarbením, aby sa jeho čísla nedali prečítať ako naše —
   45 km je 45 km. Vizuálne je to o úroveň nižšie, nie rovnocenný blok. */
.metar.cudzi {
  margin-top: 18px; padding: 12px 13px 2px;
  border-top: 1px solid var(--line);
  background: #fafbfc; border-radius: var(--radius);
}
.metar-vzdial {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: #eef0f3; color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
}

.metar-hl {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  margin-bottom: 6px;
}
.metar-hl b { color: var(--brand-d); }

.metar code {
  display: block;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; line-height: 1.55;
  background: #f3f6fa; border: 1px solid #d8e3f0; border-radius: 6px;
  padding: 9px 11px; color: #2c3e56;
  overflow-wrap: break-word; word-break: normal;
}

.metar-zhrn { font-size: 13px; color: var(--muted); margin-top: 7px; }
.metar-zhrn strong { color: var(--ink); font-weight: 600; }

/* Kompaktná verzia tabuľky údajov — do dlaždice, kde nesmie prekričať
   veľké čísla nad sebou. Užší prvý stĺpec, menšie písmo, tesnejšie riadky. */
table.udaje.mensia td { font-size: 13.5px; padding: 5px 0; }
table.udaje.mensia td:first-child { width: 30%; font-size: 12.5px; }

/* --- štítky a poznámky -------------------------------------------------- */

/* Výstraha. Nie je to poznámka pod čiarou ani právna veta — je to vec,
   ktorej prehliadnutie stojí pilota koniec prevádzkového dňa. Preto má
   vlastnú farbu, ktorá sa nepletie ani s modrou (informácia), ani so
   žltou (nedokončené). */
.vystraha {
  background: #fdecea; border-left: 3px solid #c0392b;
  padding: 10px 13px; border-radius: 0 6px 6px 0;
  font-size: 13.5px; color: #7d2118; margin: 14px 0 0;
  line-height: 1.5;
}
.vystraha b { color: #5f180f; }

.znacka {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.z-ok   { background: #e9f7ed; color: #14652c; }
.z-nie  { background: #fdecea; color: #8f2a21; }
.z-mute { background: #eef0f3; color: #4b5563; }

/* Miesto, kde ešte nemáme odpoveď. Je označené zámerne nápadne —
   nevyplnená medzera je poctivejšia než vymyslený údaj, ale nesmie
   sa nechtiac dostať na verejnú stránku. */
.doplnit {
  background: #fff4e5; border-left: 3px solid var(--warn);
  padding: 8px 12px; border-radius: 0 6px 6px 0;
  font-size: 13.5px; color: #8a5a08; margin: 8px 0;
}
.doplnit b { color: #6b4606; }

.pravne {
  background: #f3f6fa; border: 1px solid #d8e3f0; border-radius: 8px;
  padding: 14px 18px; font-size: 14px; color: #2c3e56; margin-bottom: 18px;
}
.pravne b { color: var(--brand-d); }

.poznamka { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* --- obsah stránky briefingu -------------------------------------------- */

.obsah { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.obsah a {
  font-size: 13px; text-decoration: none; color: var(--brand);
  border: 1px solid var(--line); background: #fff;
  padding: 6px 13px; border-radius: 20px;
}
.obsah a:hover { background: #f2f6fb; }

/* --- pätička ------------------------------------------------------------ */

.pata {
  border-top: 1px solid var(--line); margin-top: 34px; padding-top: 20px;
  font-size: 13px; color: var(--muted);
}
.pata a { color: var(--muted); }

/* --- tlačidlá ------------------------------------------------------------
   Dva stupne: hlavné (plná modrá) a vedľajšie (obrys). Viac ako jedno
   plné tlačidlo vedľa seba znamená, že sa návštevník musí rozhodovať —
   preto majú rovnakú váhu len vtedy, keď sú obe rovnako dôležité.

   Minimálna výška 46 px je kvôli prstu na mobile, nie kvôli vzhľadu. */

.tlacidlo {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 18px;
  border-radius: var(--radius); border: 1.5px solid var(--brand);
  background: #fff; color: var(--brand);
  font: 600 15px/1.2 inherit; text-decoration: none; cursor: pointer;
  transition: background .12s, color .12s;
}
.tlacidlo:hover { background: #eef3fa; }
.tlacidlo.hlavne { background: var(--brand); color: #fff; }
.tlacidlo.hlavne:hover { background: var(--brand-d); }
.tlacidlo:focus-visible { outline: 3px solid #9dc0ee; outline-offset: 2px; }

/* Rad tlačidiel. Na mobile sa zrovnajú pod seba a roztiahnu na šírku —
   tam sa mieri prstom, nie kurzorom. */
.akcie { display: flex; flex-wrap: wrap; gap: 10px; }
.akcie .tlacidlo { flex: 1 1 220px; }

/* --- telefón ------------------------------------------------------------ */

@media (max-width: 820px) {
  /* Pozor na flex-basis: v stĺpci sa vzťahuje na VÝŠKU, nie na šírku.
     Bez tohto vynulovania by z tlačidiel boli 220 px vysoké obdĺžniky. */
  .akcie { flex-direction: column; }
  .akcie .tlacidlo { flex: 0 0 auto; width: 100%; }
  .dlazdice { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; }
  .topbar nav { margin-left: 0; width: 100%; overflow-x: auto; }
  .topbar .tel { order: -1; margin-left: auto; }
  .wrap { padding: 18px 14px 44px; }
  .card { padding: 18px 16px; }
  .hero { min-height: 240px; }
  .hero h1 { font-size: 23px; }
  .hero .prekryv { padding: 44px 18px 18px; }
  .velke { font-size: 26px; }

  /* Tabuľky údajov na úzkej obrazovke — hodnota pod názov, nie vedľa. */
  table.udaje, table.udaje tbody, table.udaje tr, table.udaje td { display: block; width: auto; }
  table.udaje tr { border-bottom: 1px solid #f1f2f4; padding: 9px 0; }
  table.udaje td { border: none; padding: 1px 0; }
  table.udaje td:first-child { width: auto; font-size: 12.5px; }

  /* Tabuľka dráh sa nezalamuje — čísla vedľa seba majú zmysel len v mriežke,
     preto sa výnimočne roluje vodorovne. */
  .roluj { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .roluj table { min-width: 460px; }
}

/* --- tlač a PDF ----------------------------------------------------------
   Briefing je jediná stránka, ktorú si niekto naozaj vytlačí alebo uloží
   do PDF pred letom. Výstup preto nie je „stránka na papieri", ale
   samostatný dokument, ktorý musí obstáť aj bez internetu. */

@media print {
  .topbar, .obsah, .pata a, .netlacit { display: none; }

  /* Interné poznámky sú pre nás, nie pre pilota. Na papieri by pôsobili
     ako neúplný dokument — a on nemá ako vedieť, že sú redakčné. */
  .doplnit { display: none; }

  /* Kamera a živé prvky na papieri nedávajú zmysel. */
  .kamera, .prehrat { display: none; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap, .wrap.uzky { padding: 0; max-width: none; }

  /* Karta sa nesmie zlomiť na polovicu medzi stranami — tabuľka údajov
     rozseknutá uprostred je presne to, čo z vytlačeného briefingu robí
     nepoužiteľný papier. */
  .card {
    border: none; padding: 0 0 10px; margin: 0 0 10px;
    break-inside: avoid; page-break-inside: avoid;
  }
  table, tr, .pravne, .vystraha, .metar { break-inside: avoid; page-break-inside: avoid; }

  h1 { font-size: 17pt; }
  .card h2 { color: #000; border-bottom: 1px solid #999; padding-bottom: 3px; }

  /* Rámčeky nahradí čiara vľavo — plné výplne žerú toner a na čiernobielej
     tlačiarni z nich býva šedá kaša. */
  .pravne, .vystraha, .oznam {
    background: none; border: none; border-left: 2.5pt solid #000;
    padding: 2pt 0 2pt 8pt; color: #000;
  }
  .metar code { background: none; border: 1px solid #999; }

  /* Vodorovné rolovanie na papieri neexistuje — tabuľka dráh sa musí
     vojsť celá. */
  .roluj { overflow: visible; }
  .roluj table { min-width: 0; width: 100%; }

  /* Adresa za odkazom. Vytlačený briefing je odstrihnutý od internetu,
     takže „klikni sem" je bezcenné — cieľ musí byť napísaný.
     Vnútorné kotvy a telefóny sa vynechávajú, tie by len rušili. */
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt; color: #444; word-break: break-all;
  }

  /* Hlavička dokumentu — bez nej je to na stole hárok bez identity. */
  .wrap.uzky > h1::before {
    content: "Letisko Nitra — LZNI";
    display: block; font-size: 9pt; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: #555; margin-bottom: 2pt;
  }

  @page { margin: 14mm; }
}

/* Compact navigation and direct arrival links. */
.prilet-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 18px; }
.prilet-links a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:center; text-decoration:none; font-weight:600; }
.prilet-links a:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.weather-stale { color:#9b2c20; font-weight:600; }
@media screen and (max-width:820px) {
 .topbar { gap:0 8px; padding:0 12px; }
 .topbar .brand { gap:6px; padding:6px 0; }
 .topbar .brand img { height:26px; }
 .topbar .brand b { font-size:13px; }
 .topbar .tel { order:0; margin:4px 0 4px auto; padding:6px 8px; font-size:12px; min-height:40px; }
 .topbar .tel svg { width:13px; }
 .topbar nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; overflow:visible; }
 .topbar nav > a { padding:10px 3px; font-size:12px; text-align:center; min-height:44px; white-space:nowrap; }
 .topbar nav .jazyk { grid-column:1/-1; justify-self:end; margin:0 0 6px; }
 .topbar nav .jazyk > * { padding:7px 12px; }
 .prilet-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media print { .prilet-links { display:none; } }