/* ===========================================
   SEARCH RESULTS PAGE STYLES - RESPONSIVE
   =========================================== */

/* Root variables */
:root {
    --max-content-width: 90rem; /* 1440px */
    --content-width: 65rem; /* 1040px */
    --sidebar-width: 23.125rem; /* 370px */
    --spacing-xs: 0.625rem; /* 10px */
    --spacing-sm: 1.25rem; /* 20px */
    --spacing-md: 2.5rem; /* 40px */
    --spacing-lg: 3.25rem; /* 52px */
}

/* .main-container — merged into shared-styles.css (min-height:100vh added there) */

/* Search Title */
.search-title {
    margin: 0;
    font-size: 2rem; /* 32px */
    line-height: 2.375rem; /* 38px */
    color: #0C004F;
    font-family: "Harriet Text-Bold", serif;
    font-weight: 700;
}

.title-label {
    color: #0C004F;
    font-family: "Montserrat", Helvetica;
    font-weight: 700;
}

.title-query {
    color: #0C004F;
    font-family: "Montserrat", Helvetica;
    font-weight: 600;
}

/* Content Grid */
.content-grid {
    display: flex;
    gap: 2.5rem; /* 40px */
    width: 100%;
    align-items: flex-start;
}

/* Main Content */
.main-content {
    width: 100%;
    max-width: var(--content-width);
    display: flex;
    flex-direction: column;
}

/* .article-list — merged into shared-styles.css (base); search-results specific gap preserved via CSS var */
/* .article-image base — merged into shared-styles.css; search-results specific sizing below */
.article-image {
    width: 28.375rem; /* 454px — search-results specific width override */
    flex-shrink: 0;
    object-fit: cover;
}

.article-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem; /* 10px */
}

.article-title {
    color: #0C004F;
    font-size: 1.5rem; /* 24px */
    font-family: "Harriet Text", serif;
    font-weight: 700;
    line-height: 2rem; /* 32px */
    margin: 0;
    height: 4rem; /* 64px */
    overflow: hidden;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

.ad-banner .ad-content {
    width: 61.25rem; /* 980px */
    height: 7.625rem; /* 122px */
}

    .ad-banner .ad-content img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

.article-category {
    background: #4A4085;
    color: white;
    font-size: 0.75rem; /* 12px */
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    padding: 0.25rem 0.6875rem; /* 4px 11px */
    border-radius: 0.75rem; /* 12px */
    height: 1.5rem; /* 24px */
    display: inline-flex;
    align-items: center;
}

.article-date {
    color: #4A4085;
    font-size: 0.875rem; /* 14px */
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}

.article-excerpt {
    color: #0C004F;
    font-size: 1rem; /* 16px */
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    line-height: 1.5rem; /* 24px */
    margin: 0;
    height: 4rem; /* 64px */
    overflow: hidden;
}

/* .pagination, .pagination-arrow, .pagination-number, .pagination-dots — merged into shared-styles.css */

/* .forum-widget, .forum-title — merged into shared-styles.css */

/* Hide video widget on desktop */
.live-video-section {
    display: none;
}

/* Mobile Styles */
@media (max-width: 1188px) {
    .search-title {
        font-size: 1.5rem; /* 24px */
        padding: 0 0.9375rem; /* 15px */
    }

    .content-grid {
        flex-direction: column;
        gap: 1.875rem; /* 30px */
    }

    .main-content {
        width: 100%;
        gap: 1.625rem; /* 26px */
    }

    .article-list {
        gap: 1.875rem; /* 30px */
        padding: 0 0.9375rem; /* 15px */
    }

    .article-image {
        width: 100%;
        height: auto;
    }

    .article-info {
        gap: 0.625rem; /* 10px */
    }

    .article-title {
        font-size: 1.25rem; /* 20px */
        line-height: 1.625rem; /* 26px */
        height: auto;
    }

    .article-excerpt {
        font-size: 0.875rem; /* 14px */
        line-height: 1.25rem; /* 20px */
        height: auto;
    }

    .pagination {
        display: none;
    }

    /* Show video widget on mobile */
    .live-video-section {
        display: block;
        width: 100%;
        padding: 0 0.9375rem; /* 15px */
        margin: 1.875rem 0; /* 30px */
    }

    .video-widget-title {
        width: 100%;
        text-align: center;
        color: #ffffff;
        font-size: 2rem; /* 32px */
        font-family: "Harriet Text", serif;
        font-weight: 700;
    }

    .sidebar-mobile-only .forum-widget {
        width: 100%;
        height: 32.5625rem; /* 521px */
        background: #F0F0F0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-mobile-only .forum-title {
        text-align: center;
        color: #0C004F;
        font-size: 2rem; /* 32px */
        font-family: "Harriet Text", serif;
        font-weight: 700;
    }

    .main-container {
        margin-top: 1.875rem !important; /* 30px */
    }

    .mobile-search-btn,
    .mobile-burger-btn {
        display: flex !important;
    }
}

/* ===========================================
   RESPONSIVE DYNAMIC SIZING (Desktop 1440px+)
   =========================================== */

@media (min-width: 1188px) {
    :root {
        --max-content-width: min(90rem, 90vw);
        --content-width: min(65rem, 67.7vw);
        --sidebar-width: min(22.5rem, 18.75vw); /* 360px base */
    }

    .content-grid {
        gap: min(2.5rem, 2.6vw);
    }

    .main-content {
        max-width: min(65rem, 67.7vw);
    }

    .article-image {
        width: min(28.375rem, 29.5vw); /* 454px base */
    }

    .article-title {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .article-excerpt {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .ad-banner .ad-content {
        width: min(61.25rem, 63.8vw); /* 980px base */
        height: min(7.625rem, 7.94vw); /* 122px base */
    }

    .pagination {
        gap: min(3rem, 3.13vw);
    }

    .pagination-number,
    .pagination-dots {
        font-size: min(1.25rem, 1.3vw);
    }

    .sidebar {
        width: var(--sidebar-width) !important;
    }

    .top-headlines {
        width: var(--sidebar-width) !important;
    }

    .magazine-subscribe {
        width: var(--sidebar-width) !important;
    }

    .magazine-image {
        width: var(--sidebar-width) !important;
        height: auto !important;
    }

    .subscribe-btn {
        width: var(--sidebar-width) !important;
    }

    .forum-widget {
        width: var(--sidebar-width) !important;
    }

    .live-results {
        width: var(--sidebar-width) !important;
    }
}