/* Solar panels page (/solar-panels/), redesigned 13 Oct 2026. Loaded by that page only; markup in
   src/pages/services.mjs (solarPanels) and the drawings in src/lib/solar-visuals.mjs.
   One idea throughout: show it, then say it in a sentence. Drawings use the logo's thin near-black line with one
   orange accent; each section's layout follows what it explains. */

/* ---------- Shared pieces ---------- */
.sp-icon { width: 36px; height: 36px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sp-icon .warm { stroke: var(--sun-coral); stroke-width: 1.8; }
.sp-head { margin-bottom: clamp(28px, 4vw, 44px); }
.sp-subhead { font-size: 1.1875rem; font-weight: 600; margin-bottom: 14px; }
.sp-source { margin-top: 12px; font-size: .9375rem; color: var(--ink-soft); }

/* ---------- Hero photo ---------- */
.page-hero--media .page-hero-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .page-hero--media .page-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 5vw, 72px); }
}
.sp-hero-photo { margin: 0; position: relative; z-index: 1; }
.sp-hero-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
/* A pointer to the solar and battery system, under the hero text (13 Oct 2026). */
.sp-system-note { position: relative; z-index: 1; max-width: 36rem; margin-top: 18px; padding: 12px 16px; border-radius: 10px; background: #fdf1e3; border-left: 4px solid var(--sun-solid); line-height: 1.5; }
.sp-system-note a { font-weight: 600; white-space: nowrap; }
.sp-hero-photo figcaption { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 899px) {
  .sp-hero-photo { max-width: 560px; }
}

/* ---------- What's included: four groups ---------- */
.sp-groups { display: grid; gap: 28px clamp(24px, 3vw, 40px); }
@media (min-width: 640px) { .sp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-group { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.sp-group .sp-icon { display: block; margin-bottom: 10px; }
.sp-group h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 8px; }
.sp-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-group li { position: relative; padding-left: 18px; color: var(--ink); line-height: 1.5; }
.sp-group li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--sun-solid); }
.sp-mcs { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding: 14px 18px; border-radius: 10px; background: var(--sky); }
.sp-mcs .sp-icon { width: 30px; height: 30px; }

/* ---------- How solar PV works: the flow diagram ---------- */
.sp-flow { --node: 84px; --gap: clamp(20px, 3vw, 40px); }
.sp-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px var(--gap); }
.sp-flow-node {
  display: grid; place-items: center; width: var(--node); height: var(--node); border-radius: 50%;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box;
  border: 4px solid transparent;
}
.sp-flow-node .sp-icon { width: 42px; height: 42px; }
.sp-flow-step { position: relative; }
.sp-flow-step h3 { margin-top: 18px; font-size: 1.25rem; font-weight: 600; }
.sp-flow-step p { margin-top: 6px; color: var(--ink-soft); line-height: 1.5; }
.sp-flow-battery { position: relative; display: flex; gap: 18px; align-items: center; margin-top: 40px; padding: 18px 22px; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--paper); }
.sp-flow-node--small { --node: 64px; width: 64px; height: 64px; border-width: 3px; }
.sp-flow-node--small .sp-icon { width: 34px; height: 34px; }
.sp-flow-battery h3 { font-size: 1.125rem; font-weight: 600; }
.sp-flow-battery p { margin-top: 2px; color: var(--ink-soft); line-height: 1.5; }

@media (min-width: 900px) {
  .sp-flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* An arrow from each node to the next. */
  .sp-flow-step:not(:last-child)::before {
    content: ""; position: absolute; top: calc(var(--node) / 2 - 1px); left: calc(var(--node) + 14px); right: calc(-1 * var(--gap) + 14px);
    height: 2px; background: var(--ink);
  }
  .sp-flow-step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(var(--node) / 2 - 6px); right: calc(-1 * var(--gap) + 12px);
    border: 6px solid transparent; border-left: 9px solid var(--ink); border-right: 0;
  }
  /* The battery hangs below "Your home", the third step, joined by a dashed line. */
  .sp-flow-battery { margin-left: calc(50% + var(--gap) / 2); margin-top: 44px; max-width: 560px; }
  .sp-flow-battery::before {
    content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); bottom: 100%; height: 46px;
    border-left: 2px dashed var(--line-strong);
  }
}
@media (max-width: 899px) {
  .sp-flow { --node: 64px; }
  .sp-flow-node .sp-icon { width: 34px; height: 34px; }
  .sp-flow-steps { gap: 0; }
  .sp-flow-step { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: 18px; padding-bottom: 30px; }
  .sp-flow-step .sp-flow-node { grid-row: span 2; }
  .sp-flow-step h3 { margin-top: 4px; }
  /* Down arrows between steps. */
  .sp-flow-step:not(:last-child)::before {
    content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: calc(var(--node) + 6px); bottom: 8px; width: 2px; background: var(--ink);
  }
  .sp-flow-step:not(:last-child)::after {
    content: ""; position: absolute; left: calc(var(--node) / 2 - 6px); bottom: 2px;
    border: 6px solid transparent; border-top: 9px solid var(--ink); border-bottom: 0;
  }
  .sp-flow-battery { margin-top: 6px; }
}

