/**
 * eLfilms.cz - Responzivní styly pro stránku Slavné ženy
 *
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/slavne-zeny-responsive.css
 * @version    4.1 - SEO Enhanced Edition
 * @datum      Březen 2026
 * @author     eLfilms Team
 * @copyright  2009-2026 eLfilms.cz
 *
 * Responzivní přizpůsobení pro různá zařízení.
 *
 * STYLUJE:
 * - Mobily do 359px
 * - Mobily 360px - 479px
 * - Mobily landscape 480px - 767px
 * - Všechny mobily do 767px (1 sloupec gridu)
 * - Tablet portrait 768px - 991px (2 sloupce gridu)
 * - Tablet landscape 992px - 1199px (3 sloupce gridu)
 * - Desktop 1200px+ (3 sloupce gridu)
 *
 * POUŽÍVÁ:
 * - slavne-zeny.php (parent stránka)
 *
 * DESIGN:
 * - Barvy: tmavě modrá (#0d1b2a, #0b334f–#1a4f72), zlatá (#EEB500)
 * - Max šířka obsahu: 1200px
 *
 * NOTE:
 * - Mobilní breakpoint: max-width: 767px (iPad Mini 768px dostane tabletový layout)
 * - Animační zpoždění jsou přepočítaná podle počtu sloupců na daném breakpointu
 */

/* ============================================
   VŠECHNY MOBILY (do 767px)
   ============================================ */
