/* static/css/style.css (FINALIZOVANÁ VERZE s odstraněnou syntaktickou chybou) */

/* ============================================== */
/* 1. GLOBÁLNÍ ZÁKLAD A BARVY */
/* ============================================== */

:root {
    --primary-red: #E70012; 
    --secondary-dark: #212529; /* Tmavá barva (černá/šedá) */
    --text-muted: #6c757d; 
    --light-grey: #ffffff; 
}

body {
    font-family: 'Sora', sans-serif; /* ZMĚNĚNO NA 'Sora' */
    background-color: var(--light-grey); 
    color: var(--secondary-dark);
}

/* Globální vynulování zaoblení */
.btn, .card, .form-control, .form-select, .input-group-text, .rounded, .rounded-3, .rounded-lg {
    border-radius: 0 !important;
}
.card { overflow: hidden; }
.bg-light, .bg-white { background-color: white !important; }
.text-muted { color: var(--text-muted) !important; }

/* VYNUCENÍ ČERVENÉ BARVY */
.bg-warning { background-color: var(--primary-red) !important; }
.text-danger, .text-warning { color: var(--primary-red) !important; }
.btn-warning {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #fff !important; 
    box-shadow: none !important; 
}
.btn-warning:hover {
    background-color: #C5000F !important;
    border-color: #C5000F !important;
}

/* --- NAVIGACE - TRANSPARENTNÍ A S LINKOU --- */
/* Vynucení tmavého pozadí pro celou navigaci (pro podstránky) */
.navbar {
    background-color: var(--secondary-dark) !important; /* Základní pozadí pro všechny stránky, kde není slider */
    transition: all 0.3s ease;
}

/* Styl pro odkazy (default: bílé na tmavém pozadí) */
.navbar-nav .nav-link {
    color: white !important;
    font-weight: 700;
    text-shadow: none;
    transition: color 0.2s ease-in-out;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-red) !important;
}

/* --- STYL PRO HOMEPAGE (TRANSPARENTNÍ) --- */

/* Selektor, který cílí POUZE na navigaci na úvodní straně */
/* Používáme třídu .bg-white z base.html a vynucujeme transparentnost a bílý text */
.navbar.bg-white {
    background-color: transparent !important; /* VYNUCENÍ TRANSPARENTNOSTI */
    border-bottom: 2px solid var(--primary-red);
    box-shadow: none !important;
}

/* Textové efekty pro navigaci PŘES SLIDER */
.navbar.bg-white .navbar-nav .nav-link {
    color: white !important; /* BÍLÝ TEXT NA OBRÁZKU */
}
.navbar.bg-white .navbar-brand img {
    /* Můžete zde aplikovat bílé logo, pokud je potřeba */
}

/* ============================================== */
/* 2. FIX HERO SEKCE (KONEČNÉ ZAROVNÁNÍ A KOMPAKTNOST) */
/* ============================================== */

/* Centrování popisku slideru (textu) - Vertikální centrování a šířka */
#hero-slider .carousel-caption {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    display: flex; 
    align-items: center; /* Svisle vycentrovat obsah */
    z-index: 5; 
    text-align: left; /* Nastavíme zarovnání kontejneru na levou stranu */
}

/* Kontejner, který drží text a tlačítka - Posun doleva/do středu */
#hero-slider .carousel-caption .container {
    max-width: 600px; 
    
    /* KLÍČOVÁ ZMĚNA: Použijeme pevnou šířku a odsazení, abychom text posunuli k volnému místu */
    width: 60%; /* Omezíme šířku bloku pro text */
    margin-right: 40% !important; 
    margin-left: 5% !important;
    
    padding-top: 50px; 
    padding-bottom: 50px; 
    text-align: left !important;
}

#hero-slider .carousel-control-prev,
#hero-slider .carousel-control-next {
    z-index: 100; /* Zvýšení priority, aby se nic nepřekrývalo */
}

/* Zajištění, že textové elementy jsou zarovnány vlevo */
#hero-slider .carousel-caption h1, 
#hero-slider .carousel-caption p {
    text-align: left !important; /* Zarovnání na levou stranu */
    margin-left: 0;
    margin-right: 0;
}

