/*
Theme Name: Black Belt Club
Author: Regina Svi
Description: Black Belt Clubi oma teema. Kujundus tuleb kinnitatud mockupist (30.07.2026). Ilma lehekoostajata, ilma valikute paneelita. Reegel: must taidis = tegevus, sinine ei ole kunagi nupp, punast ei kasutata.
Version: 0.5.97
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: bbc
*/

/* ── Lokaalsed fondid. Google'i serverisse ei minda. ───────────────── */
/* Barlow Condensed 500 latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-condensed-500-latin-ext.woff2) format('woff2');
  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;
}
/* Barlow Condensed 500 latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-condensed-500-latin.woff2) format('woff2');
  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;
}
/* Barlow Condensed 600 latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');
  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;
}
/* Barlow Condensed 600 latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2');
  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;
}
/* Barlow Condensed 700 latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');
  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;
}
/* Barlow Condensed 700 latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2');
  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;
}
/* Inter 400 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-latin-ext.woff2) format('woff2');
  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;
}
/* Inter 400 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-latin.woff2) format('woff2');
  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;
}
/* Inter 500 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-500-latin-ext.woff2) format('woff2');
  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;
}
/* Inter 500 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-500-latin.woff2) format('woff2');
  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;
}
/* Inter 600 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-600-latin-ext.woff2) format('woff2');
  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;
}
/* Inter 600 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/inter-600-latin.woff2) format('woff2');
  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;
}
/* Inter 700 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-latin-ext.woff2) format('woff2');
  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;
}
/* Inter 700 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-latin.woff2) format('woff2');
  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;
}

/* ── Kujundus mockupist ───────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
   BLACK BELT CLUB — kujundus, kinnitatud 30.07.2026
   Palett "Valge tatami". Hele alus nagu praegusel lehel, aga terav.
   Logo mõlemad värvid teevad tööd: sinine on identiteet ja link,
   MUST on tegevusnupp.

   KESKNE REEGEL: must täidis = tegevus. Sinine ei ole KUNAGI nupp.
   Tumeda foto või sinise ploki peal pöördub sama nupp valgeks.
   Punast ei kasutata üheski kohas.

   Kõik värvid on tokenites. WordPressi kolides läheb see plokk
   child theme'i style.css algusesse muutmata kujul.
   ════════════════════════════════════════════════════════════════ */
:root{
  --r-sm:8px; --r:14px; --r-lg:22px;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --maxw:1240px;
  --display:'Barlow Condensed','Oswald','Arial Narrow',system-ui,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  --ink:#EDF2F6;            /* lehe taust, praeguse lehe oma värv */
  --ink-2:#E2EAF3;          /* vahelduv sektsioon */
  --surface:#FFFFFF;        /* kaardid */
  --surface-2:#F7FAFD;
  --line:#D6DFE9;           /* dekoratiivne juuksjoon */
  --line-strong:#6B7683;    /* struktuuripiir, vormielemendid: 4.62:1 */
  --pricebox-line:#101720;  /* hinnakaardi raam: must, hiire all läheb siniseks */

  --brand:#105DDE;          /* logo sinine, pipetiga mõõdetud */
  --brand-bright:#2E7BFF;   /* ainult fookus ja ikoon, ei kanna valget teksti */
  --brand-deep:#0B3E8F;
  --brand-tint:#DCE9FD;

  --cta-bg:#000000;         /* logo must. Täpselt üks selline nupp vaates. */
  --cta-fg:#FFFFFF;
  --cta-hover:#2A2F38;      /* tumehall, mitte sinine: reegel "sinine ei ole kunagi nupp"
                               kehtib nii eranditeta. Valge tekstiga ~13:1. */

  --text:#101720;           /* mitte puhas must, et must täidis jääks haruldaseks */
  --muted:#46586B;
  --muted-2:#556575;        /* töötab kõigil heledatel pindadel */

  --accent:#105DDE;         /* sildid, sammunumbrid, menüü allajoon */
  --accent-fg:#FFFFFF;
  --accent-soft:#DCE9FD;
  --accent-ink:#0B3E8F;
  --badge-bg:#DCE9FD;
  --badge-fg:#0B3E8F;
  --announce-bg:#105DDE;
  --announce-fg:#FFFFFF;
  --nav-hover-fg:#101720;
  --ok:#17692F;             /* ainus lubatud roheline, ainult linnuke */

  --invert-bg:#0B3E8F;      /* üks täislaiuses tume plokk, annab rütmi */
  --invert-fg:#FFFFFF;
  --footer-bg:#101720;
  --footer-fg:#FFFFFF;
  --hero-scrim:linear-gradient(180deg,rgba(8,12,20,.62) 0%,rgba(8,12,20,.34) 34%,
    rgba(8,12,20,.86) 76%,rgba(237,242,246,.98) 100%);
  --ph-1:#DCE9FD; --ph-2:#F7FAFD;      /* treeneri platshoidja */
  --ph-ink:rgba(11,62,143,.34);
  --map-1:#E6EDF6; --map-2:#DCE5F0;    /* kaardikoha triibud */
  --shadow:0 14px 36px -18px rgba(16,23,32,.28);
  --hdr-bg:rgba(255,255,255,.88);
  --hdr-fg:#101720;
  --mbar-bg:rgba(255,255,255,.96);
  --logo-filter:none;
  --ghost-hover-bd:#101720;
  --ghost-hover-bg:rgba(16,23,32,.06);
  --belt-brand:linear-gradient(90deg,#A9C8FF 0 20%,#2E7BFF 20% 40%,#105DDE 40% 60%,
    #0B3E8F 60% 80%,#101720 80% 100%);
  --on-dark-line:rgba(255,255,255,.22);
}


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Eesti liitsõnad on pikad (olümpiataekwondo, treeningukoht, liikmemaks),
   seega luba murdumine, muidu jookseb sõna kitsal kaardil servast välja. */
body{overflow-wrap:break-word}
h1,h2,h3,h4,.price,.pm{overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;
  text-transform:uppercase;letter-spacing:-.005em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--brand-bright);outline-offset:3px;border-radius:4px}


