/* Písmo pro nový vzhled (musí být na začátku souboru) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* Globální proměnné a základ */
:root {
    --primary-color: #0d47a1;
    --secondary-color: #007fe5;
    --background-color: #f5f5f5;
    --card-background: #ffffff;
    --text-color: #333333;
    --temp-color: #f44336;
    --humidity-color: #00bcd4;
    --border-color: #e0e0e0;
    --temp-max-color: var(--temp-color);
    --temp-min-color: #00bcd4;
}

html {
    scroll-behavior: smooth;
}

#mastnik {
    scroll-margin-top: 100px; /* Odstup od horního okraje 100px */
    display: inline-block; /* Nutné, aby margin fungoval správně u odkazu */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

    
body {
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh;
    padding-bottom: 120px;
    /* Nastavení pozadí */
    background-image: url('pozadi1.png') !important;
    background-repeat: no-repeat;
    /*background-size: 100% 600px;*/
    background-position: top center; /* Umístění nahoru */
}

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

.container-link {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
    text-align: center; /* Tímto se centrování zajišťuje */
}

h1 {
    color: var(--primary-color);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    text-align: center;
}

h2 {
    color: var(--secondary-color);
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: #ffffff 0px 1px 9px;
}

h2 small {
    color: #7b7b7b !important;
    font-size: 70% !important;
}

h2 i {
    margin-right: 10px;
}

/* Hlavní box (Aktuální počasí) */
.akt-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.akt-teplota {
    font-size: 4.5em;
    font-weight: bold;
    color: var(--temp-color);
    flex: 1 1 200px;
    text-align: center;
    min-width: 200px;
}

.akt-detaily {
    flex: 2 1 300px;
    padding: 0 20px;
}

.akt-detaily p {
    margin: 5px 0;
    line-height: 1.4;
}

.akt-ikona {
    flex: 1 1 100px;
    text-align: center;
    min-width: 100px;
}

.akt-ikona img {
    width: 150px;
    height: 150px;
}

/* Odkazy z hlavního boxu */
.main-links {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

/* --- Tlačítko pro Meteo domeček na index.php --- */

.weather-house-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Vzhled tlačítka/karty */
    background-color: var(--primary-color); /* Primární modrá */
    color: var(--card-background); /* Bílý text */
    padding: 12px 25px;
    margin: 15px auto 30px; /* Centrování a mezery */
    border-radius: 6px;
    text-decoration: none; /* Odstraní podtržení */
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    
    /* Stín pro zvýraznění */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.weather-house-link:hover {
    background-color: var(--secondary-color); /* Světlejší modrá při najetí */
    transform: translateY(-1px);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
}

.weather-house-link i {
    margin-right: 10px; /* Mezera mezi ikonou a textem */
    font-size: 1.3em;
}


.meteo-info p {
    text-align: left; /* Oprava centrování */
    margin: 5px 0;
    line-height: 1.6;
    color: var(--text-color);
    padding: 6px 10px; /* Přidán malý padding pro lepší čitelnost */
}

.link-button {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.detail-link {
    background-color: var(--secondary-color);
    color: white;
}

.history-link {
    background-color: var(--primary-color);
    color: white;
}

.link-button:hover {
    opacity: 0.9;
}

/* Box pro porovnání stanic */
.station-comparison-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px 10px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.comp-col {
    flex: 1;
    padding: 0 10px;
}

.comp-col h4 {
    color: var(--text-color);
    margin-bottom: 10px;
    font-size: 1.1em;
}

.temp-value {
    font-size: 2.2em;
    font-weight: bold;
}

.source-info {
    font-size: 0.85em;
    color: #9e9e9e;
    margin-top: 5px;
}

.api-data {
    border-right: 1px solid var(--border-color);
}

/* Karty pro denní předpověď */
.daily-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.karta-den {
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
    border-top: 4px solid var(--secondary-color);
}

.karta-den h3 {
    color: var(--primary-color);
    font-size: 1.3em;
    margin-bottom: 10px;
}

.karta-den img {
    width: 64px;
    height: 64px;
    margin-bottom: 5px;
}

.den-teplota {
    font-size: 1.4em;
    font-weight: bold;
    margin: 5px 0 10px;
}

.temp-max {
    color: var(--temp-max-color);
    font-size: x-large;
}

.temp-min {
    color: var(--temp-min-color);
}

.den-popis {
    color: #616161;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.den-info span {
    display: inline-block;
    margin: 0 5px;
    font-size: 0.85em;
    color: var(--text-color);
}

.den-info i {
    color: var(--secondary-color);
    margin-right: 3px;
}

/* Pomocné třídy (barvy, varování) */
.primary-color {
    color: var(--primary-color);
}

.temp-color {
    color: var(--temp-color);
}

.warning {
    color: var(--temp-color);
    font-weight: bold;
    text-align: center;
    padding: 15px;
    background-color: #ffebee;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Kontejner pro graf */
.chart-container {
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 30px;
    height: 400px;
    position: relative;
}

/* Patička (Desktop vs Mobil) */
.klasicka-paticka {
    text-align: center;
    padding: 20px;
    font-size: 0.8em;
    color: #616161;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
}

.klasicka-paticka a {
    color: var(--primary-color);
    text-decoration: none;
}

/* Mobilní navigační patička */
.footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-background);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    height: 70px;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--border-color);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #9e9e9e;
    font-size: 0.8em;
    padding: 5px 10px;
    flex-grow: 1;
    transition: color 0.2s;
}

.nav-item i {
    font-size: 1.4em;
    margin-bottom: 3px;
}

.nav-item.active {
    color: var(--primary-color);
    font-weight: bold;
}

.nav-item:hover {
    color: var(--secondary-color);
}

