/* =====================================================================
   Distillery Finder: region cards (on /directory) and region pages (/directory/<region>)
   Builds on styles.css (palette) and page.css (.page, .dir-list).
   ===================================================================== */
.page--wide.region { max-width: 76rem; }
.region .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }

/* ---- Region cards ---- */
.region-cards {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px;
}
.page a.region-card {
  display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box;
  padding: 18px 20px 20px; border: 1px solid var(--border); border-top: 5px solid var(--region, var(--primary));
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
}
.region-card__name { font: 700 26px/1.15 var(--display); color: var(--primary); }
.region-card__count { font-size: 14px; font-weight: 600; color: var(--muted); }
.region-card__summary { margin-top: 6px; font-size: 16px; line-height: 1.5; }
.page a.region-card:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
@media (hover: hover) {
  .page a.region-card:hover { border-color: var(--primary); border-top-color: var(--region, var(--primary)); }
  .page a.region-card:hover .region-card__name { text-decoration: underline; text-decoration-color: var(--whisky); text-underline-offset: 3px; }
}

/* ---- Region page ---- */
.page a.region-back { display: inline-block; margin-bottom: 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
.page a.region-back::before { content: "← "; }
.page a.region-back:hover { text-decoration: underline; text-decoration-color: var(--whisky); }
.region h1 { margin-bottom: 6px; }
.page p.region-sub { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.region-intro { max-width: 44rem; }
.page .region-h2 { margin: 36px 0 12px; }

.region-mapbox {
  position: relative; height: 480px; margin-top: 20px;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--sea); box-shadow: var(--shadow);
}
#regionMap { position: absolute; inset: 0; }
.region-mapbox .gesture-hint {
  position: absolute; z-index: 999; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(37,45,41,.45); color: #fff; font: 600 16px var(--body); text-align: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.region-mapbox .gesture-hint.show { opacity: 1; }
#regionMap .leaflet-popup-content { margin: 10px 14px; font: 15px/1.4 var(--body); }
#regionMap .leaflet-popup-content strong { display: block; font: 700 17px var(--display); color: var(--ink); }
#regionMap .leaflet-popup-content a { color: var(--primary); font-weight: 600; }

.dir-static { display: flex; align-items: center; min-height: 64px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }

.region-others ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.page a.near-btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 40px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink); text-decoration: none; font: 14px var(--body);
}
.near-btn .mi { color: var(--muted); font-size: 13px; }
.page a.near-btn:focus-visible { outline: 2px solid var(--whisky); outline-offset: 2px; }
@media (hover: hover) { .page a.near-btn:hover { border-color: var(--primary); background: var(--mist); color: var(--ink); } }

@media (max-width: 700px) {
  .region-mapbox { height: 340px; }
  .region-card__name { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .region-mapbox .gesture-hint { transition: none; } }