/* ============================================================
   ReTriot — Responsive Breakpoints
   ============================================================ */

/* ---- LARGE DESKTOP (≤1400px) ---- */
@media (max-width: 1400px) {
    :root { --max-width: 1100px; }
}

/* ---- Desktop: larger horizontal card titles ---- */
@media (min-width: 992px) {
    .card--horizontal .card__title { font-size: 17px; }
    .card--horizontal .card__excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 4px;
        line-height: 1.5;
    }
}

/* ---- SMALL DESKTOP (≤1199px) ---- */
@media (max-width: 1199px) {
    :root { --sidebar-width: 280px; }
    
    .featured__grid {
        grid-template-columns: 1fr 1fr;
    }
    .featured__side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    
    .category-section .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .news-grid--4col {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer__grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }
    .footer__grid > div:last-child { display: none; }
}

/* ---- TABLET (≤991px) ---- */
@media (max-width: 991px) {
    :root { --header-height: 56px; }
    
    .layout {
        grid-template-columns: 1fr;
    }
    .layout__sidebar,
    .sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .header-search { flex: 0 1 280px; }
    
    .navbar__link { padding: 10px 14px; font-size: 14px; }
    
    .category-section .news-grid,
    .news-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .article__title { font-size: 26px; }
    .article__body { font-size: 16px; }
    .article .layout__main { padding: 24px 24px; }
    
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* ---- LARGE MOBILE (≤767px) ---- */
@media (max-width: 767px) {
    :root { --header-height: 52px; }
    
    .hamburger { display: flex; }
    .header-search { display: none; }
    .navbar { display: none; }
    .topbar__social { display: none; }
    
    .featured__grid {
        grid-template-columns: 1fr;
    }
    .featured__side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .featured__title { font-size: 20px; }
    
    .category-grid {
        grid-template-columns: 1fr;
    }
    
    .layout__sidebar,
    .sidebar {
        grid-template-columns: 1fr;
    }
    
    .category-section .news-grid,
    .news-grid--4col,
    .news-grid--2col,
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .ad-slot--header,
    .ad-slot--footer { height: 60px; }
    
    .article__title { font-size: 22px; }
    .article .layout__main { padding: 20px 16px; }
    .article__meta {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .bottom-nav { display: block; }
    body { padding-bottom: 64px; }
    
    .search-hero { padding: 28px 0; }
    .search-hero__title { font-size: 20px; }
    .search-hero__input { height: 46px; font-size: 15px; }
    
    .page-404__code { font-size: 80px; }
}

/* ---- SMALL MOBILE (≤575px) ---- */
@media (max-width: 575px) {
    .container { padding: 0 14px; }
    
    .topbar { font-size: 12px; padding: 5px 0; }
    
    .logo__text { font-size: 24px; }
    .logo__icon { height: 32px; }
    
    .card__title { font-size: 15px; }
    .card--large .card__title { font-size: 18px; }
    .card__body { padding: 12px; }
    .card__excerpt { font-size: 13px; }
    
    .section-header__title { font-size: 17px; }
    
    .ticker__label { padding: 0 10px; font-size: 12px; }
    .ticker__item { font-size: 13px; padding: 0 20px; }
    
    .share-buttons { flex-wrap: wrap; }
    
    .article__title { font-size: 20px; }
    .article__body { font-size: 15px; line-height: 1.85; }
    .article .layout__main { padding: 16px 14px; }
    
    .card--horizontal .card__image-wrap { width: 100px; min-width: 100px; }
    
    .page-content { padding: 20px 16px; }
    
    .footer { padding: 32px 0 0; }
    .footer__heading { font-size: 15px; }
}

/* ---- EXTRA SMALL (≤399px) ---- */
@media (max-width: 399px) {
    .logo__text { font-size: 20px; }
    .logo__icon { height: 28px; }
    .card--horizontal .card__image-wrap { width: 80px; min-width: 80px; }
}