/* =============================================================
 * responsive.css — Breakpoint adjustments
 * Mobile-first refinements layered on top of style.css.
 * Breakpoints: 1024 (tablet/laptop), 820 (tablet), 640 (mobile)
 * ============================================================= */

/* ---- <= 1024px ---- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 480px; margin-inline: auto; aspect-ratio: 16 / 11; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-about { grid-column: 1 / -1; }
}

/* ---- <= 900px : collapse main nav to hamburger ---- */
@media (max-width: 900px) {
  .nav__links,
  .nav__actions .btn--desktop { display: none; }

  .nav__toggle { display: block; }

  /* Slide-down full-width mobile menu */
  .mobile-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--color-bg);
    z-index: 99;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
    overflow-y: auto;
    padding: var(--space-6) var(--space-5) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-menu a.m-link {
    font-size: 1.35rem;
    font-weight: 700;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
  }
  .mobile-menu a.m-link:hover { color: var(--color-accent); }
  .mobile-menu .btn-row { flex-direction: column; margin-top: var(--space-6); }
  .mobile-menu .btn { width: 100%; }

  body.menu-open { overflow: hidden; }
}

@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}

/* ---- <= 820px ---- */
@media (max-width: 820px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  /* Carousel: 2 cards visible on tablet */
  .carousel__track > * { flex-basis: calc((100% - var(--space-5)) / 2); }
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__media { max-width: 520px; margin-inline: auto; order: -1; }
  .split--media-right .split__media { order: 0; }
}

/* ---- <= 640px : phones ---- */
@media (max-width: 640px) {
  :root { --header-h: 66px; }

  .grid-2,
  .grid-3,
  .grid-4,
  .trust-strip,
  .stage-grid,
  .cred-grid,
  .option-grid { grid-template-columns: 1fr; }

  /* Carousel: 1 card visible on mobile */
  .carousel__track > * { flex-basis: 100%; }

  .container { padding-inline: var(--space-4); }

  .btn-row .btn { width: 100%; }
  .hero .btn-row { flex-direction: column; }

  .brand__name { font-size: 0.98rem; }
  .brand__name span { display: none; }

  /* Show mobile conversion bar, hide floating button */
  .conversion-bar { display: grid; }
  .wa-float { display: none; }

  /* Give page bottom room for the fixed bar */
  body { padding-bottom: 64px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Convert Transparent Build grid into vertical flow on mobile */
  .stage-grid { border: 0; background: transparent; gap: var(--space-3); }
  .stage {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
  }

  .hero__badge { position: static; margin-top: var(--space-4); max-width: none; }

  .planner__summary dl { margin: 0; }
}

/* ---- Larger desktops ---- */
@media (min-width: 1400px) {
  :root { --container: 1280px; }
}