/* Kinnine päis katab ankru sihtmärgi ära, seega jäta kerimisel ruumi. */
section[id],main[id],footer[id],div[id]{scroll-margin-top:88px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.eyebrow{font-family:var(--body);font-weight:700;font-size:max(.78rem,12px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:.85rem}
.h-xl{font-size:clamp(2.4rem,7.5vw,4.6rem)}
.h-lg{font-size:clamp(1.85rem,5vw,3rem)}
.h-md{font-size:clamp(1.35rem,3vw,1.85rem)}
.lead{color:var(--muted);font-size:clamp(1rem,1.6vw,1.12rem);max-width:60ch}
.small{font-size:.85rem;color:var(--muted)}

/* Vöö-motiiv sektsioonide eraldajana, klubi enda värvides.
   Kinnitatud 30.07.2026: punast ei kasutata. */
.belt{height:4px;width:100%;border:0;margin:0;background:var(--belt-brand)}


/* ── Alati tumedal pinnal (foto, sinine plokk, jalus). Need plokid
   pööravad tekstitokenid heledaks, et hele palett ka nende peal töötaks. ── */
.hero,.club-hero,.social,.join:not(.join-light),.ftr,.picker,.on-dark{
  --text:#FFFFFF;
  --muted:rgba(255,255,255,.76);
  --muted-2:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.30);
  --ok:#7BE0A3;
  --brand-bright:#BFD6FF;
  --accent-ink:#BFD6FF;
  color:#FFFFFF;
}
.ftr h4{color:#FFFFFF}
.ftr a,.ftr p{color:rgba(255,255,255,.74)}
.ftr a:hover{color:#FFFFFF}
.ftr-bot{color:rgba(255,255,255,.55)}
.hero-facts b,.hero-facts span{color:#FFFFFF}
.hero-facts span{opacity:.78}


/* Heledas paletis on CTA must. Tumeda foto või sinise ploki peal
   pöördub sama nupp valgeks, sest must nupp tumedal pinnal ei erista.
   Vorm, suurus ja tekst jäävad samaks, muutub ainult värvipaar. */
.hero,.club-hero,.social,.join:not(.join-light),.ftr,.on-dark{
  --cta-bg:#FFFFFF; --cta-fg:#071630; --cta-hover:#DCE8FF;
}

/* ---------- nupud ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-size:1.05rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;padding:.85rem 1.6rem;border-radius:var(--r-sm);border:2px solid transparent;
  cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease;
  min-height:48px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cta-bg);color:var(--cta-fg)}
.btn-primary:hover{background:var(--cta-hover)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--ghost-hover-bd);background:var(--ghost-hover-bg)}
.btn-sm{font-size:.92rem;padding:.6rem 1.1rem;min-height:42px}


/* Mockupi teade: EN-versiooni tõlget selles failis ei ole. */
#langnote{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:210;
  display:flex;align-items:center;gap:.75rem;max-width:min(30rem,calc(100vw - 28px));
  background:#0B0E15;color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:11px;
  padding:.7rem .8rem .7rem 1rem;font-size:.84rem;line-height:1.45;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.8)}
#langnote button{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1rem;
  width:28px;height:28px;border-radius:7px;cursor:pointer;flex:0 0 28px}
#langnote button:hover{background:rgba(255,255,255,.24)}
@media (min-width:900px){#langnote{bottom:20px;left:auto;right:14px;transform:none}}

/* ---------- teateriba ---------- */
.topbar{background:var(--announce-bg);color:var(--announce-fg);font-size:.85rem}
.topbar-in{display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding-block:.32rem;flex-wrap:wrap;text-align:center}
/* Lehe esimene link. Ilma paddingita on puutesihtmärk 22 px kõrge, mis on
   sõrmega tabamiseks liiga madal. Riba enda kõrgus jääb samaks, sest
   .topbar-in padding kahaneb sama palju kui link kasvab. */
.topbar a{display:inline-block;padding-block:.42rem;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media (max-width:560px){.tb-sec{display:none}}

/* ---------- päis ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--hdr-bg);color:var(--hdr-fg);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.25rem;height:68px}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand img{height:40px;width:auto;filter:var(--logo-filter)}
/* Päise nimi ja hüüdlause on MUST, sama must mis logofailis kõrval. Enne oli nimi
   #101720 (peaaegu must) ja hüüdlause #556575 (hall), mistõttu tekst ei langenud
   logoga kokku. Tumedal taustal (jalus, foto) pöörab .on-dark plokk need ise valgeks. */
.brand b{font-family:var(--display);font-size:1.1rem;letter-spacing:.02em;line-height:1;
  text-transform:uppercase;color:#000000}
.brand span{display:block;font-family:var(--body);font-size:.55rem;letter-spacing:.18em;
  color:#000000;font-weight:600}
.ftr .brand b,.ftr .brand span,.on-dark .brand b,.on-dark .brand span{color:#FFFFFF}
.nav{display:none;gap:1.5rem;margin-left:auto;align-items:center}
.nav a{font-family:var(--display);font-size:1.02rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:.3rem 0;border-bottom:2px solid transparent;transition:.15s}
.nav a:hover,.nav a[aria-current]{color:var(--nav-hover-fg);border-bottom-color:var(--accent)}
.hdr-cta{display:none;gap:.6rem;align-items:center}
/* Nupu tekst ei tohi kunagi murduda kahele reale. Tekst pikenes 06.08.2026
   ("Tasuta proovitrenn" -> "Registreeri proovitrenni", et CTA oleks kõikjal sama)
   ja 900-1079 px laual jäi ruumi puudu ~96 px. Alumine plokk tihendab päist
   selles vahemikus; alates 1080 px on ruumi niigi. */
.hdr-cta .btn{white-space:nowrap}
@media (min-width:900px) and (max-width:1079px){
  .hdr-in{gap:.7rem}
  .nav{gap:.7rem}
  .nav a{font-size:.93rem}
  .hdr-cta .btn{padding-inline:.75rem}
  .lang button{padding-inline:.4rem}
}
.lang{display:flex;gap:.15rem;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.15rem;font-size:.78rem;font-weight:700}
.lang button,.lang a{background:none;border:0;color:var(--muted);padding:.3rem .55rem;border-radius:5px;
  cursor:pointer;font:inherit;min-height:32px;display:inline-flex;align-items:center;text-decoration:none}
.lang button[aria-pressed=true],.lang a[aria-current]{background:var(--brand);color:#FFFFFF}
.burger{margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:2px;
  background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
/* Päis on position:sticky. Kui avatud menüü teeb päise vaateaknast kõrgemaks,
   siis kinnijäänud päise alumine ots jääb igaveseks ekraanist välja, sest sticky
   elementi ei kerita. Väikesel telefonil (iPhone SE, 375 px) jäid nii CTA-nupud
   ja keelevalik kättesaamatuks. Menüü keritav kõrgus lahendab selle: 68 px on
   päiserea kõrgus, 84 px on alumine fikseeritud tegevusriba .mbar. */
.m-nav{display:none;border-top:1px solid var(--line);background:var(--surface);
  padding:.5rem 0 calc(84px + 1rem);
  max-height:calc(100vh - 152px);overflow-y:auto;overscroll-behavior:contain}
@supports (height:100svh){.m-nav{max-height:calc(100svh - 152px)}}
.m-nav.open{display:block}
.m-nav a{display:block;font-family:var(--display);font-size:1.35rem;text-transform:uppercase;
  padding:.7rem var(--pad);border-bottom:1px solid var(--line)}
.m-nav .m-actions{display:flex;gap:.6rem;padding:1rem var(--pad) 0;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(88svh,760px);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:var(--hero-scrim)}
.hero-in{padding-block:clamp(2.5rem,7vw,4.5rem);width:100%}
.hero h1{max-width:19ch;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.55)}
/* ── Sõna "võitleja" ────────────────────────────────────────────────────
   Sõna on bränditoonis #105DDE, aga tumeda foto peal andis see kontrastiks
   ainult 2,28:1 (mõõdetud: foto koos tumendusega on sõna taga rgb(43,48,62)).
   Loetavuse alampiir suurele tekstile on 3:1, ehk sõna oli alla piiri.

   Lahendus on valgus sõna TAGA, mitte teine värv. Kaks kihti:

   ::before on ühtlane hele tuum. Ühtlane on siin oluline. Esimene katse
   kasutas radiaalset kuma, mis on keskelt tugev ja servadest nõrk, ja siis
   jäid esimene ja viimane täht 1,74:1 peale, ehk halvemasse seisu kui enne.
   Ühtlase tuumaga on kontrast mõõdetult 5,15–5,43:1 üle terve sõna.

   ::after on laiem pehme sinine aura, mis annab sügavust. See ei kanna
   loetavust, seega tema tugevust võib vabalt muuta.

   Pealkirja tume text-shadow võetakse maha, muidu määriks see sinise ära. */
.hero h1 em{font-style:normal;color:#105DDE;position:relative;z-index:0;text-shadow:none}
.hero h1 em::before{content:'';position:absolute;z-index:-1;
  left:-9%;right:-9%;top:-4%;bottom:2%;
  background:rgba(255,255,255,.95);border-radius:999px;filter:blur(11px)}
.hero h1 em::after{content:'';position:absolute;z-index:-2;
  left:-52%;right:-52%;top:-85%;bottom:-72%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(130,185,255,.8) 0%,
    rgba(60,130,255,.5) 34%,rgba(30,100,235,.22) 56%,rgba(16,93,222,0) 74%);
  filter:blur(22px);
  animation:bbc-hinga 4.5s ease-in-out infinite}

/* ── Hingav sära ────────────────────────────────────────────────────────
   Ainult aura hingab, tuum ::before seisab paigal. See on oluline: kui
   panna hingama see kiht, mis kannab loetavust, siis nõrgas faasis kukub
   kontrast 1,7:1 peale. Nii jääb loetavus alati ~4,3–5,0:1 juurde ja
   liikumine on puhtalt kaunistus.

   Animeeritakse ainult opacity ja transform, mida brauser saab GPU-l
   komposiitida. Blur rasterdatakse üks kord.

   Kellel on süsteemis liikumise vähendamine sisse lülitatud, näeb
   liikumatut varianti. Sama, mis oli versioonis 0.5.36.

   TAGASI LIIKUMATUKS: kustuta animation rida ülalt ja pane ::after
   juurde opacity:.6, siis võib ka see plokk ära minna. */
@keyframes bbc-hinga{
  0%,100%{opacity:.18;transform:scale(.86)}
  50%    {opacity:.88;transform:scale(1.1)}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 em::after{animation:none;opacity:.6}
}
.hero .eyebrow{color:#FFFFFF;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.hero .lead{margin-top:1.1rem;color:rgba(255,255,255,.92);max-width:48ch}
.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem 1.5rem;margin-top:2.25rem;
  padding-top:1.5rem;border-top:1px solid var(--line-strong)}
.hero-facts div{padding-block:.5rem}
.hero-facts b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1}
.hero-facts span{font-size:.78rem;color:var(--muted);letter-spacing:.02em}

/* ---------- kiirvalik asukoha järgi ---------- */
.picker{background:var(--brand);padding-block:1.1rem}
.picker-in{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.picker b{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;letter-spacing:.04em;
  margin-right:.4rem}
/* Chipid olid <button> ilma käsitlejata, ehk viis surnud nuppu. Nüüd on nad <a> ja
   viivad saali lehele. display ja text-decoration on siin sellepärast, et <a> ei
   käitu vaikimisi nagu nupp. */
.chip{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.45);border-radius:999px;padding:.45rem 1rem;
  font-size:.88rem;font-weight:600;cursor:pointer;background:none;color:#fff;
  transition:.15s;min-height:38px}
.chip:hover{background:#fff;color:var(--brand);border-color:#fff}

/* ---------- üldine kaardigrid ---------- */
.grid{display:grid;gap:1.15rem}
.g-2{grid-template-columns:1fr}
.g-3{grid-template-columns:1fr}
.g-4{grid-template-columns:1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card h3{font-size:1.2rem;margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.92rem}
/* Kast 44 -> 52 px. Sees oli varem üks tähemärk, nüüd on joonistatud ikoon ja
   26 px juures kadus detail ära. Kontrollitud: 32 px ikoon loeb, 26 px on piir. */
.ico{width:52px;height:52px;border-radius:13px;background:var(--brand-tint);color:var(--accent-ink);
  display:grid;place-items:center;margin-bottom:1rem;font-size:1.3rem}
.ico svg{width:32px;height:32px;display:block}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:2.25rem}

/* Kahe veeru pealkirjarida töötab ainult siis, kui paremal on NUPP: nupp on madal ja
   alumine serv on tema jaoks õige joondus. Kui paremal on LÕIK, joondab align-items:end
   lõigu alumise serva pealkirjaga, mistõttu kolmerealine lõik kasvab pealkirjast
   ülespoole ja jääb õhku rippuma. Sellised plokid lähevad ühte veergu: silt, pealkiri,
   selgitus. Valitud 06.08.2026 nelja variandi seast.
   :has() teeb selle ise ära, ehk uus lõiguga sektsioon saab õige kuju ilma lisaklassita.
   Spetsiifilisus (0,2,0) võidab rea 838 grid-reeglit, seega media query't muuta ei ole vaja. */
.head-row:has(> .lead){display:block}
.head-row:has(> .lead) > .lead{margin-top:.85rem;max-width:60ch}


/* Heledal taustal on kaardi ja tausta luminantsivahe väike (1.13:1),
   seega kaardi piir tuleb tugevdada varjuga, mitte ainult tooniga.
   NB: vormiväljadel (input, select, checkbox) peab piir olema
   var(--line-strong), see on WCAG 1.4.11 nõue. */
.card,.venue,.coach,.news,.pcard,.disc,.pricebox,.mapbox{
  box-shadow:var(--shadow)}
.venue:hover,.news:hover,.card:hover,.coach:hover{
  box-shadow:0 22px 48px -20px rgba(16,23,32,.34)}
input,select,textarea{border:1px solid var(--line-strong)}


/* Vahelduv sektsioon. */
.section.alt{background:var(--ink-2)}

/* ---------- treeningkoha kaardid ---------- */
.venue{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s}
.venue:hover{border-color:var(--brand);transform:translateY(-4px)}
.venue-img{aspect-ratio:16/10;overflow:hidden;position:relative}
.venue-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.venue:hover .venue-img img{transform:scale(1.05)}
.venue-tag{position:absolute;top:.75rem;left:.75rem;background:var(--accent);color:var(--accent-fg);
  font-size:max(.75rem,12px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:5px}
.venue-body{padding:1.35rem;display:flex;flex-direction:column;gap:.85rem;flex:1}
.venue-body h3{font-size:1.4rem}
.venue-addr{font-size:.82rem;color:var(--muted-2);margin-top:.2rem}
/* "Alates septembrist" märge saalikaardil (omaniku soov 08.2026). Kehtib kõigile
   saalidele peale Sikupilli, kelle graafik juba käib.

   PUNANE ON SIIN TEADLIK ERAND. Kogu ülejäänud kujunduses on punane keelatud
   (Regina 30.07.2026), aga selle märke tellis omanik punasena ja Regina kinnitas
   08.2026 ("tee neid punaseks pigem"). See on ainus koht lehel, kus punast
   kasutatakse — ära laienda mujale.
   Toon on tumepunane #A32019, et tekst püsiks heledal taustal loetav (kontrast
   valgel ~7:1). Taust on sama värvi 12% täidis, nagu .kv-badge ja .tag teevad. */
.venue-soon{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#A32019;
  background:rgba(163,32,25,.12);padding:.25rem .55rem;border-radius:999px}
.rows{display:flex;flex-direction:column;gap:.5rem;font-size:.88rem}
.row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.5rem;
  border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row span:first-child{color:var(--muted)}
.row span:last-child{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.venue-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.price{font-family:var(--display);font-size:1.65rem;line-height:1}
.price s{color:var(--muted-2);font-size:.9rem}
.price small{font-family:var(--body);font-size:max(.8rem,12.5px);color:var(--muted);font-weight:500;
  text-transform:none;letter-spacing:0}

/* ---------- treenerid ---------- */
.coach{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.18s}
.coach:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.coach-ph{aspect-ratio:1;display:grid;place-items:center;position:relative;
  background:radial-gradient(120% 120% at 30% 15%,var(--ph-1) 0%,var(--ph-2) 100%)}
.coach-ph b{font-family:var(--display);font-size:3.2rem;color:var(--ph-ink);
  letter-spacing:.02em}
.coach-ph::after{content:'foto';position:absolute;bottom:.6rem;right:.7rem;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ph-ink)}
/* ── Treeneri portree ────────────────────────────────────────────────────
   Kui portree on olemas, lisa <img> otse .coach-ph sisse. Initsiaalid ja silt
   "foto" kaovad ise ära, muud muuta ei ole vaja ja paigutus ei nihku.
   Pilt kärbitakse ruuduks, seega saada ruut või vähemalt ruudulähedane kaader. */
.coach-ph:has(img){background:none}
.coach-ph:has(img) b,.coach-ph:has(img)::after{display:none}
.coach-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.coach-body{padding:1.05rem 1.15rem 1.25rem}
.coach-body h3{font-size:1.12rem}
.dan{display:inline-block;margin-top:.4rem;font-size:max(.75rem,12px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--brand-tint);
  padding:.22rem .5rem;border-radius:4px}
/* nowrap ainult avalehel ja aknas. „4. DAN · PEATREENER" murdus kitsas veerus
   kahele reale ja nägi välja nagu kaks eri silti. Saali lehele (.g-coach) seda
   panna ei tohi: seal on veerg 132 px, tekstile jääb 102 px ja silt on 118 px,
   ehk nowrap ajaks selle kaardist välja. */
.g-auto .dan,.trm-in .dan{white-space:nowrap}
.coach-body p{font-size:.83rem;margin-top:.6rem;color:var(--muted)}

/* ── Treeneri täistutvustus aknas ────────────────────────────────────────
   Kaardil on lühike tekst, nupp avab vana lehe täispika teksti. Aken, mitte
   kohapeal avanev kaart: <details> kasvatas kaardi 646 pikslilt 962-le ja
   venitas kaks kõrvalkaarti kaasa, ehk kaks kolmandikku reast läks tühjaks
   valgeks. Aken on top-layeris ja ruudustik ei liigu üldse. Mõõdetud 6.08.2026. */
.coach-more{margin-top:.7rem;font:inherit;font-size:.8rem;font-weight:700;color:var(--brand);
  background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.coach-more::after{content:'→';transition:transform .15s}
.coach-more:hover{text-decoration:underline}
.coach-more:hover::after{transform:translateX(2px)}

dialog.trm{border:0;border-radius:var(--r);padding:0;max-width:38rem;width:calc(100% - 2rem);
  background:var(--surface);color:var(--text);box-shadow:0 24px 60px rgba(10,20,40,.28)}
dialog.trm::backdrop{background:rgba(8,14,26,.55)}
.trm-in{padding:1.6rem 1.7rem 1.8rem;max-height:80vh;overflow-y:auto}
.trm-in h3{font-size:1.35rem;margin:0}
.trm-in .dan{margin-top:.5rem}
.trm-in p{font-size:.94rem;line-height:1.65;color:var(--muted);margin:1rem 0 0}
.trm-x{position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:1.1rem;
  line-height:1;cursor:pointer}
.trm-x:hover{color:var(--text);border-color:var(--brand)}

/* Ainult ekraanilugejale. Nupp ütleb „Loe edasi", aga kuus ühesugust nuppu
   järjest ei ütle pimedale kasutajale midagi, seega nime lisame juurde. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Treenerid saali lehel ───────────────────────────────────────────────
   Sama .coach kaart mis esilehel, ainult tihedam ja ilma tutvustuseta.
   auto-fill, mitte auto-fit: üks treener jääb sama laiaks kui kolm, ei veni
   üle terve veeru laiali. Portree lisamine käib täpselt samamoodi. */
.g-coach{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:1rem}
.g-coach .coach-ph b{font-size:clamp(1.7rem,8vw,2.4rem)}
.g-coach .coach-body{padding:.85rem .95rem 1.05rem}
.g-coach .coach-body h3{font-size:max(.98rem,15px);line-height:1.3}
/* Aste ja roll tavatekstina, mitte sildina: kitsas kaardis murdub silt kahele
   reale ja muutub kohmakaks plokiks. Esilehe kaardil jääb silt alles. */
.g-coach .dan{background:none;padding:0;margin-top:.35rem;color:var(--muted-2);
  text-transform:none;letter-spacing:.01em;font-weight:600;font-size:max(.8rem,12.5px)}
@media (min-width:900px){
  .g-coach{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* ---------- sammud ----------
   Number on terves kaardi sees, mitte pooleldi üle serva. Regina soov 06.08.2026. */
.steps{counter-reset:s;display:grid;gap:1.15rem}
.step{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.35rem 1.5rem 1.5rem}
.step::before{counter-increment:s;content:counter(s);
  font-family:var(--display);font-size:1.15rem;font-weight:700;background:var(--accent);color:var(--accent-fg);
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.step h3{font-size:1.15rem;margin:.8rem 0 .5rem}
.step p{font-size:.9rem;color:var(--muted)}

/* ---------- uudised ---------- */
.news{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:.18s}
.news:hover{border-color:var(--brand);transform:translateY(-4px)}
.news-img{aspect-ratio:16/9;overflow:hidden}
/* Kohatäide uudisele, millel veel pilti ei ole. Sama gradient mis treeneri
   kaardil, et see mõjuks kujunduse osana, mitte puuduva pildina. */
.news-ph{display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 15%,var(--ph-1) 0%,var(--ph-2) 100%)}
.news-ph b{font-family:var(--display);font-size:1.6rem;letter-spacing:.08em;color:var(--ph-ink)}
.news-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.news:hover .news-img img{transform:scale(1.05)}
.news-body{padding:1.2rem 1.3rem 1.4rem}
.news-date{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);
  font-weight:700}
.news-body h3{font-size:1.15rem;margin:.5rem 0 .5rem}
.news-body p{font-size:.87rem;color:var(--muted)}

/* ---------- galerii mosaiik ---------- */
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.mosaic a{overflow:hidden;border-radius:10px;aspect-ratio:1}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .45s,filter .3s;
  filter:saturate(.9)}
.mosaic a:hover img{transform:scale(1.07);filter:saturate(1.1)}
.mosaic a:first-child{grid-column:span 2;aspect-ratio:16/9}



/* ---------- kontakt ja vorm ---------- */
.contact-grid{display:grid;gap:1.5rem}
.contact-info{display:grid;gap:.75rem;align-content:start}
.ci{display:flex;gap:.9rem;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;
  box-shadow:var(--shadow);transition:border-color .18s,transform .18s}
a.ci:hover{border-color:var(--brand);transform:translateY(-2px)}
.ci-ico{flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--accent-ink);font-size:1.05rem}
.ci b{display:block;font-size:1rem}
.ci span span{display:block;font-size:max(.82rem,13px);color:var(--muted-2)}
/* .ci-soc-h ja .soc-line kustutatud 06.08.2026 koos kontaktiploki "Jälgi meid"
   nuppudega. Neid ei kasutanud enam ükski fail. */

.cform{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.25rem,3vw,1.75rem);box-shadow:var(--shadow);display:grid;gap:1rem}
.cform-h{font-family:var(--display);font-size:1.4rem;text-transform:uppercase;margin:0}
.f-row{display:grid;gap:.35rem}
.f-two{display:grid;gap:1rem}
.f-row label{font-size:max(.82rem,13px);font-weight:600}
.f-row label span{color:var(--accent-ink)}
.cform input,.cform select,.cform textarea{
  font:inherit;font-size:1rem;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:.7rem .8rem;min-height:46px;width:100%}
.cform textarea{min-height:110px;resize:vertical}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  border-color:var(--brand);outline:3px solid var(--brand-bright);outline-offset:1px}
.f-turnstile{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted-2);
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:.7rem .9rem}
.f-note{font-size:max(.78rem,12.5px);color:var(--muted-2);margin:0}
.f-status{margin:0;font-size:.9rem;font-weight:600;padding:.7rem .9rem;border-radius:var(--r-sm);
  background:var(--brand-tint);color:var(--accent-ink)}
@media (min-width:560px){ .f-two{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .contact-grid{grid-template-columns:.85fr 1.15fr} }

/* ---------- partnerid ja liikmelisus ---------- */
.plogo-h{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--muted-2);margin:0 0 .9rem}
.plogos{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem;margin-bottom:2.25rem}
.plogo{display:grid;place-items:center;min-height:96px;padding:1.1rem 1.25rem;
  background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);transition:border-color .18s,transform .18s}
a.plogo:hover{border-color:var(--brand);transform:translateY(-3px)}
/* max-width ja min-width:0 on siin ruudustiku pärast, mitte ilu pärast. Ilma
   nendeta määrab kaardi minimaalse laiuse kõige laiema logo loomulik mõõt
   (HC PRO andis 206 px) ja auto-fit ei mahuta enam nii palju veerge kui peaks. */
.plogo{min-width:0}
.plogo img{max-height:52px;max-width:100%;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
a.plogo:hover img{filter:none;opacity:1}
/* Liikmelisuse logod on veidi väiksemad kui toetajate omad, muus osas käituvad
   täpselt samamoodi: hallid seistes, värvi saavad hiire all. Varem oli neil
   filter:none, mistõttu liikmelisuse rida oli värviline ja toetajate rida hall.
   Kaks erinevat loogikat ühel lehel nägi juhuslik välja. */
.plogo-static img{max-height:44px}
.plogo-txt{font-family:var(--display);font-size:1.5rem;text-transform:uppercase;
  color:var(--muted);letter-spacing:.02em}
a.plogo:hover .plogo-txt{color:var(--brand)}
.plogos-sm .plogo{min-height:80px}
.plogo-txt small{display:block;font-size:.6em;letter-spacing:.08em;opacity:.7;
  font-family:var(--body);font-weight:600}
/* Lahkuv sponsor: kujundus on sama, klass on ainult selleks, et
   maha võtmine oleks ühe rea kustutamine. */
.plogo-out{}
@media (min-width:600px){.plogos{grid-template-columns:repeat(3,1fr)}}
/* auto-fit, mitte kindel arv veerge: toetajate arv muutub. auto-fit kokutab tühjad
   veerud kokku, seega rida on alati täis, olgu toetajaid neli, viis või kuus.
   Kindla arvuga (varem 6) jäi viie toetaja puhul rea lõppu tühi auk. */
@media (min-width:900px){.plogos{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
  .plogos-sm{grid-template-columns:repeat(3,1fr)}}

@media (min-width:600px){
  .plogos-sm{grid-template-columns:repeat(3,1fr);max-width:560px}
}

/* ---------- social ---------- */
.social{background:var(--invert-bg);color:var(--invert-fg)}
.social-in{display:grid;gap:1.75rem;padding-block:clamp(2.5rem,6vw,3.75rem)}
.social h2{font-size:clamp(1.7rem,4.5vw,2.5rem)}
.social p{color:rgba(255,255,255,.86);max-width:46ch;margin-top:.6rem}
.social-links{display:flex;gap:.7rem;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.6rem 1.1rem;
  font-weight:600;font-size:.9rem;transition:.15s;min-height:44px}
.soc:hover{background:#fff;color:var(--brand)}

/* Jaluse sotsiaalnupud on ikoonidega ja ilma tekstita, seega ruut, mitte pill.
   44 px on kõige väiksem mugavalt tabatav puutesihtmärk. Ikoon võtab värvi
   tekstilt (fill:currentColor), seega hover toimib ilma eraldi reeglita. */
.soc-ring{width:44px;height:44px;padding:0;justify-content:center;flex:0 0 44px}
.soc-ico{display:block}

/* ---------- jalus ---------- */
.ftr{background:var(--footer-bg);color:var(--footer-fg);border-top:1px solid var(--line);padding-block:clamp(2.5rem,6vw,4rem);
  /* Logofailis on sõnad "BLACK BELT CLUB" mustad (x 144-293, mõõdetud) ja need kaovad
     tumedal jalusel ära. Kogu logo valgeks. Ainus koht, kus logo tumedal taustal seisab.
     Kui omanik saadab logo valge versiooni, kustuta see rida ja pane fail asemele. */
  --logo-filter:brightness(0) invert(1)}
.ftr-grid{display:grid;gap:2.25rem}
.ftr h4{font-size:1rem;letter-spacing:.06em;margin-bottom:.9rem;color:#fff}
.ftr a,.ftr p{color:var(--muted);font-size:.9rem}
.ftr a:hover{color:#fff}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
/* minmax(0,1fr), mitte 1fr: 1fr miinimum on auto, mistõttu lai ETF sõnamärk
   venitaks oma lahtri teistest laiemaks ja kolm alust ei oleks ühesuurused. */
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;max-width:340px;
  margin-top:.75rem}
.ftr-bot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;
  color:var(--muted-2)}

/* ---------- mobiili püsiriba ---------- */
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:70;display:flex;gap:.5rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background:var(--mbar-bg);backdrop-filter:blur(12px);border-top:1px solid var(--line-strong)}
.mbar .btn{flex:1}
.mbar .btn-ghost{flex:0 0 52px;padding:0}
body{padding-bottom:82px}

/* ============================================================
   KLUBID — teine vaade
   ============================================================ */
/* Mockupis vahetas JS kolme vaadet ühe URL-i sees ja need kaks rida
   peitsid mitteaktiivsed. WordPressis on iga vaade oma URL, seega neid
   ei ole vaja. NB: WordPress lisab body-le klassi "page", nii et
   .page{display:none} peitis ära kogu lehe. Ei tohi tagasi tuua. */
.phead{padding-block:clamp(2.25rem,6vw,3.5rem) 0}
.crumb{font-size:.8rem;color:var(--muted-2);margin-bottom:.9rem}

/* ---------- Klubireeglid ----------
   Pikk juriidiline tekst. Rea laius on piiratud 68 tähemärgiga, sest pikem rida
   muudab lugemise raskeks ja seda dokumenti loetakse päriselt läbi, mitte ei
   skaneerita. Nummerdus tuleb CSS-loendurist, et 1.1, 1.2 jne oleksid alati
   jaotise numbriga kooskõlas ka siis, kui keegi punkti vahele lisab. */
/* Lugemislaiuse piirang käib SISU, mitte ümbrise peale. Kui panna max-width .reeglid
   plokile endale, siis .wrap margin-inline:auto tsentreerib kitsama kasti ja kogu tekst
   nihkub lehe pealkirja suhtes paremale. Nii jäävad kõik read pealkirjaga ühele joonele. */
.reeglid{padding-block:clamp(1.75rem,4vw,2.75rem) clamp(3rem,7vw,5rem);
  display:grid;gap:clamp(1.75rem,4vw,2.5rem)}
.reeglid > *{max-width:68ch}
.rsec h2{font-size:clamp(1.25rem,3vw,1.6rem);margin-bottom:.9rem}
.rsec h3{font-size:1.05rem}
.rsec p{color:var(--muted);margin-bottom:.8rem}
.rsec > p:last-child{margin-bottom:0}
.reeglid{counter-reset:jaotis}
/* alam-loendur elab jaotise, mitte loendi küljes: §4 sees on kaks nummerdamata
   vaheseadet (Põhiprogramm, Intensiivprogramm) punktide 4.2 ja 4.3 vahel, seega
   loend katkeb ja jätkub. Kui loendur oleks .rnum küljes, algaks teine pool
   uuesti 4.1-st. */
.rsec-nr{counter-increment:jaotis;counter-reset:alam}
.rnum{list-style:none;margin:0;padding:0;
  display:grid;gap:.7rem}
.rnum > li{counter-increment:alam;position:relative;padding-left:3.4rem;color:var(--muted)}
.rnum > li::before{content:counter(jaotis) "." counter(alam);position:absolute;left:0;top:.05rem;
  min-width:2.6rem;text-align:center;font-family:var(--display);font-weight:700;
  font-size:.85rem;letter-spacing:.02em;color:var(--accent-ink);
  background:var(--badge-bg);border-radius:4px;padding:.1rem .35rem}
/* Täpploend joondub nummerdatud punkti TEKSTIGA (3.4rem), mitte lehe servaga.
   Enne oli tal ainult margin-left:1.15rem ja loend rippus numbritest vasakule välja,
   nagu ta ei kuuluks eelmise punkti juurde (Regina 08.2026: "bullet list imelikult
   väljas"). Punkt ise on tehtud ::before-ga, sest disc-täpi asukohta ei saa
   numbriplaadi laiusega kokku viia. */
.rlist{list-style:none;margin:.7rem 0 0;padding:0;color:var(--muted)}
.rlist li{position:relative;padding-left:1.5rem;margin-bottom:.4rem}
.rlist li::before{content:'';position:absolute;left:.35rem;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--muted-2)}
/* Kui loend jätkab nummerdatud punkti mõtet (nt 2.2 "hindab treener muu hulgas:"),
   joondub ta selle punkti TEKSTIGA, mitte lehe servaga. Vahetu järgnevus .rnum
   järel on täpselt see olukord; §5 ja §10 loendid tulevad lõigu järel ja jäävad
   kitsama taandega. */
.rnum + .rlist li{padding-left:3.4rem}
.rnum + .rlist li::before{left:1.15rem}

/* §4 kaks õppeprogrammi. Varem olid need paljas h3 + p keset nummerdatud loendit
   ja nägid välja nagu kogemata sinna jäänud tekst. Nüüd kaks kõrvutist kaarti:
   need on paralleelsed valikud (2× nädalas vs 3+ nädalas), seega kõrvuti on ka
   sisuliselt õige. Regina soov 08.2026. */
.rprog{display:grid;gap:.85rem;margin:1.1rem 0}
.rprog-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.25rem}
.rprog-c h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-size:1rem;margin:0 0 .5rem;color:var(--accent-ink)}
.rprog-c p{margin:0;font-size:.95rem}
@media (min-width:640px){.rprog{grid-template-columns:repeat(2,1fr)}}
.rbox{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:1.35rem 1.5rem;margin-top:1rem}
.rbox-h{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-size:1.05rem;margin:0 0 .7rem}
.rsmall{font-size:.86rem;color:var(--muted);margin:.7rem 0 0}
.rtbl{margin-top:.9rem}
.rcta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.35rem 1.5rem}
.rcta > p{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-size:1.05rem;margin:0 0 .9rem;color:var(--text)}
.rcta-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.35rem 0 1.1rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  /* Servavarjund näitab, et rida jätkub. Ilma selleta paistab 320px ekraanil
     kaks saali viiest ja kasutaja ei tea ülejäänutest midagi. */
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
  scroll-snap-type:x proximity}
.tab{scroll-snap-align:start}
.tabs::-webkit-scrollbar{height:4px}
.tabs::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:2px}
.tab{flex:0 0 auto;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:.6rem 1.15rem;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--muted);
  transition:.15s;min-height:44px;white-space:nowrap}
