/* === g-map-locations — full-width map background with a locations card === */
/* Tokens only. Desktop: card overlays the map. <768px: map band, card below. */

.ssla-g-map-locations {
  width: 100%;
  height: var(--g-map-locations-height, 520px);
  background-color: var(--ssla-bg-color, transparent);
  color: var(--g-map-locations-fg, inherit);
  display: grid;
  grid-template-columns: var(--g-map-locations-card-width, 340px) minmax(0, 1fr);
  grid-template-areas: "side map";
}
.ssla-g-map-locations--card-side-right { grid-template-columns: minmax(0, 1fr) var(--g-map-locations-card-width, 340px); grid-template-areas: "map side"; }
/* The map is its own column, so nothing the sidebar holds can cover it. */
.ssla-g-map-locations-map {
  grid-area: map;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  display: block;
}
.ssla-g-map-locations-map[src=""],
.ssla-g-map-locations-map:not([src]) { background: var(--shell-surface-light, transparent); }
.ssla-g-map-locations-inner { grid-area: side; min-height: 0; height: 100%; }
.ssla-g-map-locations .ssla-g-map-locations-card {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: var(--g-map-locations-card-padding, 20px 22px);
  border-radius: var(--g-map-locations-radius, 0);
  background: var(--g-map-locations-bg, var(--shell-surface-light, #fff));
  color: var(--g-map-locations-fg, inherit);
  border-inline-end: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.ssla-g-map-locations .ssla-g-map-locations-eyebrow {
  color: var(--g-map-locations-eyebrow, inherit);
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 800;
  text-transform: var(--paint-eyebrow-case, uppercase);
  margin: 0 0 4px;
}
.ssla-g-map-locations .ssla-g-map-locations-heading {
  font-family: var(--brand-heading-family, inherit);
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 6px;
}
.ssla-g-map-locations .ssla-g-map-locations-body { font-size: 13px; line-height: 1.4; margin: 0 0 6px; }
.ssla-g-map-locations-eyebrow:empty,
.ssla-g-map-locations-body:empty { display: none; }
.ssla-g-map-locations-list { list-style: none; margin: 10px 0 0; padding: 0; }
.ssla-g-map-locations .ssla-g-map-locations-item {
  padding: 7px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  font-size: 12px;
  line-height: 1.35;
}
.ssla-g-map-locations .ssla-g-map-locations-item:first-child { border-top: 0; padding-top: 0; }
.ssla-g-map-locations .ssla-g-map-locations-card .ssla-g-map-locations-name { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 700; }
.ssla-g-map-locations .ssla-g-map-locations-card .ssla-g-map-locations-address,
.ssla-g-map-locations .ssla-g-map-locations-card .ssla-g-map-locations-when { margin: 1px 0 0; font-size: 12px; line-height: 1.35; }
.ssla-g-map-locations .ssla-g-map-locations-card .ssla-g-map-locations-when { opacity: 0.7; font-size: 11px; }
.ssla-g-map-locations-address:empty,
.ssla-g-map-locations-when:empty { display: none; }
.ssla-g-map-locations .ssla-g-map-locations-card .ssla-g-map-locations-link,
.ssla-g-map-locations .ssla-g-map-locations-card .ssla-g-map-locations-dir {
  display: inline;
  margin: 3px 12px 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.ssla-g-map-locations-link[href=""],
.ssla-g-map-locations-link:empty { display: none; }
.ssla-g-map-locations-dir[href$="destination="] { display: none; }
/* Row already links to a Google Maps directions URL (Campliment rows do): no second one. */
.ssla-g-map-locations-link[href*="google.com/maps"] + .ssla-g-map-locations-dir { display: none; }
/* Rows are the map's controls: selectable, with a clear active state. */
.ssla-g-map-locations .ssla-g-map-locations-item {
  cursor: pointer;
  padding-inline: 10px;
  margin-inline: -10px;
  border-inline-start: 3px solid transparent;
}
.ssla-g-map-locations .ssla-g-map-locations-item:hover,
.ssla-g-map-locations .ssla-g-map-locations-item:focus-visible {
  background: color-mix(in srgb, currentColor 6%, transparent);
  outline: none;
}
.ssla-g-map-locations .ssla-g-map-locations-item.is-active {
  background: color-mix(in srgb, var(--shell-accent, currentColor) 10%, transparent);
  border-inline-start-color: var(--shell-accent, currentColor);
}
.ssla-g-map-locations-item:only-child { cursor: default; }

/* Collapse: the sidebar folds to a slim rail and the map takes the room. Still a
   column, never an overlay. */
.ssla-g-map-locations-toggle {
  position: sticky; top: 0; float: right; z-index: 1;
  width: 28px; height: 28px; margin: -8px -10px 0 0; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit; font-size: 18px; line-height: 1;
}
.ssla-g-map-locations--card-side-right .ssla-g-map-locations-toggle span { display: inline-block; transform: rotate(180deg); }
.ssla-g-map-locations { transition: grid-template-columns 0.2s ease; }
.ssla-g-map-locations.is-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
.ssla-g-map-locations--card-side-right.is-collapsed { grid-template-columns: minmax(0, 1fr) 44px; }
.ssla-g-map-locations.is-collapsed .ssla-g-map-locations-card { padding: 8px 0; overflow: hidden; }
.ssla-g-map-locations.is-collapsed .ssla-g-map-locations-card > :not(.ssla-g-map-locations-toggle) { display: none; }
.ssla-g-map-locations.is-collapsed .ssla-g-map-locations-toggle { float: none; display: block; margin: 0 auto; }
.ssla-g-map-locations.is-collapsed .ssla-g-map-locations-toggle span { transform: rotate(180deg); }
.ssla-g-map-locations--card-side-right.is-collapsed .ssla-g-map-locations-toggle span { transform: none; }
@media (prefers-reduced-motion: reduce) { .ssla-g-map-locations { transition: none; } }

/* Contained format: content width, side margins, rounded corners. Default (full) is untouched. */
.ssla-g-map-locations--format-contained {
  width: min(100% - 2 * var(--g-map-locations-contained-margin, 24px), var(--g-map-locations-contained-width, var(--wp--style--global--content-size, 1200px)));
  margin-inline: auto;
  border-radius: var(--g-map-locations-contained-radius, 16px);
  overflow: hidden;
}

/* Dark card */
.ssla-g-map-locations--tone-dark .ssla-g-map-locations-card {
  background: var(--shell-surface-dark, #1a1a1a);
  color: var(--shell-text-on-dark, #fff);
}

/* Phone: map band on top, list below. Separate rows, never overlapping. */
@media (max-width: 767px) {
  .ssla-g-map-locations,
  .ssla-g-map-locations--card-side-right {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "map" "side";
  }
  .ssla-g-map-locations-map { height: 280px; }
  .ssla-g-map-locations-toggle { display: none; }
  .ssla-g-map-locations-inner { height: auto; }
  .ssla-g-map-locations .ssla-g-map-locations-card { height: auto; overflow: visible; border-inline-end: 0; }
}