/* Zarovnání tlačítek vlevo */
#hero-slider .carousel-caption .d-grid.d-sm-flex {
    justify-content: flex-start !important; /* KLÍČOVÉ: Zarovnání tlačítek vlevo */
    margin-top: 20px;
}

/* KONTURA KAMIONU: Pozice kamionu, aby nepřekrýval text */
.truck-foreground {
    position: absolute;
    bottom: 50px; 
    right: 15%; /* Posuneme kamion mírně doprava */
    transform: none; /* Odstraníme centrovací transform */
    height: 100%; 
    max-height: 70vh; 
    max-width: 55%; 
    z-index: 4; 
    pointer-events: none; 
}
.truck-foreground img {
    height: 100%; 
    object-fit: contain;
    transform: none; 
    opacity: 0.95; 
}

/* Zajištění, že obrázek pozadí je posunut nahoru */
#hero-slider .carousel-item {
    background-size: cover; 
    background-position: center 30% !important; 
}

/* ============================================== */
/* 3. STYLY SLUŽEB A ČASOVÉ OSY */
/* ============================================== */

/* KONTURA NA TLAČÍTKU ČÍST VÍCE */
.service-block .btn-warning {
    box-shadow: 0 0 0 2px white, 0 0 0 3px var(--primary-red) !important;
    transition: all 0.2s ease-in-out;
    padding: 8px 20px !important; 
    font-weight: 700;
}
.service-block .btn-warning:hover {
    box-shadow: 0 0 0 1px white, 0 0 0 2px #C5000F !important;
}

/* Styl pro velký kontejner služby (Alternativa) */
.service-block {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    background-color: var(--secondary-dark); 
    color: white;
}
.service-block .service-number {
    position: absolute;
    top: 50%; right: 0; transform: translateY(-50%);
    font-size: 150px; font-weight: 900;
    color: rgba(255, 255, 255, 0.05); 
    z-index: 1;
}
.service-block .service-content {
    position: relative;
    z-index: 2;
    padding: 30px;
}
.service-block .fa-4x { color: var(--primary-red); }

/* STYLY PRO ČASOVOU OSU */
.timeline-pill { position: relative; padding-right: 20px; }
.timeline-pill:before {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
    background-color: var(--primary-red); 
}
.timeline-pill .timeline-date {
    font-size: 1.4rem; font-weight: 800; color: var(--primary-red); 
    position: relative; padding-right: 15px; margin-bottom: 20px; display: block; text-align: right;
}
.timeline-pill .timeline-date:after {
    content: ''; position: absolute; top: 50%; right: -7px; width: 14px; height: 14px;
    background-color: white; border: 3px solid var(--primary-red); 
    border-radius: 50%; transform: translateY(-50%); z-index: 10;
}
.timeline-pill .timeline-title {
    font-size: 1.1rem; font-weight: 700; color: var(--secondary-dark);
    text-align: right; margin-top: -10px; /* ZDE JE PROBLÉM */
}
.page-header-banner {
    min-height: 250px;
    height: auto;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Filtr aplikován přímo na header pro jemný efekt */
    filter: brightness(1.1) contrast(1.1); 
    transition: filter 0.3s ease;
}

/* Oprava překrytí: Použijeme méně tmavé překrytí (opacity), aby obrázek prosvítal */
.page-header-banner .bg-dark.opacity-50 {
    opacity: 0.35 !important; /* Mírné ztmavení */
    background-color: var(--secondary-dark) !important; 
    /* Použijeme CSS filtr pro dosažení jemného efektu teček */
    background-image: radial-gradient(rgba(0,0,0,0.1) 1px, transparent 0);
    background-size: 5px 5px;
    filter: none; /* Odstranit filtr z vrstvy, aby ho měl jen obrázek */
}

/* Přidáme ještě jeden text-shadow pro silný kontrast H1 */
.page-header-banner h1, .page-header-banner p {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Silnější stín pro dominantní text */
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; /* Pro starší prohlížeče a vynucení */
}

/* Styl pro nadpis (dominantní a vycentrovaný) */
.page-header-banner h1 {
    font-weight: 900 !important; /* Velmi tučný */
    font-size: 3.5rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
    position: relative;
    z-index: 15; /* Nad všemi překryvy */
}

/* Breadcrumbs pod nadpisem */
.page-header-banner p {
    position: relative;
    z-index: 15;
    font-size: 0.9rem;
}
.page-header-banner .container { height: 100%; }


