/* /solar-panels-grimsby/ (16 Oct 2026): big skies, open roofs. A centred hero with the DN33 installs as a wide band
   of photos, the coastal map at the mouth of the Humber, and the terrace row with the page's panel counts. */

/* ---------- Hero: centred words, then the DN33 band ---------- */
.gr-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.gr-hero .ak-hero-act { display: none; }
.gr-hero h1 { max-width: 52rem; }
.gr-hero .ak-hero-aside { display: flex; flex-direction: column; align-items: center; }
.gr-hero .ak-hero-aside::before { width: 760px; height: 760px; right: auto; left: 50%; top: 40px; transform: translateX(-50%); opacity: .7; }
.gr-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 2px !important; }
.gr-actions .ak-call { text-align: left; }
.gr-band { width: 100%; margin-top: clamp(40px, 5vw, 64px); }
.gr-band-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 32px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); }
.gr-band-head h2 { font-size: clamp(1.375rem, 1.15rem + .6vw, 1.625rem); font-weight: 500; line-height: 1.25; }
.gr-band-head p { max-width: 27rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
.gr-band-photos { display: grid; gap: 30px; }
.gr-home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.gr-home-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; font-size: .9375rem; color: var(--ink); }
.gr-home-label::before, .gr-home-label::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--line-strong); }
.gr-home-label::before { flex: 0 0 18px; }
.gr-home-label span { display: inline-flex; align-items: center; gap: 8px; }
.gr-home-label span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ak-sun); }
.gr-shot { padding: 8px; border-radius: 18px; border-width: 2.5px; box-shadow: var(--ak-shadow); }
.gr-shot img { border-radius: 11px; aspect-ratio: 4 / 5; object-fit: cover; }
.gr-shot figcaption { margin-top: 10px; padding: 0 4px 2px; font-size: .9375rem; line-height: 1.4; }
.gr-acc { justify-content: center; margin-left: auto; margin-right: auto; margin-top: clamp(32px, 4vw, 44px); max-width: 44rem; }
@media (min-width: 900px) {
  .gr-band-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .gr-home .gr-shot:last-child { margin-top: 34px; }
}
@media (max-width: 480px) {
  .gr-shot { padding: 6px; border-radius: 14px; }
  .gr-shot figcaption { font-size: .875rem; }
  .gr-actions { flex-direction: column; }
  .gr-actions .ak-call { text-align: center; }
}

