/* ==========================================================================
   TRIAS Performance Center
   Palette taken from the gym itself: charcoal walls, black rubber floor,
   the painted gold crown, the bronze logo mark — and the green turf strip
   along the far wall, which is where the fresh accent comes from.
   The paper is deliberately kept light and slightly cool so the gold reads
   as warm against it; dark bands are used sparingly, for rhythm only.
   ========================================================================== */

:root{
  --char:#2F3437;         /* charcoal wall                                   */
  --ink:#151718;          /* near-black                                      */
  /* The three light grounds have to be TELLABLE APART at arm's length. The
     first lightening pass put them within ~2% luminance of each other, so the
     section boundaries read as rendering seams and the whole page as one
     grey-green wash. Canvas is now a clean near-white with no green cast, and
     the two tinted bands step away from it — and from each other. */
  --canvas:#FAFAF7;       /* clean paper, no cast                            */
  --ash:#D3DCCA;          /* soft edge                                       */
  --ash-soft:#E9EFE0;     /* alternating band — the turf green, stated       */
  --fresh-soft:#DCE7D2;   /* community band — same family, one step deeper   */
  --bronze:#BA9368;       /* official logo mark — dark backgrounds only      */
  --bronze-ink:#7A5B39;   /* same hue, darkened for text on light surfaces
                             (#BA9368 is only 2.47:1 on the canvas)          */
  --gold:#E9B426;         /* painted wall crown                              */
  --text:#1F2422;
  --muted:#4C5451;        /* was #59615E — read as thin blue-grey on the paper */
  --muted-dark:#B0B6BA;
  --line:rgba(31,36,34,.13);
  --line-dark:rgba(255,255,255,.14);

  --shell:min(1240px,100% - 2.5rem);
  /* was clamp(4rem,8vw,7.5rem) = ~240px between every pair of sections, which
     on a page this long reads as holes rather than breathing room */
  --gut:clamp(3.4rem,6vw,5.75rem);

  --disp:"Barlow Condensed",Impact,sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --r:10px;
  --r-sm:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--body);font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--disp);font-weight:700;line-height:.95;
  letter-spacing:.005em;margin:0;text-wrap:balance;
  /* Barlow Condensed draws ď/ľ/ť with the caron on the letter's right shoulder,
     and its default word gap is tight enough that at display size "Príď
     trénovať" closes up into "Prídˇtrénovať". Slovak needs the extra air. */
  word-spacing:.07em;
}
h1{font-size:clamp(3rem,1.6rem + 6.2vw,6.5rem)}
h2{font-size:clamp(2.3rem,1.35rem + 3.9vw,4.25rem)}
h3{font-size:clamp(1.45rem,1.2rem + 1.05vw,2rem)}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.shell{width:var(--shell);margin-inline:auto}
.sec{padding-block:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- keyboard focus ------------------------------------------------------ */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.eight :focus-visible,.auth :focus-visible,
.comm :focus-visible,.cta :focus-visible,.ft :focus-visible,
.hdr :focus-visible,.phead :focus-visible{outline-color:var(--gold)}

/* --- skip link ------------------------------------------------------------ */
.skip{
  position:absolute;left:.75rem;top:-100px;z-index:200;
  background:var(--gold);color:var(--ink);
  font-family:var(--disp);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.7rem 1.2rem;border-radius:var(--r);text-decoration:none;
  transition:top .2s var(--ease);
}
.skip:focus{top:.75rem}

/* --- eyebrow: small caps label with a crown-angle tick ------------------- */
.eyebrow{
  font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bronze-ink);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";width:26px;height:8px;flex:none;background:var(--gold);
  clip-path:polygon(0 100%,18% 0,36% 100%,50% 18%,64% 100%,82% 0,100% 100%);
}
.on-dark .eyebrow,.dark .eyebrow{color:var(--gold)}

