/*
 * Town pages (`/<town>/`) and the areas hub (`/areas/`) (washmates-seo issue 06), linked after
 * styles.css, guides.css and services.css. The frame, breadcrumb, teal answer panel, CTA, section
 * rules, county pills and numbered steps are the service pages'; this file adds only layout E's
 * parts (washmates-seo 17: jump chips, price pills, the advice tables and their source notes, the
 * service cards, the quote band), the figures list, the sources list and the hub's town list
 * (which the hub's service list reuses, washmates-seo 18).
 *
 * Spacing (washmates-seo 16): every block is a `.flow` and every supporting line is
 * `data-support`, so nothing here sets a vertical margin. The only margins below are resets to
 * zero, each replaced by a flex/grid gap: the UA margins and padding on the lists (`ul`) and the
 * figures list (`dl`), `.page li + li`'s top margin (styles.css) on the list items, and the UA's
 * `dd` indent (inline only, so `data-support` still sets the source line's top margin).
 * Mobile-first; nothing here may make a 320px page scroll sideways.
 */

/* ---------- Layout E (washmates-seo 17, owner 2026-10-15) ---------- */

/* ---------- Town page frame and hero (owner chose prototype 2, 2026-10-18) ---------- */

/* The town page (and the roof-town page, which shares the `town` frame) drops the guides' 720px column so the hero, the cards and the figures use the
   full content box (main.page's --gutter keeps it level with the header). Running text keeps the
   720px measure. Specificity (0,2,0) and later than guides.css, so it beats `.guide > *`. */
.guide.town,
.guide.town > * {
  max-width: none;
}

.town .service-section > p,
.town-hero__intro {
  max-width: 720px;
}

/* Every service-town page (`/<service>/<town>/`: roof, gutter and any later family; same `town`
   frame) keeps its teal intro panel a card at the reading measure, left-aligned (owner,
   2026-10-18, made the template rule 2026-10-19). A new family only needs the `service-town`
   class on its article; service-towns.spec.ts checks every built page. */
.service-town .guide-answer {
  max-width: 720px;
}

/* On wide screens every service-town page's content (everything between the header and the
   footer) stops at 1120px instead of the site's 1320px, centred, so the figure tiles, the advice
   table and the questions card don't stretch (owner chose prototype B, 2026-10-19). Only the
   gutter changes: header, footer and the bands' backgrounds keep the site's width.
   service-towns.spec.ts checks it at 1920px. */
@media (min-width: 1280px) {
  main.service-town-page {
    --gutter: max(80px, calc((100vw - 1120px) / 2));
  }
}

/* ---------- The roof landing page's sections on the roof-town pages (owner, 2026-10-19) ---------- */

/* "What's included", Reviews, "How it works" and "We also clean" (landing-sections.css and the
   Reviews rules in styles.css) are full-width bands on the landing page. In the town frame they sit
   inside main's gutter, so pull them out to the viewport edges; each pads its content back in by
   the same --gutter, so its content lines up with the rest of the page (the 1120px column on wide
   screens) while the article's own box stays inside the column (service-towns.spec.ts). */
.service-town > .lp-section,
.service-town > .reviews {
  margin-inline: calc(-1 * var(--gutter));
}

/* Two bands in a row touch, as on the landing page: take back the article's flow gap. */
.service-town > :is(.lp-section, .reviews) + :is(.lp-section, .reviews) {
  margin-top: calc(-1 * var(--gap-section));
}

/* A band already separates what follows it, so the next section drops its hairline rule. */
.service-town > :is(.lp-section, .reviews) + .service-section {
  margin-top: 0;
  border-top: 0;
}

/* GoogleReviews' phone bottom margin is for the home page's FAQ (as on the landing page), and
   `.page li + li` (styles.css) would push every review card after the first down 8px. */
.service-town > .reviews {
  margin-bottom: 0;
}

.service-town .reviews__list .review-card {
  margin: 0;
}

/* Copy left, roof photo right from 1024px; the photo sits under the copy on smaller screens. */
.town-hero {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.town-hero__copy {
  --flow-gap: var(--space-4);
  min-width: 0;
}

.town-hero__intro {
  margin: 0;
}

.town-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

@media (min-width: 1024px) {
  .town-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-12);
  }

  .town-hero__photo img {
    aspect-ratio: 4 / 3;
    max-height: 440px;
  }
}

/* "Our services in <Town>" (owner chose prototype A, 2026-10-18): a card per service, one column,
   two from 560px, three from 760px (six cards since washmates-garden-clearance 02, so three over
   three; the five-in-a-row step at 1100px is gone). The card is the link's hit area (the link's `::after`
   covers it); a card that links the town's own service page is outlined in aqua. */
