/* ============================================================
   responsive.css — Tech·ES
   Breakpoints: 1200, 900, 700, 500
   ============================================================ */

/* ── LARGE (≤1200px) ── */
@media (max-width: 1200px) {
  .hero-grid {
    grid-template-columns: 1fr 300px;
    gap: var(--space-8);
  }
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
  .categories-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
  }
}

/* ── TABLET (≤900px) ── */
@media (max-width: 900px) {
  /* Nav mobile */
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--container-padding);
    z-index: var(--z-dropdown);
  }
  .main-nav.open { display: block; }
  .main-nav ul {
    flex-direction: column;
    gap: var(--space-1);
  }
  .main-nav a {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }
  .site-header { position: sticky; }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-sidebar {
    display: grid;
    grid-template-columns: 1fr;
  }
  .top-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-4);
  }

  /* Articles grid */
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Categories */
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer-brand { grid-column: span 2; }

  /* Newsletter */
  .newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .newsletter-form {
    width: 100%;
  }

  /* Editorial */
  .editorial-inner {
    max-width: 100%;
  }
}

/* ── MOBILE LARGE (≤700px) ── */
@media (max-width: 700px) {
  /* Header */
  .header-top { display: none; }
  .header-main { padding: var(--space-3) 0; }
  .header-actions .btn-theme { display: none; }

  /* Hero */
  .hero-featured { padding: var(--space-8) 0 var(--space-10); }
  .hero-content h1 { font-size: var(--text-2xl); }
  .top-articles { grid-template-columns: 1fr; }
  .sidebar-heading { display: none; }

  /* Articles */
  .articles-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .filter-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); }

  /* Categories */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-brand { grid-column: span 1; }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }

  /* Pagination */
  .pagination-list .page-item:not(.active):not(.page-next):not(:nth-child(-n+3)) {
    display: none;
  }

  /* Editorial */
  .editorial-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Cookie banner */
  .cookie-inner {
    flex-direction: column;
  }
  .cookie-actions { width: 100%; justify-content: flex-end; }

  /* Pull quote */
  .pull-quote { font-size: var(--text-md); }

  /* Back to top */
  .back-to-top { bottom: var(--space-5); right: var(--space-4); }
}

/* ── MOBILE SMALL (≤500px) ── */
@media (max-width: 500px) {
  .logo-tagline { display: none; }
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form .btn { width: 100%; }
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .article-byline { flex-direction: column; align-items: flex-start; }

  /* Hide top numbers on small screens */
  .top-number { display: none; }
}

/* ── PRINT ── */
@media print {
  .site-header,
  .newsletter-strip,
  .ad-section,
  .site-footer,
  .cookie-banner,
  .back-to-top,
  .share-btns,
  .pagination,
  .filter-tabs { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 10pt; color: #555; }
  .article-content { max-width: 100%; }
}