/**
 * eLfilms.cz - Responzivní styly pro stránku Výroky
 *
 * @package    eLfilms
 * @subpackage Frontend
 * @file       css/vyroky-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Á:
 * - vyroky.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)
 */

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

    /* HERO */
    .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;
    }

    /* 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: 50px 15px 40px;
    }

    body .page-vyroky .quotes-row,
    .page-vyroky .quotes-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* KARTA */
    .quote-card {
        padding: 25px 20px;
        min-height: 200px;
        width: 100%;
    }

    .quote-text {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .author-photo,
    .author-photo-placeholder {
        width: 60px;
        height: 60px;
    }

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

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

    .author-country {
        font-size: 12px;
    }

    /* MEZITEXT */
    .between-text {
        font-size: 16px;
        margin: 35px 0;
        padding: 0 20px;
    }

    /* 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;
    }
}

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

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

    .quote-card {
        padding: 20px 15px;
    }
}

/* ============================================
   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;
    }
}

/* ============================================
   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;
    }

    /* 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: 60px 20px 50px;
    }

    .page-vyroky .quotes-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px;
    }

    /* KARTA */
    .quote-card {
        padding: 28px 22px;
        min-height: 220px;
    }

    .quote-text {
        font-size: 14px;
    }

    .author-photo,
    .author-photo-placeholder {
        width: 65px;
        height: 65px;
    }

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

    /* MEZITEXT */
    .between-text {
        font-size: 17px;
        margin: 45px 0;
    }

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

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

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

    .hero-section {
        height: 380px;
    }

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

    .page-vyroky .quotes-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    .quote-card {
        padding: 28px 23px;
    }
}

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

    .page-vyroky .quotes-row {
        grid-template-columns: repeat(3, 1fr);
    }
}