.sp-notes { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 760px) { .sp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.sp-notes p { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 12px; background: var(--paper); line-height: 1.55; }
.sp-notes .sp-icon { width: 32px; height: 32px; margin-top: 2px; }

/* ---------- Is my roof suitable? ---------- */
.sp-roof { display: grid; gap: 32px; }
@media (min-width: 900px) { .sp-roof { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 72px); align-items: start; } }
.sp-facing { padding: clamp(22px, 3vw, 32px); border-radius: 16px; background: var(--sky); }
.sp-facing h3 { font-size: 1.25rem; font-weight: 600; }
.sp-compass { display: block; width: 100%; max-width: 250px; margin: 14px auto 18px; overflow: visible; }
.sp-compass-ring path { fill: none; stroke-width: 22; }
.sp-c-s { stroke: var(--sun-solid); }
.sp-c-ew { stroke: var(--sun-amber); }
.sp-c-n { stroke: var(--line-strong); }
.sp-compass-letters text { font: 600 17px var(--text); fill: var(--ink); text-anchor: middle; }
.sp-compass-house path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sp-compass-house .warm { stroke: var(--sun-coral); }
.sp-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-key li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.sp-swatch { flex: none; width: 16px; height: 16px; border-radius: 4px; margin-top: .25em; }
.sp-swatch--s { background: var(--sun-solid); }
.sp-swatch--ew { background: var(--sun-amber); }
.sp-swatch--n { background: var(--line-strong); }
.sp-checks { display: grid; }
.sp-check { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--line); }
.sp-check:first-child { border-top: 0; padding-top: 0; }
.sp-check .sp-icon { width: 40px; height: 40px; }
.sp-check h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; }
.sp-check p { color: var(--ink-soft); line-height: 1.6; }

/* ---------- How many panels: four homes, same scale ---------- */
/* Equal columns, and each home drawn at the same fraction of its column as its true width is of the largest (224),
   so all four share one scale at every screen width. */
.sp-houses { --largest: 224; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0 24px; }
@media (min-width: 900px) { .sp-houses { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); } }
@media (max-width: 899px) { .sp-houses li:nth-child(n+3) .sp-house { margin-top: 36px; } }
/* Each home and its caption share rows with the others (subgrid), so the homes stand on one ground line even when
   a caption runs to two lines. */
