/* ---- Architectural Design page — mid-page CTA banner and the bespoke
   How We Work layout. Page-scoped (not a shared component): the CTA banner
   shape and the two-column step list are specific to this page's content
   and aren't reused elsewhere yet. ---- */

/* ---- Mobile/tablet section rhythm (below 1024px only — every rule in
   this block is restored to its original shared-component/.section value
   at 1024px+, so desktop is untouched).

   The page runs three plain-paper .section elements back to back (Intro,
   What We Do, How We Collaborate) with no background change between them,
   so .section's default padding-block (space-20 top AND bottom on every
   one of them) doubles up into a ~160px dead gap at each boundary with
   nothing visually marking it as a deliberate break — excessive on a
   narrow viewport. Tightened here to a single boundary's worth of space
   instead of two stacked ones. Only one side of each boundary needs
   tightening (not both), so the other side is left at .section's normal
   default:
     Intro (bottom) → What We Do (top, bottom) → How We Collaborate (top)

   The .editorial-duo__primary/__secondary gap (project-detail.css) is a
   separate, larger offender: an unconditional space-40 (160px) between the
   intro paragraph and the tall image below it, and between the secondary
   image and the Nominated Architects block — applied at every width, not
   just desktop's side-by-side columns. Scoped to .how-we-collaborate only,
   since .editorial-duo is shared with other pages (Melody House).

   Transitions that DO change background (Duo → sand CTA, CTA → How We
   Work, How We Work → the FAQ section's alt tint) are left more generous
   than the same-background ones above, but still trimmed slightly — a
   background change is a real cue and earns more breathing room, just not
   the full stacked 160px. The CTA panel-sequence's own margin-block is left
   untouched entirely: it's a near-full-viewport pinned block, and that
   scale of transition warrants the site's normal spacing. ---- */
.intro-statement {
  padding-bottom: var(--space-10);
}

.what-we-do {
  padding-block: var(--space-10);
}

.how-we-collaborate {
  padding-top: var(--space-10);
}

.how-we-collaborate .editorial-duo__primary,
.how-we-collaborate .editorial-duo__secondary {
  gap: var(--space-10);
}

.how-we-work {
  padding-bottom: var(--space-16);
}

.faq {
  padding-top: var(--space-16);
}

@media (min-width: 1024px) {
  .intro-statement,
  .what-we-do,
  .how-we-collaborate,
  .how-we-work,
  .faq {
    padding-block: var(--space-32);
  }

  .how-we-collaborate .editorial-duo__primary,
  .how-we-collaborate .editorial-duo__secondary {
    gap: var(--space-40);
  }
}

/* Mid-page "Enquire Now" panel-sequence markup/styling itself
   (.panel-sequence--cta / .panel--cta, including its margin-block) has
   moved to panel.css — it's now reused on other pages (e.g. Melody House),
   not specific to this one. */

/* ---- How We Work — text on the left as a two-column numbered list, small
   portrait image top-right (not sticky — it stays in normal flow and scrolls
   with the rest of the section). Grid is 4 equal columns: the content spans
   the first 2 (half the row), the media sits in the last (a quarter), and
   column 3 is left empty — that's the "massive space" between them, sized
   off the same gap the other two use rather than a one-off margin value. ---- */
.how-we-work__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .how-we-work__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: var(--space-16);
  }

  .how-we-work__content {
    grid-column: 1 / 3;
  }

  .how-we-work__media {
    grid-column: 4 / 5;
  }
}

.how-we-work__heading {
  margin-bottom: var(--space-8);
}

.how-we-work__list {
  display: flex;
  flex-direction: column;
}

/* Default grid-auto-flow (row) — reads left to right, top to bottom
   (1 2 / 3 4 / 5), matching source order exactly so visual and DOM/reading
   order never diverge. */
@media (min-width: 1024px) {
  .how-we-work__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Grid items stretch to their row's height by default — steps 2 and 4
       are already the tallest cell in their row, so this only changes
       anything for the shorter 1/3/5, which otherwise get stretched
       downward with dead space to match their taller row-mate. */
    align-items: start;
    column-gap: var(--space-16);
  }
}

.how-we-work__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-10);
}

@media (min-width: 1024px) {
  .how-we-work__step {
    padding-block: var(--space-3);
  }
}

.how-we-work__step:first-child {
  padding-top: 0;
}

/* Row 1 (steps 1 and 2) sits flush against the heading above with no lead-in
   padding; the right-hand column (even steps) then gets a small extra
   push down so it reads a little lower than its left-hand row-mate — a
   deliberate offset, not row-to-row misalignment. */
@media (min-width: 1024px) {
  .how-we-work__step:nth-child(2) {
    padding-top: 0;
  }

  .how-we-work__step:nth-child(even) {
    margin-top: var(--space-6);
  }

  /* Extra gap between steps 2 and 4 specifically — wins over the shared
     even-column rule above (same specificity, declared later) without
     touching step 2's own offset from step 1, or the 1/3/5 rhythm. */
  .how-we-work__step:nth-child(4) {
    margin-top: var(--space-16);
  }
}

.how-we-work__index {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  line-height: 1;
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .how-we-work__index {
    font-size: var(--font-size-h2-md);
  }
}

@media (min-width: 1280px) {
  .how-we-work__index {
    font-size: var(--font-size-h2-lg);
  }
}

.how-we-work__text {
  color: var(--color-text-muted);
}

/* ---- FAQs section — tint applied to the whole section (.section--alt,
   layout.css) rather than just the right-hand panel, so the left-hand
   heading sits on the same background as the accordion beside it. ---- */
.faq-panel {
  min-width: 0;
}

/* Top-aligned instead of the base reverse/feature combo's vertical
   centering — the "FAQs" heading should sit level with the first accordion
   row, not centered against the full height of the list. Gap is widened
   further than the base module's default so the heading reads as clearly
   separated from the accordion rather than just adjacent to it. */
@media (min-width: 1024px) {
  .faq .editorial-module--feature.editorial-module--reverse {
    align-items: flex-start;
    gap: var(--space-24);
  }

  /* The base --reverse rule right-aligns the text block against the gap
     (see project-detail.css) so it sits close to the image it used to
     mirror. The FAQ heading isn't paired with an image, so push it to the
     start of its own column instead — flush toward the left edge of the
     page, with the widened gap above opening up between it and the
     accordion. */
  .faq .editorial-module--reverse .editorial-text-block {
    justify-self: start;
  }
}