.tab:hover{border-color:var(--line-strong);color:var(--nav-hover-fg)}
.tab[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  padding:1rem 0 1.5rem;border-top:1px solid var(--line)}
.filters b{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
  margin-right:.3rem}
.fchip{background:none;border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;
  font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer;min-height:40px}
.fchip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}

/* Iga treeningkoht on nüüd oma lehel, seega kõik .club plokid on nähtavad. */
.club-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  min-height:280px;display:flex;align-items:flex-end;padding:1.75rem}
.club-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.club-hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,12,18,.25),rgba(10,12,18,.92))}
.club-hero h1,.club-hero h2{font-size:clamp(2rem,5.5vw,3.2rem)}
.club-hero .club-meta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.75rem;font-size:.88rem;
  color:rgba(255,255,255,.88)}
.club-cols{display:grid;gap:1.5rem;margin-top:1.5rem;min-width:0}
.club-cols>*{min-width:0}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl caption{text-align:left;font-family:var(--display);font-size:1.3rem;text-transform:uppercase;
  padding-bottom:.85rem}
.tbl th{text-align:left;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;padding:.55rem .7rem;border-bottom:1px solid var(--line-strong)}
.tbl td{padding:.7rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
.tbl td:nth-child(2),.tbl td:nth-child(3){font-variant-numeric:tabular-nums;color:var(--muted)}
.badge{display:inline-block;font-size:max(.75rem,12px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .45rem;border-radius:4px;
  background:var(--badge-bg);color:var(--badge-fg)}
.badge.adv{background:var(--accent-soft);color:var(--accent-ink)}
/* Hinnakirja kehtivuse silt pealkirja kõrval (Hinnad-lehe päis). Silt, mitte
   eraldi rida: jääb korrektseks ka pärast jõustumist, sest hinnakirjal ongi
   kehtivusaeg. Kitsal ekraanil kukub pealkirja alla omale reale. */
.kv-badge{display:inline-block;font-size:max(.75rem,12px);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;background:var(--brand-tint);
  color:var(--accent-ink);padding:.3rem .65rem;border-radius:6px;
  vertical-align:.5rem;margin-left:.6rem;white-space:nowrap}
@media (max-width:560px){.kv-badge{display:block;width:fit-content;
  margin:.6rem 0 0;vertical-align:baseline}}
.aside{display:flex;flex-direction:column;gap:1.15rem}
/* Raam on vaikimisi must ja muutub hiire all siniseks. Enne oli see hall
   (--line-strong) ja Sikupilli kaardil oli sinine raam kõvasti sisse kirjutatud,
   ehk üks kaart oli püsivalt esile tõstetud ilma et miski oleks öelnud miks.
   Omanik luges seda veaks. Nüüd on kõik kolm ühesugused ja sinine tähendab
   ainult üht asja: hiir on peal. */
.pricebox{background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--pricebox-line);border-radius:var(--r);padding:1.5rem;
  transition:border-color .18s ease}
.pricebox:hover{border-color:var(--accent)}
.pricebox .price{font-size:2.6rem}
.pricebox ul{list-style:none;padding:0;margin:1rem 0 1.25rem;display:flex;
  flex-direction:column;gap:.5rem;font-size:.87rem;color:var(--muted)}
.pricebox li::before{content:'✓';color:var(--ok);font-weight:700;margin-right:.5rem}
.mapbox{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
/* Päris kaart, OpenStreetMap. Sama kõrgussuhe, mis oli varem hallil kohatäitel,
   seega paigutus ei nihku. loading="lazy" hoiab ära selle, et kaart laeks enne,
   kui kasutaja sinna kerib. */
.mapframe{display:block;width:100%;aspect-ratio:16/10;border:0;background:var(--surface-2)}
/* Vana hall kohatäide. Jäetud alles juhuks, kui mõni leht seda veel kasutab. */
.mapstub{aspect-ratio:16/10;display:grid;place-items:center;gap:.4rem;text-align:center;
  background:repeating-linear-gradient(45deg,var(--map-1) 0 12px,var(--map-2) 12px 24px);color:var(--muted-2);
  font-size:.8rem}
.mapstub b{font-family:var(--display);font-size:1.1rem;color:var(--muted);text-transform:uppercase}
.mapbox .mapfoot{padding:.9rem 1.1rem;display:flex;justify-content:space-between;
  align-items:center;gap:.75rem;font-size:.85rem}

/* ---------- HINNAD ---------- */
.join{display:grid;gap:1.5rem;background:var(--invert-bg);color:var(--invert-fg);
  border:1px solid var(--on-dark-line);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.5rem)}
.join .price{font-size:clamp(2.8rem,8vw,4rem)}
/* Hele variant: taust on hele, seega tekst ja nupp jäävad paleti tavavärvidesse. */
.join-light{background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border-color:var(--line-strong);color:var(--text)}
.join ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:.95rem}
.join li{display:flex;gap:.6rem;align-items:flex-start}
.join li::before{content:'✓';flex:0 0 auto;font-weight:700;color:var(--ok)}
.ptable{width:100%;border-collapse:collapse;font-size:.95rem}
.ptable caption{text-align:left;font-family:var(--display);font-size:1.5rem;
  text-transform:uppercase;padding-bottom:.3rem}
