/* SAP Commerce Cloud (/services/sap-commerce/): page layout only. Shared components live in components.css and fig.css. */

/* C-1: Fig. 01 fills the hero aside */
.sap-hero-aside { min-width: 0; }
.sap-hero-aside .fig { width: 100%; }
/* At >=1024 px the aside is a 5fr column: five stations across would collide, so Fig. 01 uses its vertical svg there
   (the fragment's second orientation). Between 900 and 1023 px the hero stacks and the shared horizontal layout applies. */
@media (min-width: 1024px) {
  #fig-01 .path { grid-template-columns: 4rem minmax(0, 1fr); }
  #fig-01 .path .path-ink[data-orient="h"] { display: none; }
  #fig-01 .path .path-ink[data-orient="v"] { display: block; grid-column: 1; grid-row: 1; width: 100%; height: 100%; aspect-ratio: auto; }
  #fig-01 .path .path-stations { grid-column: 2; grid-row: 1; grid-auto-flow: row; margin-top: 0; }
  #fig-01 .path .path-station { justify-items: start; align-content: center; text-align: left; padding: var(--s-3) 0 var(--s-3) var(--s-4); }
  #fig-01 .path .path-station::before { position: absolute; margin: -8px 0 0; }
}

/* C-5, C-6: links, chips and the alternative */
.sap-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); font-weight: 500; }
.sap-chips { margin-top: var(--s-6); }
.sap-alt { display: grid; gap: var(--s-3); justify-items: start; max-width: var(--measure); }
.sap-alt p { color: var(--text-2); }

/* C-4: Fig. 02. B2B-only nodes and the inactive route are drawn in and out over 600 ms (S3). */
html:not([data-motion="reduce"]) #fig-02 [data-node] { transform-box: fill-box; transform-origin: center; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
/* B2C: the B2B-only steps stay as faint ghost slots on the line, so the drawing keeps its balance */
#fig-02 [data-node].sap-off { opacity: 0.4; pointer-events: none; }
#fig-02 [data-node].sap-off use { stroke: var(--ink-rule); stroke-dasharray: 3 3; fill: var(--fig-node-fill); --dot-fill: var(--ink-rule); }
#fig-02 [data-node].sap-off text { fill: var(--text-3); }
#fig-02 [data-route].sap-off { opacity: 0; }
html.js:not([data-motion="reduce"]) #fig-02:not(.is-static) [data-route] { transition: stroke-dashoffset var(--dur-xl) var(--ease-mech) calc(var(--seq, 0) * 160ms), opacity 600ms var(--ease-out), stroke var(--dur-m) var(--ease-out); }
html.js:not([data-motion="reduce"]) #fig-02:not(.is-static):is(.is-live, .is-paused) [data-route] { transition: stroke-dashoffset 600ms var(--ease-mech), opacity 600ms var(--ease-out), stroke var(--dur-m) var(--ease-out); }
html.js:not([data-motion="reduce"]) #fig-02:not(.is-static) [data-route].sap-off { stroke-dashoffset: var(--dash-len); }
#fig-02 [data-node] .node-check { transition: stroke-dashoffset var(--dur-s) var(--ease-mech); }

/* reduced motion: the same states, instantly */
html[data-motion="reduce"] #fig-02 :is([data-node], [data-route]) { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  :root #fig-02 :is([data-node], [data-route]) { transition: none; transform: none; }
}

/* C-1: the aside's plate lines up with the crumbs; the path sits centred in the aside */
@media (min-width: 1024px) {
  .hero-int:has(> .sap-hero-aside) { align-items: start; }
  .sap-hero-aside { padding-top: 0.2rem; }
  .sap-hero-aside .fig { max-width: 26rem; margin-inline: auto; }
}