/* ============================================== */
/* 4. STYLY PRO STATISTIKY (STATS BOXES) - FINÁLNÍ VERZE */
/* ============================================== */

/* Základní styl pro blok statistik */
.stats-block {
    background-color: var(--secondary-dark); 
    color: white;
    padding: 30px 20px;
    min-height: 150px;
    box-shadow: none;
    transform: none;
    transition: none; 
    text-align: center; 
}

/* Zajištění, že se sloupce ve Flexboxu roztáhnou na stejnou výšku (v HTML už máte h-100) */
#stats-boxes .row {
    align-items: stretch; /* Klíčové pro zarovnání výšky boxů */
}

/* Odesazení pro čísla a popis */
#stats-boxes .stats-block h2 {
    color: var(--primary-red) !important;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 5px;
}

#stats-boxes .stats-block p {
    color: #cccccc;
}

/* DĚLÍCÍ OKRAJE A OPRAVA MEZER */
.stats-block {
    /* Standardní pravý okraj pro oddělení boxů */
    border-right: 1px solid rgba(255, 255, 255, 0.1); 
}

/* Odstranění pravého okraje u posledního boxu (pro lichý počet) */
.stats-block:last-child {
    border-right: none;
}

/* Oprava: Na mobilu se odděluje dolů a ne doprava */
@media (max-width: 768px) {
    #stats-boxes .stats-block {
        border-right: none !important; /* Zrušíme pravý okraj */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Přidáme spodní okraj */
    }
}

/* Vynucení pozadí navigace, když není zobrazen Hero Slider */
body:not(:has(#hero-slider)) .navbar-dark {
    position: relative !important; /* Zruší absolutní pozici (nepřekrývá obsah) */
    background-color: var(--secondary-dark) !important; /* Vynutí tmavé pozadí */
    border-bottom: none; /* Odstraní červenou linku pro podstránky, pokud je na tmavém pozadí */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
}
body:not(:has(#hero-slider)) .navbar-dark .nav-link {
    color: white !important; /* ZMĚNĚNO: POUŽIJEME BÍLOU I ZDE PRO KONTRAST S TM. POZADÍM */
    text-shadow: none !important;
}

/* VYNUCENÍ ČERVENÉ BARVY */
.bg-warning, .bg-danger { background-color: var(--primary-red) !important; } /* PŘIDÁNÍ .bg-danger */
.text-danger, .text-warning { color: var(--primary-red) !important; }

/* Zajistíme, že tlačítko Danger je také červené */
.btn-danger {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #fff !important; 
    box-shadow: none !important; 
}
.btn-danger:hover {
    background-color: #C5000F !important;
    border-color: #C5000F !important;
}

/* Třída pro tlačítko, které se primárně používá jinde (např. v patičce/těle) */
.btn-warning {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: #fff !important; 
    box-shadow: none !important; 
}
.btn-warning:hover {
    background-color: #C5000F !important;
    border-color: #C5000F !important;
}

/* Oprava barvy dropdownu (Dropdown musí být vždy bílý s tmavým textem) */
.dropdown-menu {
    background-color: white; 
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.dropdown-menu .dropdown-item {
    color: var(--secondary-dark) !important; 
    font-weight: 500;
}
.dropdown-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--primary-red) !important;
}


/* --- OPRAVA TLAČÍTKA KONTAKT (Ujistíme se, že je červené) --- */
.navbar .btn-danger {
    background-color: var(--primary-red) !important;
    border-color: var(--primary-red) !important;
    color: white !important;
}

/* --- Styling pro obrázek v sekci "O nás" na Home Page --- */

.image-about-us-wrapper {
    position: relative; 
    overflow: hidden; 
    border-radius: 0; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
    
    /* KLÍČOVÁ ZMĚNA: Nastavte pevnou výšku pro kompaktnější vzhled */
    max-height: 400px; /* Omezí výšku kontejneru */
}

.image-about-us-wrapper img {
    display: block; 
    width: 100%;
    /* Ujistíme se, že se obrázek ořízne na výšku kontejneru */
    height: 100%;
    object-fit: cover; /* KLÍČOVÉ: Zajistí pokrytí celého prostoru s oříznutím */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out; 
    filter: brightness(0.98); 
    border-radius: 0;
}

.image-about-us-wrapper:hover img {
    transform: scale(1.03); /* Mírné zvětšení při najetí myši */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); 
    filter: brightness(1.02); 
}

