/* Mobile Optimization CSS for EPL News Hub */
/* Apply this CSS to all pages for better mobile experience */

/* Global Mobile Optimizations */
* {
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Ensure proper viewport sizing on all devices */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

/* Mobile-First Article Cards */
@media (max-width: 768px) {
    /* Story Cards Optimization */
    .story-card {
        margin: 10px !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .story-card.compact {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 15px !important;
    }
    
    .story-image-wrapper {
        width: 100% !important;
        height: 200px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .story-content-wrapper {
        padding: 15px !important;
    }
    
    .story-headline {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    
    .story-summary {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .story-footer {
        font-size: 0.8rem !important;
        padding-top: 10px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    /* Featured Article Mobile */
    .featured-article-card {
        margin: 10px !important;
        border-radius: 12px !important;
    }
    
    .featured-content {
        padding: 15px !important;
    }
    
    .featured-title {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }
    
    .featured-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    /* Main Headline Featured Mobile */
    .main-headline-featured {
        margin: 10px !important;
    }
    
    .main-headline-featured .story-image-wrapper {
        height: 250px !important;
    }
    
    .main-headline-featured .story-headline {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
    }
    
    .main-headline-featured .story-summary {
        font-size: 0.95rem !important;
        -webkit-line-clamp: 4 !important;
    }
    
    /* Secondary Stories Grid */
    .secondary-stories {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 10px !important;
    }
    
    /* Hero Section Mobile */
    .hero-content {
        padding: 15px !important;
        text-align: center !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
    }
    
    /* Main Content Container */
    .main-content {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ad Containers Mobile */
    .ad-wrapper {
        padding: 10px !important;
        margin: 10px 0 !important;
    }
    
    .adsbygoogle {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Mobile Touch Targets - Ensure 44x44px minimum */
    a, button, .btn, .story-link, .featured-link {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Text Readability on Mobile */
    p, .story-summary, .featured-excerpt {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        color: #333 !important;
    }
    
    /* Improve Spacing for Touch */
    .nav-links li {
        margin: 5px 0 !important;
    }
    
    .dropdown-item {
        padding: 15px 20px !important;
    }
}

/* Small Mobile Devices (under 480px) */
@media (max-width: 480px) {
    /* Ultra-compact story cards */
    .story-card.compact {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px !important;
    }
    
    .story-image-wrapper {
        width: 100px !important;
        height: 100px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        margin-right: 12px !important;
    }
    
    .story-content-wrapper {
        flex: 1 !important;
        padding: 0 !important;
    }
    
    .story-headline {
        font-size: 0.95rem !important;
        -webkit-line-clamp: 2 !important;
    }
    
    .story-summary {
        display: none !important; /* Hide summary on very small screens */
    }
    
    .story-footer {
        font-size: 0.75rem !important;
    }
    
    /* Main headline adjustment */
    .main-headline-featured .story-image-wrapper {
        height: 180px !important;
    }
    
    .main-headline-featured .story-headline {
        font-size: 1.2rem !important;
    }
    
    .main-headline-featured .story-summary {
        font-size: 0.85rem !important;
        -webkit-line-clamp: 3 !important;
    }
}

/* Landscape Mobile Optimization */
@media (max-width: 812px) and (orientation: landscape) {
    /* Reduce vertical space usage */
    .site-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }
    
    .header-logo-section {
        padding: 5px 0 !important;
    }
    
    .logo-main {
        width: 30px !important;
        height: 30px !important;
    }
    
    .logo-text h1 {
        font-size: 0.9rem !important;
    }
    
    .story-card {
        margin: 5px !important;
    }
    
    .story-image-wrapper {
        height: 150px !important;
    }
    
    /* Side-by-side layout for landscape */
    .secondary-stories {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }
}

/* Touch-friendly hover states */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .story-card:hover,
    .featured-article-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    /* Add active states for better feedback */
    .story-card:active,
    .featured-article-card:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }
    
    a:active, button:active {
        opacity: 0.8 !important;
    }
}

/* Performance Optimizations for Mobile */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    *, *::before, *::after {
        animation-duration: 0.3s !important;
        animation-delay: 0s !important;
    }
    
    /* Disable complex shadows on mobile */
    .story-card,
    .featured-article-card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    }
    
    /* Optimize images */
    img {
        image-rendering: auto !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
    }
}

/* Tablet Optimization (iPad) */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-content {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    
    .secondary-stories {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .story-card.compact {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .story-image-wrapper {
        width: 100% !important;
        height: 180px !important;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .story-card,
    .featured-article-card {
        border: 2px solid currentColor !important;
    }
    
    a, button {
        text-decoration: underline !important;
    }
}

/* Dark Mode Support for Mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    body {
        background: #1a1a1a !important;
        color: #f0f0f0 !important;
    }
    
    .story-card,
    .featured-article-card {
        background: #2a2a2a !important;
        color: #f0f0f0 !important;
    }
    
    .story-headline,
    .featured-title {
        color: #ffffff !important;
    }
    
    .story-summary,
    .featured-excerpt {
        color: #d0d0d0 !important;
    }
}

/* PWA Safe Areas (for iPhones with notch) */
@supports (padding: env(safe-area-inset-top)) {
    .site-header {
        padding-top: env(safe-area-inset-top) !important;
    }
    
    .main-content {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
    
    .footer {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* Optimize Font Loading for Mobile */
@media (max-width: 768px) {
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    }
}

/* Smooth Scrolling with Scroll Snap for Mobile */
@media (max-width: 768px) and (hover: none) {
    .secondary-stories {
        scroll-snap-type: y mandatory !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .story-card {
        scroll-snap-align: start !important;
    }
}