/* =====================================================================
 *  ATLAS PLATE  -  shared cartography skin
 * =====================================================================
 *  One look for every hand-drawn map on the site. Any canvas that carries
 *  the .iw-atlas class and is rendered by winery-region-map.js gets the
 *  same parchment, the same burgundy zone wash, the same compass, scale bar
 *  and paper grain: the winery detail plate, and the denomination "where it
 *  is" plate.
 *
 *  The SVG child classes keep their historic wd-atlas- prefix. Renaming them
 *  is a separate job from sharing them; the names are internal to the
 *  renderer and never appear in page markup.
 * ===================================================================== */

/* .iw-atlas-skin carries the tokens without being a map canvas: chrome that
   belongs to the atlas family (the popover card) but sits in ordinary page
   flow. Every other rule in this file is a descendant of .iw-atlas, so the
   alias hands over the palette and nothing else. */
.iw-atlas,
.iw-atlas-skin {
  --atlas-ink:         #3d2a26;
  --atlas-ink-soft:    rgba(61,42,38,0.62);
  --atlas-edge:        #c6b48a;
  --atlas-burgundy:    #5e243c;
  --atlas-burgundy-2:  #7a2e50;
  --atlas-parchment:   #f6efd9;
}

.iw-atlas .wr-map-svg,
.iw-atlas .wr-map-svg--editorial {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  /* Never a standing will-change layer here: iOS drops an off-screen
     layer's backing store and re-rasterises the WHOLE plate in one stall
     every time it scrolls back in, which reads as the map visibly
     re-rendering on every viewport entry. Without a layer the plate lives
     in normal page tiles and repaints incrementally. The zoom promotes a
     layer only for the duration of its transform transition. */
}
/* Clips the plate while the zoom transform scales the svg past its box.
   Only during the animation, so popovers are never clipped at rest. */
.iw-atlas.is-zoom-clipping { overflow: hidden; }
/* While zooming, the svg paints its padded world beyond the viewBox, so the
   ring the shrinking plate reveals is real sea and real geography instead of
   the page background. The host clip above bounds it; at rest the svg goes
   back to its default clipping and the padding costs nothing. */
.iw-atlas .wr-map-svg.is-zooming { overflow: visible; }

.iw-atlas .wd-atlas-neighbors path,
.iw-atlas .wd-atlas-zones-ghost path,
.iw-atlas .wd-atlas-land,
.iw-atlas .wd-atlas-zone-focus,
.iw-atlas .wd-atlas-zone-focus-edge,
.iw-atlas .wd-atlas-zone-focus-ghost,
.iw-atlas .wd-atlas-cutout { vector-effect: non-scaling-stroke; }

/* Scale bar */
.iw-atlas .wd-atlas-scale-tick {
  font-family: var(--font-label, var(--font-display));
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.22em;
  fill: rgba(61,42,38,0.78);
}

/* Region label at top */
.iw-atlas .wd-atlas-region-label {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.42em; font-weight: 600;
  fill: var(--atlas-ink);
}
.iw-atlas .wd-atlas-region-rule {
  stroke: var(--atlas-edge);
  stroke-width: 0.6;
}

/* Sea label */
.iw-atlas .wd-atlas-sea-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.32em;
  fill: rgba(75,52,30,0.34);
}

/* Compass */
.iw-atlas .wd-atlas-compass-n {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  fill: var(--atlas-ink);
}

/* Focus zone label */
.iw-atlas .wd-atlas-zone-label-bg {
  fill: rgba(248,240,218,0.96);
  stroke: rgba(94,36,60,0.55);
  stroke-width: 0.7;
}
.iw-atlas .wd-atlas-zone-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  fill: var(--atlas-burgundy);
}

/* Cut-out sibling zone: a zone that sits inside the focus zone but is its
   own appellation (Chianti Classico inside Chianti). Drawn as a dashed
   reserve so the reader sees the hole in the boundary. */
