/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   El Criterio Puebla
   ============================================================ */

/* ---- 1200px: contenedor máximo (ya definido con max-width) ---- */

/* ---- 1024px: grids de 4 → 2 ---- */
@media (max-width: 1024px) {
  .grid-four {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

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

  .columnistas-grid--full {
    grid-template-columns: 1fr;
  }

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

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

  .page-with-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }
}

/* ---- 768px: colapso de nav, hero full width ---- */
@media (max-width: 768px) {
  /* Nav */
  .hamburger {
    display: flex;
  }

  .navbar__menu,
  .navbar__badge {
    display: none;
  }

  /* Masthead */
  .masthead__wordmark {
    font-size: 36px;
  }

  .masthead__separator {
    width: 100%;
  }

  .masthead__edition {
    display: none;
  }

  /* Grids */
  .grid-hero {
    grid-template-columns: 1fr;
  }

  .grid-columns {
    grid-template-columns: 1fr;
  }

  .grid-four {
    grid-template-columns: 1fr;
  }

  .archive-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .footer-legal-list {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

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

  /* Author hero */
  .author-hero__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .author-hero__meta {
    justify-content: center;
  }

  /* Article */
  .article-title {
    font-size: 26px;
  }

  .article-summary {
    font-size: 16px;
  }

  .article-byline {
    flex-wrap: wrap;
  }

  /* Newsletter */
  .newsletter-block__inner {
    flex-direction: column;
    gap: 20px;
  }

  .newsletter-form__group {
    flex-direction: column;
  }

  .newsletter-form__btn {
    width: 100%;
  }

  /* Contact form */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Author bio */
  .author-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Cookie banner */
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Topbar */
  .topbar__right {
    display: none;
  }

  /* Share */
  .share-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ---- 480px: tipografía reducida, padding 16px ---- */
@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }

  .masthead__wordmark {
    font-size: 30px;
  }

  .masthead {
    padding: 20px 0 16px;
  }

  .article-title {
    font-size: 22px;
  }

  .page-title {
    font-size: 24px;
  }

  .author-hero__name {
    font-size: 24px;
  }

  .error-code {
    font-size: 80px;
  }

  .newsletter-block {
    padding: 20px;
  }

  .columnistas-grid {
    grid-template-columns: 1fr;
  }

  .card-hero {
    min-height: 260px;
  }

  .card-hero__title {
    font-size: 18px;
  }

  .section-block {
    padding: 28px 0;
  }

  .related-articles .archive-grid {
    grid-template-columns: 1fr;
  }

  .form-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-main {
    padding: 32px 0 24px;
  }

  .author-bio {
    padding: 16px;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__btn {
    flex: 1;
    text-align: center;
  }
}

/* ---- Accesibilidad: reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---- Print ---- */
@media print {
  .navbar,
  .topbar,
  .site-footer,
  .cookie-banner,
  .share-buttons,
  .newsletter-block,
  .sidebar {
    display: none !important;
  }

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

  a {
    color: inherit;
    text-decoration: none;
  }
}