/* ============================================================================
   Burton v8 — Room Map
   ----------------------------------------------------------------------------
   Interactive top-down room plan for the acoustic-treatment hub.
   Four numbered treatment zones (panels, bass traps, ceiling cloud, diffusers)
   are rendered directly onto an SVG room and paired with clickable cards
   that route to the real placement articles.

   Pure CSS animations (pulse rings + dashed sound paths). Hover/focus state
   is synced between the SVG marker and the matching card via JS setting a
   data-active attribute on the wrapper (see inline script in template).
   Gracefully degrades to a static diagram + card list without JS.
   ========================================================================= */

/* ── Layout: three tiers (mobile / tablet / desktop) ─────────────────────
   - Mobile  (<500px):  single column stack. SVG first, then zones 01→04.
   - Tablet  (500–899): full-width SVG, 2×2 card grid below it.
   - Desktop (≥900px):  orbital 3×3 — stage center, cards on each side
                        matching where the zone sits in the room.
   The cards are direct children of .room-map and are placed into the
   right grid cell via `data-zone` at each tier. */

.room-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
  justify-items: stretch;
  margin-top: var(--space-10);
}

/* Tablet — stage on top, 2×2 card grid below (01 02 / 03 04) */
@media (min-width: 500px) and (max-width: 899px) {
  .room-map {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "zone1 zone2"
      "zone3 zone4";
    gap: var(--space-4);
  }

  .room-map__stage           { grid-area: stage; }
  .room-zone[data-zone="1"]  { grid-area: zone1; }
  .room-zone[data-zone="2"]  { grid-area: zone2; }
  .room-zone[data-zone="3"]  { grid-area: zone3; }
  .room-zone[data-zone="4"]  { grid-area: zone4; }
}

/* Desktop — orbital, cards revolve around the stage to match where each zone
   actually sits in the POV:
     · zone3 (ceiling)     → TOP
     · zone1 (side walls)  → LEFT
     · zone2 (front corner)→ RIGHT
     · zone4 (front wall)  → BOTTOM */
@media (min-width: 900px) {
  .room-map {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr) minmax(220px, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      ".     zone3  ."
      "zone1 stage  zone2"
      ".     zone4  .";
    gap: var(--space-5);
    align-items: center;
  }

  .room-map__stage           { grid-area: stage; }
  .room-zone[data-zone="1"]  { grid-area: zone1; }
  .room-zone[data-zone="2"]  { grid-area: zone2; }
  .room-zone[data-zone="3"]  { grid-area: zone3; justify-self: center; max-width: 520px; width: 100%; }
  .room-zone[data-zone="4"]  { grid-area: zone4; justify-self: center; max-width: 520px; width: 100%; }
}

/* ── SVG panel ───────────────────────────────────────────────────────────── */

.room-map__stage {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
}

.room-map__svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--color-ink-muted);
}

.room-map__caption {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  text-align: center;
}

/* ── Room geometry (first-person POV from the sofa) ──────────────────────── */

/* Ceiling and side walls are rendered as polygons in single-point perspective.
   Each surface has a slightly different fill to suggest depth. */
