/* ============================================================
   build.allen87.com — Responsive
   Breakpoints: tablet 768px | mobile 480px
   ============================================================ */

/* ── Tablet (≤ 768px) ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .nav__links   { display: none; }
  .nav__burger  { display: flex; }
  .nav__mobile.open { display: flex; }

  .hero {
    padding-top: calc(var(--nav-height) + var(--sp-12));
    padding-bottom: var(--sp-12);
  }

  .card--featured {
    flex-direction: column;
    min-height: unset;
  }

  .card--featured .card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .card--featured .card__body {
    padding: var(--sp-6);
  }

  /* Grid de 3 colunas vira 1 */
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .newsletter__form {
    flex-direction: column;
  }

  .newsletter__input,
  .btn {
    width: 100%;
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-4);
  }

  .share-bar__inner {
    flex-wrap: wrap;
  }

  .post-header__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
}

/* ── Tablet médio (769px–1024px) ────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile (≤ 480px) ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .container,
  .container--prose {
    padding-inline: var(--sp-4);
  }

  .lang-switcher { display: none; }

  .post-header__cover {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
  }

  .toc { padding: var(--sp-4); }

  .scroll-top {
    bottom: var(--sp-4);
    right: var(--sp-4);
  }
}

/* ── Large (≥ 1400px) ───────────────────────────────────────────────────────── */
@media (min-width: 1400px) {
  .cards-grid {
    gap: var(--sp-8);
  }
}