/* /solar-panels-manchester/ (16 Oct 2026): two cities. The hero card sets Manchester's and Salford's homes side by side
   with the payback in a sun ring; planning sets the two councils side by side; the page ends on a map out to the Mersey. */

/* Hero: the comparison card */
@media (min-width: 1000px) { .mc-hero .ak-hero-aside { margin-top: 6px; } }
.mc-compare { padding: clamp(22px, 2.6vw, 30px); border-radius: 24px; background: var(--paper); box-shadow: 0 0 0 1px rgba(38, 40, 42, .04), var(--ak-lift); }
@media (max-width: 999px) { .mc-compare { max-width: 34rem; } }
.mc-compare-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 20px; }
.mc-compare-head span { font: 600 1.125rem/1.3 var(--display); color: var(--ink); }
.mc-compare-head small { color: var(--ink-soft); font-size: .875rem; }
.mc-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 48px); }
.mc-city { position: relative; min-width: 0; }
.mc-city + .mc-city::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * clamp(16px, 2vw, 24px)); width: 1px; background: var(--line); }
.mc-city-name { margin: 0 0 14px; font: 600 1.25rem/1.2 var(--display); color: var(--ink); }
.mc-cols { list-style: none; margin: 0; padding: 0 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; height: 168px; border-bottom: 2px solid var(--ink); }
.mc-col { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; }
.mc-col-val { margin-bottom: 6px; text-align: center; font: 600 1.0625rem/1 var(--display); color: var(--ink); }
.mc-col-bar { display: block; height: calc(130px * var(--f)); border-radius: 9px 9px 0 0; }
.mc-col--0 .mc-col-bar, .mc-key .mc-col--0 { background: var(--sun-coral); }
.mc-col--1 .mc-col-bar, .mc-key .mc-col--1 { background: var(--sun-amber); }
.mc-col--2 .mc-col-bar, .mc-key .mc-col--2 { background: #7d8790; }
.mc-key { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-soft); font-size: .9375rem; }
.mc-key li { display: inline-flex; align-items: center; gap: 8px; }
.mc-key i { width: 12px; height: 12px; border-radius: 3px; }
.mc-payback { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.mc-ring { grid-template-columns: minmax(0, 1fr); }
.mc-ring > div { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 20px; text-align: left; }
.mc-ring dt { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.mc-ring dd:not(.ak-stats-src) { flex: none; width: 118px; height: 118px; border-width: 5px; font-size: 1.75rem; line-height: 1; align-content: center; gap: 4px; }
.mc-ring dd small { display: block; font: 600 .8125rem/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 420px) { .mc-cols { height: 150px; } .mc-col-bar { height: calc(112px * var(--f)); } .mc-ring dd:not(.ak-stats-src) { width: 104px; height: 104px; font-size: 1.5rem; } }

/* Intro: the weather, then the homes */
.mc-weather { display: flex; gap: 18px; align-items: flex-start; margin-top: 24px !important; }
.mc-weather p { color: var(--ink) !important; font-size: 1.125rem; line-height: 1.6; }
.mc-intro .ak-text > p:not(.ak-intro) { margin-top: 22px; }
.mc-intro .ak-aside h3 { margin: 32px 0 14px; font-size: 1.25rem; }
@media (min-width: 900px) { .mc-intro .ak-aside { padding-top: 8px; } }

/* Costs: Greater Manchester's scheme as a card of facts */
.mc-gm { display: grid; gap: 26px; padding: clamp(24px, 3vw, 40px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: var(--ak-shadow); }
@media (min-width: 900px) { .mc-gm { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 56px); } }
.mc-gm-text .ak-ring { margin-bottom: 16px; }
.mc-gm-text p { color: var(--ink); font-size: 1.125rem; line-height: 1.65; }
.mc-gm-facts { margin: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .mc-gm-facts { padding-left: clamp(28px, 3.4vw, 48px); border-left: 1px solid var(--line); } }
.mc-gm-facts > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.mc-gm-facts > div:first-child { padding-top: 0; } .mc-gm-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.mc-gm-facts dt { margin-bottom: 10px; font-weight: 600; font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.mc-gm-facts dd { margin: 0; }
.mc-gm-facts .ak-chips { gap: 8px; }
.mc-gm-facts .ak-chips span { min-height: 34px; padding: 5px 14px; font-size: .9375rem; background: var(--sky); box-shadow: none; }
.mc-lead { max-width: 46rem; margin: clamp(40px, 4.4vw, 56px) 0 18px; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.6; }
.mc-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 700px) { .mc-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mc-guides { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mc-guides li { padding: 16px 0 18px; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)) 1; color: var(--ink-soft); line-height: 1.5; }
.mc-guides a { color: var(--ink); font-weight: 600; }

/* How it works: across the Pennines, west on the left */
.mc-cross { margin: 0; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) 22px; border-radius: var(--ak-radius); background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--ak-lift); }
.mc-cross svg { display: block; width: 100%; height: auto; }
.mc-hill { fill: var(--sky-deep); }
.mc-hill--back { fill: var(--sky); }
.mc-ground { stroke: var(--line-strong); stroke-width: 1.5; }
.mc-route { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 7 6; opacity: .7; }
.mc-miles rect { fill: var(--ink); }
.mc-miles text { fill: #fff; font: 600 18px/1 var(--text); }
.mc-here { fill: #fff; stroke-width: 4.5; }
.mc-here-dot { fill: var(--sun-coral); }
.mc-base { fill: var(--ink); }
.mc-cross figcaption { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mc-cross figcaption > span { display: flex; flex-direction: column; color: var(--ink-soft); font-size: .875rem; line-height: 1.3; }
.mc-cross figcaption strong { color: var(--ink); font-size: 1.0625rem; font-weight: 600; }
.mc-cross-end { text-align: right; }
.mc-cross .mc-cross-mid { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: .9375rem; }
.mc-cross-mid .ak-ring { width: 40px; height: 40px; border-width: 2px; } .mc-cross-mid .sp-icon { width: 22px; height: 22px; }
@media (max-width: 520px) { .mc-cross figcaption { grid-template-columns: 1fr 1fr; } .mc-cross .mc-cross-mid { grid-column: 1 / -1; order: 3; justify-content: center; } }

/* Planning: the two councils side by side */
.mc-planning .section-head p { color: var(--ink); font-size: 1.1875rem; line-height: 1.65; max-width: 48rem; }
.mc-planning .section-head { max-width: 50rem; }
.mc-councils { display: grid; gap: 20px; }
@media (min-width: 800px) { .mc-councils { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc-council { padding: clamp(22px, 2.6vw, 30px); border-radius: var(--ak-radius); background: var(--paper); box-shadow: var(--ak-shadow); }
.mc-council-name { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 600 1.25rem/1.3 var(--display); color: var(--ink); }
.mc-council-label { margin: 0 0 12px; color: var(--ink-soft); font-size: .9375rem; }
.mc-council-big { display: flex; align-items: center; gap: 16px; margin: 0; }
.mc-council-big strong { font: 500 clamp(3rem, 2.4rem + 2vw, 4rem)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.mc-council-big span { color: var(--ink-soft); line-height: 1.45; max-width: 16rem; }
.mc-plan-foot { display: grid; gap: 16px; margin: 20px 0 clamp(36px, 4vw, 52px); }
@media (min-width: 800px) { .mc-plan-foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mc-enw { border: 3px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--ak-sun) border-box; }
.mc-enw p { font-size: 1.0625rem; }

/* Reviews: the big quote in the middle of its card */
.mc-quotes .ak-review--big blockquote { margin: auto 0; }

/* Nearby: the towns beside the map */
.mc-near .ak-near-cards { grid-template-columns: minmax(0, 1fr); max-width: 28rem; }
.mc-near .ak-map { box-shadow: var(--ak-lift); }
.mc-near .ak-more a { white-space: nowrap; }
@media (max-width: 600px) { .mc-weather { flex-direction: column; gap: 14px; } }
@media (max-width: 600px) {
  .mc-map .lm-label { font-size: calc(var(--k) * 24px) !important; stroke-width: calc(var(--k) * 6px) !important; }
  .mc-map .lm-label--here { font-size: calc(var(--k) * 30px) !important; }
}