/* ===========================================================================
   Location (service-area) pages — "Chequer Coast"
   ---------------------------------------------------------------------------
   Location pages carry NO photography, so the hero is copy + the quote form.
   Everything else — sections, ruled service rows, reviews band, FAQ, CTA band —
   is the homepage system, unchanged. Only the hero, the map and the weather
   widget need rules of their own.
   =========================================================================== */

.loc-hero {
  position: relative;
  padding-bottom: clamp(34px, 4vh, 54px);
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(255, 76, 0, .10), transparent 68%),
    var(--sand);
}
.loc-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(360px, .84fr);
  gap: clamp(32px, 4.6vw, 68px);
  align-items: start;
  padding-top: clamp(12px, 2vh, 24px);
}
.loc-hero-copy .hb-hero-open { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.loc-hero-copy .hb-lead + .hb-lead { margin-top: 1.05em; }
.loc-hero-copy .hb-marks { margin-top: 26px; }
.loc-hero-copy .hb-callline { margin-top: 26px; }
.loc-hero-copy .hb-acts { margin-top: 24px; }

/* --- the map the doc supplies, made responsive without touching its code --- */
.loc-map { background: var(--ink); padding: 0; }
.loc-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 7;
  overflow: hidden;
  border-top: 4px solid var(--flame);
}
.loc-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
  filter: grayscale(1) sepia(.14);
  transition: filter .5s var(--ease);
}

/* The doc's closing pair: the map, then the local forecast, then the footer.
   The widget used to sit BELOW the footer, and the map ran straight into the
   footer's edge — this band is what puts air between the two. */
.loc-weather {
  background: var(--sand);
  padding-top: clamp(34px, 4.4vh, 56px);
  padding-bottom: clamp(38px, 5vh, 64px);
  border-top: 1px solid var(--line-soft);
}
.loc-weather .weatherwidget-io { display: block; }

/* a page whose doc carries no widget still needs the same gap */
.loc-map:last-child { margin-bottom: clamp(38px, 5vh, 64px); }

@media (hover: hover) and (pointer: fine) {
  .loc-map-frame:hover iframe { filter: none; }
}

@media (max-width: 1000px) {
  .loc-hero-grid { grid-template-columns: 1fr; }
  .loc-hero-form { max-width: 620px; }
  .loc-map-frame { aspect-ratio: 4 / 3; }
}