/* Stack map: positioning diagram.
   A 4-column figure - user axis, Amalgamy brand band, UX evolution
   lanes, infra stack - bounded by L-brackets. */

.stack-map {
  position: relative;
  padding-block: clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}

.stack-map > .container { position: relative; }

.stack-map__intro {
  max-width: 56rem;
  margin: 0 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.stack-map__heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: var(--font-weight-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  max-width: 24ch;
}

.stack-map__deck {
  font-size: var(--fs-lg);
  color: var(--color-muted-foreground);
  margin: 0;
  max-width: 48ch;
}

/* Local palette: TWG brand teal as the Amalgamy mark, brand blue as the
   secondary audience tint. Mirrors the two-tone feel of the reference
   without importing the off-brand purple. */
.stack-map__frame {
  --map-teal: var(--brand-teal);
  --map-blue: var(--brand-blue);
  --map-teal-soft: color-mix(in oklch, var(--map-teal) 14%, white);
  --map-teal-softer: color-mix(in oklch, var(--map-teal) 6%, white);
  --map-blue-soft: color-mix(in oklch, var(--map-blue) 10%, white);
  --map-card: #ffffff;
  --map-card-border: var(--color-border);
  --map-gap: 0.5rem;

  position: relative;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: color-mix(in oklch, var(--map-teal) 2%, white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.stack-map__grid {
  display: grid;
  grid-template-columns: 3.25rem 4.5rem 8rem 1fr;
  gap: var(--map-gap);
  align-items: stretch;
  min-height: clamp(24rem, 44vw, 36rem);
}

/* -------- Column 1: user axis (Researcher / Operators) -------- */

.stack-map__users {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--map-gap);
}

.stack-map__users-label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--map-blue-soft);
  border: 1px solid color-mix(in oklch, var(--map-blue) 18%, transparent);
  border-radius: var(--radius-md);
  color: var(--map-blue);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-block: 1rem;
}

/* -------- Column 2: the Amalgamy band -------- */

.stack-map__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--map-teal);
  border-radius: var(--radius-md);
  color: #ffffff;
  box-shadow: 0 8px 22px -10px color-mix(in oklch, var(--map-teal) 55%, transparent);
}

.stack-map__brand-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* -------- Column 3: UX evolution lanes -------- */

.stack-map__ux {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--map-gap);
  min-width: 0;
}

.stack-map__ux-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
  background: var(--map-teal-softer);
  border: 1px solid color-mix(in oklch, var(--map-teal) 18%, transparent);
  border-radius: var(--radius-sm);
  text-align: center;
  line-height: var(--lh-tight);
}

.stack-map__ux-eyebrow {
  font-size: 0.625rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--map-teal) 70%, var(--color-muted-foreground));
}

.stack-map__ux-headline {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  color: var(--map-teal);
}

.stack-map__ux-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--map-gap);
  min-width: 0;
}

.stack-map__ux-lane {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--map-teal-soft);
  border: 1px solid color-mix(in oklch, var(--map-teal) 26%, transparent);
  border-radius: var(--radius-md);
  color: var(--map-teal);
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-block: 0.75rem;
  min-width: 0;
  overflow: hidden;
}

/* -------- Column 4: the infra stack -------- */

.stack-map__stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--map-gap);
  min-width: 0;
}

.stack-map__layer {
  flex: 1 1 0;
  min-height: 0;
  background: var(--map-card);
  border: 1px solid var(--map-card-border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.125rem;
  display: grid;
  grid-template-columns: 10.5rem 1fr;
  align-items: center;
  column-gap: 1.25rem;
  min-width: 0;
}

.stack-map__layer-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: var(--fs-base);
  color: var(--color-foreground);
  letter-spacing: -0.005em;
  line-height: var(--lh-tight);
}

.stack-map__layer-body {
  font-size: var(--fs-sm);
  color: var(--color-muted-foreground);
  line-height: var(--lh-snug);
}

/* -------- Bottom split: Hardware + Cloud (burst target) --------
   Single card container (same border, radius, and padding as every
   other layer) with two halves distinguished by background color
   and a 1px vertical divider. No clip-paths or diagonal joins. */

.stack-map__layer--split {
  flex: 0 0 auto;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0;
  column-gap: 0;
  overflow: hidden;
}

.stack-map__layer-card {
  padding: 0.875rem 1.125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
}

.stack-map__layer-card--hw {
  background: var(--map-card);
}

.stack-map__layer-card--cloud {
  background: color-mix(in oklch, var(--map-teal) 5%, white);
  border-left: 1px solid var(--map-card-border);
}

/* -------- Responsive: collapse to a single-column reading order -------- */

@media (max-width: 820px) {
  .stack-map__grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
  }

  .stack-map__users {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .stack-map__users-label {
    writing-mode: horizontal-tb;
    transform: none;
    padding-block: 0.5rem;
  }

  .stack-map__brand {
    min-height: 2.75rem;
  }
  .stack-map__brand-label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .stack-map__ux {
    grid-template-rows: none;
  }
  .stack-map__ux-lanes { grid-template-columns: repeat(3, 1fr); }
  .stack-map__ux-lane {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0.5rem 0.75rem;
  }

  /* Infra stack rows: size to content instead of flex:1 equal slices,
     and switch the 2-col (title | body) layout to stacked. */
  .stack-map__stack { gap: 0.5rem; }

  .stack-map__layer,
  .stack-map__layer-card {
    grid-template-columns: 1fr;
    row-gap: 0.25rem;
    padding: 0.875rem 1rem;
    flex: 0 0 auto;
    min-height: 0;
  }

  /* Collapse the split row to stacked halves on narrow screens.
     Hardware on top, Cloud below, with a horizontal divider. */
  .stack-map__layer--split {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .stack-map__layer-card--cloud {
    border-left: 0;
    border-top: 1px solid var(--map-card-border);
  }
}