/* ─── RESPONSIVE ─────────────────────────────────── */

/* ── Tablet wide (≤ 1100px) ── */
@media (max-width: 1100px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-card:first-child { grid-column: span 2; }

  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
  /* Hero */
  .hero {
    grid-template-columns: 1fr;
  }
  .hero__right { display: none; }
  .hero__left  { padding: 5rem 5vw 4rem; }

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

  /* Videos */
  .videos-grid {
    grid-template-columns: 1fr 1fr;
  }
  .videos-grid > .video-card:first-child {
    grid-column: span 2;
  }

  /* Editorial */
  .editorial {
    grid-template-columns: 1fr;
  }
  .editorial__visual { min-height: 220px; }
  .editorial__visual::after {
    background: linear-gradient(0deg, var(--pine) 0%, transparent 40%);
  }

  /* About */
  .about {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .about__img { max-width: 360px; }
}

/* ── Mobile (≤ 680px) ── */
@media (max-width: 680px) {
  /* Nav */
  .nav__links  { display: none; }
  .nav__hamburger { display: flex; }

  /* Categories */
  .categories-grid { grid-template-columns: 1fr; }
  .cat-card:first-child { grid-column: span 1; }

  /* Articles */
  .articles-grid { grid-template-columns: 1fr; }

  /* Videos */
  .videos-grid { grid-template-columns: 1fr; }
  .videos-grid > .video-card:first-child { grid-column: span 1; }

  /* Tools */
  .tools-grid { grid-template-columns: 1fr 1fr; }

  /* Newsletter form stacks */
  .newsletter__form { flex-direction: column; }

  /* Footer */
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }

  /* Hero stats */
  .hero__stats { gap: 1.5rem; }

  /* Section padding */
  .section { padding: 4rem 5vw; }
}

/* ── Small mobile (≤ 400px) ── */
@media (max-width: 400px) {
  .tools-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn-primary,
  .hero__actions .btn-ghost { width: 100%; justify-content: center; }
}