.room__ceiling {
  fill: var(--color-bg);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.room__side-wall {
  fill: var(--color-surface-2);
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.room__front-wall {
  fill: var(--color-surface);
  stroke: var(--color-line-strong);
  stroke-width: 1.5;
}

.room__floor {
  fill: var(--color-line);
  stroke: var(--color-line-strong);
  stroke-width: 1;
  opacity: 0.5;
}

/* Foreground POV anchor — a visible sofa back + a human silhouette (head +
   shoulders seen from behind) so viewers instantly read "I'm sitting here,
   this is what I'd see." */
.room__sofa {
  fill: var(--color-surface-2);
  stroke: var(--color-line-strong);
  stroke-width: 1.25;
}

.room__sofa-seam {
  stroke: var(--color-line-strong);
  stroke-width: 1;
  opacity: 0.45;
}

.room__person-body {
  fill: var(--color-ink);
  opacity: 0.88;
}

.room__person-head {
  fill: var(--color-ink);
}

/* ── Zone markers (SVG) ──────────────────────────────────────────────────── */

.room-marker {
  cursor: pointer;
}

.room-marker:hover,
.room-marker:focus-visible {
  outline: none;
}

/* The physical treatment shape (panel rectangle, trap triangle, etc.) */
.room-marker__shape {
  fill: var(--color-accent-soft);
  stroke: var(--color-accent);
  stroke-width: 1.5;
  transition: fill var(--duration-fast) var(--ease-out),
              stroke-width var(--duration-fast) var(--ease-out);
}

/* Core dot: the always-visible numbered circle */
.room-marker__core {
  fill: var(--color-accent);
  transition: fill var(--duration-fast) var(--ease-out),
              r var(--duration-base) var(--ease-out);
}

.room-marker__number {
  fill: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* Active state (hover / focus / sibling-card hover). Shapes light up with the
   accent fill + thicker stroke; no group-level scale because each zone can
   include two widely-spaced elements (e.g. both side walls) which would
   spread apart instead of emphasising the zone. */
.room-map[data-active="1"] .room-marker[data-zone="1"] .room-marker__shape,
.room-map[data-active="2"] .room-marker[data-zone="2"] .room-marker__shape,
.room-map[data-active="3"] .room-marker[data-zone="3"] .room-marker__shape,
.room-map[data-active="4"] .room-marker[data-zone="4"] .room-marker__shape,
.room-marker:hover .room-marker__shape,
.room-marker:focus-visible .room-marker__shape {
  fill: var(--color-accent);
  stroke-width: 2.5;
}

/* Bump the core circle a touch so the number stays readable when hovered */
.room-map[data-active="1"] .room-marker[data-zone="1"] .room-marker__core,
.room-map[data-active="2"] .room-marker[data-zone="2"] .room-marker__core,
.room-map[data-active="3"] .room-marker[data-zone="3"] .room-marker__core,
.room-map[data-active="4"] .room-marker[data-zone="4"] .room-marker__core,
.room-marker:hover .room-marker__core,
.room-marker:focus-visible .room-marker__core {
  fill: var(--color-accent-hover);
}

/* ── Zone cards (orbit around the stage) ─────────────────────────────────── */

/* The zone card is now a container: primary link (placement guide) + a row
   of related-article chips. This turns each zone into a micro-hub that
   surfaces 4 articles (primary + 3 chips) instead of 1. */
.room-zone {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.room-zone:hover,
.room-zone:focus-within,
.room-map[data-active="1"] .room-zone[data-zone="1"],
.room-map[data-active="2"] .room-zone[data-zone="2"],
.room-map[data-active="3"] .room-zone[data-zone="3"],
.room-map[data-active="4"] .room-zone[data-zone="4"] {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Primary row — placement guide link (the main CTA of the card) */
.room-zone__primary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.room-zone__primary:focus-visible {
  outline: none;
}

.room-zone__number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.room-zone:hover .room-zone__number,
.room-zone:focus-within .room-zone__number,
.room-map[data-active="1"] .room-zone[data-zone="1"] .room-zone__number,
.room-map[data-active="2"] .room-zone[data-zone="2"] .room-zone__number,
.room-map[data-active="3"] .room-zone[data-zone="3"] .room-zone__number,
.room-map[data-active="4"] .room-zone[data-zone="4"] .room-zone__number {
  background: var(--color-accent);
  color: var(--color-surface);
}

.room-zone__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.room-zone__name {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
}

.room-zone__tool {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  line-height: 1.4;
}

.room-zone__tool strong {
  font-style: normal;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-hover);
}

/* Related-article chips — secondary links that push readers deeper into the
   site inventory without cluttering the primary CTA. */
.room-zone__related {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 12px;
  border-top: 1px dashed var(--color-line);
  background: var(--color-bg);
}

.room-zone__chip {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  border: 1px solid var(--color-line);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.room-zone__chip:hover,
.room-zone__chip:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  outline: none;
}

/* Foam chip — deliberately muted so it reads as a budget fallback,
   not a promoted option. Same shape, just quieter visually. */
.room-zone__chip--foam {
  background: var(--color-bg);
  color: var(--color-ink-subtle);
  border-color: var(--color-line);
  border-style: dashed;
}

.room-zone__chip--foam:hover,
.room-zone__chip--foam:focus-visible {
  background: var(--color-surface);
  color: var(--color-ink-muted);
  border-color: var(--color-ink-subtle);
  border-style: dashed;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */

/* Tablet — looser-than-desktop stage padding; cap SVG width so it does not
   dominate on wider tablets (iPad landscape ~900px falls to desktop, but
   portrait ~768px benefits from a narrower diagram). */
@media (min-width: 500px) and (max-width: 899px) {
  .room-map {
    margin-top: var(--space-8);
  }
  .room-map__stage {
    padding: var(--space-4);
  }
  .room-map__svg {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* Mobile — single column, tightened rhythm, smaller number chips. */
@media (max-width: 499px) {
  .room-map {
    margin-top: var(--space-6);
    gap: var(--space-3);
  }
  .room-map__stage {
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }
  .room-map__caption {
    margin-top: var(--space-3);
    font-size: 10px;
  }
  .room-zone__primary {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .room-zone__related {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
  }
  .room-zone__number {
    width: 32px;
    height: 32px;
    font-size: var(--fs-xs);
  }
  .room-zone__name {
    font-size: var(--fs-sm);
  }
  .room-zone__tool {
    font-size: var(--fs-xs);
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .room-marker__pulse,
  .room__path {
    animation: none;
  }
  .room-marker__pulse {
    opacity: 0.3;
  }
}