/* ==========================================================================
   UNIT 3 · KEEP THE STACK. ADD THE CONNECTION LAYER.
   --------------------------------------------------------------------------
   Scroll-driven architecture story, pinned with native CSS sticky
   (CLAUDE.md §5 Resilient Pinning):
     • .stack__track  — tall scroll runway (only when JS adds .is-scrolly)
     • .stack__stage  — position: sticky; holds copy + diagram
   Progress is read LIVE from the track's getBoundingClientRect() each
   frame (assets/js/sections/stack.js) — nothing cached, nothing to refresh.
   Diagram steps:
     1. Ready connector    — straight route ERP → connection layer
     2. Custom integration — a detoured route for complex architecture
     3. Objective          — e-invoicing lands on top; a frame wraps the
                             stack: capability added *around* it.
   Fallback (no JS / reduced motion): normal-height section, all three
   steps visible and the diagram fully drawn.
   IMPORTANT: this section and its ancestors keep overflow: visible.
   ========================================================================== */

.stack {
  background: linear-gradient(180deg, var(--c-white) 0%, #F7FAFB 100%);
}

.stack__decor {
  background:
    radial-gradient(ellipse 45% 50% at 85% 55%, rgba(0, 169, 182, 0.09), transparent 70%),
    radial-gradient(ellipse 35% 35% at 5% 15%, rgba(1, 62, 106, 0.05), transparent 70%);
}

[dir="rtl"] .stack__decor {
  scale: -1 1;
}

/* ---------------------------------------------------------------------------
   Track & sticky stage
   --------------------------------------------------------------------------- */
.stack__track {
  position: relative;
}

.stack__stage {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .stack__stage {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* Scrollytelling mode — enabled by JS */
.stack.is-scrolly .stack__track {
  block-size: 280vh;
}

.stack.is-scrolly .stack__stage {
  position: sticky;
  inset-block-start: var(--header-h);
  block-size: calc(100svh - var(--header-h));
  padding-block: clamp(1rem, 3vh, 2rem);
}

/* ---------------------------------------------------------------------------
   Copy column: title + three step cards with a progress rail
   --------------------------------------------------------------------------- */
.stack__copy {
  display: grid;
  gap: var(--space-xl);
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .stack__copy {
    justify-items: start;
    text-align: start;
  }
}

.stack__steps {
  position: relative;
  display: grid;
  gap: var(--space-md);
  inline-size: 100%;
  max-inline-size: 30rem;
  padding-inline-start: 1.25rem;
  text-align: start;
}

/* Vertical progress rail on the inline-start edge */
.stack__rail {
  position: absolute;
  inset-block: 0.5rem;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a10);
  overflow: hidden;
}

.stack__rail-fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--c-teal), var(--c-deep-teal));
  transform-origin: 50% 0%;
}

.stack__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--r-card);
  border: 1px solid transparent;
  transition:
    background-color 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    opacity 0.45s var(--ease-out);
}

.stack__step-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 12px;
  background-color: var(--c-cloud);
  color: var(--c-slate);
  transition: background-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}

.stack__step-icon svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.stack__step p {
  color: var(--c-slate);
  transition: color 0.45s var(--ease-out);
}

/* Active step (always "active" in the static fallback) */
.stack__step.is-active,
.stack:not(.is-scrolly) .stack__step {
  background-color: var(--c-white);
  border-color: var(--c-ink-a10);
  box-shadow: var(--shadow-md);
}

.stack__step.is-active .stack__step-icon,
.stack:not(.is-scrolly) .stack__step-icon {
  background-color: var(--c-teal);
  color: var(--c-navy);
}

.stack__step.is-active p,
.stack:not(.is-scrolly) .stack__step p {
  color: var(--c-ink);
}

/* Inactive steps are distinguished by the card surface and icon tint only;
   their text stays at full contrast (55% opacity measured 2.26:1). */

/* Mobile scrollytelling: only the active step shows, stacked in one cell,
   so title + step + diagram fit inside the pinned viewport. */
@media (max-width: 47.99rem) {
  .stack.is-scrolly .stack__stage {
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-md);
    align-items: stretch;
  }

  .stack.is-scrolly .stack__copy {
    gap: var(--space-md);
  }

  .stack.is-scrolly .stack__steps {
    grid-template-areas: "step";
    padding-inline-start: 0;
  }

  .stack.is-scrolly .stack__step {
    grid-area: step;
  }

  .stack.is-scrolly .stack__step:not(.is-active) {
    opacity: 0;
    visibility: hidden;
  }

  .stack.is-scrolly .stack__rail {
    display: none;
  }

  .stack.is-scrolly .stack__diagram {
    block-size: 100%;
    min-block-size: 0;
  }
}

/* ---------------------------------------------------------------------------
   Architecture diagram (single scalable SVG)
   --------------------------------------------------------------------------- */
.stack__diagram {
  position: relative;
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-inline: auto;
}

.stack__svg {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

/* Pinned mode: the diagram always fits inside the sticky viewport
   (viewBox + default "meet" scaling keeps proportions) */
.stack.is-scrolly .stack__svg {
  max-block-size: calc(100svh - var(--header-h) - 3rem);
}

@media (max-width: 47.99rem) {
  .stack.is-scrolly .stack__svg {
    max-block-size: none;
  }
}

/* Text inside the SVG */
.stack__svg .d-label {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 600;
}

.stack__svg .d-pill-text {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  fill: var(--c-ink);
}

/* Slabs */
.d-slab--erp-overlay { fill: rgba(2, 17, 58, 0.78); }
.d-slab--layer       { fill: var(--c-navy); }
.d-slab--top         { fill: var(--c-white); stroke: var(--c-teal); stroke-width: 1.5; }
.d-slab-stroke       { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }

.d-text-light { fill: var(--c-white); }
.d-text-dark  { fill: var(--c-ink); }

.d-icon-light { stroke: var(--c-teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-icon-dark  { stroke: var(--c-deep-teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Routes */
.d-route {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d-route--custom {
  stroke: var(--c-deep-teal);
}

.d-route-track {
  fill: none;
  stroke: var(--c-ink-a10);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 7;
}

/* Route label pills */
.d-pill {
  fill: var(--c-white);
  stroke: var(--c-ink-a10);
  stroke-width: 1;
  filter: drop-shadow(0 6px 14px rgba(2, 17, 58, 0.10));
}

/* "Around it" wrap frame */
.d-wrap {
  fill: rgba(0, 169, 182, 0.04);
  stroke: var(--c-teal);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

.d-wrap-tag {
  fill: var(--c-teal);
}

.d-wrap-tag-icon {
  stroke: var(--c-navy);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}