/* ==========================================================================
   area.css — styles for the Service Area page only
   (address facts + interactive Leaflet map)
   ========================================================================== */

.area-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.area-intro {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray);
  margin: 0 0 24px;
  max-width: 400px;
}

/* ----- Address / radius facts ----- */
.area-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.area-fact {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.area-fact-icon { font-size: 16px; margin-top: 2px; }
.area-fact-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.area-fact-sub { font-size: 14px; color: var(--gray); }

.area-cta { margin-top: 28px; }

/* ----- Map ----- */
.map-frame {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 42, 74, 0.08);
}
#map { width: 100%; height: 420px; }

/* Popup text inside the map */
.leaflet-popup-content { font-family: 'Inter', system-ui, sans-serif; }
.shop-label { font-weight: 700; color: var(--navy); }

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .area-grid { grid-template-columns: 1fr; gap: 32px; }
}