/* ==================== MOBILE EXPERIENCE - DEDICATED STYLES ==================== */
/* A dedicated mobile stylesheet for touch-optimized, comfortable UX */

/* ==================== MOBILE CSS VARIABLES ==================== */
:root {
    --mobile-touch-target: 48px;
    --mobile-spacing: 16px;
    --mobile-radius: 16px;
    --mobile-transition: 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    --mobile-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ==================== TOUCH UTILITIES ==================== */
@media (hover: none) and (pointer: coarse) {

    /* Disable hover effects on touch devices */
    .no-touch-hover:hover {
        transform: none !important;
        background: inherit !important;
    }

    /* Active state for touch */
    .touch-active:active {
        transform: scale(0.97);
        opacity: 0.9;
        transition: transform 0.1s ease;
    }
}

/* ==================== MOBILE ANIMATIONS ==================== */
@keyframes mobileSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes mobileSlideInRTL {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes mobileFadeUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes mobilePress {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.96);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ==================== TABLET BREAKPOINT (768px) ==================== */
@media (max-width: 768px) {

    /* --- Mobile Header Enhancements --- */
    #main-header {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background-color: rgba(20, 20, 36, 0.95);
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    }

    .header-inner {
        padding: 8px 12px;
        padding-top: calc(8px + var(--safe-area-top));
    }

    .menu-toggle {
        width: var(--mobile-touch-target);
        height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        transition: var(--mobile-transition);
        margin: 0;
    }

    .menu-toggle:active {
        background: rgba(124, 58, 237, 0.2);
        transform: scale(0.95);
    }

    .menu-toggle i {
        font-size: 1.3rem;
    }

    /* Hide logo text on mobile, show only icon */
    .logo-text {
        display: none;
    }

    .logo-icon-img {
        height: 36px;
    }

    /* Header action buttons - larger touch targets */
    .header-actions {
        gap: 8px;
    }

    .lang-btn,
    .chat-btn,
    .help-center-btn {
        min-width: var(--mobile-touch-target);
        min-height: var(--mobile-touch-target);
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* Icon-only buttons on mobile */
    .chat-btn span,
    .help-center-btn span {
        display: none;
    }

    .chat-btn i,
    .help-center-btn i {
        font-size: 1.2rem;
        margin: 0;
    }

    /* --- Mobile Sidebar (Full-screen drawer) --- */
    .sidebar {
        position: fixed;
        top: 0 !important;
        height: 100vh;
        height: 100dvh;
        /* True full height for mobile */
        z-index: 6000 !important;
        /* Above search container (5000) */
        width: 85vw;
        max-width: 320px;
        background: var(--header-bg) !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
        padding-top: calc(70px + var(--safe-area-top));
        padding-bottom: calc(40px + var(--safe-area-bottom));
        /* Extra bottom padding to ensure accessibility */
        border: none;
    }

    [dir="ltr"] .sidebar {
        left: -85vw;
        right: auto;
        transition: left var(--mobile-transition);
    }

    [dir="rtl"] .sidebar {
        right: -85vw;
        left: auto;
        transition: right var(--mobile-transition);
    }

    [dir="ltr"] .sidebar.open {
        left: 0;
    }

    [dir="rtl"] .sidebar.open {
        right: 0;
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.7);
        z-index: 5500 !important;
        /* Above search container (5000) but below sidebar (6000) */
    }

    /* Larger sidebar items for touch */
    .sidebar-list a,
    .sidebar-static-links a {
        min-height: var(--mobile-touch-target);
        padding: 14px 16px;
        margin-bottom: 4px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .sidebar-list a i,
    .sidebar-static-links a i {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
        border-radius: 10px;
    }

    .sidebar-category-title {
        padding: 14px 16px;
        font-size: 0.8rem;
        min-height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
    }

    /* --- Mobile Hero Section --- */
    .hero-section {
        padding: 40px 16px 60px;
        padding-top: calc(40px + var(--safe-area-top));
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

    /* Mobile title visibility */
    .mobile-only-title {
        display: block !important;
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 24px;
        color: var(--text-primary);
        text-align: center;
        line-height: 1.3;
    }

    .hero-content h1 {
        display: none;
    }

    /* Prevent search bar from showing over sidebar */
    body.sidebar-open .search-container,
    body.sidebar-open .search-overlay {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Ensure body lock when sidebar open */
    body.sidebar-open {
        overflow: hidden !important;
        /* Removed position: fixed as it breaks viewport height on some mobile browsers */
    }

    /* --- Mobile Search Enhancements (High Priority) --- */
    /* Simplified z-index hierarchy for mobile search - significantly increased to beat page content */
    .search-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
        position: relative !important;
        z-index: 5000 !important;
        /* Well above overlay 4000, but below modal 9000 */
    }

    /* Hero section needs to be above overlay when active */
    body.search-active .hero-section,
    body.search-active .articles-page .hero-section,
    body.search-active .hero-content,
    body.search-active .articles-page .hero-content {
        position: relative !important;
        z-index: 5000 !important;
    }

    /* Search overlay - backdrop only, doesn't block input */
    .search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(13, 13, 29, 0.75) !important;
        z-index: 4000 !important;
        /* Below search container 5000 */
        display: none;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        pointer-events: none;
        /* Allow clicks through to search input */
    }

    .search-overlay.active {
        display: block;
        pointer-events: auto;
        /* Block background clicks only */
    }

    /* Search input - optimized for mobile touch */
    #search-input {
        width: 100% !important;
        height: 52px !important;
        font-size: 16px !important;
        /* Prevents auto-zoom on iOS */
        border-radius: 12px !important;
        background: var(--fb-bg-tertiary) !important;
        border: 2px solid var(--divider) !important;
        padding-inline-start: 45px !important;
        padding-inline-end: 15px !important;
        position: relative !important;
        z-index: 5001 !important;
        /* Above container 5000 */
        touch-action: manipulation;
        /* Optimizes touch handling */
        -webkit-tap-highlight-color: rgba(124, 58, 237, 0.2);
        /* Visual feedback on tap */
    }

    #search-input:focus {
        border-color: var(--primary-blue) !important;
        z-index: 5001 !important;
    }

    [dir="rtl"] #search-input {
        padding-inline-start: 45px !important;
        padding-inline-end: 15px !important;
    }

    /* Search icon */
    .search-icon {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        inset-inline-start: 15px !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 1rem !important;
        z-index: 5002 !important;
        pointer-events: none;
        color: var(--fb-text-muted);
    }

    /* Search suggestions dropdown */
    #search-suggestions {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: var(--fb-bg-secondary) !important;
        border: 1px solid var(--fb-border-color) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
        z-index: 5002 !important;
        /* Above input 5001 */
        display: none;
        max-height: 60vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 5px !important;
        margin: 0 !important;
        pointer-events: auto;
        /* Ensure suggestions are clickable */
    }

    #search-suggestions.show {
        display: block;
    }

    .suggestion-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 10px !important;
        gap: 12px !important;
        border-bottom: 1px solid var(--fb-border-color) !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .suggestion-icon-circle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        /* Prevent shrinking */
        font-size: 0.9rem !important;
    }

    .suggestion-content {
        flex: 1 !important;
        min-width: 0 !important;
        /* Requirement for text truncation in flex */
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .suggestion-title {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
    }

    .suggestion-context {
        font-size: 0.8rem !important;
        color: var(--fb-text-secondary) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        width: 100% !important;
    }

    .suggestion-arrow {
        display: none !important;
        /* Hide arrow on small mobile to save space */
    }

    .suggestion-no-results {
        padding: 30px 15px !important;
        text-align: center !important;
    }

    .no-results-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 12px !important;
    }

    /* --- Mobile Grid Cards --- */
    .grid-container,
    .articles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 0 4px;
    }

    .grid-card,
    .article-card,
    .topic-card {
        padding: 16px 12px !important;
        /* Slightly reduced padding for 2-column layout */
        border-radius: var(--mobile-radius);
        min-height: 120px;
        transition: var(--mobile-transition);
        position: relative;
        overflow: hidden;
        background-color: var(--fb-bg-secondary);
        border: 1px solid var(--fb-border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center content for 2-column layout */
        text-align: center;
        gap: 8px;
    }

    .card-icon,
    .article-card-icon {
        font-size: 1.8rem !important;
        margin-bottom: 4px !important;
    }

    .card-title,
    .article-card-title {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .card-desc,
    .article-card-summary {
        font-size: 0.8rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        /* Only 2 lines on mobile */
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: var(--fb-text-secondary) !important;
    }

    .grid-card:active,
    .article-card:active {
        transform: scale(0.98);
        background: var(--fb-bg-hover);
    }

    /* Ripple effect for cards */
    .grid-card::after,
    .article-card::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(124, 58, 237, 0.4);
        opacity: 0;
        border-radius: 50%;
        transform: scale(0);
        pointer-events: none;
    }

    .grid-card:active::after,
    .article-card:active::after {
        animation: ripple 0.6s ease-out;
    }

    .card-icon,
    .article-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--fb-bg-tertiary);
        color: var(--primary-blue);
    }

    .card-title,
    .article-card-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 4px;
        color: var(--text-primary);
    }

    .card-desc,
    .article-card-summary {
        font-size: 0.95rem;
        line-height: 1.5;
        color: var(--text-secondary);
    }

    .article-card-meta {
        font-size: 0.85rem;
        color: var(--fb-text-muted);
        margin-top: auto;
    }

    /* --- Mobile Sections --- */
    .container {
        padding: 0 var(--mobile-spacing);
    }

    .section-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
        padding: 0 4px;
    }

    /* Video Section Mobile */
    .video-gallery-section {
        padding: 40px 0;
    }

    .video-gallery-container {
        grid-template-columns: 1fr;
        padding: var(--mobile-spacing);
        gap: 16px;
    }

    .video-sidebar {
        order: 2;
        max-height: 280px;
        padding: 0;
        border: none;
        margin-top: 16px;
    }

    .video-item {
        min-height: var(--mobile-touch-target);
        padding: 12px;
        border-radius: 12px;
    }

    .video-main {
        order: 1;
    }

    .video-section-title {
        font-size: 1.4rem;
        margin-bottom: 24px;
    }

    /* Tips Section Mobile */
    .tips-slider-section {
        padding: 40px 0;
    }

    .tips-title {
        font-size: 1.4rem;
        margin-bottom: 24px;
    }

    .tips-slide {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }

    .tips-icon {
        width: 56px;
        height: 56px;
        margin: 0 auto;
    }

    .tips-icon i {
        font-size: 1.5rem;
    }

    .tips-content h3 {
        font-size: 1.15rem;
    }

    .tips-content p {
        font-size: 0.95rem;
    }

    .tips-nav {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    .tips-prev {
        left: -5px;
    }

    .tips-next {
        right: -5px;
    }

    /* App CTA Section Mobile */
    .app-cta-section {
        padding: 40px var(--mobile-spacing);
    }

    .cta-content h2 {
        font-size: 1.5rem;
    }

    .cta-content p {
        font-size: 1rem;
        margin-bottom: 24px;
    }

    .app-download-buttons {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .app-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        min-height: var(--mobile-touch-target);
        border-radius: 14px;
    }

    /* --- Mobile Footer --- */
    .simple-footer {
        padding: 30px var(--mobile-spacing);
        padding-bottom: calc(30px + var(--safe-area-bottom));
    }

    .footer-topics {
        gap: 12px;
    }

    .footer-link {
        min-height: var(--mobile-touch-target);
        display: flex;
        align-items: center;
        padding: 12px;
    }

    /* --- Mobile Modals (Bottom Sheet - Fixed) --- */
    .support-modal-overlay {
        position: fixed;
        inset: 0;
        /* Modern approach: top/right/bottom/left = 0 */
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 9000;
        /* High z-index but below search */
        display: flex;
        align-items: flex-end;
        /* Align modal to bottom */
        padding: 0 !important;
        /* Override desktop padding:20px to make modal full-width */
        overflow-y: auto;
        /* Allow scroll if modal is taller than viewport */
        -webkit-overflow-scrolling: touch;
    }

    .support-modal {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 100vh !important;
        /* Reduced from 92vh to ensure header is always visible */
        background: var(--header-bg);
        border-radius: 24px 24px 0 0;
        /* Rounded top corners only */
        margin: 0;
        transform: translateY(100%);
        /* Start off-screen */
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        display: flex;
        flex-direction: column;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        /* Safe area for home indicator */
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
        position: relative;
        overflow: visible;
        /* Changed from hidden to ensure header is visible */
    }

    /* Modal appears when overlay is active */
    #support-modal-overlay.active .support-modal {
        transform: translateY(0);
        /* Slide into view */
    }

    /* Pull handle - visual indicator for swipe-to-close */
    .support-modal::before {
        content: '';
        width: 40px;
        height: 5px;
        background: rgba(255, 255, 255, 0.4);
        /* Even more visible */
        border-radius: 10px;
        margin: 12px auto 8px;
        /* Increased bottom margin for better spacing */
        flex-shrink: 0;
        display: block;
        position: relative;
        /* Ensure it's positioned correctly */
    }

    /* Modal header */
    .support-modal-header {
        padding: 16px 16px 20px;
        /* Increased top padding */
        padding-top: max(16px, env(safe-area-inset-top));
        /* Safe area for notch */
        min-height: 64px;
        /* Ensure minimum height */
        border-bottom: 1px solid var(--divider);
        position: relative;
        /* Changed from sticky */
        background: var(--header-bg);
        z-index: 10;
        /* Above modal body */
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        /* Prevent header from shrinking */
    }

    .support-modal-header h3 {
        font-size: 1.15rem;
        margin: 0;
        padding: 0 60px;
        /* Leave space for buttons */
        text-align: center;
        width: 100%;
        flex: 1;
        color: var(--text-primary);
    }

    /* Close button - circular icon style */
    .support-close-btn {
        position: absolute;
        top: 10px;
        left: 16px;
        /* LTR: left side */
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        background: var(--fb-bg-tertiary);
        border-radius: 50%;
        color: var(--text-primary);
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20;
    }

    [dir="rtl"] .support-close-btn {
        left: auto;
        right: 16px;
        /* RTL: right side */
    }

    .support-close-btn:active {
        transform: scale(0.95);
        background: var(--fb-bg-active);
    }

    .close-text {
        display: none !important;
        /* Icons only on mobile */
    }

    .support-close-btn i {
        font-size: 1rem;
    }

    /* Back button */
    .support-back-btn {
        position: absolute;
        top: 10px;
        right: 16px;
        /* LTR: right side */
        background: transparent;
        color: var(--primary-blue);
        font-weight: 600;
        border: none;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    [dir="rtl"] .support-back-btn {
        right: auto;
        left: 16px;
        /* RTL: left side */
    }

    .support-back-btn:active {
        background: rgba(124, 58, 237, 0.1);
    }

    /* Modal body - scrollable content area */
    .support-modal-body {
        padding: 16px;
        padding-bottom: calc(16px + max(0px, env(safe-area-inset-bottom)));
        /* Extra padding for safe area */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth iOS scrolling */
        overscroll-behavior: contain;
        /* Prevent body scroll when modal scrolls */
        max-height: calc(85vh - 110px);
        /* Account for pull handle (20px) + header (64px) + spacing */
        flex: 1;
        /* Take remaining space */
    }

    /* Custom scrollbar for modal body */
    .support-modal-body::-webkit-scrollbar {
        width: 4px;
    }

    .support-modal-body::-webkit-scrollbar-thumb {
        background-color: var(--divider);
        border-radius: 2px;
    }

    /* Category items - larger touch targets */
    .support-cat-item {
        min-height: 60px;
        padding: 16px;
        border-radius: 14px;
        margin-bottom: 10px;
        touch-action: manipulation;
        /* Optimize touch */
    }

    .support-cat-item:active {
        transform: scale(0.98);
    }

    /* --- Mobile Detail View --- */
    .detail-view {
        padding: var(--mobile-spacing);
    }

    .detail-container {
        padding: 0;
    }

    .detail-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .detail-breadcrumb {
        font-size: 0.9rem;
        padding: 12px 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .breadcrumb-link {
        min-height: var(--mobile-touch-target);
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        background: var(--fb-bg-tertiary);
        border-radius: 20px;
    }

    /* Steps mobile optimization */
    .step-item {
        padding: 20px 16px;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    .step-number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .step-content {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Accordion mobile */
    .accordion-header,
    .qa-question {
        min-height: 60px;
        padding: 16px;
    }

    .accordion-inner {
        padding: 16px;
    }

    /* --- Scroll Improvements --- */
    .sidebar,
    .video-sidebar,
    .tabs-content-area,
    .support-modal-body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Smooth momentum scrolling */
    * {
        scroll-behavior: smooth;
    }
}

/* ==================== SMALL MOBILE BREAKPOINT (480px) ==================== */
@media (max-width: 480px) {

    .mobile-only-title {
        font-size: 1.35rem;
    }

    #search-input {
        height: 52px;
        font-size: 0.95rem;
        padding: 14px 16px 14px 46px;
    }

    [dir="rtl"] #search-input {
        padding: 14px 46px 14px 16px;
    }

    .grid-card {
        padding: 18px;
    }

    .card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }

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

    .card-desc {
        font-size: 0.9rem;
    }

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

    .tips-slide {
        padding: 20px 16px;
    }

    .tips-icon {
        width: 48px;
        height: 48px;
    }

    .tips-icon i {
        font-size: 1.3rem;
    }

    .detail-title {
        font-size: 1.3rem;
    }

    .breadcrumb-link {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* ==================== COMPACT MOBILE BREAKPOINT (360px) ==================== */
@media (max-width: 360px) {

    :root {
        --mobile-touch-target: 44px;
        --mobile-spacing: 12px;
    }

    .header-inner {
        padding: 6px 8px;
    }

    .logo-icon-img {
        height: 32px;
    }

    .lang-btn {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .mobile-only-title {
        font-size: 1.2rem;
    }

    #search-input {
        height: 48px;
        font-size: 0.9rem;
    }

    .grid-card {
        padding: 14px;
    }

    .card-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .card-title {
        font-size: 0.95rem;
    }

    .sidebar-list a,
    .sidebar-static-links a {
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    .sidebar-list a i,
    .sidebar-static-links a i {
        width: 32px;
        height: 32px;
    }

    .tips-slide {
        padding: 16px 12px;
    }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media (max-width: 768px) and (orientation: landscape) {

    .hero-section {
        padding: 24px 16px 40px;
    }

    .mobile-only-title {
        font-size: 1.3rem;
        margin-bottom: 16px;
    }

    #search-input {
        height: 48px;
    }

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

    .sidebar {
        width: 60vw;
        max-width: 280px;
    }

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

    .video-sidebar {
        order: 1;
        max-height: none;
    }
}

/* ==================== ACCESSIBILITY - REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== HIGH CONTRAST MODE ==================== */
@media (prefers-contrast: high) {
    .grid-card {
        border: 2px solid var(--text-primary);
    }

    .sidebar-list a.active,
    .sidebar-static-links a.active {
        border: 2px solid var(--primary-blue);
    }

    #search-input:focus {
        border-width: 3px;
    }
}