/* Cestovatel.cz — styl titulky a nástrojových stránek.
 *
 * Náhrada za _astro/_rubrika_.*.css, který nikdy nebyl v repozitáři a ze
 * serveru zmizel. Není to kopie původního souboru (ten se nedochoval) —
 * je to rekonstrukce postavená na stejných tokenech jako clanek.css,
 * takže titulka drží stejnou identitu jako články.
 */
:root{
  --orange:#E8590C;--orange-600:#d24f08;--orange-700:#b34409;--orange-100:#fdeee2;
  --brand:#E8590C;--brand-dark:#b34409;
  --sea:#12525C;--sea-700:#0e434c;--sea-100:#e6eef0;
  --ink:#243430;--muted:#5f6d6a;--faint:#8b9793;
  --bg:#f5f4f1;--card:#fff;--panel:#fff;--line:rgba(36,52,48,.12);
  --r:14px;--r-sm:10px;--r-btn:8px;--edge:clamp(18px,4vw,56px);
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;--fh:'Archivo',system-ui,sans-serif;--fb:'IBM Plex Sans',system-ui,sans-serif;
  --font-head:'Archivo',system-ui,sans-serif;
  --heat-0:#e7e9e8;--heat-1:#fbe1d0;--heat-2:#f7c39c;--heat-3:#f0965b;--heat-4:#e8590c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-700)}
/* Barvu nadpisů dáváme přes třídy, ne na holé h1/h2/h3: stránka
   cenového indexu má vlastní tmavé bloky, kde se dědí bílá. */
h1,h2,h3{font-family:var(--fh);letter-spacing:-.02em}
/* Žádný obecný fallback na barvu nadpisů — v tmavých blocích
   (ci-hero) se má dědit bílá. Nadpisy mají třídy .page-h1,
   .hero__title a .section-h, které barvu nastavují samy. */
::selection{background:color-mix(in srgb,var(--orange) 26%,transparent)}

.eyebrow{display:block;font-family:var(--fh);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.eyebrow--lg{font-size:13px}
.section-h{font-family:var(--fh);font-weight:800;font-size:clamp(21px,2.4vw,26px);color:var(--sea);margin:0}
.lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:62ch}


/* hlavička, patička i .container/.px jsou společné — assets/spolecne.css */

/* ------------------------------------------------------------ obsah */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px}
.hero__body{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero__title{font-size:clamp(30px,4.2vw,46px);line-height:1.06;font-weight:800;margin:0;color:var(--sea)}
.hero__perex{font-size:17px;line-height:1.6;color:var(--muted);margin:0;max-width:46ch}
.hero__chips{display:flex;gap:8px;flex-wrap:wrap}
.hero__chips span{background:var(--sea-100);color:var(--sea);font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px}
.hero__img img{width:100%;border-radius:var(--r);object-fit:cover}
.btn-brand{display:inline-block;background:var(--orange);color:#fff;font-family:var(--fh);font-weight:700;font-size:15px;padding:12px 22px;border-radius:var(--r-btn)}
.btn-brand:hover{background:var(--orange-700);color:#fff}

.strip-1999{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--sea);color:#fff;border-radius:var(--r);padding:16px 22px}
.strip-1999 .eyebrow{color:#ffb38a;margin:0}
.strip-1999 b{font-family:var(--fh);font-weight:700;font-size:15px}
.strip-1999__cta{margin-left:auto;font-weight:700;color:#ffb38a}

.rubriky-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.rubrika-card{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;color:var(--ink)}
.rubrika-card b{font-family:var(--fh);font-size:16px;color:var(--sea)}
.rubrika-card span{font-size:13px;color:var(--muted)}
.rubrika-card:hover{border-color:var(--orange)}

.dest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.dest-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink)}
.dest-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.dest-card__body{display:flex;flex-direction:column;gap:3px;padding:13px 16px}
.dest-card__body b{font-family:var(--fh);font-size:16px;color:var(--sea)}
.dest-card__body span{font-size:13px;color:var(--muted)}
.dest-card:hover{border-color:var(--orange)}

.bento{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}
.bento__main{display:flex;flex-direction:column;gap:12px}
.article-card{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink)}
.article-card img{width:180px;flex:none;aspect-ratio:3/2;align-self:stretch;object-fit:cover}
.article-card__body{display:flex;flex-direction:column;gap:5px;padding:14px 16px}
.article-card__body b{font-family:var(--fh);font-size:16.5px;line-height:1.3;color:var(--sea)}
.article-card__meta{font-size:12.5px;color:var(--muted)}
.article-card:hover{border-color:var(--orange)}

.sea-widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px}
.sea-widget__head,.sea-widget__row{display:grid;grid-template-columns:1.5fr repeat(3,1fr);align-items:center}
.sea-widget__head{background:var(--sea);color:#fff;font-family:var(--fh);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.sea-widget__head span{padding:10px 12px}
.sea-widget__row{border-top:1px solid var(--line)}
.sea-widget__row>span:first-child{padding:9px 12px;font-weight:600;color:var(--sea)}
.heat-cell{padding:9px 12px;text-align:center;font-weight:600}
.heat-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.sea-widget__foot{display:flex;flex-direction:column;gap:4px;padding:12px;border-top:1px solid var(--line)}
.sea-widget__foot a{font-weight:600}
.sea-widget__foot small{color:var(--muted);font-size:12px}

.data-card{grid-column:1/-1;display:flex;gap:24px;flex-wrap:wrap;align-items:center;background:var(--sea);color:#fff;border-radius:var(--r);padding:24px 28px;margin-top:22px}
.data-card__info{display:flex;flex-direction:column;gap:6px;flex:1 1 300px}
.data-card__info b{font-family:var(--fh);font-size:20px}
.data-card__info span{color:rgba(255,255,255,.82);font-size:14px}
.data-badge{align-self:flex-start;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.data-card__stat{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.data-card__num b{display:block;font-family:var(--fh);font-size:28px;font-weight:800}
.data-card__num span{font-size:13px;color:rgba(255,255,255,.75)}
/* Odznak meziroční změny na datové kartě titulky — plná oranžová podle
   návrhu grafika (cestovatel2/3). Uvnitř cenového indexu má .ci-delta
   zelenou pro zlevnění a červenou pro zdražení, protože tam barva rozlišuje
   směr mezi desítkami řádků. Tady je odznak jediný a stojí na tmavé kartě,
   kde má fungovat jako akcent značky. */
.delta-chip{display:inline-flex;align-items:center;background:var(--orange);color:#fff;
  font-family:var(--fh);font-weight:700;font-size:14px;padding:7px 13px;border-radius:8px}
.data-card a{color:#ffb38a;font-weight:700}

.newsletter{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.newsletter b{font-family:var(--fh);font-size:18px;color:var(--sea)}
.newsletter p{margin:4px 0 12px;font-size:14px;color:var(--muted)}
.newsletter form{display:flex;gap:8px;flex-wrap:wrap}
.newsletter input{flex:1 1 180px;font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--bg);color:var(--ink)}
.newsletter button{font:inherit;font-weight:700;background:var(--orange);color:#fff;border:0;border-radius:var(--r-btn);padding:11px 20px;cursor:pointer}
.newsletter__done{display:block;font-weight:600;color:var(--sea)}

/* ------------------------------------------------ nástrojové stránky */
.page-head{padding-top:26px}
.page-h1{font-size:clamp(28px,3.6vw,40px);font-weight:800;margin:8px 0 0;color:var(--sea)}
.page-perex{font-size:17px;line-height:1.6;color:var(--muted);max-width:62ch;margin:14px 0 0}
.breadcrumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--orange)}

/* .ci-* a spol. tu nejsou schválně: stránka cenového indexu si je
   styluje sama v inline <style> včetně barev. Duplicitní pravidla
   tady jen přebíjela bílý text v jejích tmavých blocích. */

/* Teplota moře: .heatmap NENÍ <table>, ale mřížka z divů —
   řádek = <b>název</b> + 12 buněk + odkaz (u hlavičky label + 12 tlačítek
   + prázdný span). Stylovat to jako tabulku rozsype celý nástroj. */
.heatmap{display:flex;flex-direction:column;gap:3px;overflow-x:auto}
.heatmap__row{display:grid;grid-template-columns:minmax(108px,1.2fr) repeat(12,minmax(34px,1fr)) minmax(58px,auto);
  align-items:center;gap:3px;min-width:680px}
.heatmap__row>b,.heatmap__label{font-family:var(--fh);font-weight:700;font-size:13px;color:var(--sea);
  padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heatmap__label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hm-month{font:inherit;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);background:none;border:0;padding:6px 2px;cursor:pointer;
  border-radius:4px 4px 0 0}
.hm-month:hover{color:var(--orange);background:var(--sea-100)}
.hm-month.is-active,.hm-month.is-current{color:#fff;background:var(--sea)}
.hm-cell{text-align:center;padding:8px 2px;font-weight:600;font-size:13px;border-radius:4px;
  outline:2px solid transparent;outline-offset:-2px}
/* vybraný měsíc — JS přidává .is-hl na buňky ve sloupci */
.hm-cell.is-hl{outline-color:var(--sea);font-weight:700}
.heatmap__link{font-size:12px;font-weight:600;text-align:right;white-space:nowrap}
.heat-legend{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin-top:12px}
.heat-legend span{display:inline-flex;align-items:center;gap:5px}
.heat-legend i{display:inline-block;width:13px;height:13px;border-radius:3px;border:1px solid var(--line)}
.heatmap-summary{font-size:13.5px;color:var(--muted);margin-top:12px}
.heatmap-summary b{color:var(--sea)}

/* ============ stroj času (/o-webu/) ============
   Podle návrhu grafika (cestovatel2/3, Archiv.dc.html): tmavá sekce
   rozdělená na dva sloupce — vlevo text s milníky, vpravo okno prohlížeče.
   Moje první rekonstrukce z toho udělala světlý jednosloupec a milníky
   mířila selektorem na `li`, jenže v HTML jsou `div` — pravidlo se nikdy
   nechytlo. Návrh je full-bleed, tady je sekce uvnitř .container, takže
   z ní děláme zaoblený tmavý blok. */
.timemachine{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  background:var(--sea);color:#fff;border-radius:var(--r);overflow:hidden;margin:26px 0 0}
.timemachine__copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,4.5vw,64px) clamp(26px,4vw,56px);font-size:17px;line-height:1.65;color:#fff}
.timemachine .eyebrow,.timemachine .eyebrow--lg{display:block;font-family:var(--fh);font-weight:700;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 20px}
.timemachine .page-h1{font-family:var(--fh);font-weight:800;font-size:clamp(32px,4vw,54px);
  line-height:1.04;letter-spacing:-.025em;margin:0;color:#fff}
.timemachine__copy>p{font-size:17px;line-height:1.65;max-width:44ch;
  color:rgba(255,255,255,.86);margin:22px 0 0}

/* milníky: řádky s vlasovými linkami, rok v mono oranžově */
.timemachine__milestones{display:block;margin:34px 0 0;padding:6px 0 0;list-style:none;
  border-top:1px solid rgba(255,255,255,.2)}
.timemachine__milestones>div,.timemachine__milestones>li{display:flex;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.timemachine__milestones>div:last-child,.timemachine__milestones>li:last-child{border-bottom:0}
.timemachine__milestones .yr{font-family:var(--mono);font-weight:500;font-size:13px;
  color:var(--orange);flex:none;width:44px}
.timemachine__milestones .txt{font-size:14.5px;color:rgba(255,255,255,.9)}

/* přepínač roků: obrysové pilulky, aktivní plná oranžová */
.timemachine__tabs{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 0}
.tm-tab{display:inline-flex;padding:9px 16px;border:1px solid rgba(255,255,255,.32);
  background:transparent;border-radius:var(--r-btn);font-family:var(--fh);font-weight:700;
  font-size:14px;color:#fff;cursor:pointer}
.tm-tab:hover{border-color:rgba(255,255,255,.6)}
.tm-tab.is-active{background:var(--orange);border-color:var(--orange)}
.timemachine__note{font-size:13.5px;color:rgba(255,255,255,.62);margin:22px 0 0}

/* pravý sloupec: dobové okno prohlížeče */
.timemachine__browser{align-self:center;margin:clamp(24px,3.5vw,52px);
  border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,.3);background:#e9e9e0;
  box-shadow:0 24px 60px rgba(0,0,0,.4)}
.retro-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:linear-gradient(#fdfdfb,#e4e4dc);border-bottom:1px solid #b9b9ac}
.retro-bar i{display:block;width:22px;height:16px;background:#dcdcd2;
  border:1px solid #9a9a8d;border-radius:2px}
.retro-bar .url{flex:1;background:#fff;border:1px solid #9a9a8d;border-radius:2px;padding:4px 10px;
  font-family:var(--mono);font-size:12.5px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.retro-bar .ie{font-family:var(--mono);font-size:11px;color:#6a6a5d;white-space:nowrap}
.retro-view{max-height:560px;overflow:hidden;background:#fff}
/* Panely roků: JS jim přepíná .is-active, skrytí musí zajistit CSS —
   jinak se vykreslí všechny archivní podoby webu pod sebou. */
.tm-panel{display:none}
.tm-panel.is-active{display:block}
.tm-shot{margin:0}
.tm-shot__img,.tm-shot img{width:100%;display:block}
.tm-shot figcaption{background:#efeee4;border-top:1px solid #c9c9bb;padding:8px 16px;
  font-family:var(--mono);font-size:11px;color:#6a6a5d;text-align:center}
.tm-today{font-size:13px;color:rgba(255,255,255,.62);margin-top:12px}

@media (max-width:900px){
  .timemachine__browser{margin:0 clamp(18px,4vw,32px) clamp(24px,4vw,36px)}
}

.is-highlight{color:var(--orange);font-weight:700}

/* ------------------------------------------------------------ patička */
/* patička je společná — assets/spolecne.css */

/* --------------------------------------------------------- responzivní */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero__img{order:-1}
  .bento{grid-template-columns:1fr}
}
@media (max-width:820px){
  .article-card{flex-direction:column}
  .article-card img{width:100%;aspect-ratio:16/9}
  .hero{padding:22px}
}
@media (min-width:1200px){
  .hide-desktop{display:none}
}