/* Solution-page example scenarios: site schematic + numbered steps, then DERAS and the hardware involved.
   Loaded only on pages whose content carries .case-study (functions.php). User direction, 29 September 2026. */

/* ---- scenario ---- */
.case-study.strategy-section{padding-block:72px 56px}
.case-head{max-width:760px}
.case-chip{display:inline-block;margin:0 0 14px;padding:4px 10px;border-radius:4px;background:#f3e4e5;color:var(--wine);font-size:12px;font-weight:600;letter-spacing:.02em}
.case-head h2{margin:0 0 14px}
.case-head .case-intro{margin:0;font-size:17px;line-height:1.7;color:#465157;max-width:62ch}
.case-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:start;margin-top:40px}
.case-figure{margin:0;padding:14px;border-radius:6px;background:var(--scene)}
.case-svg{display:block;width:100%;height:auto}
.case-motion-toggle{display:block;margin:8px 0 0 auto;padding:7px 11px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font:600 13px/1.3 Inter,system-ui,sans-serif;cursor:pointer}
.case-motion-toggle:hover{border-color:var(--wine);color:var(--wine)}
.case-motion-toggle:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.case-motion-toggle[hidden]{display:none}
.case-figure.has-case-motion.is-paused .sx-walker,.case-figure.has-case-motion.is-paused .sx-zone,.case-figure.has-case-motion.is-paused .sx-zone-arc,.case-figure.has-case-motion.is-paused .sx-net,.case-figure.has-case-motion.is-paused .sx-alert{animation-play-state:paused}
.case-steps-title{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.case-steps ol{margin:0;padding:0;list-style:none}
.case-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.case-steps li:first-child{border-top:0}
.case-step-no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--wine);color:#fff;font-size:13px;font-weight:700;line-height:1}
.case-steps h3{margin:2px 0 6px;font-size:17px;line-height:1.35;letter-spacing:-.01em}
.case-steps p{margin:0;font-size:15px;line-height:1.65;color:#465157}

/* ---- hardware first; technical example on demand ---- */
.case-study-lower.strategy-section{padding-block:0 72px}
.case-lower{display:grid;gap:30px}
.case-deras{border-radius:10px;background:var(--ink);color:#d9dcd8;overflow:hidden}
.case-deras summary{position:relative;cursor:pointer;list-style:none;padding:23px 60px 23px 28px;color:#fff;font-size:17px;font-weight:600;line-height:1.4}
.case-deras summary::-webkit-details-marker{display:none}
.case-deras summary::after{content:'';position:absolute;right:30px;top:calc(50% - 5px);width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.case-deras[open] summary{border-bottom:1px solid #ffffff30}
.case-deras[open] summary::after{transform:rotate(225deg);top:calc(50% - 1px)}
.case-deras summary:focus-visible{outline:3px solid #e8a9b0;outline-offset:-5px}
.case-deras-content{padding:24px 28px 28px}
.case-qualification{max-width:65ch;margin:0 0 20px;color:#d9dcd8;font-size:14px;line-height:1.6}
.case-deras-logo{display:block;width:112px;height:auto;margin-bottom:18px}
.case-deras h3{margin:0 0 12px;color:#fff;font-size:18px;letter-spacing:-.01em}
.case-deras-list{margin:0 0 22px;padding:0;list-style:none}
.case-deras-list li{position:relative;padding:7px 0 7px 18px;font-size:15px;line-height:1.55}
.case-deras-list li:before{content:'';position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:#e8a9b0}
.case-console-title{margin:0 0 8px;font-size:12px;font-weight:600;color:#9aa19c}
.case-console{margin:0;padding:12px 14px;list-style:none;border-radius:4px;background:#0f1518;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6}
.case-console li{display:grid;gap:1px;padding:7px 0}
.case-console li+li{border-top:1px solid #ffffff12}
.case-delivery{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:#b9beba}
.case-event{color:#e8a9b0;font:inherit;overflow-wrap:anywhere}
.case-data{color:#c4c9c5;font:inherit;overflow-wrap:anywhere}
.case-hardware h3{margin:6px 0 16px;font-size:18px;letter-spacing:-.01em}
.case-hw-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.case-hw{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;height:100%;padding:14px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
a.case-hw:hover{border-color:var(--wine);transform:translateY(-2px);box-shadow:0 10px 24px #12191e14}
.case-hw-media{display:grid;place-items:center;width:72px;height:72px;border-radius:4px;background:#f3f2ee;overflow:hidden}
.case-hw-media img{width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply}
.case-hw-media svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.case-hw-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.case-hw-text b{font-size:15px;line-height:1.3}
.case-hw-text>span{font-size:13.5px;line-height:1.45;color:var(--muted)}
.case-hw-text .case-hw-more{margin-top:4px;font-size:13px;font-weight:600;color:var(--wine)}
.case-hw-more:not(.is-muted):after{content:' →';transition:margin .2s}
a.case-hw:hover .case-hw-more:after{margin-left:3px}
.case-hw-text .case-hw-more.is-muted{color:var(--muted);font-weight:500}
.case-note{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ---- schematic drawing ---- */
.case-svg text{font-family:Inter,system-ui,sans-serif}
.sx-floor{fill:#f6f5f1}
.sx-wall{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.sx-rack,.sx-desk{fill:#fff;stroke:#a5aaa6;stroke-width:1.2}
.sx-tag,.sx-antenna,.sx-lock{fill:var(--wine)}
.sx-printer,.sx-reader,.sx-nvr,.sx-terminal,.sx-camera rect{fill:var(--ink)}
.sx-lens{fill:#e8a9b0}
.sx-truck{fill:#fff;stroke:#a5aaa6;stroke-width:1.2;stroke-dasharray:4 4}
.sx-pallet{fill:#cdb994;stroke:#8a7650;stroke-width:1.2}
.sx-person circle,.sx-person path{fill:#6b7378}
.sx-staff circle,.sx-staff path{fill:var(--ink)}
.sx-route{fill:none;stroke:var(--wine);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 7;opacity:.55}
.sx-cable{fill:none;stroke:#a5aaa6;stroke-width:1.2}
.sx-net{fill:none;stroke:#6b7378;stroke-width:1.5;stroke-dasharray:5 5}
.sx-api,.sx-alert{fill:none;stroke:var(--wine);stroke-width:2;marker-end:url(#sx-arrow)}
.sx-alert{stroke-dasharray:6 5}
.sx-floorline{fill:none;stroke:#d5d4cd;stroke-width:1.5;stroke-dasharray:6 6}
.sx-door{fill:none;stroke:#a5aaa6;stroke-width:1.2;stroke-dasharray:3 3}
.sx-door-leaf{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.sx-zone-arc,.sx-cone{fill:var(--wine);opacity:.1}
.sx-cone{stroke:var(--wine);stroke-opacity:.35}
.sx-zone{fill:var(--wine);opacity:.14}
.sx-dot{fill:var(--wine);stroke:#fff;stroke-width:2}
.sx-deras{fill:var(--ink)}
.sx-deras-title{fill:#fff;font-size:18px;font-weight:700;letter-spacing:.1em}
.sx-deras-sub{fill:#b9beba;font-size:12.5px}
.sx-system{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.sx-system-title{fill:var(--ink);font-size:15px;font-weight:600}
.sx-system-sub{fill:var(--muted);font-size:12.5px}
.sx-marker circle{fill:var(--wine);stroke:#fff;stroke-width:2.5}
.sx-marker text{fill:#fff;font-size:14px;font-weight:700}
.sx-label{fill:#465157;font-size:14px}
.sx-small{fill:var(--muted);font-size:12.5px}
.sx-muted{fill:#8a8f8b;font-size:13px;font-weight:600}

/* Motion: the item or person travels its route; read zones breathe; data lines flow. */
.sx-walker{offset-rotate:0deg;offset-distance:40%}
.case-figure.has-case-motion .sx-walker{animation:sx-walk 9s cubic-bezier(.45,0,.55,1) infinite}
.case-figure.has-case-motion .sx-walker-slow{animation-duration:6s}
.case-figure.has-case-motion .sx-zone,.case-figure.has-case-motion .sx-zone-arc{animation:sx-pulse 2.4s ease-in-out infinite}
.case-figure.has-case-motion .sx-net{animation:sx-flow 1.2s linear infinite}
.case-figure.has-case-motion .sx-alert{animation:sx-flow .9s linear infinite}
@keyframes sx-walk{0%{offset-distance:0%}85%,100%{offset-distance:100%}}
@keyframes sx-pulse{50%{opacity:.22}}
@keyframes sx-flow{to{stroke-dashoffset:-20}}
@media(prefers-reduced-motion:reduce){.case-figure.has-case-motion .sx-walker,.case-figure.has-case-motion .sx-zone,.case-figure.has-case-motion .sx-zone-arc,.case-figure.has-case-motion .sx-net,.case-figure.has-case-motion .sx-alert{animation:none}}

/* ---- responsive ---- */
@media(max-width:1000px){.case-grid{grid-template-columns:1fr;gap:32px}.case-figure{max-width:680px}.case-hw-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .case-study.strategy-section{padding-block:44px 36px}.case-study-lower.strategy-section{padding-bottom:44px}
 .case-head .case-intro{font-size:16px}
 .case-figure{margin-inline:-12px;padding:8px}
 .case-svg .sx-small{font-size:17px}.case-svg .sx-muted{font-size:17px}
 .case-svg .sx-system-title{font-size:19px}.case-svg .sx-system-sub,.case-svg .sx-deras-sub{font-size:16px}
 .sx-marker circle{r:18px}.sx-marker text{font-size:18px;transform:translateY(1.5px)}
 .case-deras summary{padding:20px 54px 20px 22px}
 .case-deras summary::after{right:24px}
 .case-deras-content{padding:20px 22px 22px}
 .case-hw-list{grid-template-columns:1fr}
}
@media print{.sx-walker,.sx-zone,.sx-zone-arc,.sx-net,.sx-alert{animation:none}.case-hw{break-inside:avoid}}