.lead{font-size:clamp(1.08rem,1.01rem + .34vw,1.3rem);color:var(--muted);max-width:60ch}
.dark .lead,.on-dark .lead{color:var(--muted-dark)}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--disp);font-weight:700;font-size:1.12rem;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:.95rem 1.9rem;border:1.5px solid transparent;border-radius:var(--r);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#F4C441}
.btn--ghost{border-color:currentColor;color:var(--text)}
.btn--ghost:hover{background:var(--text);color:var(--canvas)}
.on-dark .btn--ghost,.dark .btn--ghost,
.hero .btn--ghost,.cta .btn--ghost,.phead .btn--ghost{color:#fff}
.on-dark .btn--ghost:hover,.dark .btn--ghost:hover,
.hero .btn--ghost:hover,.cta .btn--ghost:hover,.phead .btn--ghost:hover{background:#fff;color:var(--ink)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{
  position:sticky;top:0;z-index:60;background:var(--ink);
  border-bottom:1px solid var(--line-dark);
}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:76px}
.hdr__logo{display:flex;align-items:center;flex:none;text-decoration:none}
.hdr__logo img{width:132px}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(1.1rem,2.1vw,2.1rem)}
.nav a{
  font-family:var(--disp);font-weight:600;font-size:1.08rem;letter-spacing:.1em;
  text-transform:uppercase;color:#EDEAE3;text-decoration:none;padding:.35rem 0;
  position:relative;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--gold)}
/* `.nav a` (0,1,1) outranks `.btn--gold` (0,1,0) — restate the button colours
   at matching specificity or the CTA renders near-white on gold. */
