/* ============================================================
   home-wayfinding.css — "Wayfinding-first" (map) home paradigm.

   The store floor plan is the hero; the Layout tiles are a
   destination rail. Scoped to `.home-wayfinding` (root class set by
   renderer/home-wayfinding.js); landscape rules under
   `.stage.landscape .home-wayfinding`. Themeable colour comes ONLY
   from the six shared branding vars (--bg/--ink/--accent/
   --accent-strong/--accent-soft/--border); everything else reuses the
   fixed tokens from styles.css (var(--surface), var(--font-display),
   var(--radius-card), var(--shadow-card/-tile), …).
   ============================================================ */

.home-wayfinding {
  display: flex;
  flex-direction: column;
  /* Bounded by the stage, not by its own content. `min-height: 100%` let the
     map card's 1000/760 aspect at full width (~1094px on the 1440px portrait
     canvas) push the destination rail past .content's `overflow: hidden` —
     and unlike landscape the portrait rail does not scroll, and the home view
     is never fitPage()'d (main.js only fits PAGE/ASSIST). Every destination
     was unreachable on every tablet aspect. */
  height: 100%;
  min-height: 0;
  gap: 16px;
}

/* ---------- Title ---------- */

.wf-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 62px;
  letter-spacing: 2.5px;
  text-align: center;
  color: var(--ink);
  margin: 16px 0 2px;
}

/* ---------- Body: portrait stacks map over rail ---------- */

.wf-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

.wf-map {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The map absorbs the leftover height and shrinks first; the destination
     rail below keeps its natural size (see .wf-rail). */
  flex: 1 1 auto;
  min-height: 0;
}

.wf-map-card {
  width: 100%;
  /* Match the floor-plan viewBox so the SVG fills the card with no letterbox.
     `max-height` caps it when the stage is shorter than that aspect wants:
     the SVG is preserveAspectRatio=meet, so it letterboxes rather than
     distorting — exactly what the landscape rules already do. */
  aspect-ratio: 1000 / 760;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The generated SVG defaults to xMidYMid meet, so 100%×100% never distorts.
   Direct child only — the empty state's small glyph sizes itself below. */
.wf-map-card > svg { width: 100%; height: 100%; display: block; }

/* Only reached in a headless DOM without DOMParser (tests). */
.wf-map-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: var(--accent-soft);
}

/* Empty state — the manifest carries no `map` opt-in (js/template.js), so no
   floor plan renders. The modifier releases the demo map's 1000/760 box: the
   card keeps a shallow banner height in portrait (landscape already stretches
   via aspect-ratio auto) and the rail below stays the visual focus. */
.wf-map-card.wf-map-card-empty {
  aspect-ratio: auto;
  min-height: 220px;
}
.wf-map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px;
  text-align: center;
  color: var(--ink);
  opacity: 0.55;
}
.wf-map-empty-icon {
  width: 56px;
  height: 56px;
  color: var(--accent);
}
.wf-map-empty-text {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

/* Caption sits as a white pill so it stays legible over the red stage. */
.wf-caption {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  background: var(--surface);
  border-radius: 999px;
  padding: 13px 28px;
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.wf-caption-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--accent);
}
.wf-caption-text {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Destination rail ---------- */
/* Portrait: a wrapping band of vertical cards (shows every destination). */

.wf-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
  align-content: start;
  /* Never give up height to the map: the rail IS the navigation, so it keeps
     its natural size and the map shrinks around it. */
  flex: 0 0 auto;
}
.wf-rail:empty { display: none; }

.wf-dest {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  border: 3px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-tile);
  color: var(--ink);
  min-width: 120px;
  min-height: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 16px;
  text-align: center;
  transition: transform 0.14s ease, border-color 0.14s ease;
  animation: wf-dest-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}
.wf-dest:active { transform: scale(0.95); border-color: var(--accent); }

.wf-rail .wf-dest:nth-child(1)  { animation-delay: 0.03s; }
.wf-rail .wf-dest:nth-child(2)  { animation-delay: 0.06s; }
.wf-rail .wf-dest:nth-child(3)  { animation-delay: 0.09s; }
.wf-rail .wf-dest:nth-child(4)  { animation-delay: 0.12s; }
.wf-rail .wf-dest:nth-child(5)  { animation-delay: 0.15s; }
.wf-rail .wf-dest:nth-child(6)  { animation-delay: 0.18s; }
.wf-rail .wf-dest:nth-child(7)  { animation-delay: 0.21s; }
.wf-rail .wf-dest:nth-child(8)  { animation-delay: 0.24s; }
.wf-rail .wf-dest:nth-child(9)  { animation-delay: 0.27s; }
.wf-rail .wf-dest:nth-child(10) { animation-delay: 0.30s; }
.wf-rail .wf-dest:nth-child(11) { animation-delay: 0.33s; }
.wf-rail .wf-dest:nth-child(12) { animation-delay: 0.36s; }

@keyframes wf-dest-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wf-dest-icon {
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
}
.wf-dest-icon svg { width: 100%; height: 100%; display: block; }

.wf-dest-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 27px;
  line-height: 1.06;
  letter-spacing: 0.4px;
  white-space: pre-line;
}

/* Chevron affordance — hidden in the portrait card, shown in landscape. */
.wf-dest-go { display: none; }

/* ============================================================
   Landscape (1920×1080): map on the left, rail a scrolling column.
   ============================================================ */

.stage.landscape .home-wayfinding { gap: 12px; }

.stage.landscape .wf-title {
  font-size: 48px;
  margin: 8px 0 2px;
}

.stage.landscape .wf-body {
  flex-direction: row;
  align-items: stretch;
  gap: 34px;
}

/* Map column — the wider hero. */
.stage.landscape .wf-map {
  flex: 1.5 1 0;
  min-width: 0;
}
.stage.landscape .wf-map-card {
  /* Fill the column height; the SVG letterboxes via preserveAspectRatio meet. */
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Rail column — vertical list of horizontal chips, scrolls if it overflows. */
.stage.landscape .wf-rail {
  flex: 1 1 0;
  min-width: 440px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 16px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}

.stage.landscape .wf-dest {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  min-height: 120px;
  gap: 22px;
  padding: 16px 26px;
}
.stage.landscape .wf-dest-icon {
  width: 74px;
  height: 74px;
}
.stage.landscape .wf-dest-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 30px;
}
.stage.landscape .wf-dest-go {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--accent);
}