/*
 * Service pages (washmates-seo issue 01), linked after styles.css and guides.css by
 * ServiceLayout. The frame, breadcrumb, teal answer panel, FAQ, price table and related cards are
 * the guides' (guides.css); this file adds only what a service page has that a guide doesn't: the
 * CTA trio, the included / not-included lists, the price block, the areas and the numbered steps.
 *
 * The one bold moment is the "From" price, set large in the display face. Everything else stays
 * quiet: sentence case, hairline section rules, the existing aqua tick. Mobile-first; nothing here
 * may make a 320px page scroll sideways.
 */

/* ---------- Sections ---------- */

/* Spacing (washmates-seo 16): every section is a `.flow` (styles.css) whose blocks sit
   --gap-heading (12px) apart, and every supporting line (the CTA note, the VAT line, the price note,
   the "checked" line, the county pills, the hours line) is `data-support`, so it sits --gap-support
   (12px) below what it follows with no margin rule here. guides.css's margin reset is in a lower
   cascade layer, so nothing in this file needs a `.service` prefix to beat it. */

/* Each section after the CTA gets a hairline rule and air above it, as the guides' closing
   sections do, so the page reads as a stack of short answers. The "included" pair is a grid, not a
   `.flow`, so its --flow-gap is unused there. */
.service-section {
  --flow-gap: var(--gap-heading);
  margin-top: var(--space-2);
  padding-top: var(--gap-section);
  border-top: 1px solid var(--border);
}

.service-section h2 {
  margin: 0;
}

/* The included / not-included columns are plain blocks: their heading keeps its own gap. */
.service-scope h2 {
  margin: 0 0 var(--gap-heading);
}

/* The method body is plain paragraphs; give them the guide body's rhythm.
   Known deviation from the spacing standard (washmates-seo 16): this margin ADDS to the body's
   16px flow gap, so method paragraphs sit 32px apart, not --flow-prose. The owner approved the
   current look, so it is kept as is; README "Spacing" records it. */
.service .guide-body > p + p {
  margin-top: var(--space-4);
}

/* ---------- Quote CTA (a trio until washmates-seo 13; now the quote button only) ---------- */

/* A `.flow` at the supporting-line gap: the trust note sits --gap-support under the button. */
.service-cta {
  --flow-gap: var(--gap-support);
}

/* Phones: a full-width button. From 640px: its natural width. */
.service-cta__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-cta__buttons .wm-btn {
  gap: var(--space-2);
  white-space: nowrap;
}

.service-cta__note {
  color: var(--ink-muted);
}

/* washmates-garden-clearance 02: a page's own line straight under the button (garden: "Send a few
   photos …"), in ink so it reads as part of the offer; the trust note under it stays muted. */
.service-cta__subline {
  color: var(--ink);
}

@media (min-width: 640px) {
  .service-cta__buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------- Included / not included ---------- */

.service-scope {
  display: grid;
  gap: var(--space-6);
}

.service-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* `.page li + li` (styles.css) adds a top margin; the flex gap does the spacing here. */
.service-list li,
.service-list li + li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
}

.service-list svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.service-list--no li {
  color: var(--ink-muted);
}

/* washmates-garden-clearance 02: a "Not included" item's link to another service page (the
   garden clearance cross-sell). aqua-ink on light, as the price section's links. */
.service-list a {
  color: var(--aqua-ink);
}

@media (min-width: 720px) {
  .service-scope {
    grid-template-columns: 3fr 2fr;
  }
}

/* ---------- Price ---------- */

/* A `.flow`: the lead, the figure and the VAT line (data-support) 12px apart. */
.service-price__from {
  --flow-gap: var(--space-3);
}

.service-price__lead {
  color: var(--ink-muted);
}

/* The page's one loud figure: the display face, in ink, sized to sit beside the H1. */
.service-price__figure {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--ink);
}

.service-price__vat {
  color: var(--ink-muted);
}

/* A sub-heading inside the price section: 24px above it in all (this 12px plus the section's
   12px flow gap), and the flow's 12px down to the table. */
.service-price__bands-title {
  margin: var(--space-3) 0 0;
}

.service-price__checked {
  color: var(--ink-muted);
}

.service-price__checked a {
  color: var(--aqua-ink);
}

@media (min-width: 1024px) {
  .service-price__figure {
    font-size: 56px;
  }
}

/* ---------- How we price (washmates-garden-clearance 02, G5: no "From" price) ----------

   A service with no "From" price explains how the job is priced. The factors reuse the numbered
   steps' aqua counters; the fixed-price line takes the place of the large figure as the section's
   one bold line (certainty, not a number), marked by the aqua rule the "When people book" items
   use. Any further line (the on-the-day promise) is plain body under it. */
.service-pricing__fixed {
  font: var(--text-title);
  color: var(--ink);
  padding-left: var(--space-4);
  border-left: 3px solid var(--aqua);
}

@media (min-width: 720px) {
  .service-pricing__factors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-6);
  }
}

/* ---------- When people book (washmates-seo 15) ---------- */

/* Short reasons people book, as a quiet grid: one column on phones, two from 720px. Each item is a
   `.flow` (heading --gap-heading above its line; the guide link is data-support, 12px under it),
   marked by an aqua rule on its left, so the four read as a set without becoming cards. */
.service-occasions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}

/* `.page li + li` (styles.css) adds a top margin; the grid gap does the spacing here. */
.service-occasion,
.service-occasion + .service-occasion {
  --flow-gap: var(--gap-heading);
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--aqua);
}

.service-occasion__title {
  margin: 0;
}

.service-occasion__more {
  color: var(--ink-muted);
}

.service-occasion__more a {
  color: var(--aqua-ink);
}

@media (min-width: 720px) {
  .service-occasions {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Areas ---------- */

/* data-support under the intro paragraph; laid out with a plain gap, never as a `.flow`. */
.service-areas {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.service-areas li,
.service-areas li + li {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
}

/* ---------- What happens next: a real sequence, so numbered ---------- */

.service-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-steps li,
.service-steps li + li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding-left: 44px;
  min-height: 28px;
}

.service-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--aqua);
  color: var(--on-aqua);
  font: var(--text-label);
}

.service-steps__hours {
  color: var(--ink-muted);
}

/* ---------- End CTA: clear air above the last quote button ---------- */

.service-cta--end {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* ---------- Reviews band (washmates-growth-audit 04, owner picked prototype A, 2026-10-27) ---------- */

/* GoogleReviews sits inside the article, whose 720px column (guides.css) would squeeze it. main is
   a size container so the band can span main's content box plus both gutters, edge to edge as on
   the roof town pages, with no 100vw (which counts the scrollbar and would scroll the page
   sideways). Its own padding brings the content back in line with the rest of the page. Scoped to
   the service page's article ([data-service-page]): the town pages share `service-page` and pull
   their bands out in areas.css. */
main:has(> [data-service-page]) {
  container-type: inline-size;
}

[data-service-page] > .reviews {
  max-width: none;
  width: calc(100cqi + 2 * var(--gutter));
  margin-inline-start: calc(-1 * var(--gutter));
  /* GoogleReviews' phone bottom margin is for the home page's FAQ; the article's flow gap spaces it. */
  margin-bottom: 0;
}

/* `.page li + li` (styles.css) would push every review card after the first down. */
[data-service-page] .reviews__list .review-card {
  margin: 0;
}

/* The band already separates "How we do it" from what came before: no hairline rule on top. */
[data-service-page] > .reviews + .service-section {
  margin-top: 0;
  border-top: 0;
}