/* ==========================================================================
   NameFonts — Responsive Breakpoints
   Mobile-first base lives in components.css / base.css.
   NOTE: desktop layout below follows spec Section 88's TEXT description
   (two-column hero, generator left / preview right, wide nav, orange band)
   because no landscape desktop reference image has been received yet.
   Re-check this file against the real desktop reference once supplied —
   see phase report for details.
   ========================================================================== */

/* ---- Small phones already covered by base rules (320–479px) ---- */
@media (max-width: 340px) {
  /* At the smallest supported width, logo + 3 header icon buttons (40px
     each) genuinely don't fit with their default sizing/gaps -- measured
     during QA, not guessed. Tightening just this breakpoint rather than
     shrinking touch targets everywhere. */
  .header-utils { gap: var(--space-2); }
  .icon-button { width: 36px; height: 36px; }
}

/* ---- Large phones / small tablets ---- */
@media (min-width: 480px) {
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .trending-grid { grid-template-columns: repeat(3, 1fr); }
  .explore-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet ---- */
@media (min-width: 768px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }

  .hero__grid { grid-template-columns: 1.1fr 0.9fr; }
  .category-grid { grid-template-columns: repeat(4, 1fr); }
  .trending-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .textart-grid { grid-template-columns: repeat(3, 1fr); }
  .platform-grid { grid-template-columns: repeat(8, 1fr); }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---- Desktop ---- */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr 0.85fr; gap: var(--space-8); }
  .article-grid { grid-template-columns: repeat(3, 1fr); }
  .explore-band { padding: var(--space-8); }
  .explore-band .explore-band__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; }
}

@media (min-width: 1280px) {
  :root { --container-width: 1240px; }
  .category-grid { grid-template-columns: repeat(8, 1fr); }
}