/* ==========================================================================
   Suburb pages — shared layer for every /[service]-[suburb]/ page
   --------------------------------------------------------------------------
   Loaded AFTER subpage.css. Uses only the design tokens from tokens.css, so a
   colour or spacing change made there flows through to every suburb page.

   One file for all four services (carpet, house, commercial, window) and all
   suburbs. Pages must not carry their own <style> blocks: the earlier suburb
   drafts did, and three pages ended up with three different looks.

   Prefix: .sb-  (suburb). Nothing here restyles a class the rest of the site
   already owns; it only adds new ones or narrows one with a modifier.
   ========================================================================== */

/* ---- Shared helpers ----------------------------------------------------- */
.sb-lead { max-width: var(--measure); font-size: var(--fs-body-lg); margin-top: var(--sp-4); }
.sb-head { max-width: 60rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sb-head h2 { margin-top: var(--sp-3); }
.sb-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-6); }
.sb-link { font-weight: 700; color: var(--blue-500); text-decoration: none; }
.sb-link:hover, .sb-link:focus-visible { text-decoration: underline; }
.band-ink-800 .sb-link { color: var(--cyan-300); }
.sb-muted { font-size: var(--fs-caption); color: var(--slate-400); }
.band-ink-800 .sb-muted { color: var(--on-dark-muted); }

/* ---- Two-column split (copy + photo) ------------------------------------ */
.sb-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sb-split--flip > :first-child { order: 2; }
.sb-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.sb-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sb-photo figcaption { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-caption); background: var(--paper-100); color: var(--slate-500); }
.band-ink-800 .sb-photo figcaption { background: var(--ink-700); color: var(--on-dark-muted); }

/* ---- Suburb key facts --------------------------------------------------- */
.sb-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-300);
  border: 1px solid var(--paper-300);
}
.sb-facts li { background: var(--paper-50); padding: var(--sp-4) var(--sp-5); }
.sb-facts b { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--slate-400); font-weight: 700; }
.sb-facts span { display: block; margin-top: var(--sp-1); color: var(--ink-700); font-weight: 700; }

/* ---- Service cards ------------------------------------------------------ */
.sb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.sb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  box-shadow: var(--shadow-sm);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), border-color var(--d-fast);
}
.sb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--mint-400); }
.sb-card h3 { margin: 0; font-size: var(--fs-heading-sm); color: var(--ink-800); }
.sb-card p { margin: 0; }
.sb-card .sb-link { margin-top: auto; padding-top: var(--sp-2); }
.sb-icon {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: var(--r-md);
  background: var(--grad-fresh); color: var(--ink-900);
}
.sb-icon svg { width: 1.45rem; height: 1.45rem; }

/* Cards on a dark band */
.band-ink-800 .sb-card { background: rgba(var(--rgb-white), 0.05); border-color: rgba(var(--rgb-white), 0.12); box-shadow: none; }
.band-ink-800 .sb-card h3 { color: var(--on-dark); }
.band-ink-800 .sb-card:hover { border-color: var(--mint-400); }

/* ---- Local conditions tiles (unique per suburb) ------------------------- */
.sb-local { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.sb-local .sb-card { flex-direction: row; align-items: flex-start; gap: var(--sp-4); }
.sb-local .sb-card > div { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---- Process: four steps instead of the site's default three ------------ */
.steps.sb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Before / after ----------------------------------------------------- */
.sb-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.sb-ba figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-50); border: 1px solid var(--paper-200); box-shadow: var(--shadow-sm); }
.sb-ba img { display: block; width: 100%; height: auto; }
.sb-ba figcaption { padding: var(--sp-4) var(--sp-5); color: var(--slate-500); }
.sb-ba figcaption b { display: block; color: var(--ink-800); }

/* ---- Region map + nearby suburbs ---------------------------------------- */
.sb-region { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.sb-map {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid rgba(var(--rgb-white), 0.12);
}
.sb-map svg { display: block; width: 100%; height: auto; }
.sb-map figcaption { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-caption); color: var(--on-dark-muted); border-top: 1px solid rgba(var(--rgb-white), 0.1); }
.sb-map a:focus-visible circle { stroke: var(--cyan-300); stroke-width: 4; }
.sb-map a:hover .sb-map__pin, .sb-map a:focus-visible .sb-map__pin { fill: var(--mint-400); }
.sb-map a:hover text, .sb-map a:focus-visible text { fill: #fff; }

.sb-nearby { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.sb-nearby a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(var(--rgb-white), 0.05);
  border: 1px solid rgba(var(--rgb-white), 0.12);
  color: var(--on-dark);
  text-decoration: none;
  transition: border-color var(--d-fast), transform var(--d-fast) var(--e-out);
}
.sb-nearby a:hover, .sb-nearby a:focus-visible { border-color: var(--mint-400); transform: translateX(4px); }
.sb-nearby strong { display: block; font-size: 1.05rem; }
.sb-nearby small { color: var(--on-dark-muted); }
.sb-nearby svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--mint-400); }
.sb-gmap { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(var(--rgb-white), 0.12); }
.sb-gmap iframe { display: block; width: 100%; height: 340px; border: 0; }