.nav a.btn--gold{color:var(--ink)}
.nav a.btn--gold:hover{color:var(--ink)}
.nav a.btn--ghost{color:#fff}
.nav a.btn::after{display:none}
.hdr .btn{padding:.72rem 1.35rem;font-size:1rem}
/* Compact booking button that lives in the BAR, not in the burger panel. The
   pages run to ~13 500px on a phone; without this there is no bookable action
   on screen between the hero and the closing CTA. */
.hdr__cta{display:none}
.burger{
  display:none;margin-left:auto;width:46px;height:46px;flex:none;
  background:none;border:1px solid var(--line-dark);border-radius:var(--r);
  cursor:pointer;padding:0;position:relative;
}
.burger span{
  position:absolute;left:12px;right:12px;height:2px;background:#fff;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   HERO — editorial split: charcoal copy panel + real crown-wall photo
   ========================================================================== */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}
.hero__copy{padding:clamp(3.5rem,6vw,6.5rem) clamp(1.25rem,4vw,4.5rem) clamp(3.5rem,6vw,6rem) 0}
.hero__copy .eyebrow{color:var(--gold)}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero__sub{
  font-size:clamp(1.08rem,1rem + .4vw,1.32rem);color:#C9CDD0;
  max-width:36ch;margin:1.6rem 0 2.3rem;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem}
/* the entry price used to be a button label; it is a fact, not an action, and
   the CTA row now carries only the two verbs the whole site uses */
.hero__note{margin:1rem 0 0;font-size:.95rem;color:#A4AAAF}
.hero__note b{color:#fff;font-weight:600}
.hero__proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line-dark);
  font-size:.94rem;color:#A4AAAF;
}
.hero__proof b{color:#fff;font-weight:700}
.hero__proof .star{color:var(--gold)}
.hero__proof span{display:inline-flex;align-items:center;gap:.4rem}
/* Generate the separators instead of marking them up: a literal `·` element is
   a flex item, so it wraps on its own and strands a dot at the end of a line.
   Attach it to the item BEFORE the break, not after: as a ::before it survived
   the wrap and opened the second line with what looked like a bullet. Trailing
   a line is what a separator is supposed to do. */
.hero__proof span:not(:last-child)::after{content:"·";margin-left:.85rem;color:#6B7175}
/* Bleed the photo to the right edge. Contained at the 1240px shell it leaves a
   ~340px black gutter on a 1920 monitor that reads as a failed image load.

   ⚠ `margin-right:calc(50% - 50vw)` sem NEPATRÍ, hoci je to bežný trik na
   full-bleed. Ten počíta s tým, že prvok je v kontajneri vycentrovanom na
   obrazovku — lenže tu je v pravom stĺpci mriežky, ktorého stred leží vpravo
   od stredu okna. Percentá sa tak rátali z bunky a fotka vychádzala o ~316 px
   ŠIRŠIA než okno: jej pravá časť sa vykresľovala mimo obrazovky a chlap na
   pravom okraji bol orezaný v polovici.

   Správne je odsadiť presne o okraj shellu — (100vw − šírka shellu) / 2 —
   takže pravá hrana fotky sadne na pravú hranu okna na akejkoľvek šírke. */
.hero__media{position:relative;min-height:clamp(340px,52vh,620px);
             margin-right:calc(-1 * max(0px, (100vw - min(1240px, 100vw - 2.5rem)) / 2))}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 38%;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 0%,rgba(21,23,24,.55) 22%,rgba(21,23,24,0) 62%);
}

/* ==========================================================================
   THE EIGHT — one oversized numeral, used once, decisively
   ========================================================================== */
.eight{background:var(--char);color:#fff;overflow:hidden}
/* Narrower numeral column + a bigger glyph: at .82fr the 8 was neither big nor
   tight, it just floated in ~500px of empty charcoal. */
.eight__grid{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.eight__fig{position:relative;text-align:center;line-height:1}
.eight__num{
  font-family:var(--disp);font-weight:800;
  /* line-height:.74 let the glyph overflow its box and strike through the
     caption below it — most visible on the English Drop-In page. */
  font-size:clamp(11rem,29vw,25rem);line-height:.9;
  color:transparent;-webkit-text-stroke:3px var(--gold);
  display:block;letter-spacing:-.02em;
}
.eight__cap{
  display:block;font-family:var(--disp);font-weight:600;font-size:1rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:1.3rem;
}
.eight h2{color:#fff;margin-bottom:1.4rem}
.eight p{color:#C4C9CC;max-width:56ch}
.quote{
  margin:2rem 0 0;padding:1.4rem 0 1.4rem 1.6rem;
  border-left:2px solid var(--gold);
  font-size:clamp(1.05rem,.98rem + .35vw,1.22rem);color:#E6E3DC;font-style:italic;
}
.quote cite{
  display:block;margin-top:.7rem;font-style:normal;font-size:.9rem;
  letter-spacing:.12em;text-transform:uppercase;color:#CDA87F;
}

/* ==========================================================================
   THREE WAYS TO TRAIN
   ========================================================================== */
/* auto-fit so the row still balances now that Open Gym is gone and only two
   cards remain — do not hard-code the column count here */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
      gap:clamp(1.1rem,2vw,1.9rem)}
.way{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.way:hover{transform:translateY(-5px);box-shadow:0 22px 48px -26px rgba(20,22,24,.28)}
.way__img{aspect-ratio:4/3;overflow:hidden;background:var(--char)}
.way__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.way:hover .way__img img{transform:scale(1.045)}
.way__body{padding:1.6rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.way h3{margin-bottom:.6rem}
.way p{color:var(--muted);font-size:.98rem;margin-bottom:1.1rem}
.way__list{
  list-style:none;margin:0 0 1.3rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;
}
.way__list li{
  font-family:var(--disp);font-weight:600;font-size:.92rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.22rem .55rem;
}
/* The price is the card's payoff and it was rendering no larger than the body
   copy, while the tag chips above it shouted. */
.way__price{
  margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line);
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.7rem,1.45rem + 1vw,2.1rem);color:var(--text);
  display:flex;align-items:baseline;gap:.45rem;
}
.way__price small{font-family:var(--body);font-weight:600;font-size:.92rem;color:var(--bronze-ink)}

/* ==========================================================================
   SPACE — edge-to-edge image band, varied crops
   ========================================================================== */
.space{background:var(--ash-soft)}
.space__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(130px,15vw,200px);gap:clamp(.6rem,1.2vw,1rem);
}
.space__grid figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--char)}
.space__grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.space__grid figure:hover img{transform:scale(1.05)}
.space__grid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.space__grid figure:nth-child(2){grid-column:span 2}
.space__grid figure:nth-child(3),
.space__grid figure:nth-child(4){grid-column:span 1}
/* Was 14 bordered chips in the same visual language as the interactive tags two
   sections up — it read as a row of inactive filters. It is an inventory, so
   set it as one: a quiet multi-column list with a gold tick. */
.kit{
  columns:3;column-gap:clamp(1.4rem,3vw,3rem);
  margin-top:1.9rem;padding:0;list-style:none;
}
.kit li{
  break-inside:avoid;display:flex;align-items:baseline;gap:.55rem;
  font-size:.97rem;color:var(--muted);padding:.2rem 0;
}
.kit li::before{
  content:"";flex:none;width:9px;height:2px;background:var(--gold);
  transform:translateY(-.28em);
}

/* ==========================================================================
   AUTHORITY band (dark)
   ========================================================================== */
.auth{background:var(--ink);color:#fff}
.auth__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.auth__item{border-top:2px solid var(--gold);padding-top:1.4rem}
.auth__item h3{color:#fff;margin-bottom:.6rem}
.auth__item p{color:#B4B9BC;font-size:.99rem}

/* ==========================================================================
   COACHES
   ========================================================================== */
/* Five coaches, not four. A grid strands the odd trailing card against the left
   rail at every breakpoint where the count does not divide; flex-wrap plus
   justify-content centres that row instead. */
.coaches{--cg:clamp(1rem,1.8vw,1.6rem);
         display:flex;flex-wrap:wrap;justify-content:center;gap:var(--cg)}
/* `.coach` is a <figure>: without this it keeps the UA default `margin:1em 40px`
   and the whole roster renders inset 40px from the shell rail with 80px of
   phantom gutter between cards, unlike every other section on the page. */
.coach{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--char);
       flex:0 0 calc((100% - 4 * var(--cg)) / 5);min-width:0}
.coach img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
           transition:transform .7s var(--ease)}
.coach:hover img{transform:scale(1.04)}
.coach__cap{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem .95rem 1rem;
  background:linear-gradient(to top,rgba(15,17,18,.94) 24%,rgba(15,17,18,0));
  color:#fff;
}
.coach__cap strong{
  display:block;font-family:var(--disp);font-weight:700;font-size:1.16rem;
  letter-spacing:.01em;line-height:1.1;
}
/* The caption is anchored to the bottom, so a role that wraps to two lines
   pushes only that card's name up and the row loses its shared baseline.
   Reserve two lines everywhere instead. */
.coach__cap span{
  display:block;font-size:.85rem;color:var(--gold);margin-top:.2rem;
  letter-spacing:.05em;line-height:1.3;min-height:2.6em;
}
/* Was a bare left-ruled line of grey text under a grid that had visibly lost
   members — it read as an erratum. Give it the same surface as the cards. */
.coach-note{
  margin-top:1.8rem;font-size:1.02rem;color:var(--text);
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:1.05rem 1.4rem;
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing{background:var(--ash-soft)}
.price-note{
  max-width:62ch;font-size:clamp(1.02rem,.97rem + .28vw,1.18rem);
  color:var(--text);border-left:2px solid var(--gold);padding-left:1.2rem;margin-bottom:2.8rem;
}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.4rem);align-items:stretch}
.plan{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.7rem 1.5rem 1.8rem;position:relative;
}
/* 1px of gold against three identical white cards barely registered — the eye
   went to the gold button inside instead, so card and CTA competed. */
.plan--best{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold);background:#FFFCF3}
.plan__tag{
  position:absolute;top:-11px;left:1.4rem;background:var(--gold);color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:var(--r-sm);
}
.plan h3{font-size:1.3rem;margin-bottom:.35rem}
/* min-height must clear TWO wrapped lines (2 x 1.68 line-height), otherwise the
   one-line card lifts its price above the other three in the row */
.plan__for{font-size:.92rem;color:var(--muted);margin-bottom:1.2rem;min-height:3.4em}
/* `.plan__num` is a <p>, so it inherited `p{margin:0 0 1.1em}` — at 3.4rem that
   is ~60px of dead white between the price and its sub-line, in every card on
   every page. It read as a feature list someone had deleted. */
.plan__num{
  font-family:var(--disp);font-weight:800;font-size:clamp(2.5rem,2rem + 1.7vw,3.4rem);
  line-height:1;color:var(--text);display:flex;align-items:baseline;gap:.3rem;
  margin-bottom:.35rem;
}
.plan__num small{font-family:var(--body);font-weight:600;font-size:.9rem;color:var(--muted)}
.plan__sub{font-size:.92rem;color:var(--bronze-ink);font-weight:600;margin-top:.5rem;min-height:1.5em}
/* `margin-top:auto` pins the CTA to the card bottom so all four align even when
   a description or sub-line wraps. Don't re-declare margin-top after it. */
.plan .btn{width:100%;margin-top:auto}
.plan__sub{margin-bottom:1.5rem}
/* the min-heights above exist to align a ROW of cards; on the Drop-In page there
   is only one, and they just open a hole under the price */
.plans--single .plan__for,.plans--single .plan__sub{min-height:0}
.multisport{
  margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
  font-size:.98rem;color:var(--muted);
}
.chip{
  font-family:var(--disp);font-weight:700;font-size:.95rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);background:var(--gold);
  padding:.28rem .7rem;border-radius:var(--r-sm);
}