.ptable th{text-align:left;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;padding:.6rem .8rem;
  border-bottom:1px solid var(--line-strong)}
.ptable th:not(:first-child),.ptable td:not(:first-child){text-align:right}
.ptable td{padding:.85rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable tr:last-child td{border-bottom:0}
.ptable td:first-child{font-weight:600}
.ptable .pm{font-family:var(--display);font-size:1.5rem;line-height:1;
  font-variant-numeric:tabular-nums}
.ptable .py{font-variant-numeric:tabular-nums;color:var(--muted)}
.ptable .sub{display:block;font-size:.78rem;color:var(--muted-2);font-weight:400}
/* Kahe hinnaga tabel (Sikupilli, Lasnamäe): kuumakse ja õppeaasta samas lahtris,
   sest veerud on juba kahe hinna vahel ära jagatud. .pgrp hoiab need mobiilivaates
   ühe flex-elemendina koos, muidu laotaks td::before silt need laiali.
   .pdim tuhmistab tavahinna — SEE EI OLE läbikriipsutus (<s>), sest tavahind kehtib
   praegu neile, kes toetust kinnitanud ei ole, see ei ole vana hind. */
.ptable .pgrp{display:inline-block;text-align:right}
/* .p2 = kahe hinnaga tabel (Sikupilli, Lasnamäe). Tal on kolm veergu ja kaks suurt
   numbrit, seega poolel laiusel mahub ta ära alles siis, kui aken on lai. Kuni
   1080px-ni laotame read laiali (silt vasakul, hind paremal) — nii ei lõiku veerg
   ära ega teki keskele tühja auku. Tavalisel hinnatabelil on see piir 520px.
   Kaks korda proovitud: täislaiuses kaardid (0.5.77) nägid Regina hinnangul
   "laiad ja imelikud" välja, sest kolm veergu venisid 1180px peale laiali. */
@media (max-width:1079px){
  .ptable.p2 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ptable.p2 tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .ptable.p2 tr:last-child{border-bottom:0}
  .ptable.p2 td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    border:0;padding:.35rem 0;text-align:right}
  .ptable.p2 td::before{content:attr(data-l);font-size:.7rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--muted-2);font-weight:700;text-align:left}
  .ptable.p2 td:first-child{display:block;text-align:left;padding-bottom:.5rem}
  .ptable.p2 td:first-child::before{display:none}
}
.ptable .pyr{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ptable .pm.pdim{color:var(--muted)}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;overflow-x:auto}
.pcard.hl{border-color:var(--accent)}
.disc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.disc .tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ok);background:rgba(63,168,96,.16);padding:.25rem .55rem;
  border-radius:4px;margin-bottom:.8rem}
