/* Town pages (partials/town.php) */
/* ---------- town opener: map ---------- */
.top { position: relative; display: grid; grid-template-columns: minmax(360px, 40%) 1fr; min-height: min(76svh, 800px); padding-top: calc(var(--tb) + var(--hh)); background: var(--ink); color: var(--white); overflow: clip; }
.top__panel { position: relative; display: grid; align-content: center; gap: 22px; padding: clamp(28px, 4vw, 60px) clamp(24px, 3.4vw, 56px) clamp(28px, 4vw, 60px) max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
.top__panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 100%, rgba(31, 107, 83, .7), transparent 60%); pointer-events: none; }
.top__panel > * { position: relative; }
.top__title { font: 800 clamp(2rem, 3.3vw, 3.4rem)/1 var(--display); font-stretch: 74%; text-transform: uppercase; letter-spacing: .005em; }
.top__local { display: grid; gap: 2px; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); justify-self: start; }
.top__local-l { font-size: .9rem; font-weight: 700; color: var(--brand-hi); }
.top__local-n { display: inline-flex; align-items: center; min-height: 44px; font: 800 clamp(1.9rem, 2.8vw, 2.6rem)/1.05 var(--display); font-stretch: 82%; color: var(--white); text-decoration: none; }
.top__local-n:hover { color: var(--brand-hi); }
.top__local-a { font-size: .92rem; color: rgba(255, 255, 255, .72); }
.top__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.top__map { position: relative; order: 2; overflow: clip; background: #dde6da; }
.top__scale { position: absolute; right: 18px; bottom: 16px; pointer-events: none; padding: 6px 10px; border-radius: 10px; background: rgba(243, 247, 238, .85); display: grid; gap: 4px; justify-items: end; font-weight: 700; font-size: .85rem; color: var(--ink); }
.top__scale i { display: block; width: var(--km5, 120px); height: 8px; border: 2px solid var(--ink); border-top: 0; }

/* ---------- town: how can we help ---------- */
.help { position: relative; background: radial-gradient(ellipse 60% 70% at 85% 0%, rgba(31, 107, 83, .65), transparent 70%), var(--ink); padding: clamp(80px, 9vw, 130px) 0; overflow: clip; }
.help__h { position: relative; font: 800 clamp(2.2rem, 4.2vw, 4rem)/1.02 var(--display); font-stretch: 78%; color: var(--white); margin-bottom: clamp(30px, 4vw, 54px); }
.help .cards { position: relative; }

/* ---------- town: copy ---------- */
.tcopy { position: relative; background: var(--white); padding: clamp(60px, 6vw, 96px) 0; overflow: clip; }
.tcopy__h { position: relative; font-size: clamp(1.9rem, 3vw, 3rem); margin-bottom: clamp(22px, 2.6vw, 36px); }
.tcopy--alt { background: var(--chalk); }
.tcopy__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(36px, 6vw, 100px); align-items: center; }
.tcopy--alt .tcopy__media { order: -1; }
.tcopy--alt .tcopy__grid { grid-template-columns: auto minmax(0, 1fr); }
.tcopy__text { display: grid; gap: 18px; }
.tcopy__cover { padding: 14px 18px; border-left: 4px solid var(--brand); background: var(--chalk); border-radius: 0 12px 12px 0; font-weight: 700; color: var(--ink); }
.tcopy--alt .tcopy__cover { background: var(--white); }
.tcopy__p { font-size: 1.0625rem; }
.tcopy__media { position: relative; width: min(36vw, calc(min(60svh, 560px) * .8)); aspect-ratio: 4 / 5; justify-self: center; border-radius: var(--dome); overflow: clip; box-shadow: 0 40px 80px -40px rgba(12, 42, 32, .5); }
.tcopy__ph { position: absolute; inset: 0; }
.tcopy__ph img { width: 100%; height: 100%; object-fit: cover; }
html.motion .tcopy__ph:not(.is-on) { opacity: 0; }
.tcopy__timer { position: absolute; left: 22px; right: 22px; bottom: 20px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; z-index: 2; }
.tcopy__timer i { display: block; height: 100%; background: var(--brand-hi); transform-origin: left; transform: scaleX(0); }
html:not(.motion) .tcopy__timer { display: none; }

/* ---------- town: please note + Google map ---------- */
.tnote { position: relative; background: var(--trail); color: rgba(255, 255, 255, .9); padding: clamp(80px, 9vw, 130px) 0; overflow: clip; }
.tnote__bg { position: absolute; inset: -12% 0; background: linear-gradient(180deg, rgba(12, 42, 32, .5), rgba(12, 42, 32, 0) 40%, rgba(12, 42, 32, .35)), url("../../img/hampshire-south-downs.webp") center / cover; opacity: .2; mix-blend-mode: luminosity; }
.tnote__grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 100px); align-items: center; }
.tnote__text { display: grid; gap: 22px; justify-items: start; font-size: clamp(1.0625rem, 1.2vw, 1.15rem); }
.tnote__map { position: relative; aspect-ratio: 4 / 3; max-height: min(70svh, 600px); width: 100%; border-radius: var(--dome); overflow: clip; border: 8px solid var(--white); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45); background: #e4ebe0; }
.tnote__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.tnote__mini { position: absolute; inset: 0; }
.tnote__mini .tmap__dot text { opacity: .9; }
.tnote__load { position: absolute; left: 50%; bottom: 70px; translate: -50% 0; z-index: 1; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); }
.tnote__map.is-live .tnote__load { display: none; }
.tnote__map figcaption { z-index: 3; }
.tnote__map figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; font-size: .92rem; }

/* ---------- town: nearby ---------- */
.nearby__bg { position: absolute; inset: -14% 0; background: url("../../img/hampshire-south-downs.webp") center / cover; opacity: .12; }
.nearby .wrap { position: relative; }
.nearby { position: relative; background: var(--chalk); padding: clamp(80px, 9vw, 130px) 0; overflow: clip; }
.nearby .h2 { margin-bottom: clamp(26px, 3vw, 44px); }
.nearby__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nearby__list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 20px 22px; border-radius: 16px; background: var(--white); text-decoration: none; box-shadow: 0 0 0 1px var(--line); transition: background .3s, box-shadow .3s, transform .4s var(--ease); }
.nearby__list a:hover { background: var(--ink); color: var(--white); transform: translateY(-3px); }
.nearby__list strong { font: 800 1.5rem/1.1 var(--display); font-stretch: 82%; color: inherit; }
.nearby__list span { grid-row: 2; font-size: .92rem; color: var(--muted); }
.nearby__list a:hover span { color: rgba(255, 255, 255, .75); }
.nearby__list svg { grid-row: 1 / 3; grid-column: 2; width: 26px; fill: none; stroke: var(--brand); stroke-width: 2; transition: transform .35s var(--ease); }
.nearby__list a:hover svg { transform: translateX(5px); }
.nearby__all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-weight: 700; color: var(--trail); }

@media (max-width: 960px) {
  .tcopy__grid, .tcopy--alt .tcopy__grid, .tnote__grid { grid-template-columns: 1fr; }
  .tcopy--alt .tcopy__media { order: 0; }
  .tcopy__media { width: min(100%, 440px); }
  .top { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .top__map { order: -1; height: 46svh; min-height: 300px; }
  .top__panel { padding: 28px var(--gutter) 40px; }
  .nearby__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nearby__list { grid-template-columns: 1fr; }
}