/* ==========================================================================
   COMMUNITY
   ========================================================================== */
/* Light band on purpose: this is the members' wall, and the photos carry it
   far better off a pale ground than off charcoal. */
.comm{background:var(--fresh-soft)}
.comm__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.3vw,1.1rem);margin-top:2.6rem}
.comm__grid figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:var(--ash)}
.comm__grid img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
                transition:transform .8s var(--ease)}
/* Six equal tiles of the same line-up in front of the same painted crown read
   as a contact sheet. One hero frame + five supporting ones reads as a wall. */
.comm__grid--mosaic{grid-auto-rows:clamp(150px,17.5vw,240px)}
.comm__grid--mosaic figure{aspect-ratio:auto}
.comm__grid--mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.comm__grid figure:hover img{transform:scale(1.045)}
.comm__rituals{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.6rem;margin-top:2.8rem;padding:0;list-style:none;
}
.comm__rituals li{border-top:2px solid var(--gold);padding-top:1rem}
.comm__rituals b{
  display:block;font-family:var(--disp);font-weight:700;font-size:1.2rem;
  color:var(--text);letter-spacing:.02em;margin-bottom:.15rem;
}
.comm__rituals span{font-size:.95rem;color:var(--muted)}

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem);counter-reset:s}
.step{
  counter-increment:s;position:relative;padding:3.9rem 1.5rem 1.6rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
}
.step::before{
  content:counter(s,decimal-leading-zero);position:absolute;top:1.4rem;left:1.5rem;
  font-family:var(--disp);font-weight:800;font-size:2.7rem;line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--gold);
}
.step h3{margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.99rem}

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
/* `.cta` was --ink and `.ft` is #0E1011 — indistinguishable, so every page ended
   in one undifferentiated black slab and the closing ask read as footer chrome.
   Charcoal + a gold rule makes it a band of its own. */
