/* exercises.css — the catalogue page class.
   Self-contained and ROOT-ABSOLUTE on purpose: docs.css reaches its font and logo with ../,
   which is correct from /docs/ and wrong from /cwiczenia/<slug>/ two levels down.
   Same tokens, same AA-verified pairings as docs.css. Shipped content-addressed. */

@font-face{
  font-family:'Space Grotesk';
  font-style:normal;font-weight:300 700;font-display:optional;
  src:url('/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;font-weight:300 700;font-display:optional;
  src:url('/fonts/space-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  color-scheme:dark;
  --bg:#0C0E12; --bg-2:#141820; --ink:#F3F1EC; --text:#C9CED8; --mute:#9AA3B2;
  --line:#242A34; --line-2:#2A3140; --line-hi:#3A4250;
  --brand:#F04A25; --brand-ink:#1A0A06; --ok:#3ADE9E;
  --hover:rgba(255,255,255,.03);
  --logo:url('/img/logo.png');
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.1rem,4vw,2rem);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --bg:#FBFAF8; --bg-2:#F2F1ED; --ink:#14171D; --text:#2E3440; --mute:#5C6472;
    --line:#E0DFDA; --line-2:#D8D6D0; --line-hi:#BFBCB4;
    --brand:#C2381A; --brand-ink:#FFFFFF; --ok:#0E7A54;
    --hover:rgba(0,0,0,.03);
    --logo:url('/img/logo-light.png');
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#FBFAF8; --bg-2:#F2F1ED; --ink:#14171D; --text:#2E3440; --mute:#5C6472;
  --line:#E0DFDA; --line-2:#D8D6D0; --line-hi:#BFBCB4;
  --brand:#C2381A; --brand-ink:#FFFFFF; --ok:#0E7A54;
  --hover:rgba(0,0,0,.03);
  --logo:url('/img/logo-light.png');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(1.75rem,3.6vw,2.6rem);margin:.35rem 0 0}
h2{font-size:1.3rem;margin:0 0 .8rem}
p,li{color:var(--text)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

header{
  position:sticky;top:0;z-index:20;height:64px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav{max-width:1120px;margin:0 auto;padding:0 var(--pad);height:64px;display:flex;align-items:center;gap:1.2rem}
.mark{display:inline-flex;align-items:center;text-decoration:none}
.mark .logo{display:block;width:188px;height:20px;background:var(--logo) left center/contain no-repeat}
@media (max-width:479px){.mark .logo{width:169px;height:18px}}
.nav nav{margin-left:auto;display:flex;gap:1.1rem;align-items:center}
.nav nav a{color:var(--mute);text-decoration:none;font-size:.92rem}
.nav nav a:hover{color:var(--ink)}
/* At 375px the Polish chrome wants 169px of logo plus three links and their gaps: 429px of
   content in 345px of room, so the last link ended up off-screen and unreachable. Measured.
   The docs link gives way and is repeated in the footer, which wraps. */
@media (max-width:600px){.nav nav a.nav-docs{display:none}}
/* The coach sign-up button (aironcoach#599), the same ?as=coach link as the page's own button.
   At 390px the Polish header was 169px of logo, "Ćwiczenia", "Zaloguj" and their gaps; adding a
   "Załóż konto trenera" button there overflows the 355px of room. So below 480px the index link gives way
   (the breadcrumb under the header carries it), the logo takes the landing's phone width and the
   button its short label. aria-label keeps the full label for a screen reader. Measured in a
   headless browser at 360 and 390px, not guessed. */
.nav nav a.nav-cta{background:var(--brand);color:var(--brand-ink);font-weight:600;border-radius:999px;padding:.38rem .95rem;white-space:nowrap}
.nav nav a.nav-cta:hover{color:var(--brand-ink);filter:brightness(1.07)}
.nav-cta .short{display:none}
@media (max-width:479px){
  .nav{gap:.6rem}.mark .logo{width:130px;height:14px}
  .nav nav{gap:.8rem}.nav nav a.nav-index{display:none}
  .nav nav a.nav-cta{padding:.38rem .8rem}.nav-cta .long{display:none}.nav-cta .short{display:inline}
}

main{max-width:1120px;margin:0 auto;padding:1.7rem var(--pad) 4.5rem}
.crumb{font-size:.85rem;color:var(--mute);margin:0;line-height:1.5}
.crumb a{color:var(--mute);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.intro{color:var(--mute);font-size:1.02rem;margin:.65rem 0 0;max-width:62ch}

/* ---------- the demo ----------
   THE PLATE IS WHITE IN BOTH THEMES, ON PURPOSE. GymVisual draws light-grey figures with red
   highlights on white, and the MP4s carry an opaque white background. On a dark plate a video
   was a bright rectangle dropped into a dark page. White is the background this artwork was
   drawn for, so the plate is a lightbox and the page keeps its dark chrome around it.

   THE WORDMARK IS BEHIND THE MEDIA, not on top of it. `mix-blend-mode:multiply` makes a
   frame's white pixels transparent against the plate, so the mark underneath shows THROUGH the
   video and through the transparent illustrations alike. `isolation:isolate` keeps that blend
   inside the plate instead of reaching the page background. */
.hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.5rem;align-items:start;margin-top:1.5rem}
.shot{margin:0;min-width:0}
.plate{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line-2);border-radius:18px;background:#fff;
}
.plate::before{
  content:"";position:absolute;inset:14% 8%;z-index:0;
  background:url('/img/logo-light.png') center/contain no-repeat;
  opacity:.11;
}
.plate .frame{position:relative;z-index:1;display:block;width:100%;height:auto;mix-blend-mode:multiply}
.shot figcaption{color:var(--mute);font-size:.78rem;margin:.55rem 0 0}

.side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin:0;padding:0;list-style:none}
.facts li{border:1px solid var(--line);border-radius:12px;padding:.55rem .75rem;background:var(--bg-2);margin:0;min-width:0}
.facts b{display:block;color:var(--mute);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.facts span{color:var(--ink);font-size:.93rem;overflow-wrap:anywhere}
.muscle-list{margin:0;border-top:1px solid var(--line);padding-top:.9rem}
.muscle-list dt{color:var(--mute);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-top:.7rem}
.muscle-list dt:first-child{margin-top:0}
.muscle-list dd{margin:.2rem 0 0;color:var(--ink);font-size:.95rem}

.cta{
  display:block;text-align:center;background:var(--brand);color:var(--brand-ink);
  text-decoration:none;font-weight:600;border-radius:999px;padding:.72rem 1.3rem;
}
.cta:hover{filter:brightness(1.07)}
.cta-note{margin:-.55rem 0 0;color:var(--mute);font-size:.82rem;text-align:center}
.grid+p+.cta-note{margin:.5rem 0 0;text-align:left}
/* "For coaches" band: one line of coach pitch beside the CTA and above a hub's long list. */
.band{margin:0;padding:.65rem .85rem;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:10px;background:var(--bg-2);color:var(--text);font-size:.88rem;line-height:1.45}
.band a{font-weight:600}
.intro+.band{margin-top:1rem;max-width:62ch}
.band+.grid{margin-top:1.4rem}

/* ---------- steps beside the muscle map ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.5rem 2rem;align-items:start;margin-top:2.6rem}
.steps h2,.map h2,.more h2{font-size:1.15rem;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.steps ol{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding:.1rem 0 1rem 2.4rem;
  border-left:1px solid var(--line);margin-left:.8rem;
}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{
  content:counter(s);position:absolute;left:-.85rem;top:0;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--bg-2);border:1px solid var(--line-hi);color:var(--mute);
  font-size:.78rem;font-weight:600;display:grid;place-items:center;
}
.map img{border:1px solid var(--line-2);border-radius:16px;background:var(--bg-2);width:100%}
@media (min-width:861px){.map{position:sticky;top:5rem}}

/* ---------- related ---------- */
.more{margin-top:2.8rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.65rem;padding:0;margin:0;list-style:none}
.grid li{margin:0;min-width:0}
.grid a{
  display:block;border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;
  background:var(--bg-2);color:var(--ink);text-decoration:none;font-size:.94rem;line-height:1.35;
  transition:border-color .15s,background .15s;
}
.grid a:hover{border-color:var(--line-hi);background:var(--hover)}
.grid a small{display:block;color:var(--mute);font-size:.76rem;margin-top:.2rem}
.more .cta,.grid+p .cta{display:inline-block;margin-top:1.6rem}
/* Previous / next in the hub order (aironcoach#599). */
.pager{display:flex;justify-content:space-between;gap:.65rem;margin-top:1.4rem}
.pager a{flex:0 1 auto;min-width:0;max-width:48%;border:1px solid var(--line);border-radius:12px;padding:.6rem .9rem;background:var(--bg-2);color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.35}
.pager a:hover{border-color:var(--line-hi);background:var(--hover)}
.pager a[rel=next]{margin-left:auto;text-align:right}

@media (max-width:860px){
  .hero,.detail{grid-template-columns:minmax(0,1fr)}
  .detail{margin-top:2.2rem;gap:2rem}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:3.5rem}
.foot{max-width:1120px;margin:0 auto;padding:1.6rem var(--pad) 2.6rem;display:flex;flex-direction:column;gap:.9rem}
.foot nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.foot a{color:var(--mute);text-decoration:none;font-size:.9rem}
.foot a:hover{color:var(--ink)}
.foot .langs a{font-size:.84rem}
.foot .credit{color:var(--mute);font-size:.78rem;margin:0}