/* ==========================================================================
   First Brick — Responsive overrides
   Base CSS targets desktop (1440); these queries adapt to tablet (768) and
   mobile (390) and everything fluid in between.
   ========================================================================== */

/* --- Large tablet / small desktop ------------------------------------ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .compare { gap: var(--space-16); }
}

/* Legal pages: below full desktop, drop the sticky TOC and use a single,
   comfortably measured reading column (per the approved Figma). */
@media (max-width: 1140px) {
  .legal-page__layout { grid-template-columns: 1fr; gap: 0; }
  .legal-page__toc { display: none; }
  .legal-page__content { max-width: 760px; margin-inline: auto; }
}

/* --- Tablet: switch to mobile navigation ----------------------------- */
@media (max-width: 900px) {
  .nav--desktop { display: none; }
  .site-header__cta { display: none; }
  .nav-toggle { display: inline-flex; }

  .split { grid-template-columns: 1fr; }
  .split--media-first > :first-child { order: 0; }

  /* Home split hero stacks: text, then illustration */
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-32); }
  .hero__visual { max-width: 520px; margin-inline: 0; }

  .pricing-split { grid-template-columns: 1fr; }

  .step-card { grid-template-columns: 1fr; gap: var(--space-24); }

  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-40); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet only (≈768): match the approved Figma tablet designs ----- */
@media (min-width: 761px) and (max-width: 900px) {
  /* Split heroes are centred on tablet when they stack (per Figma).
     Home stays left-aligned on mobile; Services/About are centred at both. */
  .page-home .hero__content,
  .page-services .hero__content,
  .page-about .hero__content { align-items: center; text-align: center; }
  .page-home .hero__content .hero__lead,
  .page-services .hero__content .hero__lead,
  .page-about .hero__content .hero__lead { text-align: center; }
  .page-home .hero__actions,
  .page-services .hero__actions,
  .page-about .hero__actions { justify-content: center; }
  .page-home .hero__visual,
  .page-services .hero__visual,
  .page-about .hero__visual { margin-inline: auto; }
}

/* --- Small tablet / large mobile ------------------------------------- */
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer__nav { grid-template-columns: repeat(2, 1fr); }

  /* Comparison cards stack on mobile (tablet keeps 3 columns, per Figma) */
  .compare { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .compare-card--featured { order: -1; } /* First Brick emphasised first on stack */

  /* Step-card blocks stack on mobile (tablet keeps 3 columns, per Figma) */
  .step-card__cols { grid-template-columns: 1fr; gap: var(--space-16); }

  .journey { flex-direction: column; }
  .journey__arrow { transform: rotate(90deg); }
  /* Journey step cards fill the full width on mobile (per Figma) */
  .journey--steps { align-items: stretch; }
  .journey--steps .journey__node { width: 100%; }
  /* Centre the down arrows between the full-width step cards */
  .journey--steps .journey__arrow { align-self: center; }
  /* Building-block symbol next to Discover/Understand/Trust/Choose/Act at 36px (square) */
  .journey--steps .fb-symbol { width: 36px; height: 36px; }
  /* Lay the symbol and label side by side within each step card */
  .journey--steps .journey__node--card { display: flex; flex-direction: row; align-items: center; gap: var(--space-12); }
  /* DIY → First Brick → Agency stays a right-pointing horizontal row on mobile (per Figma) */
  .journey--inline { flex-direction: row; flex-wrap: nowrap; gap: var(--space-8); }
  .journey--inline .journey__arrow { transform: none; }
  .journey--inline .journey__node { padding: 10px 14px; }

  /* Services & About hero: centre the eyebrow, heading and lead on mobile */
  .page-services .hero__content,
  .page-about .hero__content { align-items: center; text-align: center; }
  .page-services .hero__content .hero__lead,
  .page-about .hero__content .hero__lead { text-align: center; }
  /* About: amber X marks in the two "forced into two choices" cards */
  .page-about .x-card__mark { color: var(--color-signal-amber); }
  /* About: "…better middle ground" is a text-only centred navy card on mobile (per Figma) */
  .page-about .middle-band { min-height: 0; padding-block: var(--space-24); gap: 0; text-align: center; }
  .page-about .middle-band .fb-symbol { display: none; }
  /* About: seasoned-designer pills use a soft-blue fill on mobile */
  .page-about .chip { background: var(--color-blue-soft); }

  /* Banner photo gets a taller crop on small screens so it isn't a sliver */
  .figure-img--banner { --fig-ratio: 16 / 9; }

  /* Case study columns stack */
  .cs-split, .cs-split--even { grid-template-columns: 1fr; gap: var(--space-24); }
}

/* --- Mobile ---------------------------------------------------------- */
@media (max-width: 560px) {
  .toast-region {
    top: calc(var(--header-height) + var(--space-8));
    left: var(--space-16);
    right: var(--space-16);
    width: auto;
  }
  .actions--stack .btn { width: 100%; }
  .page-home .cta__inner .btn,
  .page-services .cta__inner .btn,
  .page-how-it-works .cta__inner .btn,
  .page-work .cta__inner .btn,
  .page-pricing .cta__inner .btn,
  .page-about .cta__inner .btn { width: 100%; }
  /* Get Started: bold 30px form section subtitles + full-width submit on mobile */
  .page-get-started .form-section__title { font-size: 30px; font-weight: var(--weight-bold); }
  .page-get-started .form button[type="submit"] { width: 100%; }
  /* Centered hero: let the single-button actions row span full width so the
     button can go full-width too. */
  .page-how-it-works .hero__inner .hero__actions,
  .page-about .hero__content .hero__actions { align-self: stretch; }
  .site-footer__nav { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .process-step { gap: var(--space-16); }
}

/* --- Fine tuning at the smallest widths ------------------------------ */
@media (max-width: 380px) {
  :root { --container-pad: 1.125rem; }
  .logo__tagline { display: none; }
}