/* ===========================================================================
   /showers/ page and the local intro on /<state>/showers/ pages.
   Loaded through shell(extra_head=...). Tokens and shared components come from
   styles.css and directory.css; this file only adds what the showers page needs:
     .sp-hero      hero with the price figures directly under the H1 (answer first)
     .sp-table .spt  price list tables (5 columns; stack to label/price pairs under 720px)
     .sp-foot      GST footnote, once, under the tables
     .sp-disc      native <details> for the extras table and the sources
     .sp-split     heading left, content right (2 columns, one column under 820px)
     .sp-defs      term and meaning rows
     .sp-stats     four plain figures in one row (2 x 2 under 900px, one column on phones)
     .sp-check     checklist beside the festival copy
     .sp-group .sp-more  provider groups with native <details>
     .sp-q         FAQ accordions
     .sp-local     fact box on state crossing pages (replaces the old pull-quote)
   Figures: only numerals and the dollar sign use the mono face (span.mono); the words
   around them stay in the body or display face at the same size.
   =========================================================================== */

.sp-fine { display: block; margin-top: .15rem; font-size: .82rem; line-height: 1.4; color: var(--muted); font-weight: 400; }
.sp-flag { color: var(--warn-ink); font-weight: 500; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Text sections sit on the same left edge as the hero and tables */
.sp-narrow > * { max-width: 840px; }

/* ---------- hero: headline, then the price figures, all inside the first screen ---------- */

.sp-hero { padding-block: clamp(12px, 1rem + .6vw, 28px) clamp(28px, 2rem + 2vw, 56px); }
.sp-hero .page-hero-grid { align-items: center; }
.sp-hero h1 { font-size: clamp(2rem, 1.25rem + 2.2vw, 2.85rem); max-width: 24ch; margin-bottom: .35em; text-wrap: balance; }
.sp-hero .lede { max-width: 50ch; margin: 0 0 1.25rem; }
.sp-hero .price-hero { padding: clamp(1rem, 2.4vw, 1.5rem); }
.sp-hero .price-hero-q { margin: 0 0 .9rem; }
.sp-hero .price-hero-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
.sp-hero .price-hero-fig {
  font: 600 clamp(1.45rem, 1.05rem + 1.1vw, 2rem)/1.1 var(--font-display);
  letter-spacing: -.02em; color: var(--ink); white-space: nowrap;
}
.sp-hero .price-hero-fig .mono { font-family: var(--font-mono); font-weight: 600; letter-spacing: -.04em; }
.sp-hero .price-hero-unit { color: var(--ink-2); font-size: .92rem; line-height: 1.35; }
.sp-hero .price-hero-note { margin-top: 1rem; max-width: none; font-size: .88rem; color: var(--muted); }
.sp-hero .price-hero-note a { white-space: nowrap; font-weight: 550; }
.sp-hero .page-hero-img { aspect-ratio: 4 / 3; }

@media (max-width: 820px) {
  /* Own the phone order so it does not depend on the shared hero: headline, lede and figures
     in one block, then the photo as a thin strip after them. */
  .page-hero.sp-hero:not(.page-hero--plain) .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .page-hero.sp-hero:not(.page-hero--plain) .page-hero-copy { display: block; }
  .page-hero.sp-hero:not(.page-hero--plain) .page-hero-copy > * { order: 0; }
  .page-hero.sp-hero:not(.page-hero--plain) .page-hero-img { order: 0; aspect-ratio: 16 / 6; margin: 0; }
  .sp-hero .page-hero-img img { height: 100%; object-fit: cover; object-position: 50% 62%; }
}
@media (max-width: 560px) {
  .sp-hero h1 { font-size: 1.95rem; }
  .sp-hero .lede { font-size: 1rem; margin-bottom: 1rem; }
  .sp-hero .price-hero { padding: 1rem; }
  .sp-hero .price-hero-q { font-size: 1.02rem; margin-bottom: .75rem; }
  .sp-hero .price-hero-items { grid-template-columns: 1fr; gap: .7rem; }
  .sp-hero .price-hero-item { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: .1rem .9rem; align-items: baseline; }
  .sp-hero .price-hero-fig { font-size: 1.45rem; grid-row: 1 / span 2; }
  .sp-hero .price-hero-unit { font-size: .85rem; }
  .sp-hero .sp-fine { font-size: .78rem; margin-top: 0; }
}

/* ---------- price list ---------- */

.sp-prices { padding-top: clamp(8px, 2vw, 24px); }
.sp-prices h2 { margin-bottom: .35em; }
.sp-prices h3 { margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 .5rem; }
.sp-prices .lede { max-width: 72ch; margin-bottom: .6rem; }
.sp-note { color: var(--ink-2); font-size: .97rem; max-width: 76ch; margin-bottom: 1rem; }
.sp-foot { margin: .9rem 0 0; font-size: .88rem; line-height: 1.5; color: var(--muted); max-width: 76ch; }

.sp-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surf); overflow: hidden; }
.spt { width: 100%; border-collapse: collapse; font-size: .96rem; }
.spt th, .spt td { text-align: left; vertical-align: top; padding: .85rem 1rem; }
.spt thead th { font-size: .82rem; font-weight: 600; color: var(--muted); border-bottom: 1.5px solid var(--line-strong); white-space: nowrap; }
.spt tbody tr + tr td { border-top: 1px solid var(--line); }
.spt th.num, .spt td.num { text-align: right; white-space: nowrap; }
.spt td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink); }
.spt-x td.num { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; }
.spt-x td.num .mono { font-size: 1.12rem; }
.spt td.u { font-weight: 600; width: 24%; }
.spt td.per { white-space: nowrap; color: var(--ink-2); }
.spt td.cov { width: 33%; color: var(--ink-2); }
.spt td.by { width: 21%; }
.spt-x td.u { width: 46%; }
.spt-x td.num { width: 20%; }
.sp-tag {
  display: block; width: fit-content; margin: 0 0 .3rem; padding: .05rem .55rem;
  font-size: .76rem; font-weight: 650; line-height: 1.5;
  color: var(--accent); background: var(--accent-tint); border-radius: var(--r-ctl);
}