/* Horizontální hodinová předpověď */
.hodinova-predpoved-container {
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    margin-bottom: 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hodinova-radka {
    display: flex;
    min-width: 1920px; /* 24 * 80px */
    width: fit-content;
}

.hodinovy-sloupec {
    flex: 0 0 80px;
    padding: 10px 5px;
    text-align: center;
    border-right: 1px solid var(--border-color);
}

.hodinovy-sloupec:last-child {
    border-right: none;
}

.aktualni-hodina {
    background-color: #e3f2fd;
    border-left: 2px solid var(--primary-color);
}

.hodinovy-cas {
    font-size: 0.9em;
    margin-bottom: 5px;
}

.hodinovy-ikona {
    width: 40px;
    height: 40px;
}

.hodinovy-teplota {
    font-weight: bold;
    font-size: 1.2em;
    color: var(--temp-color);
    margin: 5px 0;
}

.hodinovy-srazky {
    font-size: 0.8em;
    color: var(--precip-color, #42a5f5);
    display: block;
    min-height: 1.2em;
}

.hodinovy-vitr {
    font-size: 0.75em;
    color: #616161;
    margin-top: 5px;
}

.hodinovy-vitr i {
    font-size: 1em;
    margin-right: 2px;
}

/* Boxy pro historii (Summary) */
.summary-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background-color: var(--card-background);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.summary-item {
    flex: 1 1 200px;
    padding-left: 15px;
    border-left: 3px solid var(--secondary-color);
}

.summary-item h3 {
    font-size: 1.1em;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.summary-item h3 i {
    margin-right: 10px;
    color: var(--secondary-color);
    font-size: 1.2em;
}

.summary-item p {
    font-size: 0.9em;
    line-height: 1.6;
    color: #616161;
}

.summary-item .karta-hodnota {
    font-weight: bold;
    color: var(--text-color);
}

/* Modální okno (Webkamera) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0;
    width: 90%;
    /*height: 80vh;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-name: animatetop;
    animation-duration: 0.4s;
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 5%;
        opacity: 1
    }
}

.modal-header {
    padding: 10px 16px;
    background-color: var(--primary-color);
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 10px;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

.modal-content iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

/* Odkaz na webkameru */
.summary-link {
    display: block;
    padding: 15px;
    background-color: var(--secondary-color);
    color: white !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s;
    text-align: center;
    max-width: 400px;
    margin: 20px auto;
}

.summary-link:hover {
    background-color: var(--primary-color);
}

/* Centrování pro Windy webkameru */
.webcam-embed-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
}

.webcam-embed-container a[name="windy-webcam-timelapse-player"] {
    display: inline-block;
    max-width: 100%;
}

/* 3sloupcový box porovnání (Desktop) */
.station-comparison-box.three-columns .comp-col {
    flex: 1 1 33.33%;
}

.station-comparison-box.three-columns .api-data {
    border-right: 1px solid var(--border-color);
}

.station-comparison-box.three-columns .station-data {
    border-right: 1px solid var(--border-color);
}

.station-comparison-box.three-columns .year-ago-data {
    border-right: none;
}

/* Styl pro data "před rokem" */
.gray-text .temp-value {
    color: #9e9e9e;
}

.gray-text h4 {
    color: #9e9e9e;
}

/* Výstrahy (Alerts) */
.alerts-container {
    margin-top: -15px;
    padding-bottom: 2px !important;
}
@media (max-width: 800px) {
/* Výstrahy (Alerts) */
.alerts-container {
    padding: 20px;
    margin-top: 20px; display: block !important;
}
}
.alerts-container h2 {
  min-width: 50%;
  color: #b12a00; margin-top: -2px;
  
}

.alert-box {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    border-left: 5px solid;
    color: var(--text-color);
    background-color: var(--card-background);
}

.alert-box h4 {
    margin-top: 0;
    margin-bottom: 5px;
}

.alert-expiry {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.alert-low {
    border-left-color: #2196f3;
    background-color: #e3f2fd;
}

.alert-moderate {
    border-left-color: #ff9800;
    background-color: #fff3e0;
}

.alert-severe {
    border-left-color: #f44336;
    background-color: #ffebee;
}

.alert-extreme {
    border-left-color: #d32f2f;
    background-color: #ef9a9a;
}

/* Styl pro <pre> (raw výstup) */
.raw-prediction-output {
    background-color: #fcfcfc;
    border: 1px solid #999999;
    box-shadow: none;
    border-radius: 4px;
    padding: 15px;
    margin: 25px 0;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
    line-height: 1.4 !important;
    color: #000000 !important;
    white-space: pre-line; /*pre-wrap */
    overflow-x: auto;
}

/* Karty pocitové vs. lokální teploty (Flex fix) */
.card-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    margin-bottom: 25px;
}

.comparison-item {
    flex: 1 1 calc(50% - 7.5px) !important;
    min-width: 150px;
    float: none !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* Uspořádání ikony a dat uvnitř karty */
.card {
    display: flex;
    align-items: center;
    padding: 15px;
}

.karta-ikona {
    margin-right: 15px;
    font-size: 2.5em;
    color: var(--primary-color);
    flex-shrink: 0;
}

.karta-data {
    flex-grow: 1;
}

.karta-data h3 {
    margin-top: 0;
    margin-bottom: 5px;
}

        /* Původní styly pro grafy */
        .chart-container {
            position: relative;
            height: 350px; 
            width: 100%;
        }
        .forecast-table-wrapper { display: block; }
        #chart-zitrz-wrapper,
        #chart-pozitrzi-wrapper { display: none; }

        /* --------------------------------------------------- */
        /* --- STYLY PRO NOVOU GRAFICKOU PŘEDPOVĚĎ (v.3) --- */
        /* --------------------------------------------------- */

        /* ### STYLY PRO NAVIGAČNÍ TABY (s ikonami) ### */
        .forecast-tabs {
            display: flex;
            justify-content: space-around;
            margin-bottom: 0px; 
            border-bottom: 2px solid #0d47a1;
        }
        .forecast-tab {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            padding: 8px 5px;
            text-decoration: none;
            color: #555;
            border-radius: 0;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-bottom: 0;
            margin: 0; 
            position: relative;
            bottom: -2px; 
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .forecast-tab:first-child { border-top-left-radius: 6px; }
        .forecast-tab:last-child { border-top-right-radius: 6px; }
        .forecast-tab:not(:last-child) { border-right: none; }
        
        .forecast-tab:hover {
            background-color: #f9f9f9;
        }
        .forecast-tab.active {
            background-color: #fff;
            color: #0d47a1;
            border-bottom: 2px solid #fff; 
            z-index: 10;
        }
        
        /* Ikona v tabu */
        .forecast-tab img {
            width: 40px;
            height: 40px;
            margin-right: 8px;
        }
        /* Text v tabu (kontejner pro jméno a teploty) */
        .forecast-tab .tab-text {
            display: flex;
            flex-direction: column;
            text-align: left;
            line-height: 1.3;
        }
        .forecast-tab .tab-day-name {
            font-size: 14px;
            font-weight: 500;
        }
        .forecast-tab.active .tab-day-name {
            font-weight: bold;
        }
        .forecast-tab small {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: #777;
        }
        .forecast-tab.active small {
            color: #333;
        }
        .forecast-tab .temp-max { color: #d32f2f; }
        .forecast-tab .temp-min { color: #1976d2; }


        /* ### STYLY PRO KONTEJNER (FIXNÍ LEGENDA + ROLOVÁNÍ) ### */
        .new-forecast-wrapper {
            display: flex;
            flex-direction: row;
            position: relative; /* ZMĚNA: Nutné pro pozicování šipek */
            border: 1px solid #ddd;
            border-radius: 8px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            background: #fdfdfd;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* ZMĚNA: Přidán stín */
        }

/* ### 1. FIXNÍ LEGENDA (LEVÝ SLOUPEC) ### */
        .forecast-strip-legend {
            flex-shrink: 0;
            width: 70px; /* Šířka fixního sloupce */
            background: #f8f9fa;
            border-right: 1px solid #ddd;
            z-index: 20; 
            /* padding-top: 35px; <-- ODSTRANĚNO */
            /* padding-top: 34px; <-- ODSTRANĚNO dle požadavku */
            padding-bottom: 8px;  /* PŘIDÁNO: Shoda se spodním okrajem sloupců */
            box-sizing: border-box;
            background: #ffffff; 
            box-shadow: 11px 0px 18px 1px rgb(255 255 255);
            
            /* --- NOVÁ OPRAVA: Zarovnání na spodek --- */
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* <-- ZMĚNĚNO: Posune obsah na spodek */
            /* justify-content: flex-start; <-- Původní hodnota */
        }
        
        .forecast-strip-legend .strip-data {
            display: flex;
            /* align-items: center; <-- ODSTRANĚNO */
            align-items: flex-end; /* <-- NOVÁ OPRAVA: Zarovnání textu legendy dolů */
            justify-content: right;
            font-size: 11px;
            font-weight: bold;
            color: #333;
            text-align: center;
            padding: 0 5px;
            box-sizing: border-box;
        }

        /* ### 2. ROLOVACÍ KONTEJNER (PRAVÁ ČÁST) ### */
        .hourly-strip-container {
            flex-grow: 1;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            position: relative;
            
            /* ZMĚNA: Skrytí nativního scrollbaru */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE/Edge */
        }
        .hourly-strip-container::-webkit-scrollbar {
            display: none; /* Chrome/Safari/Opera */
        }


        .hourly-strip-scroll {
            display: flex;
            /* ZMĚNA: Hlavní směr je sloupec (Řádek hlavičky + Řádek hodin) */
            flex-direction: column; 
            flex-wrap: nowrap;
            width: max-content; 
            position: relative;
            z-index: 5; /* Data jsou pod grafem */
        }

        /* ### 3. SPOLEČNÉ STYLY (PRO LEGENDA I SLOUPCE) ### */
        /* Musí mít stejné výšky, aby se zarovnaly */
        .strip-time, .forecast-strip-legend .strip-time { height: 25px; }
        .strip-icon, .forecast-strip-legend .strip-icon { height: 35px; }
        .strip-temp, .forecast-strip-legend .strip-temp { height: 25px; font-weight: 500;}
        
        /* --- OPRAVA CHYBY 1: Sjednocení výšky grafu v legendě --- */
        .strip-temp-graph-area, .forecast-strip-legend .strip-temp-graph-area { height: 90px; } /* (bylo 70px) */
        
        .strip-precip-bar-wrapper, .forecast-strip-legend .strip-precip-bar-wrapper { height: 35px; } /* Místo pro pruhy */
        .strip-precip-text, .forecast-strip-legend .strip-precip-text { height: 25px; }
        .strip-snow, .forecast-strip-legend .strip-snow { height: 25px; }
        .strip-wind, .forecast-strip-legend .strip-wind { height: 25px; }

        /* ### 4. STYLY PRO SLOUPCE V ROLOVÁNÍ ### */
        
        /* ZMĚNA: Nový řádek pro hlavičky dnů */
        .day-header-row {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: max-content;
            box-shadow: -1px 9px 20px 0px #ffffff;
            z-index: inherit;
                background: #ffffff;
        }
        .day-header-col {
            /* Každý sloupec zabírá 24 hodin * šířka hodiny (75px) = 1800px */
            width: calc(24 * 75px); 
            box-sizing: border-box;
            padding: 6px 10px;
            text-align: left;
            font-size: 0.8em;
            color: #555;
            border-right: 1px solid #ddd;
            /*height: 42px; /* Výška nového řádku */
        }
        .day-header-col span {
            margin-right: 12px;
        }
        .day-header-col span .fa {
            width: 12px;
            margin-right: 3px;
            color: #0d47a1;
        }
        .day-header-col strong {
          
            color: #000;
            margin-right: 5px;
            margin-bottom: 3px;
        }

        /* ZMĚNA: Nový kontejner pro samotné hodinové sloupce */
        .hourly-columns-row {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: max-content;
        }

        .hourly-strip-column {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            width: 75px; /* Šířka jednoho sloupce */
            border-right: 1px solid #eee;
            box-sizing: border-box;
            text-align: center;
            padding-top: 8px;     padding-bottom: 8px;/* Stejný padding jako legenda */
            transition: background-color 0.3s ease;
        }

        .hourly-strip-column.current-hour-col {
            background-color: rgba(230, 245, 255, 0.7);
            border-left: 1px solid #bbd5ff ;
            border-right: 1px solid #bbd5ff ;
            margin-right: -1px; 
        }
        
        /* --- STYL PRO ODDĚLOVAČ DNŮ (ZMĚNA: neutralizováno) --- */
        .hourly-strip-column.day-divider {
            border-left: 1px solid #eee; /* Pouze tenká čára */
            margin-left: 0;
        }
        
        /* --- STYL PRO NOČNÍ HODINY (VYŽADOVÁNO) --- */
        .hourly-strip-column.night-column {
            background-color: #f0f4f8; /* Tmavší pozadí */
            border-right: 1px solid #e9eef3;
        }
        /* Zvýraznění aktuální hodiny v noci */
        .hourly-strip-column.night-column.current-hour-col {
            background-color: rgba(210, 230, 255, 0.7); /* Mírně tmavší modrá */
        }
        .hourly-strip-column.night-column.day-divider {
             border-left: 1px solid #e9eef3; /* ZMĚNA: neutralizováno */
        }
        /* --- KONEC NOVÝCH STYLŮ --- */


        /* Formátování dat ve sloupcích */
        .hourly-strip-column .strip-data {
            display: flex;
            align-items: end;
            justify-content: center;
            font-size: 11px;
            color: #555;
            box-sizing: border-box;
        }
        
        .hourly-strip-column .strip-time { font-weight: bold; }
        .hourly-strip-column .strip-icon img { width: 40px; height: 40px; margin-bottom: -1em; }
        
        /* Srážkový pruh */
        .strip-precip-bar-wrapper {
            align-items: flex-end; /* Pruhy rostou ze spodu */
        }
        .strip-precip-bar {
            width: 80%; /* Šířka pruhu */
            background-color: #7ac0f8;
          
            transition: height 0.3s ease;
        }

        .strip-data .fa { width: 14px; text-align: center; }
        .strip-wind .fa { 
            color: #5aa85a; 
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        /* ### 5. GRAF (ČERVENÁ ČÁRA - OPRAVENÉ STYLY) ### */
        /* Musí se roztáhnout přes celé pole, které je nad ikonami a teplotou */
        .hourly-graph-row-wrapper {
            position: absolute;
            top: 42px; /* ZMĚNA: Posunuto o výšku nové hlavičky (42px) */
            left: 0;
            width: 100%; 
            
            /* --- OPRAVA CHYBY 2: Zvýšení wrapperu, aby se plátno neořízlo --- */
            height: 175px; /* (bylo 160px) Plátno má top: 85px + height: 90px = 175px */
            
            z-index: 10; 
            pointer-events: none; 
            overflow: hidden; /* Důležité: skryje přetok */
        }
        
        #stripGraphCanvas {
            position: absolute;
            left: 0;
            /* Umístění Canvasu na pozici pro vykreslování (začíná u teploty a končí na konci 'graph-area') */
            top: 85px; /* (strip-time: 25px) + (strip-icon: 35px) + (strip-temp: 25px) */
            height: 90px !important; 
            width: 100%;
        }

        /* ZMĚNA: Styly pro nové navigační šipky */
        .scroll-arrow {
            position: absolute;
            top: 50%;
            /* ZMĚNA: posunuto níže, aby bylo uprostřed rolovací oblasti */
            margin-top: 10px; 
            transform: translateY(-50%);
            z-index: 30;
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid #ccc;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            cursor: pointer;
            display: none; /* Skryto defaultně, JS je ukáže */
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #0d47a1;
            box-shadow: 0 1px 4px rgba(0,0,0,0.15);
            transition: all 0.2s ease;
        }
        .scroll-arrow:hover {
            background-color: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            transform: translateY(-50%) scale(1.05);
        }
        .scroll-arrow.prev {
            left: 78px; /* 70px legenda + 8px padding */
        }
        .scroll-arrow.next {
            right: 8px;
            display: flex; /* První šipka se ukáže hned */
        }
        
        /*Barva pro ikony slunce u východu/západu */
.yellow-sun {
    color: #FFD700 !important; /* Zlatá žlutá barva */
    margin-right: 5px; /* Malá mezera za sluncem */
}

  /* Styl pro výběr aktivit */
        .activity-selector-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .activity-btn {
            background-color: var(--card-background);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 20px 15px;
            font-size: 1.1em;
            font-weight: bold;
            color: var(--primary-color);
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            text-align: center;
        }

        .activity-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .activity-btn i {
            font-size: 1.5em;
            display: block;
            margin-bottom: 10px;
        }

        /* Styl pro zobrazení výsledku */
        #ai-result-box {
            background-color: #e3f2fd; /* Světle modrá, podobná "aktualni-hodina" */
            border-left: 5px solid var(--primary-color);
            border-radius: 5px;
            padding: 20px;
            margin-top: 30px; text-align: left;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        #ai-result-box h3 {
            color: var(--primary-color);
            margin-top: 0;
            margin-bottom: 10px;
        }
        
        #ai-result-text {
            font-size: 1.1em;
            line-height: 1.6;
            color: #333;
        }
        
        /* Jednoduchý loader */
        .ai-loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 10px auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
     /* Speciální CSS pro Meteo domeček */
        :root {
            --roof-color: var(--primary-color); 
            --wood-trim-color: #795548; 
            --shadow-soft: 0 5px 10px rgba(0, 0, 0, 0.1); 
            --temp-mercury-color: var(--temp-color); 
        }
        
        body { display: block; }
        .container {
            padding: 20px;
            box-shadow: none;
            background-color: transparent;
            /* text-align: center; <-- OPRAVENO: Odstraněno */
        }
        h1 { margin-bottom: 20px; color: var(--primary-color); }

        /* ----- STYL PRO VÝBĚR TRENDU (NOVÉ) ----- */
        .trend-selector {
            background-color: #f4f4f4;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 25px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        .trend-selector label {
            font-weight: bold;
            color: #333;
        }
        .trend-selector select,
        .trend-selector button {
            padding: 8px 12px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 1em;
        }
        .trend-selector select {
            background-color: white;
        }
        .trend-selector button {
            background-color: var(--primary-color);
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .trend-selector button:hover {
            background-color: var(--primary-hover-color);
        }


        /* ----- NOVÝ STYL PRO ZOBRAZENÍ OBRÁZKU DOMEČKU ----- */
        .weather-house-wrapper {
            max-width: 550px;
            margin: 30px auto;
            /* Původní paddingy a pozice pro CSS kreslení jsou nyní irelevantní, ale zachováme základní wrapper */
            padding: 0;
            position: relative;
            z-index: 10;
        }
        .weather-house-wrapper img.generated-domecek {
            /* Vynutíme maximální šířku, aby se vešel do kontejneru */
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
            
        }


/* ------------------------------------------- */
/* --- RESPONZIVNÍ STYLY (PŘESUNUTO SEM) --- */
/* ------------------------------------------- */


.akt-ikona p {
    margin-top: -10%;
}


/* Responzivita - Tablety (800px) */
@media screen and (max-width: 800px) {
   
   /* Kontejner, který obklopuje plátno grafu */
.chart-container {
    /* Nastaví maximální šířku kontejneru na 100% dostupné plochy */
    width: 100%; 
    /* Zajistí, že se kontejner neroztáhne za tuto hodnotu, např. 800px */
    max-width: 800px; 
    /* Pro lepší vzhled na střed */
    margin-left: auto;
    margin-right: auto;
    /* Nastavte vhodnou výšku. Chart.js to může řídit, ale to pomůže při výpočtu poměru stran. */
    height: auto; 
}

/* Nastavení samotného plátna grafu */
.chart-container canvas {
    /* To je klíčové, aby se plátno přizpůsobilo kontejneru */
    width: 100% !important;
    height: auto !important; 
}
   
    .akt-box {
        flex-direction: column;
        /* text-align: center;  <-- TOTO BYLA CHYBA */
    }

    .akt-teplota {
        font-size: 3.5em;
        text-align: center;
        width: 100%;
        margin-bottom: 10px; flex: 1 1 100px;
    }
    /*
      .akt-teplota p { <-- OPRAVENO: Tento blok byl smazán
        font-size: 3.5em;
        text-align: center; 
        width: 100%;
        margin-bottom: 10px;
    }
    */
    .akt-ikona {
        order: -1;
        text-align: center;
        margin-bottom: 10px;
    }

    .akt-detaily {
        padding: 10px 0;
        width: 100%;
        margin-top: -10%; flex: auto;
    }

    .main-links {
        justify-content: center;
    }
    
    .back-link-top
    {
       display: none;
    }
    
    .station-comparison-box {
        flex-direction: column;
    }

    .api-data {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 15px;
        margin-bottom: 15px;
        width: 100%;
    }

    .comp-col {
        width: 100%;
    }

    .chart-container {
        height: 300px;
    }

    /* --- NOVÁ OPRAVA: Výška radaru na mobilu --- */
    .radar-container iframe {
        height: 400px !important; /* Snížení výšky (bylo inline 600px) */
    }

    /* OPRAVA: Pravidla pro 3 sloupce PŘESUNUTA SEM (mají platit jen na mobilu) */
    .station-comparison-box.three-columns {
        flex-direction: column;
    }

    .station-comparison-box.three-columns .api-data,
    .station-comparison-box.three-columns .station-data {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 15px;
        margin-bottom: 15px;
        width: 100%;
    }

    .station-comparison-box.three-columns .station-data:last-of-type {
        border-bottom: none;
    }
}

/* Responzivita - Mobily (600px) */
@media screen and (max-width: 600px) {
    /* Skryjeme klasickou patičku a zobrazíme mobilní */
    .klasicka-paticka {
        /*display: none;*/
    }

    .footer {
        display: flex;
    }

    body {
        padding-bottom: 70px;
    }

    .karta-den {
        min-width: 45%;
    }

    .summary-item {
        flex-basis: 100%;
    }
}

/* Na mobilu šipky nechceme, tam se scrolluje dotykem */
@media (max-width: 800px) {
    .scroll-arrow,
    .scroll-arrow.next,
    .scroll-arrow.prev {
        display: none !important;
    }
}

/* --- STYLY PRO COOKIE LIŠTU --- */

#cookie-consent-banner {
    display: none; /* Skryto ve výchozím stavu, JS to ukáže */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-background);
    color: var(--text-color);
    padding: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    z-index: 99999; /* Musí být nad mobilní navigací (která má 1000) */
    
    /* Flexbox pro zarovnání textu a tlačítka */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.cookie-consent-text {
    flex-grow: 1;
    min-width: 200px;
    font-size: 0.9em;
    text-align: center; /* Výchozí pro menší obrazovky */
}

@media screen and (min-width: 768px) {
    .cookie-consent-text {
        text-align: left; /* Změna na levé zarovnání na větších obrazovkách */
    }
}

.cookie-consent-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 25px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.cookie-consent-button:hover {
    background-color: var(--secondary-color);
}


/* --- ÚPRAVY PRO MOBILNÍ ZOBRAZENÍ (POD 600PX) --- */

@media screen and (max-width: 600px) {
    
    /* Vertikální uspořádání pro mobil */
    #cookie-consent-banner {
        flex-direction: column; 
        /* Více paddingu dole, aby se lišta nezobrazovala pod mobilní navi-patičkou (70px) */
        padding: 50px 15px 80px 15px; 
        gap: 10px;
    }

    /* Text na celou šířku a na střed */
    .cookie-consent-text {
        text-align: center;
        min-width: 100%;
        font-size: 0.95em;
    }

    /* Tlačítko na celou šířku pro snadné kliknutí */
    .cookie-consent-button {
        width: 100%; 
        max-width: 300px; /* Aby nebylo příliš široké na menších tabletech */
        padding: 10px; 
        margin-top: 5px;
    }
    
    /* Zajištění, že mobilní navigační patička je vždy navrchu */
    .footer {
        z-index: 1002;
    }
}

        /* Modal (overlay) */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000; 
            padding-top: 50px; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.9); 
        }

        /* Modal Content (obrázek) */
        .modal-content {
            margin: auto;
            display: block;
            width: 90%; height: auto;
            max-width: 1200px;
        }

        /* Close Button */
        .modal-close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .modal-close:hover,
        .modal-close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
        
        /* --- OPRAVA VÝŠKY OBRÁZKU (JS + CSS) --- */

        /* Výchozí chování (mobil) */
        .infographic-thumbnail {
            width: 100%;
            height: auto;
            object-fit: contain; /* Zobrazí celý obrázek */
            border-radius: 5px;
            cursor: pointer;
           
            transition: transform 0.2s;
        }
        .infographic-thumbnail:hover {
            transform: scale(1.03);
            
        }

        /* Desktopové oříznutí (aktivováno JS) */
        @media (min-width: 769px) { /* Breakpoint, kdy jsou boxy vedle sebe */
            
            /* Kontejner, kterému JS nastaví pevnou výšku */
            #image-box {
                /* Vynutíme flex layout, aby se obsah mohl roztáhnout */
                display: flex;
                flex-direction: column;
                /* Výška (height) bude nastavena JavaScriptem! */
            }

            /* Obrázek uvnitř */
            #image-box .infographic-thumbnail {
                width: 100%;
                /* * Klíčová změna: 
                 * flex-grow: 1 = zabere všechno volné místo v kontejneru (#image-box)
                 * height: 100px = jen jako základna, flex-grow to přepíše.
                 * Pomáhá to starším prohlížečům.
                 */
                flex-grow: 1;
                height: 100px; 
                object-fit: contain;
            }
        }
        /* --- KONEC OPRAVY --- */