/* ---- Related pages (same suburb, other services + guides) --------------- */
.sb-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.sb-related a {
  display: flex; gap: var(--sp-4); align-items: center;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  color: var(--ink-800);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--d-fast), transform var(--d-fast) var(--e-out);
}
.sb-related a:hover, .sb-related a:focus-visible { border-color: var(--blue-500); transform: translateY(-3px); }
.sb-related .sb-icon { width: 2.6rem; height: 2.6rem; flex: none; }
.sb-related small { display: block; font-weight: 400; color: var(--slate-500); }
.sb-subhead { margin: clamp(2rem, 4vw, 3rem) 0 var(--sp-4); font-size: var(--fs-heading-sm); color: var(--ink-800); }

/* ---- Pricing checklist -------------------------------------------------- */
.sb-panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-lg);
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  box-shadow: var(--shadow-sm);
}
.sb-panel h3 { margin-top: 0; color: var(--ink-800); }

/* ---- Reviews ------------------------------------------------------------ */
.sb-review { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
/* Own badge: .review-badge lives in sections.css, which subpages do not load. */
.sb-gbadge {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  box-shadow: var(--shadow-md);
  color: var(--ink-800);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.sb-gbadge:hover, .sb-gbadge:focus-visible { border-color: var(--blue-500); }
.sb-gbadge > svg { width: 1.5rem; height: 1.5rem; }
.sb-gbadge__score { font-size: 1.5rem; font-family: var(--font-display); }
.sb-gbadge__stars { display: inline-flex; color: #f5b400; }
.sb-gbadge__stars svg { width: 1rem; height: 1rem; }

/* ---- Final CTA ---------------------------------------------------------- */
.sb-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.sb-final h2 { margin: var(--sp-3) 0 var(--sp-3); }
.sb-final p { max-width: 52ch; margin: 0; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .sb-cards, .sb-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps.sb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sb-split, .sb-region, .sb-review { grid-template-columns: 1fr; }
  .sb-split--flip > :first-child { order: 0; }
}
@media (max-width: 640px) {
  .sb-cards, .sb-related, .sb-local, .sb-ba, .steps.sb-steps { grid-template-columns: 1fr; }
  .sb-facts { grid-template-columns: 1fr 1fr; }
  .sb-gmap iframe { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-card, .sb-nearby a, .sb-related a { transition: none; }
  .sb-card:hover, .sb-nearby a:hover, .sb-related a:hover { transform: none; }
}

/* ---- Fixes after first browser review ----------------------------------- */
.sb-split p + p, .sb-head p + p { margin-top: var(--sp-4); }
.sb-icon { flex: none; }
.sb-wall.photowall__grid { column-count: 3; }
@media (max-width: 820px) { .sb-wall.photowall__grid { column-count: 2; } }
@media (max-width: 460px) { .sb-wall.photowall__grid { column-count: 1; } }
.sb-panel .ticklist { margin-bottom: var(--sp-5); }

/* ---- Round 2 review ------------------------------------------------------ */
/* Team photo: keep faces in frame when the portrait is cropped to 4:3. */
.sb-photo--top img { object-position: 50% 8%; }

/* FAQ: heading block on top, questions underneath, both centred. */
.sb-faq .faq__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 3vw, 2.5rem); }
.sb-faq .faq__head { max-width: 46rem; margin-inline: auto; text-align: center; }
.sb-faq .faq__head .eyebrow { justify-content: center; }
.sb-faq .faq__list { width: 100%; max-width: 860px; margin-inline: auto; }

/* Local-intent section: second paragraph under the lead. */
.sb-head .sb-lead + p { max-width: var(--measure); }

/* FAQ heading: full container width so the title sits on one line on desktop. */
.sb-faq .faq__head { max-width: none; }
.sb-faq .faq__head h2 { max-width: none; }
.sb-faq .faq__head p:not(.eyebrow) { max-width: 46rem; margin-inline: auto; }

/* FAQ heading: guarantee one line on laptops/desktops regardless of webfont width. */
@media (min-width: 900px) {
  .sb-faq .faq__head h2 { white-space: nowrap; text-wrap: nowrap; font-size: min(var(--fs-display-md), 4vw); }
}

/* One before/after image only (when the other is used as the intro photo). */
.sb-ba--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

/* ---- Round 3 review ------------------------------------------------------ */
/* Team photos: crop by orientation so faces are never cut.
   Portrait shot -> taller 4:5 frame anchored to the top of the photo.
   Landscape group shot -> shown at its own ratio, nothing cropped. */
.sb-photo--portrait img { aspect-ratio: 4 / 5; object-position: 50% 0; }
.sb-photo--natural img  { aspect-ratio: auto; }

/* Single before/after: photo on the left, method panel on the right. */
.sb-ba--single { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-width: none; align-items: center; }
.sb-ba--single .sb-panel .ticklist { margin: var(--sp-4) 0; }
.sb-ba--single .sb-panel .sb-muted { margin-bottom: var(--sp-5); }
@media (max-width: 860px) { .sb-ba--single { grid-template-columns: 1fr; } }