/**
 * eLfilms.cz - Responzivní styly pro stránku O nás
 * 
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/o-nas-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, accordion 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Á:
 * - o-nas.php
 * - o-nas.css (desktop styly)
 */

/* ============================================
   TABLET LANDSCAPE (992px - 1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    body .about-page {
        padding-top: 115px;
        padding-bottom: 75px;
    }

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

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

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

    body .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

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

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

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

    body .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

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

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

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

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

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

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

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

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