/* 
 * Global Responsive Utilities
 * This file contains responsive utilities that apply across all layouts and themes
 */

/* === Base Responsive Grid === */
.container {
    width: 100%;
    max-width: var(--container-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding, 1rem);
    padding-right: var(--container-padding, 1rem);
}

/* === Responsive Utilities === */
.hide-xs {
    display: none !important;
}

@media (min-width: 576px) {
    .hide-xs {
        display: inherit !important;
    }
    
    .hide-sm {
        display: none !important;
    }
    
    /* Container padding adjustments */
    .container {
        padding-left: max(var(--container-padding, 1rem), 1.5rem);
        padding-right: max(var(--container-padding, 1rem), 1.5rem);
    }
}

@media (min-width: 768px) {
    .hide-sm {
        display: inherit !important;
    }
    
    .hide-md {
        display: none !important;
    }
    
    /* Grid columns for medium screens */
    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) {
    .hide-md {
        display: inherit !important;
    }
    
    .hide-lg {
        display: none !important;
    }
    
    /* Grid columns for large screens */
    .grid-lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid-lg-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1200px) {
    .hide-lg {
        display: inherit !important;
    }
    
    .hide-xl {
        display: none !important;
    }
}

/* === Responsive Layout Handlers === */

/* For extra small screens (mobile phones) */
@media (max-width: 575.98px) {
    /* Typography adjustments */
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 1.875rem) !important;
    }
    
    h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important;
    }
    
    /* Component spacing adjustments */
    .article-card__content {
        padding: 0.75rem !important;
    }
    
    .section-header {
        margin-bottom: 1rem !important;
    }
    
    /* Ensure images don't overflow their containers */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Navigation adjustments */
    nav ul {
        flex-direction: column;
    }
    
    /* For layouts with horizontal navigation that needs to be collapsed */
    .horizontal-nav ul, 
    .dropdown-nav ul {
        display: none;
    }
    
    /* Convert two-column layouts to single-column on small screens */
    .two-column-container,
    .news-content-wrapper,
    .content-wrapper {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust hero sections */
    .hero-section {
        padding: 1.5rem 0 !important;
    }
    
    /* Adjust article grids */
    .articles-grid,
    .featured-articles-grid,
    .news-grid,
    .portfolio-grid,
    .grid-layout {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust feature article layouts for magazine and news templates */
    .feature-main .article-card,
    .magazine-hero-grid,
    .top-stories-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Make sure ads don't overflow */
    .ad-container {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Footer adjustments */
    .footer-content {
        grid-template-columns: 1fr !important;
    }
    
    /* Specific layout adjustments */
    .article-item {
        flex-direction: column !important;
    }
    
    .article-item .article-image {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 1rem;
    }
    
    /* Reduce padding for compressed layouts */
    :root {
        --density-factor: max(var(--density-factor, 1) * 0.85, 0.7);
    }
}

/* For small screens (tablets) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Create two-column grids for somewhat larger screens */
    .articles-grid,
    .featured-articles-grid,
    .news-grid,
    .portfolio-grid,
    .grid-layout {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Ensure sidebar comes after main content on tablet */
    .main-column {
        order: 1;
    }
    
    .sidebar-column {
        order: 2;
    }
    
    /* Two-column layouts should still show as single column */
    .two-column-container,
    .news-content-wrapper,
    .content-wrapper {
        grid-template-columns: 1fr !important;
    }
}

/* For medium screens (small desktops) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Mobile menu toggle button should be hidden on medium screens and up */
    .hamburger-menu-button {
        display: none !important;
    }
    
    /* Horizontal menu should be visible on medium screens and up */
    nav ul {
        display: flex !important;
    }
    
    /* Adjust grids for medium screens */
    .articles-grid,
    .featured-articles-grid,
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Two-column layouts can now have sidebar */
    .two-column-container,
    .news-content-wrapper,
    .content-wrapper {
        grid-template-columns: 2fr 1fr !important;
    }
}

/* Print styles */
@media print {
    /* Hide unnecessary elements when printing */
    header nav,
    footer,
    .ad-container,
    .sidebar,
    button,
    .social-links {
        display: none !important;
    }
    
    /* Ensure full width for content */
    main,
    .container,
    .article-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Adjust typography for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }
    
    /* Make sure links are readable */
    a {
        color: #000;
        text-decoration: underline;
    }
    
    /* Show full URL after links */
    a:after {
        content: " (" attr(href) ")";
    }
}