.town-svc__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.town-svc__card,
.town-svc__card + .town-svc__card {
  --flow-gap: var(--space-2);
  position: relative;
  margin: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.town-svc__card--page {
  border: 2px solid var(--aqua);
}

.town-svc__card:hover {
  border-color: var(--aqua-ink);
}

.town-svc__icon {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.town-svc__name {
  margin: 0;
  font: var(--text-label);
  font-size: 18px;
  line-height: 24px;
}

.town-svc__card .town-price {
  align-self: flex-start;
  margin: 0;
}

.town-svc__line {
  margin: 0;
  flex-grow: 1;
  color: var(--ink-muted);
}

.town-svc__link {
  color: var(--aqua-ink);
}

.town-svc__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (min-width: 560px) {
  .town-svc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .town-svc__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A full section's head: the heading and the price pill on one line, wrapping on a phone. */
.town-service__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.town-service__head h2 {
  margin: 0;
}

/* The "From" price pill (sections and cards): aqua fill, teal ink. In a card's `.flow` column it
   keeps its own width. */
.town-price {
  margin: 0;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--aqua);
  color: var(--on-aqua);
  white-space: nowrap;
}

.town-service__link {
  color: var(--aqua-ink);
}

/* ---------- The advice table: the town's figure | what it means ---------- */

.town-advice-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.town-advice-table th,
.town-advice-table td {
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
}

.town-advice-table thead th {
  padding-block: 10px;
  background: var(--ink);
  color: var(--surface-raised);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.town-advice-table tbody tr + tr > * {
  border-top: 1px solid var(--border);
}

/* The figure cell: label, the value set large, the rank. */
.town-fig {
  width: 30%;
  background: var(--surface-sunken);
  font-weight: inherit;
}

.town-fig__inner {
  display: grid;
  gap: 6px;
  align-content: start;
}

.town-fig__value {
  font: 400 26px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.town-fig__value small {
  margin-left: 2px;
  font: var(--text-label);
  font-size: 13px;
}

.town-fig__rank {
  color: var(--aqua-ink);
  font: 700 12px/16px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The advice cell: the H3 (with its source superscript) and the paragraphs, at the heading gap. */
.town-what .flow {
  --flow-gap: var(--gap-heading);
}

/* Reset to zero: the guide body's H3 top margin (guides.css) would add to the flow gap. */
.town-what__title {
  margin: 0;
}

.town-what__title sup a {
  padding-left: 2px;
  color: var(--aqua-ink);
  font: 700 11px/1 var(--font-sans);
  text-decoration: none;
}

/* Phones: each row stacks, figure first, the value beside its label; the column headers are
   hidden from view but stay in the table for screen readers (the ARIA roles keep the semantics). */
@media (max-width: 639px) {
  .town-advice-table,
  .town-advice-table tbody,
  .town-advice-table tr,
  .town-advice-table th,
  .town-advice-table td {
    display: block;
    width: auto;
  }

  .town-advice-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .town-advice-table tbody tr + tr > .town-what {
    border-top: 0;
  }

  .town-fig__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .town-fig__rank {
    grid-column: 1 / -1;
  }
}

/* ---------- The quote band: one quote for every service (data-theme="teal") ---------- */

.town-band {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
}

.town-band__copy {
  --flow-gap: var(--space-3);
  min-width: 0;
}

.town-band__copy p {
  margin: 0;
  color: var(--ink-muted);
}

.town-band__chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.town-band__chips li,
.town-band__chips li + li {
  margin: 0;
  padding: 5px 10px;
  border: 1.5px solid var(--ink-muted);
  border-radius: var(--radius-pill);
  font-size: 13px;
  line-height: 16px;
}

.town-band__cta {
  width: 100%;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .town-band {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-8);
  }

  .town-band__cta {
    width: auto;
  }
}

/* The figures list's source lines, and a roof-town advice row's own source caption (owner,
   2026-10-20: the roof figures list was merged into the advice table). */
.town-figure__source,
.town-fig__source {
  color: var(--ink-muted);
}

/* ---------- The figures: label, value, source ---------- */

.town-figures {
  margin: 0;
  display: grid;
  gap: var(--space-6);
}

.town-figure {
  --flow-gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

/* Only the UA's `dd` indent is zeroed: a vertical margin here would beat `data-support` on the
   source line (README "Spacing"). */
.town-figure dd {
  margin-inline-start: 0;
}

.town-figure dt {
  color: var(--ink-muted);
}

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

@media (min-width: 1100px) {
  .town-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* ---------- Sources and licences ---------- */

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

.town-sources li,
.town-sources li + li {
  margin: 0;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

.town-sources a {
  color: var(--aqua-ink);
}

/* ---------- The hub's town list: two columns from 640px, three from 1024px ---------- */

.areas-towns {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-4) var(--space-6);
}

.areas-town,
.areas-town + .areas-town {
  margin: 0;
}

.areas-town a {
  color: var(--aqua-ink);
}

.areas-town .caption {
  color: var(--ink-muted);
}

@media (min-width: 640px) {
  .areas-towns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .areas-towns {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ---------- Service-town questions (ServiceTownFaq.astro; owner's pick C, 2026-10-19) ----------
   An aqua "FAQ" eyebrow over the H2, then the questions in a white card with dividers, at 17px
   semibold so they read apart from the 22px heading. Beats guides.css's desktop
   `.faq__item summary .faq__question` (title size) by specificity. */
.service-town-faq h2 {
  margin-top: 0;
}

.service-town-faq__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--aqua-ink);
}

.service-town-faq__card {
  max-width: 1040px;
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.service-town-faq__card .faq__item:last-child {
  border-bottom: none;
}

.service-town-faq__card .faq__item summary,
.service-town-faq__card .faq__item summary .faq__question {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.service-town-faq__card .faq__item summary svg {
  color: var(--aqua-ink);
}

@media (min-width: 640px) {
  .service-town-faq__card {
    padding: 0 var(--space-6);
  }
}