/* MB Spectrums — Service Area widget */
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.towns{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.town{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:18px 22px;background:var(--on-deep-tint);border:1px solid rgba(180,137,58,.28);border-radius:var(--radius);transition:.25s}
.town:hover{border-color:var(--gold);background:rgba(201,162,75,.07)}
.town .name{font-family:"Cormorant Garamond",serif;font-size:1.7rem;color:var(--on-deep)}
.town .desc{font-size:.84rem;color:var(--on-deep-faint)}
.block-cream .town{background:var(--cream-2);border-color:var(--line)}
.block-cream .town .name{color:var(--ink)}
.block-cream .town .desc{color:var(--muted)}
.map-card{background:var(--green-800);border:1px solid var(--line-gold);border-radius:var(--radius);position:relative;overflow:hidden;min-height:460px}
.map-card a{position:absolute;inset:0;display:block}
.map-card .map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Fixed block height — the iframe defines the card's height directly, so it
   always fills the box (no reliance on percentage/absolute height, which can
   collapse to a short default in some browsers). */
.map-card .map-embed{display:block;width:100%;height:460px;border:0;margin:0}
.map-card .pin{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 0 6px rgba(227,200,135,.18)}
.map-card .pin::after{content:attr(data-c);position:absolute;left:20px;top:-4px;white-space:nowrap;font-size:.78rem;color:var(--gold-light);font-weight:600;letter-spacing:.05em}
.map-card .region-shape{position:absolute;inset:0;background:radial-gradient(circle at 40% 45%,rgba(201,162,75,.16),transparent 55%)}

@media(max-width:980px){
  .area-grid{grid-template-columns:1fr;gap:34px}
  .map-card{min-height:340px}
  .map-card .map-embed{height:340px}
}