/* =====================================================================
   NOVÝ VZHLED 2026 – "Nebe nad Sedlčany"
   Tato vrstva jen přebarvuje a upravuje vzhled. Rozměry hodinového pásu
   (výšky řádků, šířky sloupců, pozice grafu) zůstávají beze změny,
   aby fungoval graf i rolování. Celý blok lze smazat = návrat ke starému vzhledu.
   ===================================================================== */

:root {
    --ink: #10283f;          /* text a nadpisy – noční obloha */
    --ink-soft: #4a6178;     /* vedlejší text */
    --ink-faint: #8a9bb0;    /* popisky */
    --sky: #1f6fd6;          /* odkazy, tlačítka */
    --sky-deep: #0c3a6b;     /* tmavý pás patičky */
    --mist: #eaf2fa;         /* světle modré pozadí sekcí */
    --line: #dbe6f1;         /* jemné linky */
    --sun: #e8780c;          /* teplo / maxima */
    --frost: #0f97b0;        /* chlad / minima */
    --leaf: #3d8c3f;         /* naše stanice (reálné měření) */
    --font: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
    --radius-l: 22px;
    --radius-m: 14px;
    --shadow: 0 18px 40px -24px rgba(16, 40, 63, .35);

    /* původní proměnné převedené na novou paletu */
    --primary-color: var(--sky-deep);
    --secondary-color: var(--sky);
    --background-color: #f6f9fc;
    --text-color: var(--ink);
    --temp-color: var(--sun);
    --temp-max-color: var(--sun);
    --temp-min-color: var(--frost);
    --border-color: var(--line);
}

