/* ============================================================
   YOUNGER LONGER – RESPONSIVE (Mobile-First)
   Breakpoints: sm 640px | md 768px | lg 1024px | xl 1200px
   ============================================================ */

/* ── Tablet and below (≤ 1024px) ── */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-sidebar {
    position: static;
  }

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

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  /* Nav */
  .main-nav { display: none; }
  .hamburger { display: flex; }

  /* Hero */
  .hero { padding: var(--space-12) 0 var(--space-10); }
  .hero h1 { font-size: var(--font-size-3xl); }
  .hero-sub { font-size: var(--font-size-base); }

  /* Grids */
  .grid-3,
  .grid-2,
  .cluster-list {
    grid-template-columns: 1fr;
  }

  /* Article */
  .article-layout {
    padding: var(--space-6) var(--space-4);
  }

  .article-body h1 { font-size: var(--font-size-3xl); }
  .article-body h2 { font-size: var(--font-size-xl); margin-top: var(--space-8); }
  .article-body h3 { font-size: var(--font-size-lg); margin-top: var(--space-6); }

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

  /* CTA */
  .cta-block { padding: var(--space-10) var(--space-6); }
  .cta-form { flex-direction: column; align-items: center; }
  .cta-input { min-width: 100%; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Article meta */
  .article-meta {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Container */
  .container,
  .container-narrow {
    padding: 0 var(--space-4);
  }

  /* Page sections */
  .page-section { padding: var(--space-10) 0; }

  /* Related grid */
  .related-grid { grid-template-columns: 1fr; }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  :root {
    --font-size-base: 15px;
  }

  .hero h1 { font-size: var(--font-size-2xl); }

  .article-body p {
    font-size: var(--font-size-base);
  }

  .product-card-header {
    flex-direction: column;
  }
}

/* ── Print ── */
@media print {
  .site-header,
  .site-footer,
  .article-sidebar,
  .cta-block,
  .related-articles,
  .affiliate-disclosure {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
}