/* ============================================================
   119 MMA — styly pro podstránky (Lekce, Rozpisy…)
   Sdílí design hlavního webu: Saira / Saira Condensed, červená #ff0000.
   ============================================================ */

/* ============================== TOKENS ============================== */
:root{
  --bg:#0a0a0b;
  --bg-2:#0f0f11;
  --bg-3:#141417;
  --surface:#1a1a1e;
  --surface-2:#202026;
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.14);
  --text:#f2efe9;
  --muted:#97969d;
  --muted-2:#6f6e75;
  --accent:#ff0000;
  --accent-d:#cc0000;
  --accent-glow:rgba(255,0,0,0.35);
  --gold:#c8a24c;
  --head:'Saira Condensed', sans-serif;
  --cond:'Saira Condensed', sans-serif;
  --body:'Saira', sans-serif;
  --jp:'Noto Serif JP', serif;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
:root{color-scheme:dark;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
section{scroll-margin-top:118px;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--accent);color:#fff;}

h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.12;letter-spacing:-0.01em;text-transform:uppercase;padding-top:0.06em;}

/* shared layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;
  letter-spacing:.28em;font-size:.82rem;color:var(--accent);
  display:inline-flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--accent);display:inline-block;}
.pad{padding:120px 0;}

.btn{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:1rem;padding:16px 34px;border:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:.6rem;transition:all .25s var(--ease);position:relative;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent-glow);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--accent);color:#fff;background:rgba(216,35,47,0.08);}

/* placeholder image system */
.ph{position:relative;overflow:hidden;background:#111114;isolation:isolate;}
.ph::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0.022) 0 12px,transparent 12px 24px);
}
.ph .ph-label{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:.4rem;
  align-items:center;justify-content:center;text-align:center;padding:1rem;
  font-family:'Courier New',monospace;font-size:.72rem;color:rgba(255,255,255,.26);
  letter-spacing:.06em;line-height:1.5;text-transform:uppercase;
}
.ph .ph-label svg{width:26px;height:26px;opacity:.4;}
.ph img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;}

/* reveal — gated behind .js so content stays visible if JS is off/fails */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js .reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .js .reveal{opacity:1 !important;transform:none !important;}
  .wa-fab::after{animation:none !important;}
}

/* ============================== HEADER ============================== */
header{
  position:fixed;top:0;left:0;right:0;z-index:90;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
header.scrolled{background:rgba(10,10,11,0.86);backdrop-filter:blur(14px);border-bottom-color:var(--line);}
.topbar{background:#08080a;border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;align-items:center;justify-content:flex-end;gap:26px;height:38px;}
.topbar a{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--muted);transition:color .2s;}
.topbar a:hover{color:var(--text);}
.topbar a svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.logo{display:flex;align-items:center;}
.logo img{height:58px;width:auto;display:block;transition:transform .25s var(--ease);}
.logo:hover img{transform:scale(1.05);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:.95rem;color:var(--muted);transition:color .2s;position:relative;padding:4px 0;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .25s var(--ease);}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:16px;}
.nav-cta .btn{padding:12px 24px;font-size:.92rem;}
.burger{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:6px;}
.burger svg{width:30px;height:30px;}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:95;background:rgba(8,8,9,0.98);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;padding:90px 32px 40px;gap:6px;
  transform:translateX(100%);transition:transform .4s var(--ease);
}
.drawer.open{transform:none;}
.drawer a{font-family:var(--head);font-weight:600;text-transform:uppercase;font-size:1.7rem;color:var(--text);padding:12px 0;border-bottom:1px solid var(--line);letter-spacing:.01em;}
.drawer a .num{font-family:'Courier New',monospace;font-size:.8rem;color:var(--accent);margin-right:14px;}
.drawer .btn{margin-top:24px;justify-content:center;}
.drawer-close{position:absolute;top:24px;right:24px;background:none;border:none;color:var(--text);cursor:pointer;}
.drawer-close svg{width:30px;height:30px;}

/* ============================== PAGE HERO ============================== */
.page-hero{position:relative;padding:188px 0 70px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg-2);}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,11,0.55) 0%,rgba(10,10,11,0.32) 24%,transparent 56%),
             linear-gradient(180deg,transparent 60%,var(--bg) 100%);
}
.page-hero .ph-bg{position:absolute;inset:0;z-index:0;opacity:.32;}
.page-hero .ph-bg img{filter:grayscale(1) contrast(1.08) brightness(.7);}
.page-hero .ph-bg::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,0.5);}
.page-hero-inner{position:relative;z-index:2;max-width:820px;}
.page-hero .ghost{
  position:absolute;z-index:1;right:-2vw;top:34%;font-family:var(--head);font-weight:700;
  font-size:34vh;line-height:.8;color:rgba(255,255,255,0.025);letter-spacing:-0.04em;
  pointer-events:none;user-select:none;
}
.page-hero h1{font-size:clamp(2.8rem,7vw,5rem);font-weight:700;letter-spacing:-0.02em;margin:20px 0 0;text-wrap:balance;}
.page-hero h1 em{font-style:normal;color:var(--accent);}
.page-hero .lead{color:var(--muted);font-size:1.16rem;max-width:600px;margin:24px 0 0;}
.page-hero .crumbs{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:var(--muted-2);margin-bottom:6px;display:flex;gap:10px;align-items:center;}
.page-hero .crumbs a:hover{color:var(--accent);}
.page-hero .crumbs span{color:var(--accent);}