.image-about-us-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, rgba(220, 53, 69, 0.1), rgba(33, 37, 41, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.image-about-us-wrapper:hover::before {
    opacity: 1;
}

#o-nas-uvod .row.align-items-center {
    align-items: center; 
}

/* VYNUCENÍ SPRÁVNÉHO ZOBRAZENÍ FONT AWESOME IKON */
.fa, .fas, .far, .fal, .fad, .fab {
    /* Toto zajistí, že se ikony zobrazí, i když je v jiném CSS přebito pravidlo font-family: */
    font-family: 'Font Awesome 6 Free' !important; 
    font-weight: 900; 
    display: inline-block;
}
/* Tučnost pro styl FAS (Solid) */
.fas {
    font-weight: 900; 
}

/* ============================================== */
/* 5. FIXY PRO KONTAKTY (NA ZÁKLADĚ SNÍMKU) */
/* ============================================== */

/* Cíl: Zajistit zarovnání textu na levou stranu a čitelnost */
.contact-card-item {
    /* Ujistíme se, že veškerý text je v tomto bloku zarovnán vlevo */
    text-align: left; 
    padding: 15px 0;
    border-bottom: 1px solid #eee; /* Optické oddělení kontaktů */
}

/* Styl pro Jméno a Pozici */
.contact-card-item .jmeno {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-dark);
    margin-bottom: 3px; /* Malá mezera pod jménem */
    display: block;
}

.contact-card-item .pozice {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 10px; /* Mezera před kontakty */
    display: block;
}

/* Styl pro telefon/email (zvýraznění) */
.contact-card-item .kontakt-info {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-red);
    margin-bottom: 3px;
    display: block; /* Každý kontakt na nový řádek */
}

/* Odsazení pod celým oddělením */
.contact-department {
    margin-bottom: 30px; 
}

/* ============================================== */
/* 6. MEDIA QUERIES (FIX PRO MOBILNÍ ZAŘÍZENÍ) */
/* ============================================== */

@media (max-width: 768px) {
    /* Zmenšení hlavního nadpisu (H1) pro menší obrazovky */
    .page-header-banner h1 {
        font-size: 2rem !important; /* Zmenší H1 na polovinu */
        letter-spacing: 0;
    }

    /* Zmenšení písma v HERO sekci, aby se vešlo */
    #hero-slider .carousel-caption h1 {
        font-size: 2.5rem;
    }
    
    /* V mobilu má být text slideru plná šířka */
    #hero-slider .carousel-caption .container {
        width: 90% !important; 
        margin: 0 auto !important; /* KLÍČOVÉ: Přepis margin-left a margin-right */
        text-align: center !important; /* Přepis text-align: left */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Centrování textu v slideru */
    #hero-slider .carousel-caption h1, 
    #hero-slider .carousel-caption p {
        text-align: center !important; 
        /* Musíme resetovat i případné marginy, které tlačí text ven */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Tlačítka pod sebou a centrování */
    #hero-slider .carousel-caption .d-grid.d-sm-flex {
        justify-content: center !important; /* Centrování tlačítek */
    }

    /* Skrytí kamionu v mobilní verzi, aby nepřekážel */
    .truck-foreground {
        display: none !important; 
    }
    
    /* Oprava mezery u statistik */
    .stats-block {
        border-right: none !important; /* Na mobilu se border-right zruší */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Místo toho se přidá dolů */
    }
}
/* Konec media query je zde! */

/* Styling pro kontakty v kartách: Zvýraznění Telefonu */
.list-group-item .fw-bold.text-dark {
    /* Mírné zvětšení a zvýraznění, aby telefonní číslo dominovalo */
    font-size: 1.05rem;
    color: var(--primary-red) !important; /* Červená barva pro kontakty */
}

/* ============================================== */
/* 7. RESPOZIVNÍ IFRAME CONTAINER (PRO REZERVACE) */
/* ============================================== */

.iframe-container {
    position: relative;
    width: 100%;
    height: 900px; 
    overflow: hidden;
    margin: 30px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .iframe-container {
        height: 600px; 
    }
}