/**
 * eLfilms.cz - Herečky – responsive styly
 *
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/herecky-responsive.css
 * @version    1.4 - sladěno s foto 115px, padding karty 10px bottom, grid padding-top na všech breakpointech
 * @datum      Duben 2026
 * @author     eLfilms Team
 * @copyright  2009-2026 eLfilms.cz
 *
 * STYLUJE:
 * - Mobily do 359px (2 sloupce)
 * - Mobily 360px–479px (2 sloupce)
 * - Mobily 480px–767px (2 sloupce)
 * - Všechny mobily do 767px (sidebar jako overlay, grid 2 sloupce)
 * - Tablet portrait 768px–991px (3 sloupce)
 * - Tablet landscape 992px–1199px (4 sloupce)
 * - Desktop 1200px+ (4 sloupce)
 *
 * POUŽÍVÁ:
 * - herecky.php
 *
 * 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)
 * - Fade-in zpoždění přepočítána dle počtu sloupců na daném breakpointu
 */

/* ============================================
   VELMI MALÉ MOBILY (do 359px)
   ============================================ */
@media (max-width: 359px) {
    .page-container {
        padding: 20px 12px 40px;
    }

    .herecky-grid.view-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
        row-gap: 100px;
        padding-top: 50px;
    }

    .woman-photo {
        width: 80px;
        height: 80px;
        top: -40px;
    }

    .woman-card {
        padding: 50px 10px 10px;
    }

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

    .content-header h1 {
        font-size: 20px;
    }
}

/* ============================================
   MALÉ MOBILY (360px – 479px)
   ============================================ */
@media (min-width: 360px) and (max-width: 479px) {
    .page-container {
        padding: 20px 15px 40px;
    }

    .herecky-grid.view-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 18px;
        row-gap: 105px;
        padding-top: 55px;
    }

    .woman-photo {
        width: 90px;
        height: 90px;
        top: -45px;
    }

    .woman-card {
        padding: 56px 12px 10px;
    }

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

/* ============================================
   VĚTŠÍ MOBILY (480px – 767px)
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {
    .herecky-grid.view-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 110px;
        padding-top: 60px;
    }
}

/* ============================================
   VŠECHNY MOBILY (do 767px)
   ============================================ */
@media (max-width: 767px) {
    .page-container {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: auto;
        padding: 20px 15px 40px;
    }

    .sidebar {
        position: static;
        padding-right: 0;
    }

    /* První filter-section (TYP + burger) – vodorovně */
    .filter-section:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 20px;
    }

    .filter-section:first-child .filter-title {
        display: none;
    }

    .type-toggle {
        flex: 1;
        max-width: 200px;
    }

    .type-toggle button {
        padding: 10px 15px;
        font-size: 13px;
    }

    /* Burger viditelný na mobilu */
    .filters-burger {
        display: flex !important;
        width: 50px;
        height: 50px;
        background: #EEB500;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        transition: all 0.3s;
        flex-shrink: 0;
        margin-top: 0;
    }

    .filters-burger span {
        width: 24px;
        height: 3px;
        background: #0b334f;
        border-radius: 2px;
        transition: all 0.3s;
    }

    /* Ostatní filtry skryté dokud je burger zavřený */
    .sidebar.filters-hidden .filter-section:not(:first-child) {
        display: none;
    }

    /* Sidebar jako slide-in overlay */
    .sidebar.filters-open {
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 350px;
        height: 100vh;
        background: #0b334f;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0,0,0,0.5);
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from { transform: translateX(-100%); }
        to   { transform: translateX(0); }
    }

    /* Tmavý overlay za sidebarem */
    .filters-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 999;
    }

    .filters-overlay.active {
        display: block;
    }

    /* Content header */
    .content-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
        margin-top: 30px;
        gap: 15px;
    }

    .content-tools {
        width: 100%;
        justify-content: space-between;
    }

    .sort-select {
        font-size: 12px;
    }

    /* Foto v grid view */
    .woman-photo {
        width: 100px;
        height: 100px;
        top: -50px;
        border-width: 4px;
    }

    .woman-card {
        padding: 62px 15px 10px;
    }

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

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

    /* List view na mobilu */
    .herecka-foto.list-foto {
        width: 60px;
        min-width: 60px;
        height: 80px;
    }

    .list-info .herecka-jmeno {
        font-size: 15px;
    }

    .herecka-profese {
        font-size: 12px;
    }

    .herecka-vek {
        font-size: 12px;
    }

    .lesba-badge-list {
        font-size: 15px;
    }

    /* Stránkování */
    .pagination {
        margin-top: 30px;
        padding-top: 25px;
        gap: 5px;
        flex-wrap: wrap;
    }

    .pagination a,
    .pagination span {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }

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

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

/* ============================================
   TABLET PORTRAIT (768px – 991px) – 3 sloupce
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    .page-container {
        padding: 30px 20px 40px;
        grid-template-columns: 220px 1fr;
        gap: 30px;
    }

    .herecky-grid.view-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 20px;
        row-gap: 120px;
        padding-top: 65px;
    }

    .woman-photo {
        width: 105px;
        height: 105px;
        top: -52px;
        border-width: 5px;
    }

    .woman-card {
        padding: 66px 18px 10px;
    }

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

    /* List view */
    .herecka-foto.list-foto {
        width: 70px;
        min-width: 70px;
        height: 90px;
    }

    .list-info .herecka-jmeno {
        font-size: 16px;
    }

    /* Fade-in: 3 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.4s; }
    .woman-card:nth-child(4).fade-in  { transition-delay: 0.7s; }
    .woman-card:nth-child(5).fade-in  { transition-delay: 0.8s; }
    .woman-card:nth-child(6).fade-in  { transition-delay: 0.9s; }
    .woman-card:nth-child(7).fade-in  { transition-delay: 1.2s; }
    .woman-card:nth-child(8).fade-in  { transition-delay: 1.3s; }
    .woman-card:nth-child(9).fade-in  { transition-delay: 1.4s; }
    .woman-card:nth-child(n+10).fade-in { transition-delay: 0s; }
}

/* ============================================
   TABLET LANDSCAPE (992px – 1199px) – 4 sloupce
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    .page-container {
        padding: 40px 20px 60px;
        grid-template-columns: 260px 1fr;
        gap: 35px;
    }

    .herecky-grid.view-grid {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 20px;
        row-gap: 120px;
        padding-top: 65px;
    }

    .woman-photo {
        width: 105px;
        height: 105px;
        top: -52px;
        border-width: 5px;
    }

    .woman-card {
        padding: 66px 16px 10px;
    }

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

/* ============================================
   DESKTOP (1200px+) – 4 sloupce
   ============================================ */
@media (min-width: 1200px) {
    .page-container {
        max-width: 1200px;
    }

    .herecky-grid.view-grid {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 30px;
        row-gap: 130px;
        padding-top: 70px;
    }
}