/* ============================================
   assets/css/responsive.css - Респонсив дизайн
   ============================================ */

/* Tablets and smaller laptops (до 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .video-details-grid {
        grid-template-columns: 1fr;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets (до 768px) */
@media (max-width: 768px) {
    /* Navigation
       ЗАБЕЛЕЖКА: старият тук .nav-menu/.mobile-active drawer (display:
       none/flex, top:70px dropdown) е премахнат — конфликтираше с
       по-новия slide-in drawer в includes/header.php (right:-100% /
       .active), който вече управлява display/position/left/right/
       background/z-index на .nav-menu. Двете едновременно правеха
       left:0 (оттук) + explicit right+width (оттам) over-constrained
       box, който рендираше drawer-а постоянно видим и разположен
       грешно вместо скрит извън екрана. .mobile-active не се ползва
       никъде в JS — старата система вече не се тригерира от нищо. */
    .nav-menu li {
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        width: 100%;
    }

    .nav-menu a {
        display: block;
        width: 100%;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .nav-right {
        gap: 0.5rem;
    }

    /* Hero section */
    .hero-section {
        height: 400px;
        padding: 2rem 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Video grid */
    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-carousel {
        grid-template-columns: 1fr;
    }

    /* Categories */
    .categories-grid {
        grid-template-columns: 1fr;
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }

    .filters-form {
        flex-direction: column;
    }

    .filters-form input,
    .filters-form select {
        width: 100%;
    }

    /* Admin tables */
    .admin-table-wrapper {
        overflow-x: auto;
    }

    .admin-table {
        min-width: 800px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Upload form */
    .upload-options {
        grid-template-columns: 1fr;
    }

    /* Auth page */
    .auth-container {
        flex-direction: column;
    }

    .auth-decoration {
        display: none;
    }

    /* Search results */
    .search-results-list {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-section {
        text-align: center;
    }

    /* Prayer cards */
    .prayers-grid {
        grid-template-columns: 1fr;
    }

    /* Video player actions — преди: .action-btn и .rating-widget
       всеки взимаше 100% ширина и се редяха вертикално един под
       друг (4 пълни реда). Сега: rating-widget получава собствен
       centered ред (с тънка разделителна линия), а трите action
       бутона делят един ред като равни icon-над-label колони —
       много по-компактно, типично за mobile action barове. */
    .video-main-info .video-title {
        font-size: 1.7rem;
        line-height: 1.3;
    }

    .video-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        padding: 1.1rem;
    }

    .video-actions .rating-widget {
        flex: 1 1 100%;
        width: auto;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid var(--border);
    }

    /* Defensive/по-специфично правило — donate.css и search.css се
       зареждат на всяка страница, но не съм ги виждал; ако там има
       .stars или .rating-widget за друга цел (напр. donation rating),
       това гарантира нашите звезди остават плътно събрани независимо
       от евентуален конфликт.

       НАМЕРЕН РЕАЛЕН БЪГ (потвърдено чрез DevTools inspection): преди
       тук стоеше "width: auto !important" — но .stars е <div> (block-
       level елемент). За блоков елемент width:auto означава "запълни
       цялата ширина на родителя", НЕ "свий се до съдържанието"! Затова
       .stars ставаше 260px широк (колкото родителя .rating-widget),
       вместо да се свие до реалните ~170px на 5-те звезди — и
       justify-content:center после центрираше group-а в тази широка
       кутия, но display:flex (block-level) я разтягаше визуално.
       display:inline-flex естествено се свива до съдържанието си,
       като inline-block — точно каквото трябваше от самото начало. */
    .video-actions .rating-widget .stars {
        display: inline-flex !important;
        justify-content: center !important;
        gap: 0.4rem !important;
    }

    .video-actions .action-btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.65rem 0.35rem;
    }

    .action-btn-icon {
        font-size: 1.35rem;
        line-height: 1;
    }

    .action-btn-label {
        font-size: 0.72rem;
        line-height: 1.2;
        text-align: center;
        font-weight: 600;
    }

    /* Comments */
    .comment-form textarea {
        min-height: 120px;
    }
}

/* Mobile phones (до 480px) */
@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 1rem;
    }

    /* Typography */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    /* Navigation */
    .logo {
        font-size: 1.2rem;
    }

    .logo .logo-img {
        width: 22px;
        height: 22px;
    }

    /* Hero */
    .hero-section {
        height: 350px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    /* Video cards */
    .video-card {
        font-size: 0.9rem;
    }

    .video-title {
        font-size: 1rem;
    }

    /* .video-title е споделен клас — .video-main-info .video-title е
       H1-то на самата видео страница (не картичка), затова му трябва
       по-специфичен override да остане на разумен, видим размер, а
       не да пада до 1rem колкото малките recommended-card заглавия. */
    .video-main-info .video-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .video-meta {
        font-size: 0.8rem;
    }

    /* Buttons */
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    /* Stats */
    /* Преди: flex-direction:column хвърляше всеки stat (изгледи/дата/
       времетраене/година/държава) на СОБСТВЕН ред — 5 дълги вертикални
       реда. Базовото orthodox.css правило вече има flex-wrap:wrap;
       просто махаме column-принудата и оставяме елементите да си
       "потекат" естествено — 2-3 на ред според дължината на текста,
       много по-компактно и по-професионално изглеждащо. */
    .video-stats {
        gap: 0.6rem 1.1rem;
        font-size: 0.85rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Forms */
    .form-group label {
        font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 0.9rem;
        padding: 0.6rem;
    }

    /* Modal */
    .modal-content {
        width: 95%;
        padding: 1.5rem;
    }

    /* Prayer text */
    .prayer-text p {
        font-size: 0.95rem;
    }

    /* Admin */
    .admin-nav {
        flex-direction: column;
    }

    .admin-nav a {
        width: 100%;
        text-align: center;
    }

    /* Quote */
    .quote-text {
        font-size: 1.1rem;
    }

    /* Back to top button */
    #backToTop {
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
        bottom: 15px;
        right: 15px;
    }

    /* Search results dropdown */
    .search-results-list {
        font-size: 0.9rem;
    }

    .result-thumb {
        width: 60px;
        height: 45px;
    }

    /* Notifications */
    .notification {
        width: 90%;
        font-size: 0.9rem;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        height: 300px;
    }

    .video-player {
        padding-top: 45%;
    }
}

/* Extra small devices (до 320px) */
@media (max-width: 320px) {
    .container {
        padding: 0 0.75rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .video-card {
        font-size: 0.85rem;
    }

    .stat-value {
        font-size: 2rem;
    }
}

/* Touch devices - подобрени touch targets */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .action-btn,
    button:not(.star):not(.modal-close),
    a {
        min-height: 44px;
        min-width: 44px;
        /* Performance: елиминира ~300ms закъснение при tap на по-стари
           мобилни браузъри, които все още чакат double-tap-to-zoom
           жест преди да изпълнят click event-а. */
        touch-action: manipulation;
    }

    /* .star и .modal-close станаха реални <button> елементи (Фаза 6,
       accessibility fix) вместо <span onclick>, за да са keyboard-
       достъпни. Генералното правило по-горе обаче ги хващаше и ги
       правеше 44x44px — много по-едри от оригиналния дизайн (звезди
       1.5rem, ×-бутон 2rem). И двата вече покриват WCAG AA минимума
       от 24x24px без нужда от 44px, затова само им пазим tap-delay
       фикса без да променяме визуалния размер. */
    .star,
    .modal-close {
        touch-action: manipulation;
    }

    .star {
        /* Преди: 2rem + 0.5rem padding (~48px ефективно) изглеждаше
           твърде едро/доминиращо в компактния mobile action bar.
           1.7rem + 0.3rem (~35px) пак покрива WCAG AA touch target
           минимума (24px) с добър запас, но е визуално пропорционално. */
        font-size: 1.7rem;
        padding: 0.3rem;
    }

    .nav-menu a {
        padding: 1rem;
    }
}

/* Print styles */
@media print {
    .main-header,
    .main-footer,
    .video-actions,
    .comments-section,
    .btn,
    .modal {
        display: none !important;
    }

    .video-page {
        padding: 0;
    }

    .container {
        max-width: 100%;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* High contrast mode */
@media (prefers-contrast: more) {
    :root {
        --gold: #FFD700;
        --blue: #000080;
        --text-dark: #000;
    }

    .btn {
        border: 2px solid currentColor;
    }

    .video-card:hover {
        border: 2px solid var(--gold);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .video-card:hover {
        transform: none;
    }

    .notification {
        animation: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --cream: #1a1a1a;
        --text-dark: #e0e0e0;
    }

    body {
        background: #121212;
        color: #e0e0e0;
    }

    .video-card,
    .prayer-card,
    .info-card,
    .comment-card {
        background: #1e1e1e;
        color: #e0e0e0;
    }

    .admin-table {
        background: #1e1e1e;
    }

    .admin-table th {
        background: #2a2a2a;
    }

    input,
    textarea,
    select {
        background: #2a2a2a;
        color: #e0e0e0;
        border-color: #444;
    }
}