.disc h3{font-size:1.25rem;margin-bottom:.5rem}
.disc p{font-size:.9rem;color:var(--muted)}
/* Võistluste treeneritasu hinnaplaadid. Tavaline .fees loend venis täislaiuses
   kaardis kohmakaks: kolm lühikest rida 1180 px laiuselt ja hind riigi nimest
   kaugel. Plaadid on sama motiiv mis hinnad mujal lehel. Regina valik 07.08.2026. */
.vfee-tiles{display:grid;gap:.9rem;margin-top:1.1rem}
@media (min-width:640px){.vfee-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vfee{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.1rem 1.1rem}
.vfee small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;margin-bottom:.35rem}
.vfee b{font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--text)}
.vfee .vfee-txt{font-size:1.02rem;font-weight:700;line-height:1.7rem}

.fees{display:grid;gap:.6rem;list-style:none;padding:0;margin:0}
.fees li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.fees li:last-child{border-bottom:0}
.fees b{font-family:var(--display);font-size:1.2rem;font-variant-numeric:tabular-nums}
.terms{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.terms li{position:relative;padding-left:1.6rem;font-size:.92rem;color:var(--muted)}
.terms li::before{content:'';position:absolute;left:0;top:.55rem;width:8px;height:8px;
  border-radius:50%;background:var(--brand-bright)}
.terms b{color:var(--text)}

/* ---------- juhataja rida (klassinimi .mgr jäi ajaloolisest nimest) ----------
   Artjom ei ole treener, seega ta ei kuulu kaardiritta. Aga ta on sektsioonis esimene,
   sest liitumine käib tema kaudu. Rida on täislaiuses ja seepärast peab paremal pool
   olema sisu, muidu näeb ta välja nagu laiaks venitatud väike kaart. */
.mgr{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.35rem;margin-bottom:1.15rem}
.mgr-av{width:56px;height:56px;border-radius:50%;flex:0 0 56px;display:grid;
  place-items:center;background:var(--badge-bg);font-family:var(--display);
  font-size:1.3rem;color:var(--badge-fg);overflow:hidden}
.mgr-av img{width:100%;height:100%;object-fit:cover}
.mgr-txt{flex:1 1 240px;min-width:0}
.mgr-txt .eyebrow{margin-bottom:.2rem}
.mgr-txt h3{font-size:1.12rem;margin:0 0 .15rem}
.mgr-txt p{font-size:.86rem;color:var(--muted);margin:0}
.mgr-act{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
@media (max-width:620px){.mgr-act{margin-left:0;width:100%}
  .mgr-act .btn{flex:1 1 auto;justify-content:center}}

/* ---------- WordPressi redaktori sisu ----------
   .prose on see, mille sisse läheb the_content(): iga uudispostitus ja iga leht,
   millel oma templatet ei ole (page.php, index.php, 404.php).
   Ilma nende reegliteta kehtivad seal globaalsed resetid: a{color:inherit;
   text-decoration:none} teeb redaktoris kirjutatud lingid nähtamatuks (kontrast
   lingi ja teksti vahel 1:1) ja p{margin:0} liidab lõigud üheks plokiks.
   Skoop on meelega kitsas, et ülejäänud leht ei muutuks. */
.prose p{margin:0 0 1rem}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--brand)}
.prose h2,.prose h3,.prose h4{margin:1.8rem 0 .7rem}
.prose ul,.prose ol{margin:0 0 1rem 1.25rem}
.prose li{margin-bottom:.35rem}
.prose img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.prose blockquote{margin:1.2rem 0;padding-left:1rem;border-left:3px solid var(--accent)}

