/* Mobile-First Responsive Styles - Applied to all pages */



/* Base mobile styles */

@media (max-width: 768px) {

    body {

        font-size: 16px;

        -webkit-text-size-adjust: 100%;

    }



    /* Header adjustments */

    header {

        padding: 2rem 1rem !important;

    }



    h1 {

        font-size: 2rem !important;

        line-height: 1.2 !important;

    }



    .subtitle {

        font-size: 1rem !important;

    }



    .team-logo {

        width: 80px !important;

        margin-bottom: 1rem !important;

    }



    /* Navigation - handled by MobileNav component */

    .site-nav ul {

        flex-wrap: wrap;

        gap: 0.5rem !important;

        justify-content: flex-start !important;

    }



    .site-nav a {

        font-size: 0.9rem !important;

        padding: 0.5rem 0.75rem;

    }



    /* Carousel */

    .carousel-container {

        height: 250px !important;

    }



    .carousel-overlay {

        font-size: 0.9rem !important;

        padding: 1rem 0.5rem !important;

    }



    /* Container */

    .container {

        padding: 0 0.75rem !important;

        margin: 1rem auto !important;

    }



    /* Featured articles */

    .featured-article {

        margin-bottom: 1.5rem;

    }



    .featured-image {

        height: 200px !important;

    }



    .featured-content {

        padding: 1rem !important;

    }



    .featured-title {

        font-size: 1.3rem !important;

    }



    .featured-meta {

        font-size: 0.8rem !important;

        flex-wrap: wrap;

    }



    .featured-excerpt {

        font-size: 1rem !important;

        line-height: 1.5 !important;

    }



    .expand-btn {

        width: 100%;

        padding: 1rem !important;

        font-size: 1.1rem !important;

    }



    /* Article grid */

    .article-grid {

        grid-template-columns: 1fr !important;

        gap: 1rem !important;

    }



    .article-card {

        padding: 1rem !important;

    }



    .article-title {

        font-size: 1.1rem !important;

    }



    .article-excerpt {

        font-size: 0.9rem !important;

    }



    /* Tables (Roster/Fantasy) */

    table {

        font-size: 0.85rem !important;

    }



    th, td {

        padding: 0.5rem 0.25rem !important;

    }



    .player-name {

        font-size: 0.9rem !important;

    }



    /* Search */

    .search-form input {

        font-size: 1rem !important;

        padding: 0.75rem !important;

    }



    .search-results {

        padding: 0.75rem !important;

    }



    /* Ad placeholders */

    .ad-space {

        height: 100px !important;

        font-size: 0.9rem !important;

    }



    /* News ticker */

    .news-ticker-container {

        font-size: 0.9rem !important;

    }



    /* Pagination */

    .pagination {

        flex-wrap: wrap;

        gap: 0.5rem !important;

    }



    .pagination a,

    .pagination .current {

        padding: 0.5rem 0.75rem !important;

        font-size: 0.9rem !important;

    }



    /* Roster filters */

    .position-filters {

        flex-wrap: wrap !important;

        gap: 0.5rem !important;

    }



    .filter-btn {

        padding: 0.5rem 0.75rem !important;

        font-size: 0.85rem !important;

    }



    /* Fantasy stats */

    .stats-container {

        padding: 1rem !important;

    }



    .stat-card {

        padding: 1rem !important;

    }



    /* Media embeds */

    .media-embed {

        height: 200px !important;

    }



    iframe {

        max-width: 100% !important;

    }

}



/* Tablet adjustments */

@media (min-width: 769px) and (max-width: 1024px) {

    .container {

        max-width: 100%;

        padding: 0 2rem;

    }



    h1 {

        font-size: 2.5rem !important;

    }



    .article-grid {

        grid-template-columns: repeat(2, 1fr) !important;

    }



    .carousel-container {

        height: 350px !important;

    }

}



/* Touch-friendly elements */

@media (hover: none) and (pointer: coarse) {

    button,

    a,

    .clickable {

        min-height: 44px;

        min-width: 44px;

    }



    .expand-btn,

    .filter-btn,

    .pagination a {

        padding: 1rem 1.5rem !important;

    }

}



/* Prevent horizontal scroll */

* {

    max-width: 100%;

}



img {

    height: auto;

    max-width: 100%;

}



/* Safe area insets for notched devices */

@supports (padding: max(0px)) {

    body {

        padding-left: env(safe-area-inset-left);

        padding-right: env(safe-area-inset-right);

    }

}