/* ==========================================================================
   flights7 – verejná časť
   Magazínová štruktúra podľa referencie: tmavý top bar, biela sticky hlavička
   s navigáciou, mozaikový hero, mriežky so sekciovými nadpismi.
   Odlišnosť oproti referencii: tá nepozná cenu. U nás je cena jediná vec,
   ktorá kričí – farbu nesú odznaky regiónov, a tie nesú informáciu.
   Font je self-hostovaný (Google Fonts = GDPR problém v EU).
   ========================================================================== */

@font-face { font-family:'Plex'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2070-209F,U+20AC; }
@font-face { font-family:'Plex'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Plex'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2070-209F,U+20AC; }
@font-face { font-family:'Plex'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Plex'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2070-209F,U+20AC; }
@font-face { font-family:'Plex'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }

:root {
    --ink:#10151d; --ink-2:#3d4654; --ink-3:#6b7585;
    --line:#e3e7ec; --line-2:#f0f2f5;
    --paper:#ffffff; --band:#f6f8fa; --navy:#101a2b;
    --brand:#218cf8; --brand-ink:#0d6fd4;

    /* Regióny – farba nesie informáciu o tom, kam sa letí */
    --r-asia:#e8590c; --r-gulf:#c2255c; --r-america:#1864ab;
    --r-south:#862fb5; --r-africa:#2b8a3e; --r-pacific:#0b7285; --r-world:#495057;

    --font:'Plex',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --wrap:72rem; --r-card:10px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:#e9edf2; --ink-2:#b2bcc9; --ink-3:#8a94a3;
        --line:#273040; --line-2:#1c2431;
        --paper:#141b26; --band:#0f151e; --navy:#080d15;
        --brand:#58aaff; --brand-ink:#8fc6ff;
        --r-asia:#ff8c42; --r-gulf:#ff6b9d; --r-america:#6aa9f0;
        --r-south:#c086e8; --r-africa:#51cf66; --r-pacific:#3bc9db; --r-world:#adb5bd;
    }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink);
    font:400 .9375rem/1.6 var(--font); -webkit-font-smoothing:antialiased; }
h1,h2,h3 { margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:700; }
p { margin:0; }
a { color:inherit; }
/* height:auto je nutne: obrazky maju HTML atributy width/height a bez toho
   prehliadac pouzije vysku z atributu - aspect-ratio aj max-width su mu potom nanic. */