@media (max-width: 767px) {

    /* HERO SEKCE */
    .hero-section {
        height: auto;
        min-height: 300px;
        padding: 100px 20px 40px;
    }

    .hero-content {
        flex-direction: column;
        gap: 20px;
    }

    .hero-rainbow {
        width: 80px;
    }

    .hero-title {
        font-size: 32px;
        letter-spacing: 1px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-subtitle .symbol {
        font-size: 20px;
    }

    .hero-note {
        font-size: 12px;
        max-width: 90%;
        margin: 15px auto 0;
    }

    /* FILTRY */
    .filters-section {
        padding: 25px 15px 15px;
    }

    .filters-form {
        flex-direction: column;
        gap: 12px;
    }

    .search-input {
        width: 100% !important;
    }

    .filter-select {
        width: 100% !important;
    }

    .filter-btn {
        width: 180px !important;
        margin: 0 auto;
    }

    .search-input,
    .filter-select,
    .filter-btn {
        height: 44px;
        font-size: 13px;
    }

    .reset-btn {
        width: 100%;
    }

    .results-count {
        font-size: 16px;
    }

    .results-count strong {
        font-size: 36px;
    }

    /* GRID - 1 SLOUPEC */
    .main-section {
        padding: 80px 15px 40px;
    }

    .container {
        padding: 0 15px;
    }

    body .main-section .women-grid,
    .main-section .women-grid,
    .women-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
        row-gap: 120px !important;
    }

    /* KARTA */
    .woman-card {
        padding: 90px 20px 25px;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .woman-photo {
        width: 120px;
        height: 120px;
        top: -60px;
        border-width: 5px;
    }

    .woman-name {
        font-size: 24px;
    }

    .woman-role {
        font-size: 12px;
    }

    .woman-meta {
        font-size: 13px;
    }

    .woman-socials {
        gap: 10px;
    }

    .woman-socials a,
    .woman-socials span {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    /* STRÁNKOVÁNÍ */
    .pagination-wrapper {
        margin-top: 40px;
        padding-top: 30px;
    }

    .pagination {
        gap: 6px;
    }

    .page-btn {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .page-btn.prev,
    .page-btn.next {
        padding: 0 10px;
        font-size: 12px;
    }

    /* MODAL */
    .bio-modal-content {
        width: 95%;
        max-width: 95%;
        max-height: 85vh;
        border-radius: 15px;
    }

    .bio-modal-close {
        width: 35px;
        height: 35px;
        font-size: 20px;
        top: 10px;
        right: 10px;
    }

    .bio-modal-header {
        padding: 35px 20px 15px;
    }

    .bio-modal-header h2 {
        font-size: 24px;
    }

    .bio-modal-body {
        padding: 20px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* ANIMACE - vypnout zpoždění */
    .woman-card {
        transition-delay: 0s !important;
    }

    .woman-card.fade-in {
        transition-delay: 0s !important;
    }
}

/* ============================================
   VELMI MALÉ MOBILY (do 359px)
   ============================================ */
@media (max-width: 359px) {

    .hero-title {
        font-size: 28px;
    }

    .woman-photo {
        width: 100px;
        height: 100px;
        top: -50px;
    }

    .woman-card {
        padding: 70px 15px 20px;
    }

    .woman-name {
        font-size: 22px;
    }
}

/* ============================================
   MALÉ MOBILY (360px - 479px)
   ============================================ */
@media (min-width: 360px) and (max-width: 479px) {

    .hero-title {
        font-size: 30px;
    }
}

/* ============================================
   MOBILY LANDSCAPE (480px - 767px)
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {

    .hero-title {
        font-size: 34px;
    }

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

/* ============================================
   TABLET PORTRAIT (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {

    .hero-section {
        height: 420px;
        padding: 110px 20px 50px;
    }

    .hero-content {
        gap: 25px;
    }

    .hero-rainbow {
        width: 90px;
    }

    .hero-title {
        font-size: 40px;
        letter-spacing: 1px;
    }

    .hero-subtitle {
        font-size: 19px;
    }

    .hero-subtitle .symbol {
        font-size: 23px;
    }

    .hero-note {
        font-size: 12px;
        max-width: 95%;
        margin-top: 15px;
    }

    /* FILTRY - jeden řádek */
    .filters-section {
        padding: 25px 20px 18px;
    }

    .filters-form {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .search-input {
        width: 280px !important;
        flex-shrink: 0;
    }

    .filter-select {
        width: 180px !important;
        flex-shrink: 0;
    }

    .filter-btn {
        width: 110px !important;
        padding: 0 12px !important;
        flex-shrink: 0;
        font-size: 13px;
    }

    .reset-btn {
        width: auto !important;
        padding: 10px 18px !important;
        font-size: 13px;
    }

    .results-count strong {
        font-size: 42px;
    }

    /* GRID - 2 SLOUPCE */
    .main-section {
        padding: 90px 20px 50px;
    }

    .women-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 30px;
        row-gap: 140px;
    }

    /* KARTA */
    .woman-card {
        padding: 95px 22px 28px;
    }

    .woman-photo {
        width: 130px;
        height: 130px;
        top: -65px;
    }

    .woman-name {
        font-size: 26px;
    }

    .woman-role {
        font-size: 13px;
    }

    .woman-meta {
        font-size: 13px;
    }

    .woman-socials a,
    .woman-socials span {
        width: 34px;
        height: 34px;
    }

    /* STRÁNKOVÁNÍ */
    .pagination-wrapper {
        margin-top: 50px;
    }

    .page-btn {
        min-width: 40px;
        height: 40px;
    }

    /* MODAL */
    .bio-modal-content {
        max-width: 550px;
    }

    .bio-modal-header h2 {
        font-size: 28px;
    }

    .bio-modal-body {
        font-size: 15px;
    }

    /* ANIMACE - 2 sloupce */
    .woman-card:nth-child(1).fade-in  { transition-delay: 0.2s; }
    .woman-card:nth-child(2).fade-in  { transition-delay: 0.3s; }
    .woman-card:nth-child(3).fade-in  { transition-delay: 0.6s; }
    .woman-card:nth-child(4).fade-in  { transition-delay: 0.7s; }
    .woman-card:nth-child(5).fade-in  { transition-delay: 1.0s; }
    .woman-card:nth-child(6).fade-in  { transition-delay: 1.1s; }
    .woman-card:nth-child(7).fade-in  { transition-delay: 1.4s; }
    .woman-card:nth-child(8).fade-in  { transition-delay: 1.5s; }
    .woman-card:nth-child(9).fade-in  { transition-delay: 1.8s; }
    .woman-card:nth-child(10).fade-in { transition-delay: 1.9s; }
    .woman-card:nth-child(11).fade-in { transition-delay: 2.2s; }
    .woman-card:nth-child(12).fade-in { transition-delay: 2.3s; }
    .woman-card:nth-child(n+13).fade-in { transition-delay: 0s; }
}

/* ============================================
   TABLET LANDSCAPE (992px - 1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {

    .hero-section {
        height: 380px;
    }

    .hero-title {
        font-size: 48px;
    }

    .women-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 35px;
        row-gap: 150px;
    }

    .woman-card {
        padding: 95px 23px 28px;
    }
}

/* ============================================
   DESKTOP (1200px+)
   ============================================ */
@media (min-width: 1200px) {

    .women-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}