/**
 * eLfilms.cz - Responzivní styly pro stránku Právní informace (Cookies)
 * 
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/cookies-responsive.css
 * @version    4.1 - Standards fix
 * @datum      Březen 2026
 * @author     eLfilms Team
 * @copyright  2009-2026 eLfilms.cz
 * 
 * Responzivní přizpůsobení pro různá zařízení:
 * - Mobily: 1 sloupec, obrázek nahoře centrovaný, obsah dole
 * - Tablety portrait: 1 sloupec, centrované
 * - Tablety landscape: grid layout zachován
 * - Desktopy: plný layout (grid 2 sloupce)
 * 
 * Breakpointy: 359px, 360px, 479px, 767px, 991px, 1199px, 1279px
 * 
 * POUŽÍVÁ:
 * - cookies.php
 * - cookies.css (desktop styly)
 */

/* ============================================
   TABLET LANDSCAPE (992px - 1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    body .cookies-container {
        padding: 0 40px;
    }

    body .cookies-grid {
        gap: 50px;
    }

    body .cookies-image img {
        margin-top: 60px;
        max-width: 80%;
    }

    body .cookies-logo img {
        height: 42px;
    }

    body .accordion-title {
        font-size: 22px;
    }
}

/* ============================================
   TABLET PORTRAIT (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    body .cookies-page {
        padding-top: 110px;
        padding-bottom: 70px;
    }

    body .cookies-container {
        padding: 0 30px;
    }

    body .cookies-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 700px;
        margin: 0 auto;
    }

    body .cookies-image {
        text-align: center;
    }

    body .cookies-image img {
        margin-top: 40px;
        max-width: 65%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    body .cookies-logo {
        text-align: center;
        margin-bottom: 35px;
    }

    body .cookies-logo img {
        height: 40px;
    }

    body .accordion-title {
        font-size: 20px;
    }
}

/* ============================================
   VŠECHNY MOBILY (do 767px)
   ============================================ */
@media screen and (max-width: 767px) {
    body .cookies-page {
        padding-top: 100px;
        padding-bottom: 60px;
    }

    body .cookies-container {
        padding: 0 15px;
    }

    body .cookies-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    body .cookies-image img {
        margin-top: 30px;
        max-width: 70%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    body .cookies-logo {
        text-align: center;
        margin-bottom: 30px;
    }

    body .cookies-logo img {
        height: 36px;
    }

    body .accordion-header {
        padding: 18px 20px;
    }

    body .accordion-title {
        font-size: 18px;
    }

    body .accordion-icon {
        font-size: 18px;
    }

    body .accordion-content p,
    body .accordion-content ul li {
        font-size: 14px;
        line-height: 1.6;
        text-align: left;
    }

    body .accordion-content h3 {
        font-size: 16px;
    }
}

/* ============================================
   MALÉ MOBILY (360px - 479px)
   ============================================ */
@media (min-width: 360px) and (max-width: 479px) {
    body .accordion-title {
        font-size: 16px;
    }

    body .accordion-header {
        padding: 15px 18px;
    }

    body .cookies-logo img {
        height: 32px;
    }
}

/* ============================================
   VELMI MALÉ MOBILY (do 359px)
   ============================================ */
@media (max-width: 359px) {
    body .accordion-title {
        font-size: 14px;
    }

    body .accordion-header {
        padding: 13px 15px;
    }

    body .cookies-logo img {
        height: 28px;
    }
}

/* ============================================
   MALÉ DESKTOPY (1200px - 1279px)
   ============================================ */
@media (min-width: 1200px) and (max-width: 1279px) {
    body .cookies-grid {
        gap: 55px;
    }
}