/* ==========================================================================
   Agarwal Packers Movers India — responsive layer
   style.css holds the mobile (320px+) baseline. Everything here is an
   enhancement at a wider viewport. Breakpoints are content-driven:
     560px  two-column card grids
     768px  tablet: desktop nav appears, sticky CTA bar retires
     1024px desktop: split hero, four-column footer
   ========================================================================== */

/* ── 480px+ : roomier hero actions ─────────────────────────────────────── */
@media (min-width: 480px) {
  .hero-actions { grid-template-columns: 1fr 1fr; }
  .cta-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .error-links { grid-template-columns: 1fr 1fr; }
}

/* ── 560px+ : two-up grids, side-by-side form fields ───────────────────── */
@media (min-width: 560px) {
  :root { --gap: 1.35rem; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid .field-full { grid-column: 1 / -1; }
  .quote-form-wrap, .quote-card { padding: 1.7rem 1.6rem; }
  .trust-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
}

/* ── 768px+ : tablet — desktop navigation, no sticky bar ───────────────── */
@media (min-width: 768px) {
  :root { --space: 4rem; }
  body { padding-bottom: 0; }
  .sticky-cta { display: none; }

  .nav-toggle { display: none; }
  .site-nav, .no-js .site-nav { display: block; }
  .header-inner { flex-wrap: wrap; }
  .site-nav { order: 3; flex-basis: 100%; }
  .nav-list { display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; border-top: 1px solid var(--line); }
  .nav-list > li > a { border-bottom: 0; padding: .7rem .7rem; font-size: .93rem; }
  .nav-list > li > a:hover { color: var(--accent-dark); }
  .nav-cta-mobile { display: none; }
  .header-cta { display: flex; }

  /* CSS-only dropdown: opens on hover AND on keyboard focus, no JS needed */
  .has-sub { position: relative; }
  .has-sub > a::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .4rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  .subnav {
    position: absolute; top: 100%; left: 0; z-index: 20; min-width: 268px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: .5rem; margin: 0;
    visibility: hidden; opacity: 0; transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
  }
  .has-sub:hover > .subnav,
  .has-sub:focus-within > .subnav { visibility: visible; opacity: 1; transform: translateY(0); }
  .subnav a { padding: .55rem .7rem; border-radius: var(--radius-sm); }
  .subnav a:hover, .subnav a:focus-visible { background: var(--bg-alt); }

  .hero { padding-block: 3.5rem 4rem; }
  .hero-actions { display: flex; flex-wrap: wrap; }
  .hero-actions .btn { flex: 0 1 auto; }
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .footer-bottom { grid-template-columns: 1fr auto; align-items: center; }
  .cta-band { padding: 2.5rem 2.2rem; grid-template-columns: 1.2fr 1fr; align-items: center; }
  .cta-actions { grid-template-columns: 1fr; align-content: start; }
  .checklist-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* ── 1024px+ : desktop ─────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --space: 4.75rem; }
  .header-inner { flex-wrap: nowrap; min-height: 76px; }
  .site-nav { order: 0; flex-basis: auto; margin-left: auto; }
  .nav-list { border-top: 0; }
  .nav-list > li > a { padding: .6rem .6rem; }
  .header-cta { margin-left: 1rem; }

  .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 3rem; align-items: start; }
  .hero { padding-block: 4rem 4.75rem; }
  .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
  .split-sticky { position: sticky; top: 96px; }
}

/* ── 1200px+ ───────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  .nav-list > li > a { padding: .6rem .8rem; font-size: .95rem; }
}

/* ── print ─────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .sticky-cta, .site-footer, .section-cta, .breadcrumbs, .quote-form-wrap { display: none !important; }
  body { color: #000; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}