.iw-atlas .wd-atlas-cutout {
  fill: rgba(248,240,218,0.82);
  stroke: rgba(61,42,38,0.55);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.iw-atlas .wd-atlas-cutout-label {
  font-family: var(--font-display);
  font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.18em;
  fill: rgba(61,42,38,0.72);
}

/* Wine route: a paper casing under a dashed burgundy line, terminal dots. */
.iw-atlas .wd-atlas-route-casing {
  fill: none;
  stroke: rgba(250,243,224,0.95);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iw-atlas .wd-atlas-route {
  fill: none;
  stroke: var(--atlas-burgundy-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 5;
  opacity: 0.9;
}
.iw-atlas .wd-atlas-route-end { fill: var(--atlas-burgundy-2); }
/* Several roads can share the zone plate. The active road keeps the full
   burgundy; the rest wait in a pale wash until the route slider, or a press
   on the road itself, brings them forward. Opacity only: cheap on phones. */
.iw-atlas .wd-atlas-zone-route { cursor: pointer; }
.iw-atlas .wd-atlas-zone-route .wd-atlas-route,
.iw-atlas .wd-atlas-zone-route .wd-atlas-route-casing,
.iw-atlas .wd-atlas-zone-route .wd-atlas-route-end { transition: opacity 220ms ease; }
.iw-atlas .wd-atlas-zone-route.is-muted .wd-atlas-route { opacity: 0.24; }
.iw-atlas .wd-atlas-zone-route.is-muted .wd-atlas-route-casing { opacity: 0.4; }
.iw-atlas .wd-atlas-zone-route.is-muted .wd-atlas-route-end { opacity: 0.28; }
.iw-atlas .wd-atlas-zone-route.is-muted:hover .wd-atlas-route { opacity: 0.55; }
.iw-atlas .wd-atlas-zone-route.is-muted:hover .wd-atlas-route-end { opacity: 0.55; }
/* The visible dashes are under 3px wide, far too thin to press; a fat
   transparent stroke on top takes the pointer, same trick as the route
   index plate. */
.iw-atlas .wd-atlas-zone-route__hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; }

/* Interactive wine area and winery mark */
.iw-atlas .wd-atlas-pin,
.iw-atlas .wd-atlas-zone-focus {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* The mark is inert; the pin takes its events on the hit shapes below, one
   over the head and one over the ground anchor. */
.iw-atlas .wd-atlas-pin { pointer-events: none; }
.iw-atlas .wd-atlas-pin-annotation { pointer-events: none; }
.iw-atlas .wd-atlas-pin-hit,
.iw-atlas .wd-atlas-pin-base-hit,
.iw-atlas .wd-atlas-pin-label-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}
.iw-atlas .wd-atlas-zone-focus.is-hot,
.iw-atlas .wd-atlas-zone-focus.is-locked,
.iw-atlas .wd-atlas-zone-focus:focus-visible {
  stroke: var(--atlas-burgundy);
  stroke-width: 2.2;
}
.iw-atlas .wd-atlas-pin-pulse {
  fill: rgba(94,36,60,0.10);
  /* A finite pulse, never infinite: an endless animation inside the plate
     forces Safari to re-rasterise the map area on every frame forever,
     which blanks the page around the map on iPhone flings and makes the
     zoom stutter. Four beats make the same "you can visit these" point,
     then the plate goes still. The keyframes end at opacity 0, and the
     element's own opacity keeps it invisible after the run. */
  opacity: 0;
  animation: wdAtlasPulse 2.6s ease-out 4;
  transform-box: fill-box;
  transform-origin: center;
}
.iw-atlas .wd-atlas-pin-halo {
  fill: rgba(255,250,232,0.92);
  stroke: rgba(94,36,60,0.40);
  stroke-width: 0.8;
}
.iw-atlas .wd-atlas-pin-stem {
  stroke: var(--atlas-ink);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.iw-atlas .wd-atlas-pin-head {
  fill: var(--atlas-burgundy);
  stroke: #fcf9f4;
  stroke-width: 1.2;
}
.iw-atlas .wd-atlas-pin-head-dot {
  fill: #fcf9f4;
}
.iw-atlas .wd-atlas-pin-foot {
  fill: var(--atlas-ink);
}
.iw-atlas .wd-atlas-pin-connector {
  stroke: var(--atlas-burgundy);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0.78;
}
.iw-atlas .wd-atlas-pin-label-eyebrow {
  font-family: var(--font-label, var(--font-display));
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.32em;
  fill: rgba(94,36,60,0.78);
}
.iw-atlas .wd-atlas-pin-label-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  fill: var(--atlas-ink);
  paint-order: stroke;
  stroke: rgba(247,239,217,0.96);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

/* Zoom between the region view and the close-up. The furniture belongs to a
   framing, so it steps out of the way while the camera moves and fades back
   in once the plate has been redrawn at the new extent. */
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-compass,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-scale,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-region-label,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-region-rule,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-sea-label,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-zone-label-group,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-cutout-label,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-pin-leader,
.iw-atlas .wr-map-svg.is-zooming .wd-atlas-pin-anchor {
  opacity: 0;
  transition: opacity 140ms ease;
}
.iw-atlas .wr-map-svg .wd-atlas-compass,
.iw-atlas .wr-map-svg .wd-atlas-scale,
.iw-atlas .wr-map-svg .wd-atlas-region-label,
.iw-atlas .wr-map-svg .wd-atlas-region-rule,
.iw-atlas .wr-map-svg .wd-atlas-sea-label,
.iw-atlas .wr-map-svg .wd-atlas-zone-label-group,
.iw-atlas .wr-map-svg .wd-atlas-cutout-label {
  transition: opacity 260ms ease;
}
.iw-atlas .wr-map-svg.is-settling .wd-atlas-compass,
.iw-atlas .wr-map-svg.is-settling .wd-atlas-scale,
.iw-atlas .wr-map-svg.is-settling .wd-atlas-region-label,
.iw-atlas .wr-map-svg.is-settling .wd-atlas-region-rule,
.iw-atlas .wr-map-svg.is-settling .wd-atlas-sea-label,
.iw-atlas .wr-map-svg.is-settling .wd-atlas-zone-label-group,
.iw-atlas .wr-map-svg.is-settling .wd-atlas-cutout-label {
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .iw-atlas .wr-map-svg.is-settling .wd-atlas-compass,
  .iw-atlas .wr-map-svg.is-settling .wd-atlas-scale,
  .iw-atlas .wr-map-svg.is-settling .wd-atlas-region-label,
  .iw-atlas .wr-map-svg.is-settling .wd-atlas-region-rule,
  .iw-atlas .wr-map-svg.is-settling .wd-atlas-sea-label,
  .iw-atlas .wr-map-svg.is-settling .wd-atlas-zone-label-group,
  .iw-atlas .wr-map-svg.is-settling .wd-atlas-cutout-label { opacity: 1; transition: none; }
}

/* Rich atlas popovers. Content is server-rendered; the map script only
   positions and toggles these cards. */
.iw-atlas .wd-atlas-popover {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  width: min(330px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid rgba(94,36,60,0.34);
  border-radius: 10px;
  background: rgba(251,243,223,0.98);
  box-shadow: 0 18px 42px rgba(75,50,28,0.3);
  color: var(--atlas-ink);
}
.iw-atlas .wd-atlas-popover[hidden],
.iw-atlas .wd-atlas-popover__chip-source[hidden],
.iw-atlas .wd-atlas-popover__section[hidden],
.iw-atlas .wd-atlas-popover__summary[hidden] {
  display: none;
}
/* The card opens on click only, so its close X shows at every width. */
.wd-atlas-popover__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--atlas-burgundy);
  font: 400 24px/1 var(--font-body);
  cursor: pointer;
}
.wd-atlas-popover__close:hover { background: rgba(94,36,60,0.08); }
.wd-atlas-popover__close:focus-visible {
  outline: 2px solid var(--atlas-burgundy);
  outline-offset: 1px;
}
.wd-atlas-popover__head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding-right: 34px;
}
.wd-atlas-popover__head img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.wd-atlas-popover__kicker {
  margin: 0 0 2px;
  font-family: var(--font-label, var(--font-body));
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--atlas-burgundy);
}
.wd-atlas-popover__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.15;
  color: var(--atlas-ink);
}
/* Name and its call to action share a row. The name wraps inside its own
   column so the button never drops below it. */