.sp-houses li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.sp-houses .sp-house { align-self: end; }
.sp-house { display: block; width: calc(var(--w) * 100% / var(--largest)); height: auto; overflow: visible; }
.sp-house-roof, .sp-house-body, .sp-house-door { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.sp-house-panels rect { fill: var(--ink); }
.sp-house-ground { stroke: var(--line-strong); stroke-width: 1.5; }
.sp-house-nb { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sp-houses p { margin-top: 14px; display: flex; flex-direction: column; align-self: start; }
.sp-houses strong { font: 500 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.2 var(--display); letter-spacing: -0.01em; }
.sp-houses span { color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }
.sp-after-houses { display: grid; gap: 10px; margin-top: 36px; max-width: 44rem; }

/* ---------- What solar panels cost ---------- */
.sp-cost { display: grid; gap: 36px; }
@media (min-width: 900px) { .sp-cost { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); align-items: start; } }
.sp-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 640px) { .sp-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-factors li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); line-height: 1.5; }
.sp-cost-facts { display: grid; gap: 12px; margin-top: 26px; }
.sp-cost-side { display: grid; gap: 20px; }
.sp-vat { padding: clamp(22px, 3vw, 30px); border-radius: 16px; background: #fdf1e3; }
.sp-vat-figure { font: 500 clamp(2.6rem, 2rem + 2vw, 3.4rem)/1 var(--display); letter-spacing: -0.03em; margin-bottom: 12px; }
.sp-compare { padding: clamp(22px, 3vw, 30px); border-radius: 16px; border: 1px solid var(--line-strong); }
.sp-compare .sp-subhead { margin-bottom: 0; }
.sp-compare .ticks { margin-top: 12px; }
.sp-compare p { margin-top: 14px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Payback and bills ---------- */
.sp-figures { margin-top: 0; }
@media (min-width: 900px) { .sp-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-use-it { display: grid; gap: 20px 48px; margin-top: 44px; padding: clamp(22px, 3vw, 34px); border-radius: 16px; background: var(--paper); }
@media (min-width: 900px) { .sp-use-it { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.sp-use-it p { line-height: 1.55; }
.sp-use-src { grid-column: 1 / -1; margin-top: 0; }
.sp-which { margin-top: 28px; max-width: 44rem; }

/* Bars on a shared scale (the price of a unit; export tariff ranges). */
.sp-bars { display: grid; gap: 16px; }
/* --val: the width of the value column, the same on every row, so every track is the same length. */
.sp-bars { --val: 6.5rem; }
.sp-bars--price { --val: 5rem; }
.sp-bars--range { --val: 9rem; }
.sp-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--val); gap: 6px 16px; align-items: center; }
.sp-bar-label { grid-column: 1 / -1; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.sp-bar-track { position: relative; height: 18px; border-radius: 4px; background: var(--sky-deep); }
.sp-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--ink-soft); }
.sp-bar--warm { background: var(--sun-solid); }
.sp-bar-value { font: 600 1.0625rem/1 var(--text); white-space: nowrap; }
.sp-bar-axis { position: relative; height: 18px; margin-right: calc(var(--val) + 16px); font-size: .8125rem; color: var(--ink-soft); }
.sp-bar-axis span { position: absolute; transform: translateX(-50%); }
.sp-bar-axis span:first-child { transform: none; }
.sp-bar-axis span:last-child { transform: translateX(-100%); }

/* ---------- With or without a battery ---------- */
.sp-vs { border-top: 2px solid var(--ink); }
.sp-vs-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; line-height: 1.5; }
.sp-vs-row > span[role="cell"]:last-child { background: #fdf1e3; margin: -18px 0; padding: 18px 18px; }
.sp-vs-head > span:last-child { background: #fdf1e3; margin: -18px 0; padding: 18px 18px; }
.sp-vs-head span { font-weight: 600; font-size: 1.0625rem; }
.sp-vs-row > span[role="rowheader"] { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.sp-vs-row .sp-icon { width: 30px; height: 30px; }
.sp-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; }
.sp-links a { font-weight: 600; }
@media (max-width: 759px) {
  .sp-vs-head { display: none; }
  .sp-vs-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-vs-row > span[role="cell"], .sp-vs-row > span[role="cell"]:last-child { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--sky); }
  .sp-vs-row > span[role="cell"]:last-child { background: #fdf1e3; }
  .sp-vs-row > span[role="cell"]::before { content: attr(data-label); display: block; font-size: .875rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
}

/* ---------- Smart Export Guarantee and warranties ---------- */
.sp-seg { display: grid; gap: 40px; }
@media (min-width: 900px) { .sp-seg { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); align-items: start; } }
.sp-need { margin: 0 0 34px; }
.sp-after-bars { margin-top: 18px; }
.sp-warranties { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-warranties div { padding: 18px 18px 20px; border-radius: 14px; background: var(--sky); }
.sp-warranties dt { font-size: .9375rem; font-weight: 600; color: var(--ink-soft); }
.sp-warranties dd { margin: 6px 0 0; }
.sp-warranties dd strong { display: block; font: 500 1.5rem/1.15 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.sp-warranties dd span { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 400px) { .sp-warranties { grid-template-columns: minmax(0, 1fr); } }

/* 14 Oct 2026: three warranty tiles now, so the last one takes the full width rather than sitting alone. */
.sp-warranties div:last-child:nth-child(odd) { grid-column: 1 / -1; }