@media (max-width: 720px) {
  .spt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spt, .spt tbody { display: block; width: 100%; }
  .spt tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem;
    grid-template-areas: "u n" "u p" "c c" "o o";
    padding: 1rem 1rem;
  }
  .spt tbody tr + tr { border-top: 1px solid var(--line); }
  .spt tbody tr + tr td { border-top: 0; }
  .spt td { display: block; padding: 0; width: auto; }
  .spt td.u { grid-area: u; width: auto; }
  .spt td.num { grid-area: n; font-size: 1.3rem; }
  .spt td.per { grid-area: p; text-align: right; font-size: .88rem; color: var(--muted); }
  .spt td.cov { grid-area: c; width: auto; margin-top: .5rem; }
  .spt td.by { grid-area: o; width: auto; margin-top: .45rem; font-size: .9rem; }
  .spt-x tr { grid-template-areas: "u n" "o o"; }
  .spt-x td.u { width: auto; }
}

/* native disclosures: extras table, sources */
.sp-disc { margin-top: .5rem; }
.sp-disc > summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .9rem; min-height: 44px; padding: .65rem 2.6rem .65rem 1rem; position: relative;
  font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl);
  cursor: pointer; list-style: none;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.sp-disc > summary::-webkit-details-marker { display: none; }
.sp-disc > summary::after {
  content: ""; position: absolute; right: 1.05rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.4rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 160ms var(--ease);
}
.sp-disc[open] > summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.sp-disc > summary:hover { border-color: var(--accent); background: var(--accent-tint); }
.sp-disc-count { font-weight: 400; font-size: .9rem; color: var(--muted); }
.sp-disc-body { padding-top: .9rem; }
.sp-disc--quiet { margin-top: 1.25rem; }
.sp-sources { list-style: none; margin: 0; padding: 0; columns: 2 22rem; column-gap: 2.5rem; font-size: .88rem; color: var(--ink-2); }
.sp-sources li { break-inside: avoid; margin: 0 0 .5rem; overflow-wrap: anywhere; }

/* ---------- heading left, content right ---------- */

.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.25rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sp-split > h2 { margin: 0; max-width: 16ch; text-wrap: balance; }
@media (max-width: 820px) { .sp-split { grid-template-columns: 1fr; } .sp-split > h2 { max-width: none; } }

/* ---------- which do you need ---------- */

.sp-defs { margin: 0; }
.sp-defs > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .25rem 1.5rem; padding: 1rem 0; }
.sp-defs > div:first-child { padding-top: 0; }
.sp-defs > div + div { border-top: 1px solid var(--line-strong); }
.sp-defs dt { font: 650 1.1rem/1.25 var(--font-display); letter-spacing: -.015em; }
.sp-defs dd { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 560px) { .sp-defs > div { grid-template-columns: 1fr; } }

/* ---------- what moves the price: four figures in a row, no boxes ---------- */