.wd-atlas-popover__titlerow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.wd-atlas-popover__titlerow .wd-atlas-popover__title { flex: 1 1 auto; min-width: 0; }
/* Each zone-plate pin is a different estate, so its card carries the way
   through to that estate's page. Solid, because on a parchment card an
   underlined link does not read as the thing to press. */
.wd-atlas-popover__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--atlas-burgundy, #5e243c);
  color: #fcf9f4;
  font-family: var(--font-label, var(--font-body));
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease;
}
.wd-atlas-popover__cta:hover { background: #3a162a; }
.wd-atlas-popover__cta:focus-visible {
  outline: 2px solid var(--atlas-burgundy, #5e243c);
  outline-offset: 2px;
}
.wd-atlas-popover__summary {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--atlas-ink-soft);
}
/* How you get in. The most useful line on a cellar-door card, so it sits
   directly under the location rather than in a section. */
.wd-atlas-popover__visit {
  margin: 6px 0 0;
  font-family: var(--font-label, var(--font-body));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--atlas-burgundy, #5e243c);
}
.wd-atlas-popover__section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(94,36,60,0.13);
}
.wd-atlas-popover__section h4 {
  margin: 0 0 7px;
  font-family: var(--font-label, var(--font-body));
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--atlas-burgundy);
}
.wd-atlas-popover__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wd-atlas-popover__chip-source { display: contents; }
.wd-atlas-popover__chips .iw-denom-pill,
.wd-atlas-popover__chips .iw-grape-pill {
  max-width: 100%;
  font-size: 10px;
}