img { max-width:100%; height:auto; display:block; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.skip { position:absolute; left:-9999px; top:0; background:var(--paper); padding:.5rem 1rem; z-index:100; }
.skip:focus { left:0; }
.inner { max-width:var(--wrap); margin:0 auto; padding-inline:1.25rem; }

/* ---------- Top bar ---------- */
.topbar { background:var(--navy); color:#c9d3e0; font-size:.75rem; }
.topbar .inner { display:flex; align-items:center; gap:1rem; min-height:2.25rem; flex-wrap:wrap; }
.topbar .live { background:var(--brand); color:#fff; font-weight:700;
    padding:.15rem .5rem; letter-spacing:.03em; border-radius:3px; }
.topbar .tag { color:#8e9bb0; }
.topbar .right { margin-left:auto; display:flex; gap:.75rem; align-items:center; }
.topbar a { color:#c9d3e0; text-decoration:none; }
.topbar a:hover { color:#fff; }
.topbar a[aria-current] { color:#fff; font-weight:700; }

/* ---------- Hlavička ---------- */
.site-head { background:var(--paper); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:20; }
.site-head .inner { display:flex; align-items:center; gap:2rem; min-height:4rem; }
.logo { display:inline-flex; align-items:center; flex:none; }
.logo img { height:1.6rem; width:auto; }
.mainnav { display:flex; gap:1.5rem; }
.mainnav a { text-decoration:none; font-weight:600; font-size:.875rem; color:var(--ink-2);
    padding:.35rem 0; border-bottom:2px solid transparent; }
.mainnav a:hover { color:var(--ink); }
.mainnav a[aria-current] { color:var(--ink); border-color:var(--brand); }

/* ---------- Spoločné prvky kariet ---------- */
.badge { display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.02em;
    padding:.2rem .5rem; border-radius:3px; color:#fff; background:var(--r-world); }
.badge.asia { background:var(--r-asia); }
.badge.gulf { background:var(--r-gulf); }
.badge.america { background:var(--r-america); }
.badge.south { background:var(--r-south); }
.badge.africa { background:var(--r-africa); }
.badge.pacific { background:var(--r-pacific); }

/* Cena – jediný prvok, ktorý kričí. Tabuľkové číslice kvôli zarovnaniu v mriežke. */
.price { font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.03em; }
.price .pre { font-weight:400; font-size:.6875rem; color:var(--ink-3); letter-spacing:0; }
.price.dead { color:var(--ink-3); }

.route { display:flex; align-items:center; gap:.45rem; font-size:.8125rem; color:var(--ink-3); }
.route b { font-weight:600; color:var(--ink-2); }
.route .to { opacity:.55; }

.shot { position:relative; overflow:hidden; background:var(--line-2); display:grid; place-items:center; }
.shot img { width:100%; height:100%; object-fit:cover; }
.shot .iata { font-size:clamp(2rem,6vw,3.5rem); font-weight:700; letter-spacing:.06em;
    color:var(--ink-3); opacity:.35; }
.shot .badge { position:absolute; top:.75rem; left:.75rem; z-index:2; }

/* ---------- Mozaikový hero ---------- */
.mosaic { display:grid; gap:.75rem; margin:1.5rem 0 0; grid-template-columns:1fr; }
@media (min-width:52rem) {
    .mosaic { grid-template-columns:1.15fr 1fr; }
    .mosaic .lead-card { grid-row:1 / 3; }
    .mosaic .pair { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
}
.feature { position:relative; border-radius:var(--r-card); overflow:hidden; color:#fff;
    display:block; text-decoration:none; isolation:isolate; }
.feature .shot { position:absolute; inset:0; background:var(--navy); }
.feature .shot img { filter:brightness(.82); }
.feature .shot .iata { color:#fff; opacity:.22; }
.feature::after { content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top,rgb(8 12 18/.92) 0%,rgb(8 12 18/.45) 45%,rgb(8 12 18/.05) 75%); }
.feature .copy { position:relative; z-index:2; padding:1.1rem; display:flex;
    flex-direction:column; justify-content:flex-end; height:100%; gap:.4rem; }
.feature .badge { align-self:flex-start; }
.feature h2 { color:#fff; }
.feature .route { color:#c7d2e0; }
.feature .route b { color:#fff; }
.feature .price { color:#fff; }
.feature .price .pre { color:#b9c6d6; }
.lead-card { min-height:24rem; }
.lead-card h2 { font-size:clamp(1.35rem,2.4vw,1.9rem); }
.lead-card .price { font-size:clamp(2rem,4vw,2.75rem); }
.wide { min-height:11.5rem; }
.wide h2 { font-size:1.05rem; }
.wide .price { font-size:1.5rem; }
.pair .feature { min-height:11.5rem; }
.pair h2 { font-size:.9375rem; }
.pair .price { font-size:1.25rem; }

/* ---------- Sekcie ---------- */
.band { background:var(--band); border-block:1px solid var(--line); margin-top:3rem; }
.band .inner { padding-block:2.5rem; }
.section { padding-block:2.5rem; }
.sec-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.sec-head h2 { font-size:1.35rem; flex:none; }
.sec-head .rule { height:1px; background:var(--line); flex:1; }
.sec-head .more { font-size:.8125rem; font-weight:600; text-decoration:none; color:var(--brand); flex:none; }

/* ---------- Mriežka ---------- */
.grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
.card { position:relative; display:flex; flex-direction:column; gap:.6rem; }
.card .shot { aspect-ratio:3 / 2; border-radius:var(--r-card); }
.card h3 { font-size:.9375rem; font-weight:600; line-height:1.35; }
.card h3 a { text-decoration:none; }
.card h3 a::after { content:''; position:absolute; inset:0; }
.card h3 a:hover { color:var(--brand); }
.card .foot { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
    margin-top:auto; padding-top:.35rem; border-top:1px solid var(--line); }
.card .price { font-size:1.35rem; }
.card .when { font-size:.75rem; color:var(--ink-3); }
.empty { color:var(--ink-3); padding:4rem 0; text-align:center; }

.regions { display:flex; flex-wrap:wrap; gap:.5rem; }
.regions span { font-size:.8125rem; font-weight:600; padding:.4rem .8rem;
    border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink-2); }
.regions span::before { content:''; display:inline-block; width:.5rem; height:.5rem;
    border-radius:50%; margin-right:.45rem; background:var(--r-world); vertical-align:middle; }
.regions .asia::before { background:var(--r-asia); }
.regions .gulf::before { background:var(--r-gulf); }
.regions .america::before { background:var(--r-america); }
.regions .south::before { background:var(--r-south); }
.regions .africa::before { background:var(--r-africa); }
.regions .pacific::before { background:var(--r-pacific); }

/* ---------- Detail akcie ---------- */
/* Hlavicka ide cez celu sirku; dvojstlpec zacina az pri tele clanku, aby bol banner naozaj siroky. */
.post-head { padding-top:1.75rem; }
.post-head .crumbs { display:flex; align-items:center; gap:.6rem; font-size:.8125rem;
    color:var(--ink-3); margin-bottom:.9rem; }
.post-head .crumbs a { color:var(--ink-3); text-decoration:none; }
.post-head .crumbs a:hover { color:var(--brand); }
.post-head .route { margin-bottom:.4rem; }
.post-head h1 { font-size:clamp(1.6rem,3.6vw,2.6rem); max-width:24ch; }
.standfirst { font-size:1.0625rem; color:var(--ink-2); max-width:62ch; margin-top:.9rem; }

/* Fakty hned pod nadpisom - kvoli nim clovek na stranku prisiel */
.facts { display:flex; flex-wrap:wrap; gap:0 2.5rem; margin:1.4rem 0 0; padding:1rem 0 0;
    border-top:1px solid var(--line); }
.facts div { padding-block:.3rem; }
.facts dt { font-size:.6875rem; font-weight:600; color:var(--ink-3); letter-spacing:.03em; }
.facts dd { margin:0; font-size:1.0625rem; font-weight:600; }
.facts dd.price { font-size:1.6rem; }
.facts .dim { color:var(--ink-3); font-weight:400; }

/* Banner: siroky a nizky. Fotka z modelu je 3:2, vyrez robi CSS - novy subor netreba.
   object-position je mierne nad stredom, lebo panorama mesta sedi v hornej polovici zaberu;
   pri centrovanom vyreze by sa z nej odrezala silueta. */
.banner { margin:1.75rem 0 0; }
.banner img { width:100%; height:auto; aspect-ratio:4 / 1; object-fit:cover;
    object-position:center 42%; border-radius:var(--r-card); }
.banner figcaption { font-size:.75rem; color:var(--ink-3); margin-top:.5rem; }
@media (max-width:52rem) { .banner img { aspect-ratio:3 / 1; } }
@media (max-width:36rem) { .banner img { aspect-ratio:2 / 1; } }

.post { display:grid; gap:2.5rem; padding-block:2rem 3rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:62rem) {
    .post { grid-template-columns:minmax(0,1fr) 17rem; align-items:start; }
    .post .side { position:sticky; top:5.5rem; }
}
.article-body > * + * { margin-top:1.1rem; }
.article-body p { max-width:68ch; }
.article-body h2 { font-size:1.2rem; margin-top:2rem; }
blockquote { margin:0; padding-left:1rem; border-left:3px solid var(--brand); color:var(--ink-2); }
figure.photo { margin:0; } figure.photo img { border-radius:var(--r-card); }
figure.photo figcaption { font-size:.75rem; color:var(--ink-3); margin-top:.4rem; }
.tips { background:var(--band); border:1px solid var(--line); border-radius:var(--r-card); padding:1rem 1.25rem; }
.tips h3 { font-size:.9375rem; margin-bottom:.5rem; }
.tips ul { margin:0; padding-left:1.1rem; } .tips li + li { margin-top:.25rem; }
.deal-box { border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
table.dates { width:100%; border-collapse:collapse; font-size:.875rem; }
table.dates th, table.dates td { text-align:left; padding:.5rem 1rem; border-bottom:1px solid var(--line); }
table.dates th { background:var(--band); font-size:.6875rem; font-weight:700; color:var(--ink-3); letter-spacing:.03em; }
table.dates tr:last-child td { border-bottom:0; }
table.dates .num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
table.dates tbody tr:hover { background:var(--band); }
table.dates a { font-weight:700; text-decoration:none; color:var(--brand); }

.side .box { border:1px solid var(--line); border-radius:var(--r-card); padding:1.1rem; background:var(--band); }
.side .big { font-size:2.25rem; line-height:1.1; margin:.1rem 0; }
.side .sub { font-size:.8125rem; color:var(--ink-3); }
.side dl { display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem; margin:1rem 0 0;
    padding-top:1rem; border-top:1px solid var(--line); font-size:.8125rem; }
.side dt { color:var(--ink-3); }
.side dd { margin:0; font-weight:600; text-align:right; }
.book { display:block; margin-top:1rem; background:var(--brand); color:#fff; text-align:center;
    text-decoration:none; font-weight:700; padding:.8rem 1rem; border-radius:6px; }
.book:hover { background:var(--brand-ink); }
.book .via { display:block; font-weight:400; font-size:.75rem; opacity:.85; }
.cta { margin:1.5rem 0; }
a.book-inline { display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
    font-weight:700; padding:.7rem 1.4rem; border-radius:6px; }
.meta { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line);
    color:var(--ink-3); font-size:.8125rem; display:flex; gap:1.25rem; flex-wrap:wrap; }
.pager { display:flex; gap:.25rem; margin-top:2rem; }
.pager a { min-width:2.25rem; text-align:center; padding:.3rem .6rem; font-size:.8125rem;
    border:1px solid var(--line); border-radius:5px; text-decoration:none; }
.pager a[aria-current] { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Pätička ---------- */
.site-foot { background:var(--navy); color:#8e9bb0; margin-top:3rem; font-size:.8125rem; }
.site-foot .inner { padding-block:2rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; }
.site-foot a { color:#c9d3e0; }

.stats { border-collapse:collapse; }
.stats th, .stats td { text-align:left; padding:.5rem .75rem; border-bottom:1px solid var(--line); }
.stats th { font-weight:400; color:var(--ink-3); }
.stats td { font-variant-numeric:tabular-nums; font-weight:600; }
pre { background:var(--band); border:1px solid var(--line); padding:.75rem; overflow-x:auto; font-size:.8125rem; }
.lead { font-size:1.0625rem; color:var(--ink-2); }
.ok { color:var(--r-africa); } .err { color:var(--r-gulf); } .gone { color:var(--r-gulf); }
.intro { color:var(--ink-3); }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }