/* OE – US Map Footprint
 *
 * Designed for a white section. Two columns (panel | map + product cards),
 * stacking on narrow widths via a container query. Dots light up with a short
 * fill transition as the slider moves; product cards re-sort by status.
 */

.oe-block-us-map-footprint {
  --oe-us-map-footprint-c: var(--oe-color-sky-blue);
  --oe-us-map-footprint-heading: var(--oe-color-secondary);
  --oe-us-map-footprint-muted: var(--oe-color-cool-grey);
  --oe-us-map-footprint-rule: color-mix(in srgb, var(--oe-color-cool-grey) 25%, transparent);
  --oe-us-map-footprint-dot: var(--oe-color-secondary-muted);
  --oe-us-map-footprint-dot-on: var(--oe-color-sky-blue);
  /* Hex exception, this block only (user-approved 2026-10-07, as oe-branching-cards):
     prototype product colours with no --oe-* token */
  --oe-us-map-footprint-teal: #30B5AE;
  --oe-us-map-footprint-pink: #D268AE;
  --oe-us-map-footprint-amber: #E7A800;
  container: oe-us-map-footprint / inline-size;
}

.oe-block-us-map-footprint__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--oe-spacing-xlarge);
  align-items: stretch; /* both columns the same height: tops and bottoms line up */
}

.oe-block-us-map-footprint *,
.oe-block-us-map-footprint *::before,
.oe-block-us-map-footprint *::after {
  box-sizing: border-box;
}

/* ---------- Panel ---------- */

.oe-block-us-map-footprint__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* spare height is shared between the three groups */
  padding: var(--oe-spacing-medium);
  border-radius: var(--oe-border-radius-base);
  background: var(--oe-color-muted);
}

.oe-block-us-map-footprint__types {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__label {
  display: block;
  margin: 0 0 var(--oe-spacing-small);
  padding: 0;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-us-map-footprint-heading);
}

.oe-block-us-map-footprint__type-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oe-spacing-xsmall);
}

.oe-block-us-map-footprint__type {
  position: relative;
  margin: 0;
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__type-input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.oe-block-us-map-footprint__type-text {
  display: inline-flex;
  align-items: center;
  min-height: var(--oe-sizing-xlarge);
  padding: 0 var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-us-map-footprint-rule);
  border-radius: var(--oe-border-radius-small);
  background: var(--oe-color-primary-4);
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium);
  color: var(--oe-us-map-footprint-heading);
  transition: background-color .2s, color .2s, border-color .2s;
}

.oe-block-us-map-footprint__type-input:hover + .oe-block-us-map-footprint__type-text {
  border-color: var(--oe-color-heritage-blue);
}

.oe-block-us-map-footprint__type-input:checked + .oe-block-us-map-footprint__type-text {
  border-color: var(--oe-color-heritage-blue);
  background: var(--oe-color-heritage-blue);
  color: var(--oe-color-primary-4);
}

.oe-block-us-map-footprint__type-input:focus-visible + .oe-block-us-map-footprint__type-text {
  outline: var(--oe-spacing-3xsmall) solid var(--oe-color-sky-blue);
  outline-offset: var(--oe-spacing-3xsmall);
}

/* ---------- States slider ---------- */

.oe-block-us-map-footprint__range {
  margin-top: var(--oe-spacing-medium);
}

.oe-block-us-map-footprint__range-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--oe-spacing-small);
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__range-top .oe-block-us-map-footprint__label {
  margin: 0;
}

.oe-block-us-map-footprint__count {
  font-size: var(--oe-font-size-xlarge);
  line-height: var(--oe-line-height-medium);
  font-variant-numeric: tabular-nums;
  color: var(--oe-color-sky-blue);
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__slider {
  display: block;
  width: 100%;
  height: var(--oe-sizing-large);
  margin: var(--oe-spacing-small) 0 0;
  accent-color: var(--oe-color-sky-blue);
  cursor: pointer;
}

.oe-block-us-map-footprint__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--oe-font-size-xsmall);
  color: var(--oe-us-map-footprint-muted);
}

