/* ============================================================================
   GARAGE GALS . RESPONSIVE
   ----------------------------------------------------------------------------
   Breakpoint overrides for the layout primitives and components. Mobile-first
   base lives in each module; this file handles the collapses. Loaded last so
   it wins. Breakpoints: 1080 (tablet-l), 860 (tablet), 620 (phone).
   ============================================================================ */

/* ===== <= 1080px : large tablet ========================================== */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split--40-60,
  .split--60-40 { grid-template-columns: 1fr 1fr; }
}

/* ===== <= 860px : tablet ================================================== */
@media (max-width: 860px) {
  .split,
  .split--40-60,
  .split--60-40 {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  /* When a split stacks, undo the visual reorder so copy leads */
  .split--reverse > :first-child { order: 0; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps-rail { grid-template-columns: 1fr; gap: var(--space-lg); }
  .steps-rail .step { border-top: none; border-left: 2px solid var(--rule); padding-top: 0; padding-left: var(--space-md); }
  .steps-rail .step::after { top: 0; left: -5px; }

  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .foot__brand { grid-column: 1 / -1; }

  .section-head { margin-bottom: var(--space-xl); }
}

/* ===== <= 620px : phone =================================================== */
@media (max-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

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

  .foot__grid { grid-template-columns: 1fr; }
  .foot__legal { flex-direction: column; gap: var(--space-2xs); }

  .trust-bar { gap: var(--space-sm); }
  .trust-bar__sep { display: none; }

  .pull-quote__text { font-size: var(--fs-h2); }

  /* Give breathing room before the sticky CTA bar */
  body { padding-bottom: 4.5rem; }

  .display-2xl { letter-spacing: -0.03em; }

  .btn-block-mobile { display: flex; width: 100%; }
  .cluster--stack-mobile { flex-direction: column; align-items: stretch; }
  .cluster--stack-mobile .btn { width: 100%; }
}

/* ===== Fine-pointer only: enable hover-dependent flourishes =============== */
@media (hover: hover) and (pointer: fine) {
  .hover-only { display: revert; }
}
@media (hover: none) {
  /* On touch, reveal the card "more" affordance by default */
  .svc-card__more { opacity: 1; transform: none; }
  .card__bracket { opacity: 0.5; }
}

/* ===== Tall + wide safety for the hero on short viewports ================ */
@media (max-height: 680px) and (min-width: 861px) {
  .hero { min-height: auto; padding-block: var(--space-4xl); }
}

/* ===== Reduce heavy blur on low-end / when transparency reduced ========== */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled,
  .sticky-cta,
  .card--glass,
  .card--ink { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.is-scrolled { background: var(--cream-150); }
}