/* ==========================================================================
   Durga Analytics - responsive.css
   Breakpoint-only refinements. Component files carry their own critical
   responsive rules; this file holds cross-cutting layout adjustments and the
   print stylesheet. Breakpoints: 1080 / 940 / 720 / 520.
   ========================================================================== */

/* Large tablet / small laptop */
@media (max-width: 1080px) {
  :root { --wrap-max: 960px; }
}

/* Tablet - nav collapses (handled in styles.css §4); tighten hero rhythm */
@media (max-width: 940px) {
  .hero h1 { max-width: 26ch; }
  .two-col { gap: 32px; }
}

/* Small tablet */
@media (max-width: 720px) {
  :root { --text-base: 16px; }
  .section { padding: clamp(44px, 10vw, 72px) 0; }
  .breadcrumb ol { font-size: .78rem; }
}

/* Phone */
@media (max-width: 520px) {
  .hero-cta .btn { width: 100%; text-align: center; }
  .nav-actions .nav-cta { display: none; } /* CTA lives in mobile menu instead */
  .foot-note { flex-direction: column; }
}

/* Print - legible, ink-saving */
@media print {
  header.site, footer.site, .cta-band, .theme-toggle, .nav-toggle, .mobile-menu { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { border: none; padding: 12pt 0; }
  a { color: #000; text-decoration: underline; }
  .hero { background: #fff; color: #000; }
  .hero h1, .hero .lede { color: #000; }
}