/* ---------- Result ---------- */

.oe-block-us-map-footprint__result {
  margin-top: var(--oe-spacing-medium);
  padding-top: var(--oe-spacing-medium);
  border-top: var(--oe-spacing-5xsmall) solid var(--oe-us-map-footprint-rule);
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__who {
  margin: 0;
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-us-map-footprint-muted);
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__heading {
  margin: var(--oe-spacing-2xsmall) 0 0;
  font-size: var(--oe-font-size-large);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-us-map-footprint-heading);
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__text {
  margin: var(--oe-spacing-xsmall) 0 0;
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-large);
  color: var(--oe-color-cool-grey);
}

/* ---------- Map ---------- */

.oe-block-us-map-footprint__visual {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oe-block-us-map-footprint__map {
  display: block;
  width: 85%; /* slightly smaller, so the map column is not much taller than the panel */
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--oe-spacing-base);
}

.oe-block-us-map-footprint__map circle {
  fill: var(--oe-us-map-footprint-dot);
  transition: fill .35s;
}

.oe-block-us-map-footprint__map circle.is-on {
  fill: var(--oe-us-map-footprint-dot-on);
}

/* ---------- Product cards ---------- */

.oe-block-us-map-footprint .oe-block-us-map-footprint__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--oe-spacing-xsmall);
  margin: auto 0 0; /* sits at the bottom of the column */
  padding: 0;
  list-style: none;
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__product {
  display: flex;
  align-items: flex-start;
  gap: var(--oe-spacing-small);
  margin: 0;
  padding: var(--oe-spacing-small) var(--oe-spacing-base);
  border: var(--oe-spacing-5xsmall) solid var(--oe-us-map-footprint-rule);
  border-radius: var(--oe-border-radius-small);
  background: var(--oe-color-primary-4);
  transition: opacity .3s, border-color .3s;
}

.oe-block-us-map-footprint__dot {
  flex: none;
  width: var(--oe-spacing-small);
  height: var(--oe-spacing-small);
  margin-top: var(--oe-spacing-2xsmall);
  border: var(--oe-spacing-3xsmall) solid var(--oe-us-map-footprint-c);
  border-radius: var(--oe-border-radius-badge);
  background: var(--oe-us-map-footprint-c);
  transition: background-color .3s;
}

.oe-block-us-map-footprint__product-body {
  display: block;
  min-width: 0;
}

.oe-block-us-map-footprint__product-name {
  display: block;
  font-size: var(--oe-font-size-base);
  line-height: var(--oe-line-height-medium-large);
  color: var(--oe-us-map-footprint-heading);
}

.oe-block-us-map-footprint__product-note {
  display: block;
  margin-top: var(--oe-spacing-3xsmall);
  font-size: var(--oe-font-size-small);
  line-height: var(--oe-line-height-large);
  color: var(--oe-us-map-footprint-muted);
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__product[data-status="core"] {
  border-color: var(--oe-us-map-footprint-c);
}

.oe-block-us-map-footprint .oe-block-us-map-footprint__product[data-status="add"],
.oe-block-us-map-footprint .oe-block-us-map-footprint__product[data-status="off"] {
  opacity: .55;
}

.oe-block-us-map-footprint__product[data-status="add"] .oe-block-us-map-footprint__dot,
.oe-block-us-map-footprint__product[data-status="off"] .oe-block-us-map-footprint__dot {
  background: transparent;
}

/* ---------- Narrow widths ---------- */

@container oe-us-map-footprint (max-width: 52rem) {
  .oe-block-us-map-footprint__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--oe-spacing-large);
  }
}

@container oe-us-map-footprint (max-width: 30rem) {
  .oe-block-us-map-footprint .oe-block-us-map-footprint__products {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oe-block-us-map-footprint *,
  .oe-block-us-map-footprint *::before,
  .oe-block-us-map-footprint *::after {
    transition-duration: 0s !important;
  }
}