.sp-moves .lede { margin-bottom: 1.75rem; max-width: 62ch; }
.sp-stats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); }
.sp-stats li { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem 0 0; }
.sp-stats li + li { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.sp-stat-fig { font: 600 clamp(1.25rem, 1rem + .7vw, 1.6rem)/1.15 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.sp-stat-fig .mono { font-family: var(--font-mono); letter-spacing: -.04em; }
.sp-stat-name { font: 650 1rem var(--font-display); letter-spacing: -.01em; }
.sp-stat-text { color: var(--ink-2); font-size: .93rem; line-height: 1.5; }
@media (max-width: 1000px) {
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-stats li { padding: 1.1rem 1.25rem 1.1rem 0; border-bottom: 1px solid var(--line); }
  .sp-stats li + li { padding-left: 0; border-left: 0; }
  .sp-stats li:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .sp-stats { grid-template-columns: 1fr; }
  .sp-stats li, .sp-stats li:nth-child(even) { padding: 1rem 0; border-left: 0; }
}

/* ---------- festivals: copy left, checklist right ---------- */

.sp-festival .sp-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.sp-festival-copy > h2 { max-width: 18ch; text-wrap: balance; }
.sp-festival p { max-width: 58ch; }
.sp-festival .btn-row { margin-top: 1.25rem; }
.sp-ask { background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-surf); padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.sp-ask h3 { margin: 0 0 .85rem; font-size: 1.15rem; }
.sp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.sp-check li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-2); }
.sp-check svg { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: var(--accent); }
@media (max-width: 820px) { .sp-festival .sp-split { grid-template-columns: 1fr; } }

/* ---------- providers ---------- */

.sp-providers .lede { margin-bottom: 1.25rem; max-width: 66ch; }
.sp-providers .switcher { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); grid-template-columns: minmax(0, 1fr); }
.sp-providers .chips { position: relative; } /* keeps the chips' visually-hidden spans inside the scroll row */
.sp-providers .switcher-row { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sp-group + .sp-group { margin-top: clamp(2rem, 4vw, 3rem); }
.sp-group .state-head { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; margin: 0 0 .6rem; }
.sp-count {
  padding: .15em .7em; text-align: center; white-space: nowrap;
  font: 500 .78rem/1.5 var(--font-body);
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 100px;
}
.sp-count .mono { font-weight: 600; }
.sp-more { margin-top: .9rem; }
.sp-more summary {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .45rem 1rem;
  font-weight: 550; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl);
  cursor: pointer; list-style: none;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.sp-more summary::-webkit-details-marker { display: none; }
.sp-more summary::after {
  content: ""; width: .5rem; height: .5rem; margin-top: -.2rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 160ms var(--ease);
}
.sp-more[open] summary::after { transform: rotate(-135deg); margin-top: .2rem; }
.sp-more summary:hover { border-color: var(--accent); background: var(--accent-tint); }
.sp-more .ops { margin-top: .9rem; }
.sp-all { margin: 1rem 0 0; font-weight: 550; }

/* ---------- FAQ: accordions ---------- */

.sp-qa { border-top: 1px solid var(--line-strong); }
.sp-q { border-bottom: 1px solid var(--line-strong); }
.sp-q > summary {
  position: relative; display: block; padding: 1rem 2.5rem 1rem 0; cursor: pointer; list-style: none;
  font: 650 1.1rem/1.35 var(--font-display); letter-spacing: -.01em; color: var(--ink);
  min-height: 44px;
}
.sp-q > summary::-webkit-details-marker { display: none; }
.sp-q > summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.45rem; width: .55rem; height: .55rem;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg); transition: transform 160ms var(--ease);
}
.sp-q[open] > summary::after { transform: rotate(-135deg); top: 1.7rem; }
.sp-q > summary:hover { color: var(--accent); }
.sp-a { padding: 0 0 1.1rem; }
.sp-a p { margin: 0; color: var(--ink-2); max-width: 66ch; }

/* ---------- fact box on /<state>/showers/ ---------- */

.sp-local { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.sp-local-count { margin: 0 0 1rem; font: 650 1.2rem/1.3 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.sp-local-facts { margin: 0; border-top: 1.5px solid var(--ink); }
.sp-local-facts > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .25rem 1.75rem; padding: .9rem 0; }
.sp-local-facts > div + div { border-top: 1px solid var(--line); }
.sp-local-facts dt { font-weight: 650; color: var(--ink); }
.sp-local-facts dd { margin: 0; color: var(--ink-2); max-width: 70ch; }
.sp-local-facts dd p { margin: 0; }
.sp-local-facts dd p + p, .sp-local-facts dd ul + p { margin-top: .4rem; }
.sp-local-facts dd ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.sp-local-facts .mono { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .sp-local-facts > div { grid-template-columns: 1fr; } }