/* ── Üksik uudis ────────────────────────────────────────────────────────
   Lugemislaius on piiratud sisul, mitte ümbrisel. Kui piirata ümbrist, siis
   .wrap margin-inline:auto tsentreerib kitsama kasti ja tekst nihkub
   pealkirja alt paremale. Sama viga oli klubireeglite lehel. */
/* Laius rem'ides, mitte ch'ides. ch sõltub elemendi enda fondist ja .prose on
   siin 1.02rem, seega pilt ja tekst tulid 14 px erineva laiusega ning serv ei
   olnud sirge. rem annab mõlemale sama mõõdu. */
.uudis > *{max-width:44rem}
/* Ilma max-width'ita, meelega: .uudis > * annab 68ch ja need kaks selektorit on
   sama kaaluga, ehk hilisem võidaks. Pilt jääks tekstist 380 px laiemaks ja see
   näeks välja nagu viga, mitte valik. */
.uudis-pilt{margin-bottom:1.75rem;border-radius:var(--r);overflow:hidden}
.uudis-pilt img{display:block;width:100%;height:auto}
.uudis .prose{font-size:1.02rem;line-height:1.7}
.uudis-allikas{margin-top:1.75rem;font-size:.87rem;color:var(--muted-2)}
.uudis-allikas a{color:var(--accent-ink);font-weight:600}
.uudis-jalus{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.single .news-date{margin-bottom:.35rem}

/* ---------- "tuleb varsti" plokk ----------
   Kasutusel siis, kui saali ajakava ei ole veel paigas. Asendab .tbl tabelit,
   et leht ei näitaks vanu või oletatud kellaaegu. Vt inc/klubid/viimsi.php */
.tulemas{background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);padding:1.35rem 1.5rem}
.tulemas-h{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;
  font-size:1.15rem;font-weight:600;margin:0 0 .6rem}
