/* ===================================================
   INTERLOG GmbH – Mobile Responsive CSS
   Optimalizace pro mobilni telefony (max 768px)
   =================================================== */

/* ===== VIEWPORT META FIX ===== */
/* viewport je jiz v HTML, zde jen dopln responsive chovani */

@media (max-width: 768px) {

    /* ===== ZAKLADNI LAYOUT ===== */
    body {
        padding-top: 20px !important;
        padding-bottom: 60px !important;
        overflow-x: hidden !important;
    }

    /* Stranky s hero videem potrebuji vetsi padding (header je vyssi) */
    body.has-hero {
        padding-top: 0 !important;
    }

    #wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #contentwrap {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #content {
        margin: 5px !important;
        padding: 5px !important;
    }

    /* ===== HEADER ===== */
    #headerwrap {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 2000 !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important;
    }

    #header {
        padding: 12px 16px 0 !important;
        max-width: 100% !important;
    }

    /* ===== LOGO ===== */
    .logo-wrap {
        margin-bottom: 10px !important;
        gap: 10px !important;
    }

    #header img.logo-img {
        height: 75px !important;
        width: auto !important;
    }

    /* ===== HAMBURGER MENU ===== */
    #mobile-menu-toggle {
        display: flex !important;
        position: absolute;
        top: 12px;
        right: 16px;
        width: 38px;
        height: 38px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        z-index: 3000;
        background: none;
        border: none;
        padding: 0;
    }

    #mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #1a2a3a;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    #mobile-menu-toggle.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    #mobile-menu-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    #mobile-menu-toggle.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ===== NAVIGACE - mobilni dropdown ===== */
    #header nav {
        max-height: 0 !important;
        overflow: hidden !important;
        border-top: none !important;
        padding: 0 !important;
        background: #fff;
        transition: max-height 0.3s ease !important;
    }

    #header nav.open {
        max-height: 400px !important;
        border-top: 1px solid #e8f0f5 !important;
    }

    #header nav ul {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #header nav ul li {
        border-bottom: 1px solid #f0f5f8 !important;
        width: 100% !important;
    }

    #header nav ul li:last-child {
        border-bottom: none !important;
    }

    #header nav ul li h2 a {
        display: block !important;
        padding: 13px 20px !important;
        font-size: 12px !important;
        text-align: left !important;
        letter-spacing: 1.5px !important;
        border-bottom: none !important;
    }

    #header nav ul li h2 a:hover,
    #header nav ul li.active h2 a {
        background: #f0f8ff !important;
        border-bottom: none !important;
        border-left: 3px solid #4ab4e0 !important;
        padding-left: 17px !important;
    }

    /* ===== HERO SEKCE ===== */
    /* Zrusit fixed pozicovani hero na mobilu */
    #hero,
    body.has-hero #hero {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 100px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
        z-index: 0 !important;
        overflow: hidden !important;
    }

    /* Video uvnitr hero - spravne pokryti */
    #hero video,
    body.has-hero #hero video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        transform: translate(-50%, -50%) !important;
        object-fit: cover !important;
        object-position: center center !important;
        filter: none !important;
        scale: 1 !important;
        z-index: 0 !important;
    }

    /* Zrusit fixed text nad hero */
    body.has-hero #hero .hero-text {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        z-index: 2 !important;
    }

    /* Overlay zpet zobrazit */
    body.has-hero #hero .hero-overlay {
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
    }

    /* Wrapper neni pruhledny */
    body.has-hero #wrapper {
        background: #fff !important;
    }

    /* Obsah hned pod hero - bez velkého margin-top */
    body.has-hero #contentwrap {
        margin-top: 0 !important;
        background: #ffffff !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Spacer nepotrebujeme */
    .hero-section-spacer {
        height: 0 !important;
        display: none !important;
    }

    /* Tmave pozadi za strankou pryc */
    body.has-hero::before {
        display: none !important;
    }

    #hero .hero-text h2 {
        font-size: 22px !important;
        letter-spacing: 3px !important;
        margin-bottom: 8px !important;
    }

    #hero .hero-text .hero-tagline {
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }

    /* ===== TYPO A OBSAH ===== */
    h3 {
        font-size: 18px !important;
        margin: 20px 0 0 10px !important;
    }

    #content p, #content li {
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    /* ===== DASHED BOXY ===== */
    .dashed {
        padding: 10px !important;
        margin: 10px 5px !important;
    }

    /* ===== OFFERS + CIRCLE SEKCE ===== */
    .offers-wrap {
        flex-direction: column !important;
    }

    .dashed.offers {
        width: auto !important;
        float: none !important;
    }

    .circle-truck {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .circle-icons {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 20px 20px !important;
        background: #f0f8ff;
        border-radius: 8px;
        margin: 0 5px;
    }

    .circle-icon-item span {
        font-size: 10px !important;
    }

    /* ===== WOHIN FAHREN WIR - mapa ===== */
    .drive {
        padding: 10px !important;
        height: auto !important;
        min-height: 180px !important;
        background-size: 180px auto !important;
        background-position: right bottom !important;
    }

    /* ===== WICHTIG GRID - 1 sloupec na mobilu ===== */
    .wichtig-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .wichtig-item {
        padding: 14px !important;
    }

    /* ===== KONTAKT - left/right float ===== */
    .left, .right {
        width: 100% !important;
        float: none !important;
    }

    /* ===== SEZNAM - arrow odsazeni ===== */
    li {
        padding-left: 36px !important;
        background-size: 20px 20px !important;
    }

    /* ===== SPONZORING FOTKY ===== */
    .sponzoring a {
        float: none !important;
        display: block !important;
        text-align: center !important;
        margin: 5px auto !important;
    }

    .sponzoring img {
        width: 90% !important;
        max-width: 300px !important;
    }

    /* ===== MAPA ===== */
    .map {
        height: 250px !important;
    }

    /* ===== ROAD STRIPE ===== */
    #road-stripe {
        height: 28px !important;
    }

    /* ===== FUHRPARK GALERIE ===== */
    .fuhrpark-grid,
    .gallery-grid,
    .fuhrpark-gallery {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .fuhrpark-gallery a img {
        height: 220px !important;
    }

    /* ===== TABULKY ===== */
    table {
        width: 100% !important;
        font-size: 13px !important;
    }

    /* ===== HVO / OBRAZKY S TEXTEM ===== */
    .left img, .right img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* ===== CONTACTS – kontakt.html ===== */
    .contacts-wrapper {
        height: auto !important;
    }

    /* Zrusit float: left z tridy .left na ul.contacts */
    ul.contacts.left {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Kontaktni seznam - zrusit arrow padding, nahradit jednoduchym */
    .contacts li {
        font-size: 15px !important;
        line-height: 24px !important;
        padding-left: 0 !important;
        background: none !important;
        margin-top: 6px !important;
    }

    /* Vnorene ul.second-level */
    .contacts ul.second-level {
        margin: 2px 0 6px 12px !important;
        list-style: none !important;
    }

    .contacts ul.second-level li {
        padding-left: 0 !important;
        background: none !important;
        margin-top: 2px !important;
        font-size: 15px !important;
    }

    /* Mapa - plna sirka, nepreteka */
    #map1,
    .map {
        width: 100% !important;
        max-width: 100% !important;
        height: 240px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Wrapper mapy v li - zrusit padding */
    .contacts li:has(#map1) {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Dashed box na kontakt strance */
    .contacts ~ .cls,
    .dashed .cls {
        clear: both !important;
    }

    /* ===== FB BOX ===== */
    #fb-box {
        width: 100% !important;
        max-width: 320px !important;
    }

    /* ===== CERTIFIKATY / PDF LINKY ===== */
    a[href$=".pdf"] {
        display: block;
        padding: 8px 0;
    }

    /* ===== KONTAKT - nadpis nize ===== */
    .page-kontakt {
        padding-top: 70px !important;
    }

    /* ===== FUHRPARK - nadpis nize ===== */
    .page-fuhrpark {
        padding-top: 50px !important;
    }

    /* ===== TRANSPORT - tlacitko nize ===== */
    .cert-wrap {
        padding-top: 50px !important;
        margin-bottom: 16px !important;
    }

    /* ===== TRANSPORT STRANKA ===== */
    /* Tlacitko Bescheinigung - centrovane */
    .cert-btn {
        display: inline-block !important;
        background: #4ab4e0 !important;
        color: #fff !important;
        padding: 10px 28px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
    }

    .cert-wrap {
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fotky pod sebou misto flex radku */
    .transport-photos {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .transport-photos > div {
        flex: none !important;
        width: 100% !important;
        min-height: unset !important;
        max-height: unset !important;
        height: auto !important;
    }

    .transport-photos > div img {
        height: auto !important;
        object-fit: unset !important;
    }
}

/* ===== EXTRA MALE TELEFONY (max 380px) ===== */
@media (max-width: 380px) {
    #header img.logo-img {
        height: 44px !important;
    }

    #hero .hero-text h2 {
        font-size: 20px !important;
        letter-spacing: 2px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    .circle-icons {
        padding: 14px !important;
    }

    .wichtig-item h4 {
        font-size: 13px !important;
    }
}

/* ===== TABLET (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    #wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }

    #contentwrap {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    #header {
        padding: 14px 24px 0 !important;
    }

    .wichtig-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .drive {
        padding: 10px 320px 10px 10px !important;
    }

    #hero .hero-text h2 {
        font-size: 42px !important;
    }

    /* Viewport meta fix pro tablet */
    #header img.logo-img {
        height: 80px !important;
    }
}

/* ===== HAMBURGER SKRYT NA DESKTOPU ===== */
@media (min-width: 769px) {
    #mobile-menu-toggle {
        display: none !important;
    }

    #header nav {
        display: block !important;
    }
}