.cta{background:var(--char);color:#fff;text-align:center;border-top:2px solid var(--gold)}
.cta h2{color:#fff;margin-bottom:1.2rem}
.cta p{color:#B4B9BC;max-width:52ch;margin-inline:auto;margin-bottom:2.2rem}
.cta__btns{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

.ft{background:#0E1011;color:#A6ACB0;padding-block:clamp(3rem,5vw,4.5rem) 2rem;font-size:.95rem}
.ft__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem}
.ft .ft__h{
  font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 1rem;line-height:1.2;
}
.ft a{color:#A6ACB0;text-decoration:none;transition:color .2s}
.ft a:hover{color:var(--gold)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ft__logo{width:150px;margin-bottom:1.2rem}
.ft__legal{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.87rem;color:#8A9095;
}
.ft__hours b{color:#fff;font-weight:600}

/* ==========================================================================
   PAGE HEADERS (inner pages)
   ========================================================================== */
/* An inner page is a utility page — the homepage earns a tall hero, Kontakt
   does not. This block used to run ~270px of black before the first fact. */
.phead{background:var(--ink);color:#fff;padding-block:clamp(2rem,3.4vw,3rem)}
.phead h1{color:#fff;font-size:clamp(2.4rem,1.5rem + 3.6vw,4rem)}
.phead p{color:#B4B9BC;max-width:58ch;margin-top:1rem;font-size:1.05rem}
.crumb{
  font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;
}
.crumb a{text-decoration:none;color:#8B9195}
.crumb a:hover{color:var(--gold)}

/* --- class list (treningy) ---------------------------------------------- */
/* Five rows of text + small photo + hairline rule read as one undifferentiated
   list — the one stretch of the site that looked more conventional than the
   homepage. Each class is now a card: the photo bleeds to the card edge at ~44%
   of the width, the sides alternate, and the rules are gone. Five objects, not
   five paragraphs. */
.klass{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:stretch;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-bottom:clamp(1.1rem,2vw,1.7rem);
}
.klass:last-of-type{margin-bottom:0}
.klass:nth-of-type(even){grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.klass:nth-of-type(even) .klass__img{order:2}
/* 3:2, not 4:3 — at ~500px of card width a 4:3 photo sets the row height at
   409px and adds ~590px to the page for no extra information */
.klass__img{aspect-ratio:3/2;background:var(--char);overflow:hidden}
.klass__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.klass:hover .klass__img img{transform:scale(1.04)}
.klass__body{
  padding:clamp(1.5rem,2.6vw,2.6rem);
  display:flex;flex-direction:column;justify-content:center;
}
.klass__meta{
  display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem;padding:0;list-style:none;
}
.klass__meta li{
  font-family:var(--disp);font-weight:600;font-size:.92rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bronze-ink);background:var(--ash-soft);
  border-radius:var(--r-sm);padding:.22rem .6rem;
}
.klass h3{margin-bottom:.7rem}
.klass p{color:var(--muted);margin-bottom:0}

/* --- team page ----------------------------------------------------------- */
/* auto-fit keeps the roster on one balanced row whatever its length — a hard
   3-col grid leaves a stranded single card whenever the count isn't a multiple */
.team{--tg:clamp(1.2rem,2.4vw,1.8rem);
      display:flex;flex-wrap:wrap;justify-content:center;gap:var(--tg)}
.member{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
        border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
        flex:0 0 calc((100% - 4 * var(--tg)) / 5);min-width:0}
.member__img{aspect-ratio:4/5;overflow:hidden;background:var(--char)}
.member__img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.member__body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}
.member h3{font-size:1.45rem;margin-bottom:.15rem}
/* Reserve two lines: only one role wraps, and without this it alone pushes its
   bio 27px below the other three and breaks the row's shared baseline. */
.member__role{font-size:.9rem;color:var(--bronze-ink);font-weight:600;letter-spacing:.05em;
              text-transform:uppercase;margin-bottom:.9rem;line-height:1.35;min-height:2.7em}
.member p{font-size:.96rem;color:var(--muted);margin-bottom:1rem}
/* `margin:auto 0 0` pinned the chips to the card bottom, so the coach with the
   fewest certifications got an 85px hole above his divider. */
.member__certs{list-style:none;margin:.4rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line);
               display:flex;flex-wrap:wrap;gap:.35rem}
.member__certs li{
  font-family:var(--disp);font-weight:600;font-size:.86rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--ash-soft);
  border-radius:var(--r-sm);padding:.2rem .5rem;max-width:100%;overflow-wrap:anywhere;
}

/* --- founder feature ----------------------------------------------------- */
.founder{background:var(--ash-soft)}
.founder__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
                gap:clamp(1.8rem,4vw,4rem);align-items:center}
.founder__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--char)}
/* 18% framed the ceiling beams and the air-con unit and pushed the people onto
   the bottom edge. The group is in the lower half of this frame. */
.founder__img img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}

/* --- FAQ ----------------------------------------------------------------- */
/* The rules now span the shell like every other block; only the answer copy is
   capped for readability. At 900px the accordion left a permanent empty strip
   down the right of the page. */
.faq{max-width:none}
.faq details{border-top:1px solid var(--line);padding:1.15rem 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:1rem;
  font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:none;width:14px;height:14px;margin-top:.35rem;
  border-right:2px solid var(--bronze-ink);border-bottom:2px solid var(--bronze-ink);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin-top:.9rem;color:var(--muted);max-width:72ch}

/* --- contact ------------------------------------------------------------- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem)}
.info{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.info li{border-top:1px solid var(--line);padding-top:1.1rem}
/* The label was optically louder than the value it labelled — "ADRESA"
   out-shouting the street. Quiet the label, promote the answer. */
.info b{
  display:block;font-family:var(--disp);font-weight:700;font-size:.85rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;
}
.info li{font-size:1.1rem}
.info a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.info a:hover{border-color:var(--gold)}
/* A fixed 380px box against an OSM bbox of a different shape letterboxed the
   tiles and left a dead grey band above the attribution strip. */
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
     aspect-ratio:19/13;background:var(--ash)}
.map iframe{width:100%;height:100%;border:0;display:block}
/* the doorway shot is a 3:4 portrait; unconstrained it ran the right column
   ~400px past the end of the contact list and opened a hole on the left */
.contact__photo{margin:1.6rem 0 0}
/* 2% keeps the TRIAS signboard in frame — the caption points at it — while
   dropping the bottom third of the source, which is only tarmac and leaves. */
.contact__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 2%;
                    border-radius:var(--r);background:var(--ash)}
.contact__photo figcaption{font-size:.95rem;color:var(--muted);margin-top:.7rem}

/* --- single-rate band (Drop-In) ------------------------------------------ */
/* One 340px card marooned beside ~1100px of empty canvas read as a pricing
   table with rows deleted. One rate, so: one horizontal statement. */
.rate{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.6rem 2.5rem;background:#fff;border:2px solid var(--gold);
  border-radius:var(--r);padding:clamp(1.6rem,3vw,2.4rem);
}
.rate__num{
  font-family:var(--disp);font-weight:800;font-size:clamp(3rem,2.2rem + 2.6vw,4.6rem);
  line-height:1;color:var(--text);display:flex;align-items:baseline;gap:.4rem;margin:0;
}
.rate__num small{font-family:var(--body);font-weight:600;font-size:1rem;color:var(--bronze-ink)}
.rate__for{margin:.45rem 0 0;color:var(--muted);font-size:1rem}
.rate .btn{flex:none}

/* --- anchor offset -------------------------------------------------------- */
/* the header is sticky at 76px, so an in-page jump parked the target heading
   underneath it */
[id]{scroll-margin-top:92px}

/* --- reveal -------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1080px){
  .coach{flex-basis:calc((100% - 2 * var(--cg)) / 3)}
  .plans{grid-template-columns:repeat(2,1fr)}
  .member{flex-basis:calc((100% - var(--tg)) / 2)}
  .ft__grid{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  .hdr .btn{display:none}
  /* ...except the compact one in the bar itself — see .hdr__cta */
  .hdr .btn.hdr__cta{
    display:inline-flex;margin-left:auto;flex:none;
    padding:.52rem .8rem;font-size:.85rem;letter-spacing:.06em;
  }
  .hdr__cta+.burger{margin-left:.6rem}
  .burger{display:block}
  .nav{
    position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink);border-bottom:1px solid var(--line-dark);
    padding:.5rem 1.25rem 1.5rem;margin:0;
    transform:translateY(-125%);transition:transform .38s var(--ease),visibility .38s;
    max-height:calc(100dvh - 76px);overflow-y:auto;
    /* keep the closed panel out of the tab order — translating alone leaves
       every link keyboard-focusable off-screen */
    visibility:hidden;
  }
  body.menu-open .nav{transform:none;visibility:visible}
  /* scrim so page content doesn't peek out beneath the open panel.
     z-index sits below .hdr (60), so header + panel stay above it. */
  body::before{
    content:"";position:fixed;inset:0;z-index:50;
    background:rgba(10,11,12,.66);opacity:0;pointer-events:none;
    transition:opacity .38s var(--ease);
  }
  body.menu-open::before{opacity:1;pointer-events:auto}
  .nav a{padding:.95rem 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:1.25rem}
  .nav a::after{display:none}
  .nav .btn{margin-top:1.1rem;display:inline-flex;width:100%}

  .hero__grid{grid-template-columns:1fr}
  .hero__copy{padding:clamp(2.5rem,7vw,3.5rem) 0 clamp(2.5rem,6vw,3.5rem)}
  .hero__media{min-height:clamp(280px,46vh,420px);margin-inline:calc(50% - 50vw);width:100vw}
  /* no text sits on the photo at this width, so the .9 scrim was only muting
     the members' legs for nothing */
  .hero__media::after{
    background:linear-gradient(to top,rgba(21,23,24,.45) 0%,rgba(21,23,24,0) 42%);
  }
  .eight__grid{grid-template-columns:1fr;gap:2rem}
  .eight__fig{text-align:left}
  .eight__num{font-size:clamp(8rem,34vw,13rem)}
  .ways{grid-template-columns:1fr}
  .auth__grid{grid-template-columns:1fr;gap:1.8rem}
  .steps{grid-template-columns:1fr;gap:1.2rem}
  /* two-up, not stacked — six photos in one column is an endless scroll */
  .comm__grid{grid-template-columns:repeat(2,1fr)}
  /* 3/2 decapitates the portrait-format sources at this width */
  .comm__grid figure{aspect-ratio:4/5}
  .comm__grid--mosaic{grid-auto-rows:auto}
  .comm__grid--mosaic figure{aspect-ratio:4/5}
  .comm__grid--mosaic figure:nth-child(1){grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  /* six photos two-up with the first one full width leaves the sixth alone in
     the left column — give it the full width too */
  .comm__grid--mosaic figure:nth-child(6):last-child{grid-column:span 2;aspect-ratio:16/10}
  /* a three-photo band goes 2 + 1 and strands the last cell */
  .comm__grid figure:nth-child(3):last-child{grid-column:span 2;aspect-ratio:16/10}
  .contact__grid{grid-template-columns:1fr}
  .founder__grid{grid-template-columns:1fr}
  .founder__img{max-width:340px;aspect-ratio:1}
  /* the card stacks photo-over-text; the gap must go to zero or the photo
     detaches from the white body it belongs to */
  .klass,.klass:nth-of-type(even){grid-template-columns:1fr;gap:0}
  /* the alternating-side rule must not survive the stack, or every other row
     puts its photo under its own text */
  .klass:nth-of-type(even) .klass__img{order:0}
  .klass__img{aspect-ratio:16/10}
  .kit{columns:2}
}

@media(max-width:640px){
  :root{--shell:min(1240px,100% - 2rem)}
  .space__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:132px}
  .space__grid figure:nth-child(1){grid-column:span 2;grid-row:span 2}
  .space__grid figure:nth-child(2){grid-column:span 2}
  /* `!important` beats the inline grid-template-columns on the Drop-In page,
     which would otherwise keep two cramped columns at 390px */
  .plans{grid-template-columns:1fr!important}
  /* the min-heights exist to align a ROW of cards; stacked in one column they
     only open holes — the same reset already written for .plans--single */
  .plan__for,.plan__sub{min-height:0}
  .plan__sub{margin-bottom:1.1rem}
  .member{flex-basis:100%}
  /* the reserved second role line aligns a ROW of cards; one per row, it is
     just a hole between the name and the bio */
  .member__role{min-height:0;margin-bottom:.7rem}
  /* a 4:5 portrait at 358px wide is 448px — 53% of the viewport, one coach per
     screen before you reach the name */
  .member__img{aspect-ratio:4/3}
  .member__img img{object-position:50% 18%}
  .coach{flex-basis:calc((100% - var(--cg)) / 2)}
  .kit{columns:1}
  /* "Tréning, kde / nie si / číslo." strands two short words on the middle line */
  .hero h1 br{display:none}
  .ft__grid{grid-template-columns:1fr;gap:2rem}
  .ft__legal{flex-direction:column;gap:.5rem}
  /* stack the proof items so a separator can never dangle at a line end —
     and drop the generated separator, or every stacked line opens with a dot */
  .hero__proof{display:grid;gap:.45rem;font-size:.9rem}
  .hero__proof span:not(:last-child)::after{content:none}
  /* equal-width stacked CTAs instead of two ragged pill widths */
  .hero__cta{display:grid;gap:.7rem}
  .hero__cta .btn{width:100%}
  .btn{font-size:1.05rem;padding:.9rem 1.5rem}
}

@media(max-width:420px){
  /* stays 2-up: one portrait per screen turned the roster into the longest
     band on the page for three words of caption each */
  .coach__cap{padding:2rem .75rem .8rem}
  .coach__cap strong{font-size:1.02rem}
  .coach__cap span{font-size:.78rem;min-height:2.8em}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* Zrušený tréning v „Moje rezervácie“ — človek bez e-mailu sa o zrušení
   nedozvie inak než tu, takže musí byť na prvý pohľad odlíšený. */
.mine li.mine--off{opacity:.72;border-left:3px solid var(--bronze-ink);padding-left:.9rem}
.mine li.mine--off strong{color:var(--bronze-ink)}