/* ---------- Big skies, open roofs: the coastal map ---------- */
.gr-open .ak-text > p { font-size: 1.1875rem; }
.gr-map { padding: 0; overflow: hidden; border-radius: 26px; box-shadow: var(--ak-lift) !important; }
.gr-map.ak-map--badge { padding-top: 0; }
.gr-map .ak-map-badge { top: 18px; left: 18px; }
.gr-map .ak-map-svg { border-radius: 0; }
.gr-map figcaption:not(.visually-hidden) { margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.gr-map .lm-sea { fill: #dfe8ee; }
.gr-water { font-family: var(--display); font-style: italic; font-weight: 500; fill: #6f8494; }
/* On a phone the drawing shrinks to a third of its size, so the labels are set larger there (in map units, via --k). */
@media (max-width: 640px) {
  .gr-map .lm-label { font-size: calc(var(--k) * 25px) !important; stroke-width: calc(var(--k) * 6px) !important; }
  .gr-map .lm-label--here { font-size: calc(var(--k) * 31px) !important; }
  .gr-map .gr-water { font-size: calc(var(--k) * 24px) !important; }
  .gr-map .ak-map-badge { position: static; display: inline-block; margin: 14px 14px 10px; font-size: .875rem; }
}

/* ---------- Terraces: the figure, the bars and the terrace row ---------- */
.gr-terrace { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--paper); box-shadow: var(--ak-shadow); }
.gr-terrace-fig { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.gr-big { margin: 0; font: 500 clamp(3.5rem, 2.4rem + 3.4vw, 5rem)/.9 var(--display); letter-spacing: -0.035em; color: var(--ink); }
.gr-big-label { flex: 1 1 14rem; margin: 0; font-weight: 600; line-height: 1.35; color: var(--ink); }
.gr-big-label span { display: block; margin-top: 4px; font-weight: 400; font-size: .9375rem; color: var(--ink-soft); }
.gr-vs { display: grid; gap: 8px; margin-top: 22px; }
.gr-vs-row { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 3.2rem; gap: 12px; align-items: center; font-size: .9375rem; color: var(--ink-soft); }
.gr-vs-row strong { font: 600 1rem/1 var(--display); color: var(--ink); text-align: right; }
.gr-vs-track { position: relative; height: 10px; border-radius: 999px; background: var(--sky); }
.gr-vs-track span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }
.gr-vs-row--eng .gr-vs-track span { background: var(--line-strong); }
.gr-terrace-art { display: block; width: 100%; height: auto; margin-top: 30px; }
.gr-roof { fill: var(--sky); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.gr-pv { fill: var(--ink); stroke: #fff; stroke-width: 1; }
.gr-chim, .gr-wall, .gr-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.gr-wall { fill: #fff; }
.gr-ground { stroke: var(--ink); stroke-width: 1.5; }
.gr-sun { fill: none; stroke: var(--sun-coral); stroke-width: 2; }
.gr-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.35; color: var(--ink-soft); }
.gr-counts strong { display: block; font: 500 1.75rem/1.1 var(--display); color: var(--ink); }
.gr-counts small { grid-column: 1 / -1; font-size: .875rem; }
@media (max-width: 480px) { .gr-vs-row { grid-template-columns: minmax(0, 1fr) 3rem; gap: 4px 10px; } .gr-vs-track { grid-column: 1 / -1; order: 3; } }
.gr-terraces .ak-ticks--cards { margin-top: 22px; }
@media (min-width: 900px) { .gr-terraces .ak-text { padding-top: 12px; } }

/* ---------- Planning: the named conservation areas ---------- */
.gr-plan-panel { padding: clamp(24px, 3vw, 34px); }
.gr-panel-label { margin-bottom: 16px; font: 500 1.375rem/1.25 var(--display); color: var(--ink) !important; }
.gr-plan-panel .ak-chips span { background: var(--sky); box-shadow: none; }
.gr-panel-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink) !important; font-weight: 600; }
.gr-panel-foot .ak-ring { width: 44px; height: 44px; } .gr-panel-foot .sp-icon { width: 24px; height: 24px; }
@media (min-width: 900px) { .gr-planning .ak-aside { padding-top: 84px; } }

/* ---------- Local schemes: a short timeline ---------- */
.gr-time { list-style: none; margin: 0; padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--paper); box-shadow: var(--ak-shadow); display: grid; gap: 0; }
.gr-time li { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 16px; padding: 0 0 26px; }
.gr-time li:last-child { padding-bottom: 0; }
.gr-time li::before { content: ""; position: absolute; left: calc(4.5rem + 1px); top: 6px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid transparent; background: var(--ak-ring-bg); }
.gr-time li:not(:last-child)::after { content: ""; position: absolute; left: calc(4.5rem + 8px); top: 26px; bottom: 4px; width: 2px; background: linear-gradient(var(--sun-amber), var(--line)); }
.gr-time-when { font: 600 1.25rem/1.2 var(--display); color: var(--ink); }
.gr-time-what { padding-left: 34px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.gr-time-what small { display: block; margin-top: 4px; font-weight: 400; font-size: .9375rem; color: var(--ink-soft); }
.gr-schemes .ak-split { align-items: center; }
.gr-note { margin-top: 22px !important; }

/* ---------- Getting connected: centred, like the hero ---------- */
.gr-grid { padding: clamp(56px, 7vw, 96px) 0; text-align: center; }
.gr-grid .section-head { margin: 0 auto 16px; display: flex; flex-direction: column; align-items: center; }
.gr-grid .wrap > p { max-width: 40rem; margin: 0 auto; color: var(--ink-soft); font-size: 1.1875rem; line-height: 1.6; }

/* ---------- Nearby: one line of pills ---------- */
.gr-near { padding: clamp(56px, 7vw, 96px) 0; }
.gr-near .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.gr-near .section-head { margin: 0; }
.gr-near .ak-more { flex-basis: 100%; margin-top: 4px; }

/* Read next sits on white before the sources, so it closes up a little */
.area-grimsby .ak-related { padding-bottom: clamp(24px, 3vw, 40px); }