/* Universal Responsive Design for EPL News Hub */

/* Base Responsive Setup */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Ensure Images are Responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent Horizontal Scroll */
.container,
.content-wrapper,
.header-content,
.nav-content,
.footer,
.main-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* Improved Touch Targets */
.nav-links a,
.search-btn,
.menu-btn,
.newsletter-btn,
.newsletter-banner-btn,
button,
.btn {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Better Focus States for Accessibility */
input:focus,
button:focus,
a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

/* Touch and Interaction Improvements */
@media (hover: none) and (pointer: coarse) {
    /* Touch devices - disable hover effects */
    .story-card:hover,
    .story-card.compact:hover,
    .story-card.enhanced:hover,
    .headline-item:hover,
    .trending-item:hover,
    .quick-news-item:hover,
    .news-article-card:hover,
    .poll-card:hover,
    .social-card:hover {
        transform: none !important;
        background: transparent !important;
    }
}

/* Large Desktop Styles (min-width: 1200px) */
@media (min-width: 1200px) {
    .logo h1 {
        font-size: 3rem;
    }
    
    .section-title-main,
    .page-title,
    .section-title {
        font-size: 2.2rem;
    }
    
    .content-wrapper {
        padding: 40px 20px;
    }
    
    .nyt-article {
        padding: 30px;
    }
}

/* Tablet Styles (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-content {
        padding: 0 15px;
    }
    
    .logo h1 {
        font-size: 2.2rem;
    }
    
    #search-input {
        width: 200px;
    }
    
    .content-wrapper {
        padding: 25px 15px;
    }
    
    .featured-grid,
    .news-sidebar-grid,
    .grid-container,
    .articles-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .secondary-stories {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .newsletter-banner-content {
        gap: 25px;
    }
    
    .newsletter-inputs input {
        width: 180px;
    }
    
    .nyt-article {
        padding: 25px;
    }
    
    .polls-container,
    .social-container {
        gap: 20px;
    }
}

/* Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    /* Header Mobile */
    .header-content {
        padding: 0 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .logo h1 {
        font-size: 1.8rem;
    }
    
    .tagline {
        font-size: 0.75rem;
    }
    
    .header-utils {
        order: 3;
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }
    
    .search-container {
        flex: 1;
        margin-right: 10px;
    }
    
    #search-input {
        width: 100%;
        font-size: 0.85rem;
        padding: 6px 10px;
    }
    
    /* Navigation Mobile */
    .nav-links {
        display: none;
    }
    
    .mobile-sidebar {
        display: block;
    }
    
    /* Content Mobile */
    .content-wrapper {
        padding: 20px 15px;
    }
    
    .section-title-main,
    .page-title,
    .section-title {
        font-size: 1.6rem;
    }
    
    .section-divider {
        width: 40px;
        height: 3px;
    }
    
    /* Grid Layouts Mobile */
    .featured-grid,
    .news-sidebar-grid,
    .grid-container,
    .articles-grid,
    .secondary-stories {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 20px;
    }
    
    /* Featured Stories Mobile */
    .featured-image {
        height: 200px;
    }
    
    .featured-content {
        padding: 20px;
    }
    
    .featured-title a {
        font-size: 1.4rem;
    }
    
    .featured-excerpt {
        font-size: 1rem;
    }
    
    .story-image {
        height: 100px;
    }
    
    .story-content {
        padding: 15px;
    }
    
    .story-title a {
        font-size: 1rem;
    }
    
    .story-excerpt {
        font-size: 0.85rem;
    }
    
    /* Cards Mobile */
    .story-image-wrapper {
        height: 150px;
    }
    
    .story-content-wrapper {
        padding: 15px;
    }
    
    .story-headline a {
        font-size: 1.1rem;
    }
    
    .story-summary {
        font-size: 0.9rem;
    }
    
    /* News Articles Mobile */
    .news-article-card {
        padding: 1rem;
    }
    
    .news-article-card h2 {
        font-size: 1.1rem;
    }
    
    .article-excerpt {
        font-size: 0.9rem;
    }
    
    /* Polls Mobile */
    .polls-section {
        padding: 0 15px;
    }
    
    .poll-card {
        padding: 1.5rem;
    }
    
    .poll-question {
        font-size: 1.1rem;
    }
    
    .poll-bar {
        width: 100px;
    }
    
    /* Social Media Mobile */
    .social-section {
        padding: 0 15px;
    }
    
    .social-card {
        padding: 1.5rem;
    }
    
    .social-links {
        flex-direction: column;
    }
    
    .social-link {
        justify-content: center;
    }
    
    .club-social-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tables Mobile */
    .table-container {
        overflow-x: auto;
    }
    
    table {
        min-width: 600px;
    }
    
    /* Forms Mobile */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 14px;
        font-size: 0.9rem;
        width: 100%;
    }
    
    .btn,
    .newsletter-btn {
        padding: 12px 18px;
        font-size: 0.9rem;
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* NYT Article Mobile */
    .nyt-article {
        max-width: 100%;
        padding: 15px;
    }

    .nyt-article h1 {
        font-size: 1.8rem;
    }

    .nyt-article h2 {
        font-size: 1.4rem;
    }

    .nyt-article p,
    .nyt-article ul li {
        font-size: 1rem;
    }
    
    /* Footer Mobile */
    .footer {
        padding: 30px 15px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .footer nav ul {
        flex-direction: column;
        gap: 10px;
    }
    
    /* Stats Mobile */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-item {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    
    /* Admin Mobile */
    .admin-grid,
    .controls {
        flex-direction: column;
        gap: 15px;
    }
}

/* Small Mobile Styles (max-width: 480px) */
@media (max-width: 480px) {
    .logo h1 {
        font-size: 1.5rem;
    }
    
    .section-title-main,
    .page-title {
        font-size: 1.4rem;
    }
    
    .featured-title a {
        font-size: 1.2rem;
    }
    
    .featured-content,
    .story-content {
        padding: 12px;
    }
    
    .poll-card,
    .social-card,
    .news-article-card {
        padding: 15px;
    }
    
    .nyt-article {
        padding: 12px;
    }
    
    .nyt-article h1 {
        font-size: 1.5rem;
    }
    
    .nyt-article h2 {
        font-size: 1.2rem;
    }
    
    .content-wrapper {
        padding: 15px 10px;
    }
}

/* Newsletter Banner Responsive */
@media (max-width: 768px) {
    .newsletter-banner {
        padding: 15px 0;
    }
    
    .newsletter-banner-content {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
        padding: 0 15px;
    }
    
    .newsletter-banner-title {
        font-size: 1.5rem;
    }
    
    .newsletter-banner-description {
        font-size: 1rem;
    }
    
    .newsletter-banner-form {
        flex-direction: column;
        gap: 15px;
    }
    
    .newsletter-inputs {
        flex-direction: column;
        gap: 12px;
    }
    
    .newsletter-inputs input {
        width: 100%;
        padding: 12px 16px;
    }
    
    .newsletter-banner-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

/* Print Styles */
@media print {
    .newsletter-banner,
    .search-container,
    .menu-btn,
    .mobile-sidebar,
    .social-feed,
    .ad-sidebar,
    .ad-mid-article {
        display: none !important;
    }
    
    .content-wrapper {
        padding: 0;
    }
    
    .nyt-article {
        max-width: 100%;
        font-size: 12pt;
        line-height: 1.4;
    }
}