/* ==========================================================================
   Real Home Habits — Responsive layer
   Mobile-first base lives in style.css / article.css; this file adds
   breakpoints for tablet and desktop.
   ========================================================================== */

/* Small phones: tighten spacing a touch */
@media (max-width: 480px) {
  body { font-size: 1rem; }
  .hero { padding-top: 1.6rem; }
  .author-box {
    flex-direction: flex-row;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem;
  }
}

/* Tablet and up */
@media (min-width: 640px) {
  .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .article-nav { grid-template-columns: 1fr 1fr; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop nav kicks in at 1100px */
@media (min-width: 1100px) {
  .menu-toggle,
  .mobile-nav,
  .mobile-search-form {
    display: none !important;
  }

  .main-nav { display: block !important; }
  .header-search-form { display: flex !important; }
}

@media (min-width: 900px) {
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .category-grid { grid-template-columns: repeat(3, 1fr); }

  .featured-card {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }

  .featured-card .card-media { height: 100%; aspect-ratio: auto; }

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

  .institutional-list { columns: 2; }

  .homepage-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.4rem;
    align-items: start;
  }
}

/* Large desktop */
@media (min-width: 1200px) {
  .card-grid.cols-3-lg { grid-template-columns: repeat(3, 1fr); }
}

/* Print */
@media print {
  .site-header, .mobile-nav, .back-to-top, .cookie-banner,
  .ad-slot, .site-footer, .share-row, .toc { display: none !important; }
  body { background: #fff; color: #000; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}