/* Platform home page. Shared tokens, chrome and components live in styles.css. */

/* ---- Tři produkty: two bases feeding the one that works ---------------------------------- */
/* The whole section (heading, diagram, columns) fits one desktop viewport under the header. */
.platform-section{padding-top:56px;padding-bottom:72px}
/* --pa-cols and --pa-gap drive both the leaf stage and the columns, so a leaf cannot drift off its column. */
.platform-map{margin-top:26px;--pa-cols:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);--pa-gap:40px;--pa-thread:#17192338;--pa-shadow:#1223611f}
.platform-stage{position:relative;display:grid;grid-template-columns:var(--pa-cols);grid-template-rows:100%;column-gap:var(--pa-gap);height:34vh;height:clamp(230px,34svh,400px)}
.pa-leafbox{position:relative;z-index:1;display:block;justify-self:center;height:100%;width:auto;overflow:visible}
.pa-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.platform-art{display:block;width:100%;height:auto;overflow:visible}
.platform-art-tall{display:none}

/* Judikatura: light, editorial paper. */
.pa-paper{fill:#fdfcf9}
.pa-paper-back{fill:#eeede7;stroke:#1719233d;stroke-width:.8;vector-effect:non-scaling-stroke}
.pa-paper-edge{fill:none;stroke:#17192366;stroke-width:1;vector-effect:non-scaling-stroke}
.pa-margin{fill:none;stroke:var(--blue);stroke-width:1;vector-effect:non-scaling-stroke}
.pa-heading{fill:none;stroke:#171923;stroke-width:3.2;stroke-linecap:butt}
.pa-rule{fill:none;stroke:#17192340;stroke-width:1;vector-effect:non-scaling-stroke}
.pa-found{fill:var(--acid)}
.pa-rule-found{stroke:#171923}

/* Kontext: night, tiles of meaning, a lens. */
.pa-night{fill:#141722}
.pa-night-back{fill:#0f121b;stroke:#39425780;stroke-width:.8;vector-effect:non-scaling-stroke}
.pa-night-edge{fill:none;stroke:#4c5c7d;stroke-width:1;vector-effect:non-scaling-stroke}
.pa-tile{fill:#8ea0f5}
.pa-lens{fill:none;stroke:#aeb8d8;stroke-width:1;vector-effect:non-scaling-stroke}
.pa-link{fill:none;stroke:var(--acid);stroke-width:1;vector-effect:non-scaling-stroke}
.pa-node{fill:var(--acid)}

/* Workspace: cobalt, the real board mapped to cobalt, the running workflow marked. */
.pa-cobalt{fill:var(--blue)}
.pa-running{fill:none;stroke:var(--acid);stroke-width:1.6;vector-effect:non-scaling-stroke}
.pa-ws-edge{fill:none;stroke:#2440c8;stroke-width:1;vector-effect:non-scaling-stroke}

/* The hairlines from both bases into Workspace. */
.pa-thread{fill:none;stroke:var(--pa-thread);stroke-width:1;vector-effect:non-scaling-stroke}
.pa-thread-cobalt{stroke:var(--blue-ink);stroke-width:1.2}
.pa-pulse{fill:none;stroke:var(--blue-ink);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:5 95;stroke-dashoffset:100;vector-effect:non-scaling-stroke;animation:pa-feed 3.6s linear infinite}
.pa-threads-k .pa-pulse{animation-delay:-1.8s}
.platform-map:not(.is-live) .pa-pulse{animation-play-state:paused}
@keyframes pa-feed{to{stroke-dashoffset:0}}
html[data-motion=paused] .pa-pulse{display:none}
@media(prefers-reduced-motion:reduce){.pa-pulse{display:none}}

.pa-leaf{filter:drop-shadow(14px 24px 18px var(--pa-shadow));transition:transform .45s var(--ease)}
.pa-leaf{cursor:pointer}
.platform-map[data-active=judikatura] .pa-j,.platform-map[data-active=kontext] .pa-k,.platform-map[data-active=workspace] .pa-w{transform:translateY(-8px)}

/* The three products, in the order of the diagram; Workspace, the larger leaf, gets the wider column. */
.platform-products{display:grid;grid-template-columns:var(--pa-cols);gap:var(--pa-gap);margin-top:26px}
.platform-product{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid var(--line);padding-top:18px;transition:border-color .3s}
.platform-map[data-active=judikatura] [data-product=judikatura],.platform-map[data-active=kontext] [data-product=kontext],.platform-map[data-active=workspace] [data-product=workspace]{border-color:var(--ink)}
.platform-product h3{font-size:34px;line-height:1.08;letter-spacing:-.035em;margin-top:0}
.platform-role{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:21px;line-height:1.25;letter-spacing:-.02em;margin-top:4px}
.platform-product>p:not(.platform-role){font-size:15px;line-height:1.7;font-weight:350;color:var(--muted);margin-top:12px;margin-bottom:16px;max-width:460px}
/* Spacing sits on the paragraph so the link's focus ring never covers the text above it. */
.platform-product .text-link{margin-top:auto;font-size:13px}

html[data-theme=dark] .platform-map{--pa-thread:#ffffff30;--pa-shadow:#0000004d}
html[data-theme=dark] .pa-paper{fill:#f1f0ea}
html[data-theme=dark] .pa-paper-back{fill:#cfcec6}
html[data-theme=dark] .pa-night{fill:#232a3c}
html[data-theme=dark] .pa-night-back{fill:#1c2231;stroke:#56648a}
html[data-theme=dark] .pa-night-edge{stroke:#7887ad}

/* Short desktop viewports (laptops at 720–800 px): a lower diagram and a tighter rhythm. */
@media(min-width:960px) and (max-height:800px){
  .platform-section{padding-top:44px}
  .platform-map{margin-top:20px}
  .platform-stage{height:clamp(200px,30svh,400px)}
  .platform-products{margin-top:20px}
  .platform-product{padding-top:14px}
  .platform-product>p:not(.platform-role){margin-top:8px;margin-bottom:12px}
}
@media(max-width:1279px){
  .platform-map{--pa-gap:32px}
  .platform-product h3{font-size:31px}
  .platform-role{font-size:19px}
  .platform-product>p:not(.platform-role){font-size:14px}
}
@media(max-width:959px){
  .platform-section{padding-top:64px;padding-bottom:64px}
  .platform-map{--pa-cols:repeat(3,minmax(0,1fr));--pa-gap:26px}
  /* Height follows the width so Workspace, the widest leaf, stays inside its column. */
  .platform-stage{height:31vw}
  .platform-product h3{font-size:29px}
}
@media(max-width:719px){
  .platform-section{padding-top:56px;padding-bottom:56px}
  .platform-map{margin-top:22px}
  .platform-stage{display:none}
  .platform-art-tall{display:block;max-width:340px;margin:0 auto}
  .platform-products{grid-template-columns:1fr;gap:0;margin-top:20px}
  .platform-product{padding-bottom:26px}
  .platform-product .text-link{margin-top:0}
  /* The phone diagram shows both bases first, Workspace below them. */
  .platform-product[data-product=kontext]{order:1}
  .platform-product[data-product=workspace]{order:2}
}