/* in-page jump nav */
.jumpnav{position:sticky;top:112px;z-index:40;background:rgba(10,10,11,0.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.jumpnav-inner{display:flex;gap:8px;overflow-x:auto;padding:14px 24px;max-width:var(--maxw);margin:0 auto;scrollbar-width:none;}
.jumpnav-inner::-webkit-scrollbar{display:none;}
.jumpnav a{
  flex-shrink:0;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:.86rem;color:var(--muted);padding:9px 18px;border:1px solid var(--line);transition:all .2s var(--ease);white-space:nowrap;
}
.jumpnav a:hover,.jumpnav a.active{color:#fff;border-color:var(--accent);background:rgba(255,0,0,0.08);}

/* ============================== LESSON BLOCKS ============================== */
.lessons{background:var(--bg);}
.lesson{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:96px 0;border-bottom:1px solid var(--line);scroll-margin-top:188px;
}
.lesson:first-child{padding-top:84px;}
.lesson:last-child{border-bottom:none;}
.lesson-media{position:relative;align-self:stretch;display:flex;}
.lesson-media .ph{flex:1;min-height:360px;}
.lesson-media .ph img{filter:grayscale(0.15) contrast(1.04);}
.lesson-media .idx{display:none;}
.lesson-media .tag{display:none;}
.lesson.rev .lesson-media{order:2;}
.lesson.rev .lesson-body{order:1;}
.lesson-body .kicker{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:.82rem;color:var(--accent);}
.lesson-body h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:14px 0 0;}
.lesson-body .perex{color:var(--text);font-size:1.12rem;margin-top:20px;}
.lesson-body .desc{color:var(--muted);font-size:1.02rem;margin-top:16px;}
.lesson-points{display:none;}
.lesson-points li{position:relative;padding-left:30px;color:var(--muted);font-size:.98rem;line-height:1.5;}
.lesson-points li svg{position:absolute;left:0;top:2px;width:18px;height:18px;color:var(--accent);}
.lesson-points li b{color:var(--text);font-weight:600;display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;}
.lesson-foot{display:none;}
.lesson-foot .meta{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.84rem;color:var(--muted-2);}
.lesson-foot .meta b{color:var(--text);}

/* CTA band */
.cta-band{background:linear-gradient(100deg,#13070a 0%,#1a0a0d 34%,var(--bg) 74%);border-top:1px solid var(--line);}
.cta-band-inner{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;padding:74px 0;}
.cta-band h2{font-size:clamp(2rem,5vw,3.4rem);max-width:680px;}
.cta-band p{color:var(--muted);margin-top:14px;max-width:560px;}

/* ============================== FOOTER ============================== */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:70px 0 30px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:50px;}
.foot-brand .logo{margin-bottom:18px;}
.foot-brand p{color:var(--muted);font-size:.96rem;max-width:300px;}
.foot-col h4{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.9rem;color:var(--muted-2);margin-bottom:18px;}
.foot-col a{display:block;color:var(--muted);font-size:.96rem;padding:6px 0;transition:color .2s;}
.foot-col a:hover{color:var(--accent);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;border-top:1px solid var(--line);color:var(--muted-2);font-size:.85rem;}
.foot-bottom a{color:var(--muted);}
.foot-social{display:flex;gap:12px;}
.foot-social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:all .2s;}
.foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
.foot-social svg{width:16px;height:16px;}

/* ============================== WHATSAPP FAB ============================== */
.wa-fab{position:fixed;bottom:26px;right:26px;z-index:80;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,0.5);transition:transform .25s var(--ease);animation:wa-pop .5s var(--ease) .8s both;}
.wa-fab:hover{transform:scale(1.08);}
.wa-fab svg{width:32px;height:32px;color:#04231a;}
.wa-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:wa-ring 2.4s ease-out infinite;}
@keyframes wa-ring{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.6);opacity:0;}}
@keyframes wa-pop{from{transform:scale(0);}to{transform:scale(1);}}

/* ============================== COOKIE BANNER ============================== */
.cookie{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--surface);border-top:2px solid var(--accent);padding:22px 24px;transform:translateY(120%);transition:transform .5s var(--ease);}
.cookie.show{transform:none;}
.cookie-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
.cookie-text{flex:1;min-width:280px;color:var(--muted);font-size:.92rem;line-height:1.55;}
.cookie-text b{color:var(--text);font-family:var(--head);text-transform:uppercase;font-size:1rem;display:block;margin-bottom:5px;}
.cookie-text a{color:var(--accent);text-decoration:underline;}
.cookie-btns{display:flex;gap:12px;flex-wrap:wrap;}
.cookie-btns .btn{padding:12px 24px;font-size:.88rem;}

/* ============================== RESPONSIVE ============================== */
@media(max-width:1040px){
  .nav-links{display:none;}
  .nav-cta .btn{display:none;}
  .burger{display:block;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px;}
}
@media(max-width:860px){
  .lesson{grid-template-columns:1fr;gap:34px;padding:70px 0;}
  .lesson.rev .lesson-media{order:0;}
  .lesson.rev .lesson-body{order:0;}
  .lesson-media .ph{aspect-ratio:16/10;}
  .jumpnav{top:104px;}
}
@media(max-width:560px){
  body{font-size:16px;}
  .pad{padding:80px 0;}
  .wrap{padding:0 18px;}
  .page-hero{padding:150px 0 50px;}
  .lesson-points{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .cta-band-inner{padding:54px 0;}
  .topbar-inner{justify-content:center;gap:16px;height:auto;padding:8px 0;flex-wrap:wrap;}
  .topbar a{font-size:.76rem;letter-spacing:.04em;}
}