@media (max-width: 767.98px) {
  .iw-atlas .wd-atlas-popover {
    width: auto;
    max-height: calc(100% - 24px);
    padding: 14px;
  }
  .wd-atlas-popover__head {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .wd-atlas-popover__head img {
    width: 46px;
    height: 46px;
  }
}

/* Numbered estate pin (denomination plate). The number sits in the pin head
   and matches the estate card below the map, so the two read as one list. */
.iw-atlas .wd-atlas-pin-num {
  font-family: var(--font-label, var(--font-display));
  font-size: 7px; font-weight: 800;
  letter-spacing: 0.02em;
  fill: #fcf9f4;
  pointer-events: none;
}
.iw-atlas .wd-atlas-pin:hover .wd-atlas-pin-head,
.iw-atlas .wd-atlas-pin.is-hot .wd-atlas-pin-head,
.iw-atlas .wd-atlas-pin.is-locked .wd-atlas-pin-head,
.iw-atlas .wd-atlas-pin:focus-visible .wd-atlas-pin-head {
  fill: #3a162a;
}
.iw-atlas .wd-atlas-pin:hover .wd-atlas-pin-halo,
.iw-atlas .wd-atlas-pin.is-hot .wd-atlas-pin-halo,
.iw-atlas .wd-atlas-pin.is-locked .wd-atlas-pin-halo,
.iw-atlas .wd-atlas-pin:focus-visible .wd-atlas-pin-halo {
  stroke: var(--atlas-burgundy);
  stroke-width: 2;
}
@keyframes wdAtlasPulse {
  0%   { transform: scale(0.6); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .iw-atlas .wd-atlas-pin-pulse { animation: none; opacity: 0; }
}