/* ============================================
   RESPONSIVE — Mobile Breakpoints
   ============================================ */

/* Tablet — max 768px */
@media (max-width: 768px) {

    /* Header — hide nav, show hamburger */
    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--color-border);
        padding: 1rem 0;
        flex-direction: column;
        z-index: 999;
    }

    .header-nav.active {
        display: flex;
    }

    .header-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .header-nav ul li a {
        padding: 1rem 1.5rem;
        display: block;
        border-bottom: 1px solid var(--color-border);
        font-size: 1rem;
    }

    .menu-toggle {
        display: flex;
    }

    /* Layout */
    .site-content {
        padding: 1rem;
    }

    .page-header {
        padding: 2rem 0 1.5rem;
    }

    .page-header h1 {
        font-size: 1.75rem;
    }

    /* Promo Banner */
    .promo-banner {
        font-size: 0.55rem;
        padding: 0.3rem 0.5rem;
        letter-spacing: 0;
    }

    /* Header Icons */
    .header-icons {
        gap: 0.5rem;
    }

    .site-logo-img {
        height: 28px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* Sbalitelné sekce patičky.
       Rozbalená patička měřila na telefonu přes 1 400 px: tři sloupce pod sebou,
       každý odkaz na vlastním řádku. Sekce se proto sbalí a otevřou klepnutím.
       Odkazy zůstávají v HTML (vyhledávače i čtečky je vidí), skrývá je jen CSS;
       bez JS zůstane patička rozbalená jako dřív. */
    .footer-heading.je-sbalitelna {
        position: relative;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.9rem 2rem 0.9rem 0;
        background: none;
        border: 0;
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        color: inherit;
        font: inherit;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        user-select: none;
    }

    .footer-heading.je-sbalitelna::after {
        content: "";
        position: absolute;
        right: 0.5rem;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--transition);
    }

    .footer-heading.je-sbalitelna[aria-expanded="true"]::after {
        transform: rotate(-135deg);
        margin-top: -2px;
    }

    .footer-links.je-sbalena {
        display: none;
    }

    /* Odkazy v rozbalené sekci vlevo pod nadpisem, ne na střed — sekce se pak
       čte jako menu, ne jako odstavec. */
    .footer-links.je-rozbalena {
        padding: 0.5rem 0 1rem;
        text-align: left;
    }

    /* Sekce na sebe musí navazovat, aby dělicí čáry vypadaly jako jeden seznam.
       Mezera 1.5rem výše platí pro celý grid, tady ji pro sekce rušíme. */
    .footer-col:not(:first-child) {
        margin-top: -1.5rem;
    }

    .footer-col:first-child {
        margin-bottom: 0.5rem;
    }

    /* Platební loga se na 390 px lámala 4 + 1 a Google Pay zůstal viset sám
       na druhém řádku. Comgate má vlastní řádek — je to poskytovatel brány,
       ne platební metoda, takže to sedí i významově — a čtyři karty se pod něj
       vejdou pohodlně (65 + 37 + 52 + 52 px). Změřeno 29. 8. 2026. */
    .footer-payments-logos {
        gap: 0.75rem 1.25rem;
    }

    .footer-payments-logos > li:first-child {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
    }

    /* Cookie Bar */
    .cookie-consent-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .cookie-consent-buttons {
        width: 100%;
        justify-content: center;
    }

    .btn-cookie,
    .btn-cookie-outline {
        font-size: 0.7rem;
        padding: 0.5rem 1rem;
    }

    /* Contact page */
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile — max 480px */
@media (max-width: 480px) {

    /* Header */
    .header-top-inner {
        padding: 0.5rem 0.75rem;
    }

    .site-logo-img {
        height: 24px;
    }

    /* Buttons full width */
    .btn {
        width: 100%;
        text-align: center;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    /* Error 404 */
    .error-404 h1 {
        font-size: 4rem;
    }
}