.tulemas p{color:var(--muted);margin:0 0 .8rem;max-width:52ch}
.tulemas .btn{margin-top:.35rem}

/* ---------- mockupi märkus ---------- */
.note{background:var(--accent-soft);border:1px dashed var(--accent);
  border-radius:var(--r);padding:1rem 1.15rem;font-size:.84rem;color:var(--text);margin-top:1.5rem}
.note b{color:var(--text)}

/* ============================================================
   RESPONSIIVSUS — mobiil on vaikimisi, ülespoole laiendame
   ============================================================ */

/* Kitsal ekraanil laotame graafikutabeli ridadeks laiali.
   Nii ei teki horisontaalset kerimist ega lõigata veerge ära. */
@media (max-width:719px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl caption{padding-bottom:.6rem}
  .tbl tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    border:0;padding:.2rem 0;text-align:right}
  .tbl td::before{content:attr(data-l);font-size:.68rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--muted-2);font-weight:700;text-align:left;flex:0 0 auto}
  .tbl td:first-child{display:block;text-align:left;font-family:var(--display);
    font-size:1.25rem;text-transform:uppercase;padding-bottom:.45rem}
  .tbl td:first-child::before{display:none}
}

@media (max-width:519px){
  /* Hinnatabel ei mahu 320px ekraanile. Peidetud horisontaalkerimise asemel
     laotame read laiali, nagu graafikutabel juba teeb. */
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ptable tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .ptable tr:last-child{border-bottom:0}
  .ptable td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    border:0;padding:.2rem 0;text-align:right}
  .ptable td::before{content:attr(data-l);font-size:.7rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--muted-2);font-weight:700;text-align:left}
  .ptable td:first-child{display:block;text-align:left;padding-bottom:.5rem}
  .ptable td:first-child::before{display:none}
  .pcard{overflow-x:visible}
}
@media (min-width:520px){
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:760px){
  .join{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,3rem)}
}
@media (min-width:600px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .hero-facts{grid-template-columns:repeat(4,1fr)}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .mosaic a:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:1}
  .social-in{grid-template-columns:1.1fr 1fr;align-items:center}
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .nav{display:flex}
  .hdr-cta{display:flex}
  .burger{display:none}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
  .mbar{display:none}
  body{padding-bottom:0}
  .club-cols{grid-template-columns:1.55fr .95fr}
  .ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .hero-facts{max-width:820px}
  .head-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:end}
  .head-row>.btn{justify-self:end;width:max-content}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ── WPFormsi vorm meie kujunduses ─────────────────────────────────────
   Vorm elab .cform kastis, seega input/select/textarea saavad meie
   stiili juba ülalt. Siin on ainult see, mida WPForms omamoodi nimetab. */
.cform .wpforms-container{margin:0}
.cform .wpforms-container .wpforms-form{display:grid;gap:1rem}
.cform .wpforms-field{padding:0;display:grid;gap:.35rem;max-width:none}
.cform .wpforms-field-label{font-size:max(.82rem,13px);font-weight:600;color:var(--text);
  display:block;margin:0}
.cform .wpforms-required-label{color:var(--accent-ink);text-decoration:none}
.cform .wpforms-field-sublabel,.cform .wpforms-field-description{
  font-size:max(.78rem,12px);color:var(--muted-2);margin:0}
.cform .wpforms-field-medium,.cform .wpforms-field-large{max-width:none;width:100%}
.cform .wpforms-submit-container{padding:0;margin:0}
.cform button.wpforms-submit{display:inline-flex;align-items:center;justify-content:center;
  gap:.55rem;font-family:var(--display);font-size:1.05rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;padding:.85rem 1.6rem;
  border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;min-height:48px;
  background:var(--cta-bg);color:var(--cta-fg);width:100%;
  transition:background .16s ease}
.cform button.wpforms-submit:hover{background:var(--cta-hover)}
.cform button.wpforms-submit:focus-visible{outline:3px solid var(--brand-bright);
  outline-offset:2px}
