@media (min-width: 640px) {
  .grid-2,
  .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categories-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4,
  .categories-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .icon-quicklinks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Faixa crítica para 1024x768 */
@media (min-width: 960px) {
  .page-grid--sidebar,
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1rem;
    align-items: start;
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-4,
  .categories-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .topbar {
    display: block;
  }

  .site-nav {
    display: block;
  }

  .header-utility {
    display: inline-flex;
  }

  .nav-toggle,
  .mobile-drawer,
  .drawer-backdrop {
    display: none;
  }

  .article-content {
    max-width: none;
  }
}

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-content {
    max-width: 100%;
  }
}

/* Desktop real */
@media (min-width: 1200px) {
  .page-grid--sidebar,
  .article-layout {
    grid-template-columns: minmax(0, 900px) 290px;
    column-gap: 1.25rem;
    justify-content: center;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  .cards-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cards-grid--compact .post-card--compact {
    grid-template-columns: 1fr;
  }

  .cards-grid--compact .post-card--compact .post-card__thumb {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1280px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}