* { font-family: var(--font); }
.fa { font-family: FontAwesome !important; }

html, body { overflow-x: hidden; }
body {
    padding-bottom: 0;
    color: var(--ink);
    background-color: #f6f9fc;
    background-image: linear-gradient(180deg, rgba(246, 249, 252, 0) 0, rgba(246, 249, 252, 0) 360px, #f6f9fc 620px), url('pozadi1.png') !important;
    background-size: 100% auto, 100% auto;
    background-repeat: no-repeat;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

.container { max-width: 1140px; }

a { color: var(--sky); }
:focus-visible { outline: 3px solid rgba(31, 111, 214, .45); outline-offset: 2px; border-radius: 6px; }

/* ---------- Nadpisy ---------- */
h1 {
    color: var(--ink);
    border-bottom: 0;
    font-weight: 800;
    font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 56px 0 34px;
    padding: 0;
    text-shadow: 0 1px 18px rgba(255, 255, 255, .9);
}
h1 br { display: none; }
h1 i { color: var(--sky); font-size: .8em; margin-right: 8px; }

h2 {
    color: var(--ink);
    font-weight: 800;
    font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 64px 0 22px;
    text-shadow: none;
}
h2 i { color: var(--sky); font-size: .75em; margin-right: 10px; vertical-align: 2px; }
h2 small {
    display: inline-block;
    margin-top: 6px;
    color: var(--ink-faint) !important;
    font-size: .52em !important;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---------- Hlavní box: aktuální počasí (to jedno velké místo) ---------- */
.akt-box {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
    padding: 34px 36px;
    gap: 10px;
}
.akt-teplota {
    color: var(--ink);
    font-weight: 800;
    font-size: clamp(4rem, 2.4rem + 4.6vw, 6.6rem);
    line-height: .9;
    letter-spacing: -0.05em;
    text-align: left;
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    padding-right: 28px;
}
.akt-detaily { flex: 1 1 320px; padding: 0 10px; }
.akt-detaily p { color: var(--ink-soft); }
.akt-detaily p strong { color: var(--ink); }
.akt-detaily .temp-max { color: var(--sun); font-size: 1.15em; font-weight: 700; }
.akt-detaily .temp-min { color: var(--frost); font-weight: 700; }
.akt-ikona img { width: 128px; height: 128px; filter: drop-shadow(0 10px 14px rgba(16, 40, 63, .18)); }
.akt-ikona p { margin-top: -6%; color: var(--ink-soft); font-weight: 600; text-transform: none; }

/* ---------- Tlačítka ---------- */
.link-button,
.weather-house-link,
.summary-link,
.cookie-consent-button,
.trend-selector button {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .005em;
    box-shadow: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
.link-button { padding: 10px 20px; font-size: .9em; }
.detail-link, .history-link:hover { background: var(--sky); color: #fff; border: 2px solid var(--sky); }
.history-link { background: transparent; color: var(--sky-deep); border: 2px solid rgba(12, 58, 107, .25); }
.detail-link:hover { background: var(--sky-deep); border-color: var(--sky-deep); }
.link-button:hover { opacity: 1; }

.weather-house-link {
    background: #fff;
    color: var(--sky-deep);
    border: 2px solid var(--line);
    padding: 12px 24px;
    margin: 8px 6px 24px;
    font-size: 1em;
}
.weather-house-link i { color: var(--sky); font-size: 1.1em; }
.weather-house-link:hover { background: var(--sky-deep); color: #fff; border-color: var(--sky-deep); transform: none; box-shadow: none; }
.weather-house-link:hover i { color: #fff; }

.container-link h2 { margin-top: 56px; }

/* ---------- Karty a boxy ---------- */
.station-comparison-box,
.chart-container,
.summary-container,
.hodinova-predpoved-container,
.karta-den {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
}

/* Porovnání dat: tři čísla vedle sebe, barva = zdroj */
.station-comparison-box { padding: 26px 12px; }
.comp-col h4 { color: var(--ink-soft); font-size: .95em; font-weight: 600; }
.temp-value { font-weight: 800; font-size: 2.5em; letter-spacing: -0.03em; line-height: 1.1; }
.temp-value.temp-color { color: var(--sun); }
.station-data .temp-value { color: var(--leaf) !important; }
.gray-text .temp-value, .gray-text h4 { color: var(--ink-faint); }
.source-info { color: var(--ink-faint); font-size: .82em; }

.chart-container { padding: 22px; }

/* Souhrnné boxy (detail, domeček) */
.summary-container { padding: 26px; gap: 26px; }
.summary-item { border-left: 0; padding-left: 0; }
.summary-item h3 { color: var(--ink); font-weight: 700; }
.summary-item h3 i { color: var(--sky); }
.summary-item p { color: var(--ink-soft); }
.summary-item .karta-hodnota { color: var(--ink); font-weight: 700; }

/* Barvy teplot všude stejně */
.temp-max { color: var(--sun); }
.temp-min { color: var(--frost); }
.temp-color { color: var(--sun); }
.primary-color { color: var(--leaf); }

/* ---------- Výstrahy ---------- */
.alert-box { border-radius: var(--radius-m); border: 1px solid rgba(16, 40, 63, .12); border-left: 1px solid rgba(16, 40, 63, .12); }
.alert-moderate { background: #fff4e5; border-left-color: var(--sun); }
.alerts-container h2 { color: #b4470a; }

/* ---------- Záložky dnů + hodinový pás ---------- */
.forecast-tabs { border-bottom: 0; gap: 8px; margin-bottom: 10px; }
.forecast-tab,
.forecast-tab:first-child,
.forecast-tab:last-child,
.forecast-tab:not(:last-child) {
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    bottom: 0;
    padding: 10px 8px;
    color: var(--ink-soft);
}
.forecast-tab:hover { background: #fff; }
.forecast-tab.active { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; }
.forecast-tab.active .tab-day-name,
.forecast-tab.active small { color: #fff; }
.forecast-tab.active .temp-max { color: #ffc27a; }
.forecast-tab.active .temp-min { color: #9fe3ef; }
.forecast-tab .temp-max { color: var(--sun); }
.forecast-tab .temp-min { color: var(--frost); }

.new-forecast-wrapper {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.forecast-strip-legend .strip-data { color: var(--ink-soft); font-weight: 600; }
.day-header-col { color: var(--ink-soft); border-right-color: var(--line); }
.day-header-col strong { color: var(--ink); }
.day-header-col span .fa { color: var(--sky); }
.hourly-strip-column { border-right-color: #f0f4f8; }
.hourly-strip-column .strip-data { color: var(--ink-soft); }
.hourly-strip-column .strip-temp { color: var(--ink); font-weight: 700; font-size: 12px; }
.hourly-strip-column.current-hour-col { background-color: rgba(31, 111, 214, .08); border-left-color: rgba(31, 111, 214, .3); border-right-color: rgba(31, 111, 214, .3); }
.hourly-strip-column.night-column { background-color: #f3f6fa; }
.strip-precip-bar { background-color: #6aaef0; border-radius: 3px 3px 0 0; }
.scroll-arrow { border-color: var(--line); color: var(--sky-deep); }

/* ---------- AI metrolog ---------- */
.ai-predikce {
    position: relative;
    max-width: 980px;
    margin: 140px auto 25px;
    padding: 40px 410px 36px 44px;
    min-height: 290px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
    color: var(--ink-soft);
    font-size: 1.02em;
    line-height: 1.7;
}
.ai-predikce-text { position: relative; z-index: 1; }
.ai-predikce p { margin: 0 0 .7em; }
.ai-predikce p:last-child { margin-bottom: 0; }
.ai-predikce .ai-predikce-pozdrav {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.3em;
    letter-spacing: -0.01em;
    margin-bottom: .6em;
}
.ai-predikce .ai-predikce-podpis {
    margin-top: 1.4em;
    padding-top: 1em;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: .88em;
    font-weight: 600;
}
/* Robot vpravo v boxu, hlavou přesahuje nad horní okraj */
.ai-predikce-robot {
    position: absolute;
    right: 10px;
    top: -120px;
    width: 380px;
    pointer-events: none;
}
.ai-predikce-robot img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 26px rgba(16, 40, 63, .22));
}
@media screen and (max-width: 800px) {
    .ai-predikce { padding: 150px 22px 26px; margin-top: 120px; }
    .ai-predikce-robot { top: -105px; bottom: auto; right: 50%; transform: translateX(50%); width: 230px; }
}

/* ---------- Radar, kamery, obrázky ---------- */
.radar-container,
.weather-house-wrapper img.generated-domecek,
.infographic-thumbnail {
    border-radius: var(--radius-l) !important;
}
.radar-container { box-shadow: var(--shadow) !important; border: 1px solid var(--line); }

/* ---------- Plánovač ---------- */
.activity-btn {
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    color: var(--ink);
    font-weight: 700;
    box-shadow: none;
    padding: 22px 15px;
}
.activity-btn i { color: var(--sky); }
.activity-btn:hover { background: var(--sky-deep); border-color: var(--sky-deep); color: #fff; transform: none; box-shadow: none; }
.activity-btn:hover i { color: #fff; }
#ai-result-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); padding: 28px 32px; }
#ai-result-box h3 { color: var(--ink); }
#ai-result-text { color: var(--ink); }

/* ---------- Domeček / formuláře ---------- */
.trend-selector { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); }
.trend-selector select { border-radius: 999px; border: 1px solid var(--line); padding: 9px 14px; }
.trend-selector button { background: var(--sky); border: 0; padding: 10px 20px; }
.trend-selector button:hover { background: var(--sky-deep); }
input[type="date"] { border-radius: 999px; border: 1px solid var(--line); padding: 8px 14px; }

/* ---------- Patička: tmavý pás s vlnou ---------- */
.klasicka-paticka {
    position: relative;
    margin-top: 80px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 64px max(24px, calc(50vw - 540px)) 48px;
    background: var(--sky-deep);
    color: rgba(255, 255, 255, .72);
    border-top: 0;
    border-radius: 0;
    font-size: .85em;
    line-height: 1.7;
}
.klasicka-paticka::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: -38px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C180 2 360 0 600 14S1020 34 1200 10V40Z' fill='%230c3a6b'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
}
.klasicka-paticka b { color: #fff; }
.klasicka-paticka a { color: #9fd0ff; }

/* ---------- Mobilní navigace ---------- */
.footer {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -16px rgba(16, 40, 63, .35);
}
.nav-item { color: var(--ink-faint); font-weight: 600; }
.nav-item.active { color: var(--sky-deep); }
.nav-item.active i {
    background: var(--mist);
    color: var(--sky);
    border-radius: 999px;
    padding: 3px 16px;
}

/* ---------- Cookie lišta ---------- */
#cookie-consent-banner {
    left: 16px; right: 16px; bottom: 16px; width: auto;
    max-width: 880px; margin: 0 auto;
    border-radius: var(--radius-l);
    border: 1px solid var(--line);
    box-shadow: 0 24px 50px -20px rgba(16, 40, 63, .45);
    padding: 18px 22px;
}
.cookie-consent-button { background: var(--sky); padding: 11px 22px; }
.cookie-consent-button:hover { background: var(--sky-deep); }
.cookie-consent-button.cookie-button-secondary { background: transparent; color: var(--ink-soft); border: 2px solid var(--line); }
.cookie-consent-button.cookie-button-secondary:hover { background: var(--mist); color: var(--ink); }

/* ---------- Mobil ---------- */
@media screen and (max-width: 800px) {
    body { background-size: auto 520px, auto 520px; }
    h2 { margin-top: 44px; }
    .akt-box { padding: 24px 20px; }
    .akt-teplota { text-align: center; }
    .akt-detaily { margin-top: 0; text-align: center; }
    .akt-ikona { margin-bottom: 0; }
    .akt-ikona img { width: 96px; height: 96px; }
    .akt-ikona p { margin-top: -4px; }
    .main-links { flex-wrap: wrap; }
    .forecast-tab img { width: 32px; height: 32px; margin-right: 4px; }
}
@media screen and (max-width: 600px) {
    body { padding-bottom: 70px; }
    #cookie-consent-banner { left: 8px; right: 8px; bottom: 78px; padding: 18px 16px; }
    .forecast-tabs { gap: 5px; }
    .forecast-tab .tab-day-name { font-size: 13px; }
}

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

/* Tlačítka v hlavním boxu – text se nezalamuje, ikona s mezerou */
.link-button { white-space: nowrap; }
.link-button i { margin-right: 6px; }
.main-links { flex-wrap: wrap; }

/* Kamery: celý přehrávač jako jedna karta (dřív se zaobloval jen obrázek uvnitř) */
.webcam-embed-container iframe {
    border-radius: 14px;
    border: 1px solid var(--line) !important;
    background: #f5f5f5;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ---------- Jednotná patička (stejná na všech stránkách) ---------- */
.klasicka-paticka { text-align: left; }
.paticka-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px 64px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.paticka-nazev {
    color: #fff;
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}
.paticka-o-webu p:not(.paticka-nazev) { max-width: 46ch; font-size: .95rem; }
.paticka-odkazy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 28px;
    align-content: start;
}
.klasicka-paticka .paticka-odkazy a {
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    padding: 4px 0;
}
.klasicka-paticka .paticka-odkazy a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.klasicka-paticka .paticka-odkazy a.aktivni { color: #9fd0ff; }
.paticka-spodek {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 22px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}
.klasicka-paticka .paticka-spodek a { color: rgba(255, 255, 255, .8); }

/* Bloky "Jaké máme další aplikace?" nahrazuje jednotná patička */
.container-link { display: none; }

/* ---------- Odkaz "Zpět na úvod" ---------- */
.back-link-top { margin: 6px 0 -6px; }
.back-link-top a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 6px 16px -10px rgba(16, 40, 63, .45);
    color: var(--sky-deep);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
.back-link-top a .fa { font-size: .8em; color: var(--sky); }
.back-link-top a:hover { background: var(--sky-deep); color: #fff; }
.back-link-top a:hover .fa { color: #fff; }

@media screen and (max-width: 800px) {
    .paticka-grid { grid-template-columns: 1fr; gap: 28px; }
    .paticka-spodek { flex-direction: column; }
}

/* Tlačítko formuláře (historie: Zobrazit data) */
form button[type="submit"] {
    border-radius: 999px;
    border: 0;
    background: var(--sky);
    color: #fff;
    font-weight: 700;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color .2s;
}
form button[type="submit"]:hover { background: var(--sky-deep); }

@media screen and (max-width: 800px) {
    h1 { margin-top: 28px; }
}

/* Žádný světlý pruh pod patičkou */
.container:has(> .klasicka-paticka) { padding-bottom: 0; }

/* ---------- Plánovač: úvod s robotem ---------- */
.planovac-intro {
    position: relative;
    max-width: 980px;
    margin: 120px auto 34px;
    padding: 36px 380px 36px 44px;
    min-height: 220px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow);
}
.planovac-intro .ai-predikce-robot { width: 330px; top: -110px; right: 20px; }
.planovac-intro h2 { text-align: left; margin: 0 0 12px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
.planovac-intro p { color: var(--ink-soft); font-size: 1.02em; line-height: 1.65; max-width: 52ch; }

/* ---------- Plánovač: 6 hodin ---------- */
.planovac-hodiny {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.planovac-hodina {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 10px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    text-align: center;
}
.planovac-cas { font-weight: 700; color: var(--ink-soft); font-size: .9em; }
.planovac-teplota { font-weight: 800; font-size: 1.6em; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; }
.planovac-popis { color: var(--ink-soft); font-size: .82em; min-height: 2.4em; line-height: 1.2; }
.planovac-detail { color: var(--ink-faint); font-size: .8em; font-weight: 600; }
.planovac-detail .fa { color: var(--sky); margin-right: 3px; }

@media screen and (max-width: 800px) {
    .planovac-intro { margin-top: 170px; padding: 140px 22px 26px; text-align: center; }
    .planovac-intro .ai-predikce-robot { top: -130px; right: 50%; transform: translateX(50%); width: 240px; }
    .planovac-intro h2 { text-align: center; }
    .planovac-intro p { margin: 0 auto; }
    .planovac-hodiny { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ai-predikce { margin-top: 150px; }
    .ai-predikce-robot { top: -130px; width: 250px; }
    .ai-predikce { padding-top: 150px; }
}

/* =====================================================================
   VZHLED 2 – "pásy": střídání širokých a úzkých sekcí, průhledné panely,
   fotka náměstí v pozadí, žádné krabice v krabicích (hlavně u grafů a na mobilu).
   ===================================================================== */
:root {
    --glass: rgba(255, 255, 255, .72);
    --glass-strong: rgba(255, 255, 255, .84);
    --glass-line: rgba(255, 255, 255, .85);
    --shadow-soft: 0 14px 34px -22px rgba(16, 40, 63, .38);
    --page-bg: #f3f7fb;
}

/* Fotka náměstí nahoře, plynule se ztrácí do pozadí stránky */
body {
    background-color: var(--page-bg) !important;
    background-image:
        linear-gradient(180deg, rgba(243, 247, 251, .10) 0, rgba(243, 247, 251, .35) 260px, rgba(243, 247, 251, .88) 480px, var(--page-bg) 640px),
        url('images/sedlcany-namesti.jpg') !important;
    background-image:
        linear-gradient(180deg, rgba(243, 247, 251, .10) 0, rgba(243, 247, 251, .35) 260px, rgba(243, 247, 251, .88) 480px, var(--page-bg) 640px),
        image-set(url('images/sedlcany-namesti.webp') type('image/webp'), url('images/sedlcany-namesti.jpg') type('image/jpeg')) !important;
    background-size: 100% 100%, 100% auto !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat !important;
}
@media screen and (max-width: 800px) {
    body {
        background-image:
            linear-gradient(180deg, rgba(243, 247, 251, .05) 0, rgba(243, 247, 251, .30) 200px, rgba(243, 247, 251, .9) 380px, var(--page-bg) 470px),
            url('images/sedlcany-namesti-m.jpg') !important;
        background-image:
            linear-gradient(180deg, rgba(243, 247, 251, .05) 0, rgba(243, 247, 251, .30) 200px, rgba(243, 247, 251, .9) 380px, var(--page-bg) 470px),
            image-set(url('images/sedlcany-namesti-m.webp') type('image/webp'), url('images/sedlcany-namesti-m.jpg') type('image/jpeg')) !important;
        background-size: 100% 100%, auto 470px !important;   /* náměstí uprostřed, silnice po stranách */
        background-position: center top, center top !important;
    }
}
h1 { color: #fff; text-shadow: 0 2px 18px rgba(8, 30, 52, .45), 0 1px 3px rgba(8, 30, 52, .35); }
h1 i { color: #fff; }
.back-link-top a { background: rgba(255, 255, 255, .8); }

/* ---------- Pásy ---------- */
.pas { position: relative; }
.pas-uzky { max-width: 880px; margin-left: auto; margin-right: auto; }
.pas-siroky { max-width: none; }
.pas-svetly {
    isolation: isolate;
    margin-top: 64px;
    padding: 2px 0 56px;
}
.pas-svetly::before {
    content: "";
    position: absolute; z-index: -1;
    top: 0; bottom: 0;
    left: calc(50% - 50vw); right: calc(50% - 50vw);
    background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .55) 100%);
    border-top: 1px solid rgba(255, 255, 255, .9);
    border-bottom: 1px solid rgba(219, 230, 241, .7);
}
.pas-svetly > h2:first-child, .pas-svetly > #mastnik + h2 { margin-top: 48px; }
.pas-svetly + .pas-svetly { margin-top: 0; }

/* ---------- Panely: jen jedna úroveň, lehce průhledné ---------- */
.akt-box,
.station-comparison-box,
.summary-container,
.new-forecast-wrapper,
.ai-predikce,
.planovac-intro,
#ai-result-box,
.trend-selector,
.planovac-hodina,
.chart-container {
    background: var(--glass) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid var(--glass-line) !important;
    box-shadow: var(--shadow-soft) !important;
}
.akt-box { background: var(--glass-strong) !important; }

/* V širokém pásu se obsah neobaluje dalším boxem */
.pas-svetly .chart-container,
.pas-svetly .summary-container {
    background: transparent !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0; padding-right: 0;
}
.pas-svetly .summary-container { gap: 0; padding-top: 6px; padding-bottom: 6px; }
.pas-svetly .summary-item { padding: 6px 28px; }
.pas-svetly .summary-item + .summary-item { border-left: 1px solid rgba(16, 40, 63, .1); }

/* Porovnání dat: tři čísla, oddělená jen linkou */
.station-comparison-box { padding: 24px 8px; }
.station-comparison-box .comp-col + .comp-col { border-left: 1px solid rgba(16, 40, 63, .08); }
.comp-col { border: 0 !important; }

/* ---------- Grafy (Chart.js) ---------- */
.chart-container { border-radius: var(--radius-l); }
.pas-svetly .chart-container { height: 420px; }
.mastnik-graf { height: 300px !important; margin-bottom: 12px; }

/* ---------- Hodinová předpověď: záložky dnů ---------- */
.forecast-tabs { gap: 10px; margin-bottom: 14px; }
.forecast-tab,
.forecast-tab:first-child,
.forecast-tab:last-child,
.forecast-tab:not(:last-child) {
    background: var(--glass);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    box-shadow: 0 8px 20px -16px rgba(16, 40, 63, .4);
    transition: background .2s, box-shadow .2s, transform .2s;
}
.forecast-tab:hover { background: #fff; transform: translateY(-1px); }
.forecast-tab.active {
    background: linear-gradient(135deg, #3d8ef0 0%, #1f6fd6 45%, #0c3a6b 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 14px 28px -14px rgba(31, 111, 214, .75) !important;
}
.forecast-tab.active img { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.new-forecast-wrapper { border-radius: var(--radius-l); }
.hourly-strip-column.night-column { background-color: rgba(16, 40, 63, .035); }
.hourly-strip-column.current-hour-col { background-color: rgba(31, 111, 214, .1); }

/* ---------- Radar ---------- */
.radar-container {
    border-radius: var(--radius-l) !important;
    overflow: hidden;
    border: 1px solid var(--glass-line) !important;
    box-shadow: var(--shadow-soft) !important;
    background: #dfe7ee;
}
.radar-iframe { display: block; width: 100%; height: 600px; border: 0; background: #dfe7ee; }

/* ---------- AI metrolog ---------- */
.pas-uzky .ai-predikce { max-width: none; padding-right: 380px; }
.pas-uzky .ai-predikce-robot { width: 350px; }

/* ---------- Mastník ---------- */
.mastnik-stav {
    display: flex; align-items: center; gap: 14px;
    width: max-content; max-width: 100%;
    margin: 0 auto 22px;
    padding: 10px 22px 10px 10px;
    border-radius: 999px;
    background: var(--glass-strong);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-soft);
}
.mastnik-stav-ikona {
    flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1em;
}
.mastnik-stav-text { display: flex; flex-direction: column; line-height: 1.3; }
.mastnik-stav-text strong { color: var(--ink); font-weight: 800; }
.mastnik-stav-text span { color: var(--ink-soft); font-size: .9em; }
.mastnik-souhrn { align-items: center; }
.mastnik-souhrn #image-box { display: flex; align-items: center; justify-content: center; }
.mastnik-souhrn .infographic-thumbnail { box-shadow: var(--shadow-soft); cursor: zoom-in; }

/* ---------- Kamery ---------- */
.webcam-embed-container { margin: 0; }
.webcam-embed-container iframe.kamera-iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;              /* do doby, než přehrávač pošle skutečnou výšku */
    height: auto;
    border: 0 !important;
    border-radius: 18px;
    background: transparent;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.webcam-embed-container iframe.kamera-iframe[style*="height"] { aspect-ratio: auto; }
.kamera-zdroj { font-size: .8rem; color: var(--ink-faint); text-align: center; margin: 12px 0 0; }

/* ---------- Mobil ---------- */
@media screen and (max-width: 800px) {
    .pas-svetly { margin-top: 44px; padding-bottom: 40px; }
    .pas-svetly > h2:first-child, .pas-svetly > #mastnik + h2 { margin-top: 36px; }
    .pas-svetly .chart-container { height: 340px; }
    .pas-svetly .summary-container { padding: 0; }
    .pas-svetly .summary-item { padding: 16px 4px; }
    .pas-svetly .summary-item + .summary-item { border-left: 0; border-top: 1px solid rgba(16, 40, 63, .1); }
    .station-comparison-box .comp-col + .comp-col { border-left: 0; border-top: 1px solid rgba(16, 40, 63, .08); }
    .radar-iframe { height: 460px; }
    .pas-uzky .ai-predikce { padding-right: 22px; }
    .pas-uzky .ai-predikce-robot { width: 240px; }
    .mastnik-graf { height: 260px !important; }
    .mastnik-stav { width: 100%; border-radius: 18px; }
    .webcam-embed-container iframe.kamera-iframe { border-radius: 14px; }
}

/* Nadpisy čitelné i přes fotku v horní části stránky */
h2 { text-shadow: 0 1px 14px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); }
h2 small { color: var(--ink-soft) !important; }
@media screen and (max-width: 600px) {
    .forecast-tab small { white-space: nowrap; }
    .forecast-tab small .temp-max { font-size: 1.05em; }
}

/* ---------- Mastník: velký obrázek jako u kamer, pod ním graf a texty ---------- */
.mastnik-obrazek {
    margin: 0 0 26px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: #0e1a26;
    line-height: 0;
}
.mastnik-obrazek img { display: block; width: 100%; height: auto; cursor: zoom-in; }
@media screen and (max-width: 800px) {
    .mastnik-obrazek { border-radius: 14px; margin-bottom: 18px; }
}
.mastnik-obrazek .infographic-thumbnail { width: 100% !important; max-width: none !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }

/* AI metrolog: široký pás, text ve dvou sloupcích na velké obrazovce (méně na výšku) */
.pas-ai { max-width: none; }
.pas-ai .ai-predikce { max-width: none; padding: 40px 400px 36px 44px; min-height: 300px; }
.pas-ai .ai-predikce-robot { width: 360px; right: 24px; }
@media screen and (min-width: 1100px) {
    .pas-ai .ai-predikce-text { column-count: 2; column-gap: 44px; }
    .pas-ai .ai-predikce-text p { break-inside: avoid; }
    .pas-ai .ai-predikce-pozdrav, .pas-ai .ai-predikce-podpis { column-span: all; }
}
@media screen and (max-width: 800px) {
    .pas-ai .ai-predikce { padding: 150px 22px 26px; }
    .pas-ai .ai-predikce-robot { width: 240px; right: 50%; }
}

/* Mastník: kompaktní řádek čísel místo dvou boxů */
.mastnik-obrazek { max-width: 880px; margin-left: auto; margin-right: auto; }
.mastnik-cisla {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 6px 0 0;
    background: var(--glass); border: 1px solid var(--glass-line);
    border-radius: 18px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.mastnik-cisla > div { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.mastnik-cisla > div + div { border-left: 1px solid rgba(16, 40, 63, .08); }
.mastnik-cisla span { font-size: .8rem; color: var(--ink-faint); font-weight: 600; }
.mastnik-cisla b { font-size: 1.15rem; color: var(--ink); font-weight: 800; }
.mastnik-cisla b .fa { font-size: .9em; margin-right: 4px; }
.mastnik-poznamka { font-size: .8rem; color: var(--ink-faint); text-align: center; margin: 14px 0 0; }
@media screen and (max-width: 700px) {
    .mastnik-cisla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mastnik-cisla > div:nth-child(3) { border-left: 0; }
    .mastnik-cisla > div:nth-child(n+3) { border-top: 1px solid rgba(16, 40, 63, .08); }
}

/* Radar přes celou šířku okna */
.radar-container {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    box-shadow: none !important;
}
.radar-iframe { height: 640px; }
@media screen and (max-width: 800px) { .radar-iframe { height: 480px; } }
@media screen and (max-width: 700px) { .mastnik-cisla b { font-size: 1rem; } }

/* ---------- Pod AI textem: z čeho AI vychází (řádek údajů, ne karty) ---------- */
.ai-podklady { margin: 18px 4px 0; }
.ai-podklady-nadpis {
    margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-faint);
}
.ai-podklady ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 28px;
}
.ai-podklady li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: .95rem; }
.ai-podklady li .fa {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(31, 111, 214, .1); color: var(--sky); font-size: .95rem;
}
.ai-podklady li span { display: flex; flex-direction: column; line-height: 1.25; }
.ai-podklady li small { font-size: .74rem; font-weight: 600; color: var(--ink-faint); }
@media screen and (max-width: 700px) {
    .ai-podklady ul { display: grid; grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Plánovač: hlavička bez krabic ---------- */
.planovac-intro {
    background: none !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    max-width: 1100px; min-height: 300px;
    margin: 10px auto 0; padding: 40px 440px 10px 8px;
}
.planovac-intro h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: 14px; }
.planovac-intro p { color: var(--ink); font-size: 1.08em; text-shadow: 0 1px 12px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9); max-width: 46ch; }
.planovac-intro .ai-predikce-robot { width: 400px; top: -40px; right: 10px; }

/* Aktivity jako řádek „pilulek“ */
.activity-selector-grid {
    display: flex !important; flex-wrap: wrap; gap: 10px;
    max-width: 1100px; margin: 18px auto 0; padding: 0 8px;
}
.activity-btn {
    display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 10px;
    width: auto !important; min-height: 0 !important;
    padding: 12px 20px 12px 14px !important;
    border-radius: 999px !important;
    background: var(--glass-strong) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-line) !important;
    box-shadow: 0 10px 24px -18px rgba(16, 40, 63, .55) !important;
    font-size: .98rem !important; font-weight: 700; color: var(--ink) !important;
    transition: background .2s, color .2s, transform .2s;
}
.activity-btn i {
    margin: 0 !important; font-size: 1rem !important;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(31, 111, 214, .1); color: var(--sky) !important;
}
.activity-btn:hover, .activity-btn.active {
    background: linear-gradient(135deg, #3d8ef0, #0c3a6b) !important;
    color: #fff !important; transform: translateY(-1px);
}
.activity-btn:hover i, .activity-btn.active i { background: rgba(255, 255, 255, .18); color: #fff !important; }

/* 6 hodin jako jeden pás rozdělený linkami */
.planovac-hodiny {
    gap: 0 !important;
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.planovac-hodina {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.planovac-hodina + .planovac-hodina { border-left: 1px solid rgba(16, 40, 63, .08) !important; }
.planovac-hodina:first-child { background: rgba(31, 111, 214, .07) !important; }

@media screen and (max-width: 800px) {
    .planovac-intro { padding: 230px 6px 6px; margin-top: 0; text-align: center; min-height: 0; }
    .planovac-intro .ai-predikce-robot { top: -10px; width: 240px; right: 50%; transform: translateX(50%); }
    .planovac-intro p { margin: 0 auto; }
    .activity-selector-grid { justify-content: center; }
    .activity-btn { padding: 10px 16px 10px 10px !important; font-size: .92rem !important; }
    .planovac-hodiny { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .planovac-hodina:nth-child(4) { border-left: 0 !important; }
    .planovac-hodina:nth-child(n+4) { border-top: 1px solid rgba(16, 40, 63, .08) !important; }
}
/* Plánovač – doladění: měkké světlo za textem (místo boxu), pilulky nad robotem */
.planovac-intro { isolation: isolate; }
.planovac-intro::before {
    content: ""; position: absolute; z-index: -1;
    left: -80px; top: -10px; width: 760px; height: 340px;
    background: radial-gradient(closest-side, rgba(243, 247, 251, .92), rgba(243, 247, 251, .75) 55%, rgba(243, 247, 251, 0));
    pointer-events: none;
}
.planovac-intro .ai-predikce-robot { top: -80px; width: 380px; }
.activity-selector-grid { position: relative; z-index: 2; }
@media screen and (max-width: 800px) {
    .planovac-intro::before { left: -20px; right: -20px; width: auto; top: 200px; height: 260px; }
    .planovac-intro .ai-predikce-robot { top: -10px; width: 240px; }
    .activity-selector-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
    .activity-btn { justify-content: flex-start; font-size: .86rem !important; padding: 8px 12px 8px 8px !important; }
    .activity-btn i { width: 30px; height: 30px; flex: 0 0 30px; }
}

/* Mastník: široký jako kamery, výška zůstává (obrázek se jen ořízne shora – informace jsou dole) */
.mastnik-obrazek { max-width: none; }
.mastnik-obrazek .infographic-thumbnail {
    aspect-ratio: var(--mastnik-ratio, 1.7778);
    height: auto !important;
    object-fit: cover;
    object-position: center bottom;
}
@media screen and (max-width: 800px) {
    .mastnik-obrazek .infographic-thumbnail { aspect-ratio: auto; object-fit: contain; }
}

/* ---------- AI metrolog v2: dnešek vedle robota (bez boxu), zbytek v nízkém širokém boxu ---------- */
.ai-hlavicka {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: end;
    gap: 24px;
    margin-top: 10px;
}
.ai-hlavicka-text { padding: 0 4px 22px; }
.ai-hlavicka-text p {
    margin: 0 0 .7em; color: var(--ink); font-size: 1.12rem; line-height: 1.65; max-width: 62ch;
}
.ai-hlavicka-text .ai-predikce-pozdrav {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: .4em;
}
.ai-hlavicka-robot { display: block; align-self: end; margin-bottom: -18px; position: relative; z-index: 2; pointer-events: none; }
.ai-hlavicka-robot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(16, 40, 63, .22)); }

.pas-ai .ai-predikce.ai-predikce-dalsi {
    position: relative; z-index: 1;
    margin: 0; min-height: 0;
    padding: 30px 34px 22px;
    max-width: none;
}
.ai-predikce-sloupce { column-count: 3; column-gap: 40px; }
.ai-predikce-sloupce p { break-inside: avoid; margin: 0 0 .8em; color: var(--ink-soft); line-height: 1.65; }
.ai-predikce-dalsi .ai-predikce-podpis { column-span: none; margin-top: .6em; }

@media screen and (max-width: 1000px) {
    .ai-predikce-sloupce { column-count: 2; }
    .ai-hlavicka { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media screen and (max-width: 700px) {
    .ai-hlavicka { grid-template-columns: 1fr; gap: 0; }
    .ai-hlavicka-robot { order: -1; width: 220px; margin: 0 auto -10px; }
    .ai-hlavicka-text { padding: 0 2px 18px; }
    .ai-hlavicka-text p { font-size: 1.02rem; }
    .ai-predikce-sloupce { column-count: 1; }
    .pas-ai .ai-predikce.ai-predikce-dalsi { padding: 22px 20px 18px; }
}
/* Sloupce v boxu AI oddělené jemnou svislou linkou */
.ai-predikce-sloupce { column-rule: 1px solid rgba(16, 40, 63, .1); column-gap: 56px; }
/* Údaje „Z čeho AI vychází“ také oddělené svislou linkou */
@media screen and (min-width: 701px) {
    .ai-podklady ul { gap: 10px 0; }
    .ai-podklady li { padding: 0 24px; }
    .ai-podklady li:first-child { padding-left: 0; }
    .ai-podklady li + li { border-left: 1px solid rgba(16, 40, 63, .1); }
}
#kamery, #mastnik-sekce { scroll-margin-top: 20px; }

/* AI: menší hlavní text, pod ním údaje „z čeho AI vychází“, teprve pak box */
.ai-hlavicka-text p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 66ch; }
.ai-hlavicka-text .ai-predikce-pozdrav { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); color: var(--ink); }
.ai-hlavicka-text .ai-podklady { margin: 18px 0 0; }
.ai-hlavicka { margin-bottom: 26px; }
.ai-hlavicka-robot { margin-bottom: -26px; }
@media screen and (min-width: 701px) {
    .ai-hlavicka-text .ai-podklady ul { gap: 12px 0; }
    .ai-hlavicka-text .ai-podklady li { padding: 0 18px; }
    .ai-hlavicka-text .ai-podklady li:first-child { padding-left: 0; }
}
.ai-hlavicka-text .ai-podklady ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px 40px; }
.ai-hlavicka-text .ai-podklady li { padding: 0 !important; border-left: 0 !important; }
.ai-hlavicka-text .ai-podklady-nadpis { font-size: .72rem; }
@media screen and (max-width: 700px) {
    .ai-hlavicka-text .ai-podklady ul { grid-template-columns: 1fr; gap: 12px; }
    .ai-hlavicka-robot { margin: 0 auto 6px !important; }
}

/* ---------- Archiv předpovědí: čísla v řádku + graf přímo v pásu ---------- */
.archiv-blok > h2:first-child { margin-top: 48px; }
.cisla-radek {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 0 18px;
    background: var(--glass); border: 1px solid var(--glass-line);
    border-radius: 18px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.cisla-radek > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.cisla-radek > div + div { border-left: 1px solid rgba(16, 40, 63, .08); }
.cisla-radek span { font-size: .78rem; color: var(--ink-faint); font-weight: 600; }
.cisla-radek b { font-size: 1.12rem; color: var(--ink); font-weight: 800; }
.archiv-blok .chart-container.archiv-graf {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0 !important; height: 420px;
}
@media screen and (max-width: 700px) {
    .cisla-radek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cisla-radek > div:nth-child(odd) { border-left: 0; }
    .cisla-radek > div:nth-child(n+3) { border-top: 1px solid rgba(16, 40, 63, .08); }
    .cisla-radek > div:last-child { grid-column: 1 / -1; }
    .cisla-radek b { font-size: 1rem; }
    .archiv-blok .chart-container.archiv-graf { height: 340px; }
}

/* ---------- Mobil: fotka v pozadí ukazuje levou část s radnicí ---------- */
@media screen and (max-width: 800px) {
    body { background-position: center top, 8% top !important; }
}

/* ---------- Mobil: žába s odstupem od nadpisu ---------- */
@media screen and (max-width: 800px) {
    .planovac-intro { padding-top: 275px; }
    .ai-hlavicka-robot { margin: 0 auto 22px !important; }
}

/* ---------- Cookie lišta ---------- */
.cookie-consent-text { font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
.cookie-consent-text strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
.cookie-consent-text em { font-style: normal; font-weight: 700; color: var(--ink); }
.paticka-spodek .cookie-nastaveni { text-decoration: underline; text-underline-offset: 3px; }
@media screen and (max-width: 600px) {
    #cookie-consent-banner { max-height: 60vh; overflow-y: auto; }
    .cookie-consent-text { font-size: .84rem; text-align: left; }
}

/* AI: menší podklady pod dnešním textem, žába vždy před boxem a trochu přes něj */
.ai-hlavicka-text .ai-podklady { margin-top: 14px; }
.ai-hlavicka-text .ai-podklady-nadpis { font-size: .68rem; margin-bottom: 8px; }
.ai-hlavicka-text .ai-podklady ul { gap: 10px 32px; }
.ai-hlavicka-text .ai-podklady li { font-size: .84rem; gap: 8px; }
.ai-hlavicka-text .ai-podklady li .fa { width: 26px; height: 26px; flex: 0 0 26px; font-size: .78rem; }
.ai-hlavicka-text .ai-podklady li small { font-size: .68rem; }
.pas-ai { isolation: isolate; }
.pas-ai .ai-hlavicka { position: relative; z-index: 3; }
.pas-ai .ai-hlavicka-robot { position: relative; z-index: 4; margin-bottom: -44px; }
.pas-ai .ai-predikce.ai-predikce-dalsi { position: relative; z-index: 1; padding-top: 34px; }
@media screen and (max-width: 700px) {
    .pas-ai .ai-hlavicka-robot { margin: 0 auto 22px !important; }
}
/* Podklady AI: všechny 4 vedle sebe v jednom řádku (na počítači) */
@media screen and (min-width: 701px) {
    .ai-hlavicka-text .ai-podklady ul { display: flex; flex-wrap: nowrap; gap: 0; }
    .ai-hlavicka-text .ai-podklady li { padding: 0 14px !important; border-left: 1px solid rgba(16, 40, 63, .1) !important; white-space: nowrap; }
    .ai-hlavicka-text .ai-podklady li:first-child { padding-left: 0 !important; border-left: 0 !important; }
    .ai-hlavicka-text .ai-podklady li { font-size: .8rem; }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
    .ai-hlavicka-text .ai-podklady ul { flex-wrap: wrap; gap: 10px 0; }
}

/* Podklady AI pod boxem: stejná šířka jako box, 4 sloupce, menší */
.pas-ai > .ai-podklady { margin: 16px 0 0; padding: 0 4px; }
.pas-ai > .ai-podklady .ai-podklady-nadpis { font-size: .68rem; margin-bottom: 8px; }
.pas-ai > .ai-podklady ul { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 !important; }
.pas-ai > .ai-podklady li { padding: 0 16px !important; border-left: 1px solid rgba(16, 40, 63, .1) !important; font-size: .82rem; gap: 8px; min-width: 0; }
.pas-ai > .ai-podklady li:first-child { padding-left: 0 !important; border-left: 0 !important; }
.pas-ai > .ai-podklady li .fa { width: 26px; height: 26px; flex: 0 0 26px; font-size: .78rem; }
.pas-ai > .ai-podklady li small { font-size: .68rem; }
@media screen and (max-width: 900px) {
    .pas-ai > .ai-podklady ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0 !important; }
    .pas-ai > .ai-podklady li:nth-child(3) { padding-left: 0 !important; border-left: 0 !important; }
}
@media screen and (max-width: 520px) {
    .pas-ai > .ai-podklady ul { grid-template-columns: 1fr; }
    .pas-ai > .ai-podklady li { padding: 0 !important; border-left: 0 !important; }
}
/* Podklady AI: rozložené přes celou šířku boxu (od levého po pravý okraj textu v boxu) */
@media screen and (min-width: 901px) {
    .pas-ai > .ai-podklady { padding: 0 34px; }
    .pas-ai > .ai-podklady ul { display: flex !important; justify-content: space-between; }
    .pas-ai > .ai-podklady li { flex: 0 1 auto; padding: 0 0 0 24px !important; }
    .pas-ai > .ai-podklady li:first-child { padding-left: 0 !important; }
}
.pas-ai > .ai-podklady { margin-top: 30px; }
.pas-ai > .ai-podklady .ai-podklady-nadpis { margin-bottom: 12px; }

/* Boxy o něco průhlednější */
:root {
    --glass: rgba(255, 255, 255, .58);
    --glass-strong: rgba(255, 255, 255, .7);
}
.pas-ai .ai-predikce.ai-predikce-dalsi { background: var(--glass) !important; }

/* ---------- Mastník: orientační ukázka stupňů (klidný vzhled, žádný poplach) ---------- */
.mastnik-ukazka {
    margin-top: 34px; padding: 24px 26px;
    background: var(--glass); border: 1px solid var(--glass-line);
    border-radius: var(--radius-l); box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mastnik-ukazka-hlavicka h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.mastnik-ukazka-hlavicka h3 .fa { color: var(--sky); margin-right: 6px; }
.mastnik-ukazka-hlavicka p { margin: 0 0 16px; color: var(--ink-soft); font-size: .92rem; }
.mastnik-ukazka-prepinac { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(16, 40, 63, .06); margin-bottom: 18px; }
.mastnik-ukazka-tlacitko {
    border: 0; background: transparent; cursor: pointer;
    padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s;
}
.mastnik-ukazka-tlacitko.aktivni { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(16, 40, 63, .12); }
.mastnik-ukazka-tlacitko .tecka { width: 9px; height: 9px; border-radius: 50%; }
.tecka-1 { background: #f2b705; } .tecka-2 { background: #f57c00; } .tecka-3 { background: #d64545; }
.mastnik-ukazka-obsah { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.mastnik-ukazka-obrazek { position: relative; margin: 0; border-radius: 14px; overflow: hidden; line-height: 0; }
.mastnik-ukazka-obrazek img { width: 100%; height: auto; display: block; }
.mastnik-ukazka-stitek {
    position: absolute; top: 10px; right: 10px; line-height: 1;
    padding: 6px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(255, 255, 255, .9); color: var(--ink);
}
.mastnik-ukazka-popis p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.6; }
.mastnik-ukazka-popis .mastnik-ukazka-nazev { font-weight: 800; font-size: 1.1rem; color: var(--ink); margin-bottom: 2px; }
.mastnik-ukazka-popis .mastnik-ukazka-hranice { font-size: .85rem; font-weight: 700; color: var(--ink-faint); }
.mastnik-ukazka-popis .mastnik-ukazka-pozn { font-size: .78rem; color: var(--ink-faint); margin-top: 14px; }
@media screen and (max-width: 800px) {
    .mastnik-ukazka { padding: 18px 16px; }
    .mastnik-ukazka-obsah { grid-template-columns: 1fr; gap: 14px; }
    .mastnik-ukazka-prepinac { display: flex; }
    .mastnik-ukazka-tlacitko { flex: 1; justify-content: center; padding: 8px 6px; }
}
.mastnik-ukazka-odkaz { margin: -12px 0 22px; text-align: right; font-size: .88rem; }
.mastnik-ukazka-odkaz a { color: var(--sky); font-weight: 700; text-decoration: none; }
.mastnik-ukazka-odkaz a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mastnik-ukazka-odkaz .fa { margin-right: 4px; }
.mastnik-ukazka[hidden] { display: none !important; }
.mastnik-obrazek + .mastnik-ukazka-odkaz + .mastnik-ukazka { margin: -6px 0 28px; }
@media screen and (max-width: 800px) { .mastnik-ukazka-odkaz { text-align: left; margin-top: -8px; } }

/* AI box: dva vzdušné sloupce místo tří natěsno */
.ai-predikce-sloupce { column-count: 2; column-gap: 64px; }
.ai-predikce-sloupce p { font-size: 1.02rem; line-height: 1.75; margin-bottom: 1em; }
@media screen and (max-width: 700px) { .ai-predikce-sloupce { column-count: 1; } }
/* AI článek: hlavní text vedle žáby čitelnější, box = dvě krátké vedlejší poznámky */
.ai-hlavicka-text p { font-size: 1.04rem; line-height: 1.72; margin-bottom: .9em; }
.ai-predikce-dalsi .ai-predikce-sloupce p { font-size: .95rem; color: var(--ink-soft); }

/* Plánovač: všech 6 aktivit v jednom řádku (na počítači), menší pilulky */
@media screen and (min-width: 1000px) {
    .activity-selector-grid { flex-wrap: nowrap !important; gap: 8px; justify-content: space-between; padding: 0; }
    .activity-btn {
        flex: 1 1 auto; justify-content: center;
        white-space: nowrap;
        padding: 8px 14px 8px 8px !important;
        font-size: .9rem !important; gap: 8px;
    }
    .activity-btn i { width: 30px; height: 30px; flex: 0 0 30px; font-size: .92rem !important; }
}
.activity-btn:disabled { cursor: progress; opacity: .7; }
.activity-btn.active:disabled { opacity: 1; }

/* AI: celý článek vedle žáby, v boxu pod ním jen „Z čeho AI vychází“ */
.ai-hlavicka-text .ai-predikce-podpis {
    margin-top: 1.1em !important; font-size: .9rem !important; font-weight: 700;
    color: var(--ink-faint) !important;
}
.pas-ai .ai-podklady-box { padding: 40px 34px 26px !important; }
.ai-podklady-box .ai-podklady { margin: 0; padding: 0; }
.ai-podklady-box .ai-podklady-nadpis { font-size: .7rem; margin-bottom: 12px; }
.ai-podklady-box .ai-podklady ul { display: flex !important; flex-wrap: nowrap; justify-content: space-between; gap: 0 !important; }
.ai-podklady-box .ai-podklady li { flex: 0 1 auto; min-width: 0; padding: 0 0 0 24px !important; border-left: 1px solid rgba(16, 40, 63, .1) !important; font-size: .9rem; gap: 10px; }
.ai-podklady-box .ai-podklady li:first-child { padding-left: 0 !important; border-left: 0 !important; }
.ai-podklady-box .ai-podklady li .fa { width: 32px; height: 32px; flex: 0 0 32px; font-size: .88rem; }
.ai-podklady-box .ai-podklady li small { font-size: .72rem; }
@media screen and (max-width: 900px) {
    .ai-podklady-box .ai-podklady ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0 !important; }
    .ai-podklady-box .ai-podklady li:nth-child(3) { padding-left: 0 !important; border-left: 0 !important; }
}
@media screen and (max-width: 520px) {
    .pas-ai .ai-podklady-box { padding: 24px 20px 20px !important; }
    .ai-podklady-box .ai-podklady ul { grid-template-columns: 1fr; }
    .ai-podklady-box .ai-podklady li { padding: 0 !important; border-left: 0 !important; }
}

/* ---------- Archiv: výběr data jako jedna skleněná lišta ---------- */
.date-selector { margin: 6px auto 0; }
.date-selector form {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 8px 8px 20px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--glass-line); border-radius: 999px;
    box-shadow: var(--shadow-soft);
}
.date-selector label { margin: 0; font-weight: 700; color: var(--ink); white-space: nowrap; }
.date-selector input[type=date] {
    margin: 0; height: 40px; padding: 0 12px;
    border: 1px solid rgba(16, 40, 63, .12); border-radius: 999px;
    background: #fff; color: var(--ink); font: inherit; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.date-selector .link-button { margin: 0 !important; height: 40px; padding: 0 18px !important; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px !important; white-space: nowrap; }
@media screen and (max-width: 560px) {
    .date-selector form {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
        width: 100%; padding: 12px; border-radius: 20px; text-align: left;
    }
    .date-selector label { grid-column: 1 / -1; font-size: .82rem; color: var(--ink-faint); padding-left: 4px; }
    .date-selector input[type=date] { width: 100%; min-width: 0; height: 44px; }
    .date-selector .link-button { height: 44px; padding: 0 16px !important; }
}

/* ---------- Mobil: grafy přes celou šířku displeje (bez zbytečných okrajů) ---------- */
@media screen and (max-width: 700px) {
    .pas .chart-container,
    .archiv-blok .chart-container.archiv-graf {
        margin-left: -14px !important; margin-right: -14px !important;
        width: auto !important; max-width: none !important;
        padding-left: 0 !important; padding-right: 0 !important;
        margin-bottom: 12px !important;
    }
}
/* Graf vyplní celou výšku svého rámu (staré pravidlo height:auto nechávalo prázdné místo) */
.chart-container canvas { height: 100% !important; }
@media screen and (max-width: 700px) {
    .pas .chart-container { height: 300px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
}

/* AI: hlavní text o kousek menší, údaje „Z čeho AI vychází“ o kousek větší */
.pas-ai .ai-hlavicka-text p { font-size: .96rem !important; line-height: 1.66 !important; }
.pas-ai .ai-hlavicka-text .ai-predikce-pozdrav { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem) !important; }
.pas-ai .ai-hlavicka-text .ai-predikce-podpis { font-size: .86rem !important; }
.ai-podklady-box .ai-podklady-nadpis { font-size: .76rem; margin-bottom: 14px; }
.ai-podklady-box .ai-podklady li { font-size: 1.02rem; gap: 12px; }
.ai-podklady-box .ai-podklady li .fa { width: 40px; height: 40px; flex: 0 0 40px; font-size: 1.05rem; }
.ai-podklady-box .ai-podklady li small { font-size: .8rem; }

/* Patička: odkaz na Facebook */
.paticka-facebook {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 18px; padding: 8px 20px 8px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    color: #fff !important; text-decoration: none !important;
    transition: background .2s, transform .2s;
}
.paticka-facebook:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.paticka-facebook-ikona {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #1877f2; color: #fff; font-size: 1.25rem;
}
.paticka-facebook-text { display: flex; flex-direction: column; line-height: 1.25; }
.paticka-facebook-text b { font-size: .95rem; font-weight: 800; color: #fff; }
.paticka-facebook-text small { font-size: .78rem; color: rgba(255, 255, 255, .72); }