.cform .wpforms-error{color:#8A1B1B;font-size:max(.8rem,12px)}
.cform .wpforms-confirmation-container-full{background:var(--brand-tint);
  border:1px solid var(--brand);border-radius:var(--r-sm);padding:1rem;color:var(--text)}

/* ── WPFormsi väljade paigutus kahte veergu, nagu kinnitatud kujunduses ──
   Vorm ise on juba meie stiilis (taust, piir, raadius, font tulevad ülalt).
   Siin on ainult paigutus: lühikesed väljad kõrvuti, tekstiala ja valikud
   üle terve laiuse. Mobiilis kõik ühes veerus. */
.cform .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cform .wpforms-field{align-content:start}
.cform .wpforms-field-name,
.cform .wpforms-field-textarea,
.cform .wpforms-field-radio,
.cform .wpforms-field-checkbox,
.cform .wpforms-field-gdpr-checkbox{grid-column:1 / -1}
@media (max-width:620px){
  .cform .wpforms-field-container{grid-template-columns:1fr}
}
/* Turnstile'i kast vasakule ja veidi õhku ümber */
.cform .wpforms-recaptcha-container{margin:.25rem 0 0}
.cform .wpforms-recaptcha-container iframe{max-width:100%}
/* Turnstile maha võetud → tühi konteiner ei tohi vahet jätta */
.cform .wpforms-recaptcha-container:empty{display:none}

/* ── Spetsiifilisus: WPFormsi baas-CSS laeb meie omast HILJEM ────────────
   Seetõttu ei piisa `.cform .wpforms-field`, vaid vaja on ühe klassi võrra
   täpsemat valijat. WPFormsi enda reegel on
   `div.wpforms-container-full .wpforms-form .wpforms-field{padding:15px 0}`,
   mis tekitas väljade vahele 46 px õhku (15 + 16 + 15). Mõõdetud brauseris:
   selle plokiga jääb vahe 17 px ja vorm kahaneb 545 px → 431 px. */
.cform .wpforms-container .wpforms-form .wpforms-field{padding:0}
.cform .wpforms-container .wpforms-form .wpforms-field-container{gap:1.1rem}
.cform .wpforms-container .wpforms-form input,
.cform .wpforms-container .wpforms-form select,
.cform .wpforms-container .wpforms-form textarea{min-height:48px}
.cform .wpforms-container .wpforms-form textarea{min-height:120px}
.cform .wpforms-container .wpforms-form .wpforms-submit-container{padding:0;margin:0}

/* ── Vormi kinnitus pärast saatmist ─────────────────────────────────────
   Katan mõlemad klassinimed, mida WPForms eri versioonides kasutab.
   Eesmärk: teade istub kaardis tihedalt, mitte suures tühjuses. */
.cform .wpforms-confirmation-container,
.cform .wpforms-confirmation-container-full{
  background:var(--brand-tint);border:1px solid var(--brand);
  border-radius:var(--r-sm);padding:1rem 1.15rem;margin:0}
.cform .wpforms-confirmation-container p,
.cform .wpforms-confirmation-container-full p{margin:0}
.cform .wpforms-container:has(.wpforms-confirmation-container) .wpforms-form,
.cform .wpforms-container:has(.wpforms-confirmation-container-full) .wpforms-form{display:none}

/* Pärast saatmist ei ole all olevat märkust enam vaja, teade ütleb sama. */
.cform:has(.wpforms-confirmation-container) > p.small,
.cform:has(.wpforms-confirmation-container-full) > p.small{display:none}

/* ── Badge tumedal taustal ────────────────────────────────────────────────
   Tumedas kontekstis (.hero, .club-hero, .ftr jne) defineeritakse token
   --accent-ink heledaks, sest seal on tekst valge. Badge taust jääb aga
   heledaks, mistõttu tekkis helesinine tekst helesinisel taustal:
   MÕÕDETUD KONTRAST 1,20:1, WCAG nõue on 4,5:1. Siin määrame värvid otse. */
.hero .badge,.club-hero .badge,.join:not(.join-light) .badge,.on-dark .badge{
  background:#FFFFFF;color:#0B3E8F}
/* Võistlusgrupi silt oli saali hero'l kahvatu (#DCE9FD tumesinise tekstiga), aga
   saalikaardil on ta .venue-tag ehk täis klubisinine valge tekstiga. Üks ja sama asi
   nägi kahes kohas eri moodi välja. Nüüd mõlemad täis sinised. Valge #105DDE peal on
   5,7:1, mis läheb 12 px rasvase kirja juures AA-st läbi. */
.hero .badge.adv,.club-hero .badge.adv,.join:not(.join-light) .badge.adv,.on-dark .badge.adv{
  background:var(--accent);color:#FFFFFF}

/* Treenerite ruudustik. Kaart on pikali: foto vasakul kitsas ribas, tekst kõrval.

   Varem oli siin kuus kaarti ühel real (omaniku soov 01.08.2026). See käis kokku
   35 tähemärgi pikkuse tekstiga. Nüüd on kaardil vana lehe tutvustus, ligi 300
   tähemärki, ja 178 px laiuses veerus muutus see loetamatuks püstribaks: umbes
   20 tähemärki reas, 14 rida järjest. Regina valik 06.08.2026.

   Mõõdetud 1400 px ekraanil: kaart 265 px kõrge (varem ligi 900), terve plokk
   810 px. Alla 600 px läheb kaart tagasi püsti, foto peale ja tekst alla. */
.grid.g-auto{grid-template-columns:1fr}
@media (min-width:600px){
  .g-auto .coach{display:grid;grid-template-columns:150px minmax(0,1fr)}
  /* aspect-ratio maha, et fotoriba venuks kaardi kõrgusega kaasa. Ruudukujuline
     foto kärbitakse siin object-fit:cover'iga külgedelt, vt docs/fotode-brief.md */
  .g-auto .coach-ph{aspect-ratio:auto}
  .g-auto .coach-ph b{font-size:2.4rem}
  /* Ühe veeru vahemikus (600–1079 px) on kaart peaaegu terve lehe laiune ja rida
     venis 110 tähemärgini. Loetav rida on 45–90, seega paneme tekstile lae.
     rem, mitte ch: ch sõltub elemendi enda kirjasuurusest ja see on siin 0.83rem,
     ehk ch annaks vale tulemuse. */
  .g-auto .coach-body p{max-width:32rem}
}
@media (min-width:1080px){.grid.g-auto{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Jaluse liitude logod on nüüd lingid ────────────────────────────────
   Vanalt lehelt võetud aadressid. NB: vana leht viitas World Taekwondo
   puhul /index.html peale, mis annab nüüd 400 — kasutame puhast juurt. */
/* Alus on jaluse enda toonist pisut heledam, mitte valge. Valged kastid mõjusid
   tumedas jaluses kleepsudena. Logo ise värvitakse valgeks, mis on läbipaistvate
   PNG-de puhul võimalik: kõik kolm faili on 75–81% ulatuses läbipaistvad. */
.partners a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:10px;
  height:58px;padding:.5rem;transition:background .16s ease,border-color .16s ease}
.partners a img{display:block;width:auto;max-width:100%;max-height:28px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.82;transition:opacity .16s ease}
/* Ruudukujuline märk mõjub sama kõrguse juures väiksemana kui lai sõnamärk,
   seetõttu on EOK-l pisut rohkem kõrgust. */
.partners a img[width="150"]{max-height:36px}
.partners a:hover,.partners a:focus-visible{background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.28)}
.partners a:hover img,.partners a:focus-visible img{opacity:1}
.partners a:focus-visible{outline:3px solid var(--brand-bright);outline-offset:3px}

/* ── Hinnad-lehe kastid käituvad nagu saalikaardid ──────────────────────
   Sama muster mis .venue:hover — sinine piir, kerge tõus, sügavam vari.
   Ei laiene .join kastile, sest seal on nupud sees ja terve kasti tõstmine
   ajaks segadusse, kuhu vajutada tuleb. */
.pcard,.disc{transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.pcard:hover,.disc:hover{border-color:var(--brand);transform:translateY(-4px);
  box-shadow:0 22px 48px -20px rgba(16,23,32,.34)}

/* ── Saalilehe hinnakaardi kaks sammu ───────────────────────────────────
   Enne oli kaardis kaks nuppu üksteise all: must "Registreeri proovitrenni"
   ja kontuurnupp "Kõik hinnad". Juurde tuli liitumine, ja kolm nuppu järjest
   oleks tähendanud kahte ühesugust kontuurnuppu, millest kumbki ei ütle,
   kumb on tegevus ja kumb navigeerimine. "Kõik hinnad" võeti kaardilt maha
   (menüüs ja jaluses on ta olemas) ning alles jäänud kaks tegevust said
   numbrid, sest need EI OLE alternatiivid: proovitrenn tuleb enne.

   Must täidis jääb ainult sammule 1 — reegel "täpselt üks selline nupp
   vaates" kehtib edasi. Number tuleb CSS-loenduriga, mitte HTML-ist, et
   sammude järjekord ei saaks failides sassi minna. */
.pb-sep{border:0;border-top:1px solid var(--line);margin:1.15rem 0 1rem}
.pb-steps{list-style:none;counter-reset:samm;padding:0;margin:0}
.pb-steps li{counter-increment:samm;position:relative;padding-left:2.1rem;
  margin-bottom:1rem}
.pb-steps li:last-child{margin-bottom:0}
.pb-steps li::before{content:counter(samm);position:absolute;left:0;top:.05rem;
  width:1.4rem;height:1.4rem;border-radius:50%;
  background:var(--brand-tint);color:var(--brand-deep);
  font-family:var(--display);font-weight:700;font-size:.88rem;
  display:flex;align-items:center;justify-content:center}
.pb-steps p{font-size:.85rem;line-height:1.45;color:var(--muted);margin:0 0 .55rem}
.pb-steps .btn{width:100%}