html{color-scheme:dark;scroll-behavior:smooth}
/* Cross-document page transitions (Chrome/Edge; others = instant nav) */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: no-preference){
/* Root pomaleji než míč — pozadí se vymění pod letem, ne jako ostrý cut */
::view-transition-old(root){
animation: ms-vt-fade-out .55s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root){
animation: ms-vt-fade-in .6s cubic-bezier(.33,1,.36,1) both;
}
/* Shared míč — měkký let; na konci old vybledne přes živý míč.
Cílíme přes view-transition-class, ne přes výčet slugů: nový sport tak
funguje sám od sebe, stačí že šablona nastaví `view-transition-class:
ms-ball`. Dřív se tu slugy vypisovaly a jezdectví chybělo → míč se sice
zachytil jako shared element, ale nedostal žádný styl (hlavně `opacity:0`
na ::view-transition-new), takže prázdný snapshot zůstal viset.
Podpora: view-transition-class je Chrome 125+, cross-document VT
(@view-transition výš) až Chrome 126+ — kdo umí přechod, umí i třídu. */
::view-transition-group(.ms-ball){
z-index: 9999;
animation-duration: var(--ms-ball-vt-dur, .9s);
animation-timing-function: cubic-bezier(.32,.72,0,1);
animation-fill-mode: both;
isolation: isolate;
will-change: transform;
}
::view-transition-image-pair(.ms-ball){
isolation: isolate;
}
::view-transition-old(.ms-ball){
width: 100%;
height: 100%;
overflow: clip;
object-fit: fill;
object-position: center;
/* linear opacity = predvídatelný crossfade se živým míčem */
animation: ms-ball-old-land var(--ms-ball-vt-dur, .9s) linear both !important;
mix-blend-mode: normal;
}
/* New snapshot prázdný — live canvas crossfade pod old */
::view-transition-new(.ms-ball){
width: 100%;
height: 100%;
overflow: clip;
object-fit: fill;
object-position: center;
animation: none !important;
opacity: 0 !important;
mix-blend-mode: normal;
}
}
@media (prefers-reduced-motion: reduce){
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){
animation: none !important;
}
}
@keyframes ms-vt-fade-out{to{opacity:0}}
@keyframes ms-vt-fade-in{from{opacity:0}}
/*
Dopad bez blinku:
old drží 1 skoro celou dobu (live už je pod ním 1:1),
krátký měkký dissolve jen na samotném konci.
*/
@keyframes ms-ball-old-land{
0%,88%{opacity:1}
100%{opacity:0}
}
@keyframes ms-ball-live-crossfade{
from{opacity:0}
to{opacity:1}
}
:root{
--ms-ball-vt-dur:.9s;
--ms-ball-size:min(220px,42vw);
/* Sdílený look míče (rail = hero) */
--ms-ball-opacity:.88;
--ms-ball-shadow:drop-shadow(0 16px 20px rgba(0,0,0,.52)) drop-shadow(0 4px 10px rgba(0,0,0,.36));
--ms-ball-mask:radial-gradient(ellipse 72% 72% at 50% 48%, #000 42%, transparent 78%);
--accent:#e23d4a;--accent2:#3d8fd9;--ink:#f2e9eb;--muted:#a88890;
--bg:#100a0c;--bg-soft:#1a1014;--surface:#26181c;--surface-raised:#322024;
--border:#3a2428;--border-soft:#221418;
--header-bg:rgba(18,10,12,.92);--radius:14px;
--radius-squircle:40%;
--radius-chip:14px;
--shadow:0 4px 18px rgba(0,0,0,.4);
--btn-light-bg:#e8edf2;--btn-light-hover:#cfd9e3;
--scrollbar:rgba(255,255,255,.22);
--divider:rgba(255,255,255,.12);
--page-pad:clamp(16px,3vw,40px);
--fold-peek:clamp(220px, 32vh, 300px);
--hero-fold:calc(100svh - var(--fold-peek));
}
*{margin:0;padding:0;box-sizing:border-box}
body{
position:relative;
font-family:'Ubuntu',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);
line-height:1.55;
background:var(--bg);
}
/* Fixed ambient wash — stays put while content scrolls */
body::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:
radial-gradient(ellipse 95% 60% at 6% -8%, rgba(226,61,74,.36), transparent 62%),
radial-gradient(ellipse 75% 55% at 98% 16%, rgba(61,143,217,.22), transparent 58%),
radial-gradient(ellipse 85% 50% at 50% 108%, rgba(226,61,74,.22), transparent 62%),
linear-gradient(180deg, #100a0c 0%, #160c10 45%, #100a0c 100%);
}
h1,h2,h3{font-family:'Ubuntu',sans-serif}
a{color:inherit;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(226,61,74,.18)}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:100}
.skip-link:focus-visible{left:max(12px,env(safe-area-inset-left));outline:3px solid var(--accent2);outline-offset:2px}
h1,h2,h3{text-wrap:balance}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:none;margin:0 auto;padding:0 var(--page-pad)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* NAV — two floating pills */
header{
position:sticky;top:0;z-index:50;padding:12px var(--page-pad) 0;
background:linear-gradient(180deg,rgba(16,8,10,.72) 0%,rgba(16,8,10,.28) 62%,transparent 100%);
border:none;transition:transform .35s ease;will-change:transform;pointer-events:none;
}
header.hdr-hidden{transform:translateY(calc(-100% - 12px))}
header .header-bar{pointer-events:auto}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0 auto}
.nav-pill{
display:flex;align-items:center;gap:6px;min-height:54px;
padding:0 6px 0 14px;
background:rgba(232,237,242,.12);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
border:1px solid rgba(255,255,255,.28);border-radius:999px;
box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-pill--start{flex:0 1 auto;min-width:0;padding:0 8px 0 6px}
.nav-pill--end{flex:none;padding:0 6px 0 10px}
.navlink--logo{
font-weight:800;font-size:1.15rem;letter-spacing:-.55px;
padding:8px 12px;min-height:40px;color:#fff;
text-shadow:0 1px 10px rgba(0,0,0,.35),0 0 18px rgba(255,107,118,.22);
}
.navlink--logo:not(.is-lit){
color:#fff;
text-shadow:
0 1px 10px rgba(0,0,0,.4),
0 0 14px rgba(255,107,118,.28),
0 0 2px rgba(255,107,118,.35);
}
.navlink--logo span{
color:#ff6b76;
text-shadow:0 0 12px rgba(255,107,118,.55),0 1px 2px rgba(0,0,0,.35);
transition:color .15s ease,text-shadow .15s ease;
}
.navlink--logo.is-lit{
color:#fff;
text-shadow:0 1px 8px rgba(0,0,0,.35);
}
/* Tmavé „sporty“ až když blob na logu dojede (is-settled), ne hned na hover */
.navlink--logo.is-settled span{
color:#1a080a;
text-shadow:none;
}
.logo{
display:inline-flex;align-items:center;align-self:center;
height:40px;line-height:1;
font-weight:800;font-size:1.28rem;letter-spacing:-.55px;white-space:nowrap;flex:none;
padding:0 10px 0 4px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);transition:opacity .2s;
}
.logo span{color:#ff6b76;line-height:1}
.logo.is-home{opacity:1}
.logo:not(.is-home):hover{opacity:.88}
.nav-rail{display:flex;align-items:center;gap:4px;min-width:0;position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-rail::-webkit-scrollbar{display:none}
.nav-drawer{display:none}
.nav-indicator,.subtab-indicator{position:absolute;top:0;left:0;border-radius:999px;background:var(--accent);z-index:0;pointer-events:none;opacity:0;transition:left .32s cubic-bezier(.45,0,.2,1),width .32s cubic-bezier(.45,0,.2,1),top .32s cubic-bezier(.45,0,.2,1),height .32s cubic-bezier(.45,0,.2,1);will-change:left,width,top,height}
.navlink{display:inline-flex;align-items:center;font-weight:700;font-size:.95rem;padding:8px 14px;min-height:40px;border-radius:999px;white-space:nowrap;position:relative;z-index:1;background:transparent!important;color:rgba(255,255,255,.88);transition:color .22s;line-height:1}
.navlink:hover{color:#fff}
.navlink.active{color:#fff}
.navlink.is-lit{color:#fff}
.nav-divider{display:none}
.nav-toggle{display:none;flex:none;width:44px;height:44px;border:0;border-radius:var(--radius-squircle);corner-shape:squircle;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;transition:background-color .2s}
.nav-toggle:hover{background:rgba(255,255,255,.2)}
.nav-toggle-bar{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:45;background:rgba(6,18,30,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.nav-scrim[hidden]{display:none}
/* Rezervace — always a clear CTA in the end pill */
#navSecondary .navlink[href*="rezervace"],
#navSecondary .navlink[href*="reservation"]{
background:var(--accent)!important;color:#fff!important;
box-shadow:0 4px 14px rgba(226,61,74,.4);
}
#navSecondary .navlink[href*="rezervace"].is-lit,
#navSecondary .navlink[href*="reservation"].is-lit{color:#fff!important}
#navSecondary .nav-indicator{opacity:0!important}
@media(max-width:860px){
header{padding:8px 12px 0}
header.hdr-hidden{transform:translateY(calc(-100% - 8px))}
.header-bar{gap:8px}
.nav-pill--start{flex:1;min-height:50px;padding:0 8px 0 6px}
.nav-pill--end{min-height:50px;padding:0 4px 0 6px}
.nav-rail{display:none}
#navPrimary{
display:flex;align-items:center;flex:1;min-width:0;overflow:visible;
}
#navPrimary .navlink:not(.navlink--logo){display:none}
#navPrimary .nav-indicator,#navSecondary .nav-indicator{display:none}
.navlink--logo{font-size:1.1rem;padding:8px 10px}
.nav-toggle{display:flex}
.nav-drawer{
display:none;position:fixed;top:72px;left:12px;right:12px;z-index:55;
flex-direction:column;align-items:stretch;gap:4px;flex:none;overflow:visible;
background:var(--surface);border:1px solid var(--border);border-radius:18px;
box-shadow:var(--shadow),0 16px 48px rgba(0,0,0,.22);
padding:12px;max-height:calc(100dvh - 88px);overflow-y:auto;
pointer-events:auto;
}
.nav-group{display:flex;flex-direction:column;align-items:stretch;width:100%;overflow:visible}
body.nav-open .nav-drawer{display:flex}
.navlink{font-size:1rem;padding:12px 14px;border-radius:12px;color:var(--ink)}
.navlink:hover{color:var(--accent)}
.navlink.is-lit{color:#fff}
#navSecondary .navlink[href*="rezervace"],
#navSecondary .navlink[href*="reservation"]{background:transparent!important;box-shadow:none}
.nav-drawer .navlink[href*="rezervace"],
.nav-drawer .navlink[href*="reservation"]{
background:var(--accent)!important;color:#fff!important;border-radius:12px;
box-shadow:0 4px 14px rgba(226,61,74,.35);
}
.nav-divider{display:block;height:1px;background:var(--border);margin:6px 4px}
.nav-toggle{width:44px;height:44px}
}
/* SECTIONS */
section{padding:48px 0;scroll-margin-top:76px}
.sec-head{display:flex;align-items:baseline;justify-content:flex-start;text-align:left;width:100%;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.sec-head h2{font-size:1.65rem;letter-spacing:-.5px;text-align:left;text-wrap:auto}
.sec-head-inset{padding-left:var(--page-pad);padding-right:var(--page-pad)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
/* HERO — full-bleed dark carousel; leaves a fold peek for next videos */
.hero-tv{position:relative;width:100%;min-height:var(--hero-fold);background:#100a0c;color:#fff;overflow:hidden;padding:0;isolation:isolate}
.hero-track{display:grid;grid-template-columns:1fr;min-height:var(--hero-fold);pointer-events:none}
.hero-slide{grid-area:1/1;position:relative;min-height:var(--hero-fold);opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(.6,.05,.2,1),visibility .6s;pointer-events:none}
.hero-slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero-slide:only-child{opacity:1;visibility:visible;z-index:1}
.hero-slide.is-active .hero-tv-content,.hero-slide.is-active .hero-actions *{pointer-events:auto}
@media(min-width:861px){
.hero-tv--slide .hero-track{
display:flex;grid-template-columns:unset;min-height:var(--hero-fold);
/* transition jen přes JS — CSS transition by při skoku z klonu „protáčela“ celý track */
transition:none;will-change:transform;
}
.hero-tv--slide .hero-slide{
flex:0 0 100%;width:100%;min-height:var(--hero-fold);grid-area:unset;
opacity:1;visibility:visible;pointer-events:none;
}
.hero-tv--slide .hero-slide.is-active{z-index:1}
.hero-tv--slide .hero-slide.is-active .hero-tv-content,
.hero-tv--slide .hero-slide.is-active .hero-actions *{pointer-events:auto}
}
@media(min-width:861px) and (prefers-reduced-motion:reduce){
.hero-tv--slide .hero-track{transition:none}
}
.hero-controls{position:absolute;inset:0;z-index:20;pointer-events:none}
.hero-controls .hero-arrow,.hero-controls .hero-dot{pointer-events:auto}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none}}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,8,10,.88) 0%,rgba(16,8,10,.45) 45%,rgba(16,8,10,.15) 70%),linear-gradient(0deg,rgba(16,8,10,.92) 0%,transparent 45%)}
.hero-tv-content{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--hero-fold);padding:60px var(--page-pad) 90px;width:100%}
.hero-tv h1{font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.08;letter-spacing:-1px;max-width:16ch}
.hero-meta{display:flex;gap:14px;align-items:center;margin:14px 0 10px;font-size:.85rem;color:#c8d2da;flex-wrap:wrap}
.hero-meta .pill{background:rgba(255,255,255,.14);padding:3px 12px;border-radius:var(--radius-chip);corner-shape:squircle;font-weight:600;color:#fff}
.hero-meta .pill-live{background:#e0322c;color:#fff}
.hero-tv p{color:#c8d2da;font-size:1rem;max-width:52ch}
.hero-actions{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-actions .btn{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
min-height:48px;box-sizing:border-box;border:2px solid transparent;line-height:1.2;
}
@property --hero-play-angle{
syntax:"";
inherits:false;
initial-value:0deg;
}
@keyframes hero-play-orbit{
to{--hero-play-angle:360deg}
}
/* Shared orbit ring for pill play CTAs */
.hero-play.btn{
position:relative;
isolation:isolate;
z-index:0;
overflow:visible;
border-color:transparent;
box-shadow:0 0 0 1px rgba(255,255,255,.2);
}
.hero-play.btn::before{
content:"";
position:absolute;
inset:-3px;
border-radius:inherit;
z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(226,61,74,.15) 280deg,
var(--accent) 318deg,
#ff6b76 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
}
.hero-play.btn::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
z-index:-1;
transition:background-color .2s;
}
.hero-play.btn-light{
background:#fff;
color:#13202b;
}
.hero-play.btn-light::after{background:#fff}
.hero-play.btn-light:hover::after{background:#e8edf2}
.hero-play.btn-primary::after{background:var(--accent)}
.hero-play.btn-primary:hover::after{background:#b82e38}
@media(prefers-reduced-motion:reduce){
.hero-play.btn::before{animation:none;background:var(--accent)}
}
.hero-tv .btn-light{background:#fff;color:#13202b;border-color:#fff}
.hero-tv .btn-light:hover{background:#e8edf2;border-color:#e8edf2}
.btn-light{background:var(--btn-light-bg);color:var(--ink)}
.btn-light:hover{background:var(--btn-light-hover)}
.btn-dark-ghost{border:2px solid rgba(255,255,255,.55);color:#fff}
.btn-dark-ghost:hover{background:rgba(255,255,255,.15)}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:44px;height:44px;border:0;border-radius:var(--radius-squircle);corner-shape:squircle;background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;transition:background-color .2s;cursor:pointer}
.hero-arrow:hover{background:rgba(255,255,255,.28)}
.hero-arrow.prev{left:14px}
.hero-arrow.next{right:14px}
@media(max-width:640px){
:root{--fold-peek:clamp(180px,28vh,240px)}
.hero-tv-content{padding-top:48px;padding-bottom:64px}
.hero-arrow{width:40px;height:40px;font-size:1.3rem}
.hero-actions{flex-direction:column;width:100%}
.hero-actions .btn{width:100%;text-align:center}
}
/* LIVE NOW — homepage priority band */
.live-band{padding:28px 0 36px;background:linear-gradient(180deg,rgba(224,50,44,.08) 0%,transparent 100%)}
.live-band-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:0 var(--page-pad);width:100%;margin:0}
.live-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid rgba(224,50,44,.35);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow),0 0 0 1px rgba(224,50,44,.08)}
.live-card-thumb{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;flex:none}
.live-card-badge{position:absolute;top:12px;left:12px;background:#e0322c;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:var(--radius-chip);corner-shape:squircle}
.live-card-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1;min-height:0}
.live-card-sport{font-size:.82rem;font-weight:700;color:var(--muted)}
.live-card-title{font-size:1.08rem;line-height:1.3;letter-spacing:-.2px}
.live-card-meta{font-size:.88rem;color:var(--muted)}
.live-card-btn{align-self:flex-start;margin-top:auto;padding:10px 18px;font-size:.88rem}
.channel--live .channel-thumb--ball{outline:none}
.sport-row--live .sr-live-tag,
.sr-head--live .sr-live-tag{
display:inline-flex;align-items:center;background:#e0322c;color:#fff;
font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:3px 10px;border-radius:var(--radius-chip);corner-shape:squircle;
visibility:visible;
}
.sr-live-tag{
display:inline-flex;align-items:center;justify-content:center;
min-width:52px;min-height:22px;padding:3px 10px;border-radius:var(--radius-chip);corner-shape:squircle;
font-size:.72rem;font-weight:800;letter-spacing:.06em;
visibility:hidden;
}
.sr-live-tag--empty{visibility:hidden}
.sport-row--live{border-top:0}
.hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:1;max-width:calc(100% - 48px)}
.hero-dots-track{
position:relative;display:flex;align-items:center;justify-content:center;
min-height:28px;padding:0 16px;border-radius:999px;
background:rgba(255,255,255,.14);
}
.hero-dots-list{display:flex;align-items:center;gap:12px;position:relative;z-index:1;padding:10px 0}
.hero-dot{
position:relative;width:8px;height:8px;border:0;border-radius:50%;padding:0;flex:none;
background:rgba(255,255,255,.38);cursor:pointer;overflow:hidden;
transition:width .25s ease,height .25s ease,transform .2s;
}
.hero-dot-fill{
position:absolute;inset:0;border-radius:inherit;background:#fff;
transform:scaleX(0);transform-origin:left center;will-change:transform;
}
.hero-dot.is-done{background:#fff}
.hero-dot.is-done .hero-dot-fill{transform:scaleX(1)}
.hero-dot.active{width:10px;height:10px;background:rgba(255,255,255,.38)}
.hero-dot:hover:not(.active),.hero-dot:focus-visible:not(.active){transform:scale(1.1)}
.hero-dot.active:hover,.hero-dot.active:focus-visible{transform:scale(1.06)}
.hero-dot:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:700;font-size:.95rem;transition:background-color .2s,color .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#b82e38}
.btn-ghost{border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#0b1620}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* FULLSCREEN PLAYER OVERLAY */
body.fs-open{overflow:hidden;padding:0!important;margin:0}
.fs-player{
position:fixed;inset:0;z-index:10000;
width:100%;height:100%;
min-width:100vw;min-height:100vh;min-height:100dvh;
margin:0;padding:0;border:0;
background:#000;box-sizing:border-box;
display:flex;align-items:stretch;justify-content:stretch;
}
.fs-player[hidden]{display:none!important}
.fs-frame{flex:1;position:relative;width:100%;height:100%;min-height:0;background:#000;overflow:hidden}
.fs-frame iframe{
position:absolute;top:50%;left:50%;
width:100vw;height:56.25vw;
min-height:100vh;min-width:177.78vh;
transform:translate(-50%,-50%);
border:0;display:block;background:#000;
}
.fs-player:fullscreen,.fs-player:-webkit-full-screen{
width:100%;height:100%;background:#000;
}
.fs-frame iframe:fullscreen,.fs-frame iframe:-webkit-full-screen{
width:100%;height:100%;background:#000;
}
.fs-close{
position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));
z-index:10001;width:44px;height:44px;border:0;border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(0,0,0,.55);color:#fff;font-size:1.3rem;line-height:1;
cursor:pointer;transition:background-color .2s;box-shadow:0 2px 12px rgba(0,0,0,.4)
}
.fs-close:hover{background:rgba(0,0,0,.75)}
/* LIVE TAB — program pod streamem */
.live-stack{display:flex;flex-direction:column;gap:22px}
.live-stack .video-frame{width:100%}
.sport-section--split{
/* full-bleed within wrap: use almost the whole viewport */
width:100vw;max-width:100vw;
margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
padding-left:clamp(12px,2vw,28px);padding-right:clamp(12px,2vw,28px);
box-sizing:border-box;
}
.sport-split{
--split-gap:clamp(10px,1.2vw,16px);
display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,1fr);
grid-template-areas:
"titleLive titleRec"
"main side";
column-gap:var(--split-gap);
row-gap:14px;
align-items:start;
width:100%;
container-type:inline-size;
container-name:sport-split;
}
.sport-split-title{
margin:0;padding:0;
font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.5px;line-height:1.15;
font-family:'Ubuntu',sans-serif;font-weight:700;
}
.sport-split-title--live{grid-area:titleLive}
.sport-split-title--rec{grid-area:titleRec}
.sport-split-main{grid-area:main;min-width:0;min-height:0}
.sport-split-side{grid-area:side;min-width:0;min-height:0;display:flex;flex-direction:column;align-self:stretch}
/* KALENDÁŘ AKCÍ — měsíční mřížka s atmosférou */
.sport-calendar .sec-head{margin-bottom:18px}
.sport-calendar-lead{margin:6px 0 0;color:var(--muted);font-weight:600;font-size:.95rem}
.ms-cal{
--ms-cal-glow:rgba(226,61,74,.14);
position:relative;isolation:isolate;overflow:hidden;
display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);
gap:clamp(18px,2.5vw,28px);align-items:stretch;
padding:clamp(16px,2.2vw,26px);
border:1px solid rgba(255,255,255,.08);
border-radius:calc(var(--radius) + 4px);
background:
radial-gradient(ellipse 70% 55% at 12% 0%,var(--ms-cal-glow),transparent 55%),
radial-gradient(ellipse 50% 40% at 90% 100%,rgba(18,115,212,.1),transparent 50%),
linear-gradient(165deg,#0e1720 0%,var(--bg) 42%,#0a1219 100%);
box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}
.ms-cal::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:28px 28px;
mask-image:radial-gradient(ellipse 80% 70% at 40% 35%,#000 20%,transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 80% 70% at 40% 35%,#000 20%,transparent 75%);
opacity:.7;
}
.ms-cal-main,.ms-cal-side{position:relative;z-index:1}
.ms-cal-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-bottom:16px;
}
.ms-cal-title{
margin:0;font-size:clamp(1.25rem,2.4vw,1.65rem);letter-spacing:-.55px;
font-weight:800;text-transform:capitalize;text-align:center;flex:1;
background:linear-gradient(180deg,#fff 20%,rgba(232,237,242,.78));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.ms-cal-nav{
width:44px;height:44px;border:1px solid rgba(255,255,255,.14);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(26,40,52,.75);color:var(--ink);font-size:1.45rem;line-height:1;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:background-color .2s,border-color .2s,color .2s,transform .18s;
}
.ms-cal-nav:hover{
background:var(--surface-raised);border-color:rgba(255,107,118,.45);color:#fff;
transform:translateY(-1px);
}
.ms-cal-dows{
display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:8px;
}
.ms-cal-dows span{
text-align:center;font-size:.7rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:rgba(143,163,179,.85);padding:6px 0;
}
.ms-cal-dows span:nth-child(6),
.ms-cal-dows span:nth-child(7){color:rgba(255,107,118,.75)}
.ms-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.ms-cal-cell{
--cal-fill:var(--accent);
position:relative;min-height:78px;padding:9px 8px 10px;border:0;
border-radius:14px;
background:
linear-gradient(160deg,rgba(255,255,255,.04),transparent 55%),
rgba(19,31,42,.88);
color:var(--ink);text-align:left;font:inherit;cursor:pointer;
display:flex;flex-direction:column;gap:5px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
transition:background-color .18s,box-shadow .18s,transform .18s,filter .18s;
}
.ms-cal-cell:hover{
background:
linear-gradient(160deg,rgba(255,255,255,.07),transparent 55%),
var(--surface);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.28);
transform:translateY(-1px);
}
.ms-cal-cell.is-muted{opacity:.34;filter:saturate(.6)}
.ms-cal-cell.is-today{
background:
linear-gradient(160deg,rgba(226,61,74,.22),transparent 60%),
var(--surface);
box-shadow:
inset 0 0 0 1px rgba(255,107,118,.45),
0 0 0 1px rgba(226,61,74,.2),
0 10px 26px rgba(226,61,74,.18);
}
.ms-cal-cell.is-today .ms-cal-num{
color:#ff6b76;
}
.ms-cal-cell.is-selected{
background:
linear-gradient(160deg,rgba(226,61,74,.28),transparent 55%),
var(--surface-raised);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.2),
0 12px 28px rgba(0,0,0,.4);
}
.ms-cal-cell.has-events{
background:
linear-gradient(165deg,color-mix(in srgb,var(--cal-fill) 22%,transparent),transparent 62%),
linear-gradient(160deg,rgba(255,255,255,.05),transparent 55%),
rgba(19,31,42,.92);
box-shadow:
inset 3px 0 0 var(--cal-fill),
inset 0 0 0 1px color-mix(in srgb,var(--cal-fill) 28%,transparent);
}
.ms-cal-cell.has-events:hover{
background:
linear-gradient(165deg,color-mix(in srgb,var(--cal-fill) 32%,transparent),transparent 62%),
var(--surface);
}
.ms-cal-cell.has-events.is-selected{
box-shadow:
inset 3px 0 0 var(--cal-fill),
inset 0 0 0 1px rgba(255,255,255,.22),
0 12px 28px rgba(0,0,0,.42);
}
.ms-cal-num{font-size:.95rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.ms-cal-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.ms-cal-dot,
.ms-cal-legend-swatch,
.sport-schedule-swatch{
width:7px;height:7px;border-radius:50%;
background:var(--cal-other,#6b7c8a);
box-shadow:0 0 0 2px rgba(107,124,138,.18);
}
.ms-cal-dot--top,
.ms-cal-legend-swatch.ms-cal-dot--top,
.sport-schedule-swatch.ms-cal-dot--top,
.ms-cal-pill--top,
.ms-cal-cell--top{--cal-fill:var(--accent,#e23d4a);--cal-ring:rgba(226,61,74,.18)}
.ms-cal-dot--national,
.ms-cal-legend-swatch.ms-cal-dot--national,
.sport-schedule-swatch.ms-cal-dot--national,
.ms-cal-pill--national,
.ms-cal-cell--national{--cal-fill:var(--accent2,#3d8fd9);--cal-ring:rgba(61,143,217,.2)}
.ms-cal-dot--regional,
.ms-cal-legend-swatch.ms-cal-dot--regional,
.sport-schedule-swatch.ms-cal-dot--regional,
.ms-cal-pill--regional,
.ms-cal-cell--regional{--cal-fill:#c45c12;--cal-ring:rgba(196,92,18,.2)}
.ms-cal-dot--youth,
.ms-cal-legend-swatch.ms-cal-dot--youth,
.sport-schedule-swatch.ms-cal-dot--youth,
.ms-cal-pill--youth,
.ms-cal-cell--youth{--cal-fill:#8b2fc9;--cal-ring:rgba(139,47,201,.2)}
.ms-cal-dot--other,
.ms-cal-legend-swatch.ms-cal-dot--other,
.sport-schedule-swatch.ms-cal-dot--other,
.ms-cal-pill--other,
.ms-cal-cell--other{--cal-fill:#6b7c8a;--cal-ring:rgba(107,124,138,.18)}
.ms-cal-dot--top,
.ms-cal-dot--national,
.ms-cal-dot--regional,
.ms-cal-dot--youth,
.ms-cal-dot--other,
.ms-cal-legend-swatch.ms-cal-dot--top,
.ms-cal-legend-swatch.ms-cal-dot--national,
.ms-cal-legend-swatch.ms-cal-dot--regional,
.ms-cal-legend-swatch.ms-cal-dot--youth,
.ms-cal-legend-swatch.ms-cal-dot--other,
.sport-schedule-swatch.ms-cal-dot--top,
.sport-schedule-swatch.ms-cal-dot--national,
.sport-schedule-swatch.ms-cal-dot--regional,
.sport-schedule-swatch.ms-cal-dot--youth,
.sport-schedule-swatch.ms-cal-dot--other{
background:var(--cal-fill);
box-shadow:0 0 0 2px var(--cal-ring);
}
.ms-cal-dot.is-live,
.ms-cal-legend-swatch.is-live,
.sport-schedule-swatch.is-live{
box-shadow:0 0 0 2px #e0322c,0 0 0 4px rgba(224,50,44,.22);
}
.ms-cal-pill{
display:none;font-size:.62rem;font-weight:700;line-height:1.25;
color:rgba(232,237,242,.92);
background:rgba(0,0,0,.42);
border-radius:7px;padding:4px 6px 4px 7px;max-width:100%;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
border-left:3px solid var(--cal-fill,#6b7c8a);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ms-cal-pill.is-live{border-left-color:#e0322c}
.ms-cal-pill--top{border-left-color:var(--accent,#e23d4a)}
.ms-cal-pill--national{border-left-color:var(--accent2,#3d8fd9)}
.ms-cal-pill--regional{border-left-color:#c45c12}
.ms-cal-pill--youth{border-left-color:#8b2fc9}
.ms-cal-pill--other{border-left-color:#6b7c8a}
@media(min-width:1100px){
.ms-cal-cell{min-height:96px}
.ms-cal-pill{display:block}
.ms-cal-dots{display:none}
}
.ms-cal-legend{
display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;
margin-top:16px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.08);
}
.ms-cal-legend-hint{
flex:1 0 100%;margin:0 0 2px;
font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);
}
.ms-cal-legend-item{
--hero-play-angle:0deg;
position:relative;isolation:isolate;z-index:0;overflow:visible;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:40px;padding:8px 14px;box-sizing:border-box;
border:2px solid transparent;border-radius:999px;
background:transparent;color:#13202b;
font:inherit;font-weight:700;font-size:.82rem;line-height:1.2;
cursor:pointer;
box-shadow:0 0 0 1px rgba(255,255,255,.22);
transition:opacity .2s,color .2s,box-shadow .2s;
}
.ms-cal-legend-item::before{
content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(226,61,74,.15) 280deg,
var(--accent) 318deg,
#ff6b76 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
opacity:0;transition:opacity .2s;
}
.ms-cal-legend-item::after{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
background:#fff;transition:background-color .2s;
}
.ms-cal-legend-item.is-on::before{opacity:1}
.ms-cal-legend-item.is-on:hover::after{background:#e8edf2}
.ms-cal-legend-item:not(.is-on){
color:rgba(232,237,242,.78);
box-shadow:0 0 0 1px rgba(255,255,255,.32);
}
.ms-cal-legend-item:not(.is-on)::before{animation:none;opacity:0}
.ms-cal-legend-item:not(.is-on)::after{background:transparent}
.ms-cal-legend-item:not(.is-on):hover{color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.ms-cal-legend-item:not(.is-on) .ms-cal-legend-swatch{filter:grayscale(.7);opacity:.75}
.ms-cal-legend-swatch{
width:10px;height:10px;flex:none;
border:2px solid rgba(19,32,43,.2);box-shadow:none !important;
}
.ms-cal-legend-item.is-on .ms-cal-legend-swatch{border-color:rgba(19,32,43,.15)}
.ms-cal-legend-swatch--live{
background:transparent !important;
border-color:#e0322c;
box-shadow:0 0 0 2px rgba(224,50,44,.22) !important;
}
.ms-cal-legend-item.is-on .ms-cal-legend-swatch--live{
border-color:#e0322c;
}
.ms-cal-legend-item--live.is-on{
color:#13202b;
}
.ms-cal-legend-item--live.is-on::before{
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(224,50,44,.2) 280deg,
#e0322c 318deg,
#ff8a84 338deg,
#fff 352deg,
transparent 360deg
);
}
.ms-cal-legend-count{
margin-left:2px;min-width:1.35em;text-align:center;
font-size:.72rem;font-weight:800;
border-radius:999px;padding:2px 7px;
background:rgba(19,32,43,.08);color:rgba(19,32,43,.65);
}
.ms-cal-legend-item:not(.is-on) .ms-cal-legend-count{
background:rgba(255,255,255,.08);color:rgba(232,237,242,.65);
}
@media(prefers-reduced-motion:reduce){
.ms-cal-legend-item.is-on::before{animation:none;background:var(--accent);opacity:1}
.ms-cal-legend-item--live.is-on::before{background:#e0322c}
.ms-cal-nav:hover,.ms-cal-cell:hover{transform:none}
}
.ms-cal-side{
display:flex;flex-direction:column;
padding:18px 18px 16px;
border-radius:16px;
background:
linear-gradient(180deg,rgba(255,255,255,.04),transparent 30%),
rgba(10,16,22,.72);
border:1px solid rgba(255,255,255,.08);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
min-height:300px;
}
.ms-cal-side-title{
margin:0 0 16px;font-size:1.12rem;letter-spacing:-.3px;font-weight:800;
}
.ms-cal-day-list{flex:1}
.ms-cal-day-list:empty,
.ms-cal-empty.is-hidden{display:none}
.ms-cal-empty{
color:var(--muted);font-weight:600;margin:auto 0;padding:28px 8px;
text-align:center;line-height:1.45;
}
.ms-cal-side .sport-schedule{gap:8px}
.ms-cal-side .sport-schedule-item{
display:flex;flex-direction:column;gap:0;
padding:0;border-bottom:0;border-radius:12px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
overflow:hidden;
transition:background-color .18s,border-color .18s;
}
.ms-cal-side .sport-schedule-item:hover{
background:rgba(255,255,255,.055);
border-color:rgba(255,255,255,.12);
}
.ms-cal-side .sport-schedule-item.is-live{
border-color:rgba(224,50,44,.35);
background:linear-gradient(90deg,rgba(224,50,44,.12),rgba(255,255,255,.03) 55%);
}
.ms-cal-side .sport-schedule-cover{
width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
background:var(--bg);
}
.ms-cal-side .sport-schedule-row{
display:grid;grid-template-columns:64px minmax(0,1fr) auto;
gap:12px;align-items:start;
padding:12px 12px 12px 10px;
}
.ms-cal-side .sport-schedule-day{font-size:1.55rem}
.ms-cal-side .sport-schedule-more{
display:inline-flex;align-self:flex-start;margin-top:6px;
font-size:.78rem;font-weight:800;letter-spacing:.02em;
color:#fff;background:rgba(226,61,74,.92);
padding:6px 12px;border-radius:999px;
transition:background-color .18s,transform .18s;
}
.ms-cal-side .sport-schedule-more:hover{
background:var(--accent);transform:translateY(-1px);
}
.ms-cal-side .sport-schedule-item.is-live .sport-schedule-more{
background:rgba(224,50,44,.92);
}
.ms-cal-side .sport-schedule-item.is-live .sport-schedule-more:hover{
background:#e0322c;
}
.ms-cal-gcal-link{margin:14px 0 0;font-size:.9rem;font-weight:600}
@media(max-width:900px){
.ms-cal{grid-template-columns:1fr;padding:14px}
.ms-cal-side{
min-height:0;padding:14px;
}
.ms-cal-cell{min-height:58px;padding:6px}
.ms-cal-legend{gap:8px 10px}
}
/* ŽEBŘÍČEK SOUTĚŽÍ — pyramida pod mapou */
.liga-ladder{
margin-top:clamp(28px,4vw,44px);
padding-top:clamp(22px,3vw,32px);
border-top:1px solid var(--divider);
}
.liga-ladder-title{
margin:0 0 6px;
font-size:clamp(1.25rem,2.2vw,1.55rem);
letter-spacing:-.03em;
}
.liga-ladder .sec-head{margin-bottom:18px}
.liga-ladder-pyramid{
display:flex;flex-direction:column;align-items:center;
gap:0;width:100%;max-width:720px;margin:0 auto;
}
.liga-ladder-tier{
width:calc(48% + (var(--tier) - 1) * (48% / max(var(--tiers) - 1, 1)));
max-width:100%;
opacity:0;transform:translateY(12px);
transition:opacity .45s ease var(--delay,0ms), transform .45s ease var(--delay,0ms);
}
.liga-ladder-tier.is-in{opacity:1;transform:none}
.liga-ladder-tier--join{margin-bottom:22px;position:relative}
.liga-ladder-tier--join::after{
content:"postup ↑ · sestup ↓";
position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
font-size:.68rem;font-weight:700;letter-spacing:.04em;
color:var(--muted);white-space:nowrap;pointer-events:none;
}
.liga-ladder-btn{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;gap:12px 14px;width:100%;
padding:12px 16px;text-align:left;cursor:pointer;
color:#fff;background:linear-gradient(180deg,rgba(26,40,52,.95),rgba(19,31,42,.98));
border:1px solid rgba(255,255,255,.14);border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.28);
transition:border-color .2s, transform .2s, box-shadow .2s, background .2s;
}
.liga-ladder-btn:hover{
border-color:rgba(255,107,118,.45);
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.liga-ladder-btn.is-on,
.liga-ladder-btn.is-active{
border-color:rgba(255,107,118,.7);
background:
linear-gradient(135deg,rgba(226,61,74,.35),transparent 55%),
linear-gradient(180deg,rgba(26,40,52,.98),rgba(19,31,42,1));
box-shadow:0 0 0 1px rgba(255,107,118,.25),0 10px 28px rgba(0,0,0,.4);
}
.liga-ladder-btn.is-on{transform:translateY(-1px)}
.liga-ladder-rank{
display:grid;place-items:center;
width:2rem;height:2rem;border-radius:10px;
font-size:.85rem;font-weight:800;letter-spacing:-.02em;
color:#1a080a;background:linear-gradient(160deg,#ff6b76,#e23d4a);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.liga-ladder-tier[style*="--tier:1"] .liga-ladder-rank{
background:linear-gradient(160deg,#ff9aa3,#e23d4a);
}
.liga-ladder-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.liga-ladder-name{
font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;
}
.liga-ladder-blurb{
font-size:.82rem;color:var(--muted);line-height:1.35;
}
.liga-ladder-meta{
display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.1;
}
.liga-ladder-count{
font-size:1.2rem;font-weight:800;letter-spacing:-.03em;color:#ff6b76;
font-variant-numeric:tabular-nums;
}
.liga-ladder-count-label{
font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.liga-ladder-hint{
margin:18px auto 0;max-width:720px;text-align:center;
font-size:.85rem;font-weight:600;color:var(--muted);
}
.map-pin.is-dim{opacity:.22;filter:grayscale(.6);transition:opacity .25s,filter .25s}
.map-pin.is-tier-on .map-pin-dot{
box-shadow:0 0 0 3px rgba(255,107,118,.55),0 0 16px rgba(255,107,118,.45);
transform:scale(1.15);
}
@media (max-width:640px){
.liga-ladder-tier{width:100%}
.liga-ladder-btn{grid-template-columns:auto minmax(0,1fr);padding:12px 14px}
.liga-ladder-meta{grid-column:2;flex-direction:row;align-items:baseline;gap:6px;justify-self:start}
.liga-ladder-count{font-size:1.05rem}
.liga-ladder-tier--join::after{font-size:.62rem}
}
@media (prefers-reduced-motion: reduce){
.liga-ladder-tier{opacity:1;transform:none;transition:none}
}
/* MAPA — mapa 2/3 + panel 1/3, legenda pod mapou */
.map-layout{
display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:clamp(16px,2.5vw,28px);align-items:stretch;width:100%;max-width:none;
}
.map-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.map-canvas{
width:100%;min-height:360px;height:min(58vh,520px);
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
background:var(--surface);border:1px solid var(--border);
z-index:0;
}
.map-legend{
display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}
.map-legend-item{
--hero-play-angle:0deg;
position:relative;isolation:isolate;z-index:0;overflow:visible;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:44px;padding:10px 18px;box-sizing:border-box;
border:2px solid transparent;border-radius:999px;
background:transparent;color:#13202b;
font:inherit;font-weight:700;font-size:.9rem;line-height:1.2;
cursor:pointer;
box-shadow:0 0 0 1px rgba(255,255,255,.22);
transition:opacity .2s,color .2s,box-shadow .2s;
}
.map-legend-item::before{
content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(226,61,74,.15) 280deg,
var(--accent) 318deg,
#ff6b76 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
opacity:0;transition:opacity .2s;
}
.map-legend-item::after{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
background:#fff;transition:background-color .2s;
}
.map-legend-item.is-on::before{opacity:1}
.map-legend-item.is-on:hover::after{background:#e8edf2}
.map-legend-item:not(.is-on){
color:rgba(232,237,242,.78);
box-shadow:0 0 0 1px rgba(255,255,255,.32);
}
.map-legend-item:not(.is-on)::before{animation:none;opacity:0}
.map-legend-item:not(.is-on)::after{background:transparent}
.map-legend-item:not(.is-on):hover{color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.map-legend-item:not(.is-on) .map-legend-swatch{filter:grayscale(.7);opacity:.75}
.map-legend-swatch{
width:10px;height:10px;border-radius:50%;flex:none;
border:2px solid rgba(19,32,43,.2);box-shadow:none;
}
.map-legend-item.is-on .map-legend-swatch{border-color:rgba(19,32,43,.15)}
.map-legend-swatch--stadium{background:var(--accent)}
.map-legend-swatch--club{background:var(--accent2)}
.map-legend-count{
margin-left:2px;min-width:1.35em;text-align:center;
font-size:.78rem;font-weight:800;
border-radius:999px;padding:2px 7px;
background:rgba(19,32,43,.08);color:rgba(19,32,43,.65);
}
.map-legend-item:not(.is-on) .map-legend-count{
background:rgba(255,255,255,.08);color:rgba(232,237,242,.65);
}
@media(prefers-reduced-motion:reduce){
.map-legend-item.is-on::before{animation:none;background:var(--accent);opacity:1}
}
.map-panel{
background:transparent;border:0;border-radius:0;
box-shadow:none;padding:clamp(4px,1vw,8px) 0;
min-height:360px;
display:flex;flex-direction:column;justify-content:flex-start;
width:100%;box-sizing:border-box;
}
.map-panel-hint{margin:0;color:var(--muted);font-weight:600;font-size:.95rem}
.map-panel-body{
flex:1;min-height:0;
display:flex;flex-direction:column;
opacity:0;
transform:translateY(10px);
transition:opacity .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
.map-panel-body.is-in{opacity:1;transform:none}
.map-panel-main{flex:1 1 auto;min-width:0}
.map-panel-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 14px}
.map-panel-logo-wrap{
flex:none;width:72px;height:72px;border-radius:var(--radius-squircle);corner-shape:squircle;overflow:hidden;
background:var(--bg-soft);
border:1px solid var(--border);
box-shadow:none;
}
.map-panel-logo-wrap.has-photo{background:#f4f6f8}
.map-panel-logo-wrap.has-venue{
width:112px;height:84px;background:#0a1622;
}
.map-panel-logo{
display:block;width:100%;height:100%;object-fit:cover;
background:transparent;padding:0;box-sizing:border-box;
}
.map-panel-logo-wrap.has-photo .map-panel-logo{
object-fit:contain;padding:8px;background:#f4f6f8;
}
.map-panel-logo-wrap.has-venue .map-panel-logo{
object-fit:cover;padding:0;background:transparent;
}
.map-panel-head-text{min-width:0;flex:1}
.map-panel-title{font-size:1.35rem;letter-spacing:-.035em;margin:0 0 6px;color:#fff;line-height:1.15}
.map-panel-address{margin:0;color:var(--muted);font-size:.9rem;line-height:1.4}
.map-panel-liga{
margin:0 0 12px;
font-size:.98rem;line-height:1.4;
color:rgba(232,237,242,.9);
}
.map-panel-label{
color:var(--muted);font-weight:600;margin-right:.35em;
}
.map-panel-lead{
margin:0;
color:rgba(232,237,242,.86);
font-size:1.02rem;line-height:1.55;
max-width:36rem;
}
.map-panel-links{
display:flex;flex-direction:column;align-items:flex-start;gap:8px;
margin-top:auto;padding-top:22px;
}
.map-panel-web,.map-panel-phone{
display:inline-flex;align-items:center;gap:6px;width:fit-content;
font-weight:700;font-size:.9rem;color:var(--accent);transition:color .2s;
}
.map-panel-web:hover,.map-panel-phone:hover{color:#ff6b76}
@media (prefers-reduced-motion:reduce){
.map-panel-body{opacity:1;transform:none;transition:none}
}
.map-pin{background:transparent;border:0}
.map-pin-dot{
display:block;width:16px;height:16px;margin:3px;border-radius:50%;
background:var(--accent);border:2px solid #fff;
box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 4px rgba(226,61,74,.28);
transition:transform .2s,box-shadow .2s;
}
.map-pin--club .map-pin-dot{
background:var(--accent2);
box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 4px rgba(18,115,212,.28);
}
.map-pin.is-active .map-pin-dot,
.map-pin:hover .map-pin-dot{
transform:scale(1.18);
box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 0 6px rgba(226,61,74,.35);
}
.map-pin--club.is-active .map-pin-dot,
.map-pin--club:hover .map-pin-dot{
box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 0 6px rgba(18,115,212,.35);
}
.leaflet-container{font:inherit;background:#121820}
@media(max-width:860px){
.map-layout{grid-template-columns:1fr;gap:16px}
.map-canvas{height:300px;min-height:260px}
.map-panel{min-height:0;padding:clamp(14px,2vw,18px)}
}
/* SPORT WIDGETS — channel rail */
/* —— Objevuj malé sporty (manifesto band) —— */
.ms-discover{
position:relative;
isolation:isolate;
padding:clamp(56px, 9vw, 104px) var(--page-pad);
overflow:hidden;
}
.ms-discover-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(ellipse 80% 100% at -10% 40%, rgba(226,61,74,.28), transparent 60%),
radial-gradient(ellipse 60% 70% at 110% 90%, rgba(18,115,212,.14), transparent 55%),
linear-gradient(165deg, rgba(11,18,24,0) 0%, rgba(226,61,74,.06) 42%, rgba(11,18,24,0) 78%);
}
/* Soft diagonal grain — CSS-only, very low opacity */
.ms-discover-bg::before{
content:"";
position:absolute;
inset:-20%;
opacity:.045;
background:
repeating-linear-gradient(
-28deg,
transparent 0 11px,
rgba(232,237,242,.55) 11px 12px
);
mix-blend-mode:overlay;
transform:rotate(.2deg);
}
.ms-discover-bg::after{
content:"";
position:absolute;
left:var(--page-pad);
right:var(--page-pad);
top:0;
height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(226,61,74,.55) 35%, rgba(232,237,242,.2) 70%, transparent 100%);
transform:scaleX(0);
transform-origin:left center;
transition:transform .85s cubic-bezier(.22,1,.36,1) .06s;
}
.ms-discover.is-in .ms-discover-bg::after{transform:scaleX(1)}
.ms-discover-inner{
position:relative;
z-index:1;
max-width:1120px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
gap:clamp(32px, 6vw, 80px);
align-items:end;
opacity:0;
transform:translateY(22px);
transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.ms-discover.is-in .ms-discover-inner{
opacity:1;
transform:none;
}
.ms-discover-copy{min-width:0}
.ms-discover-title{
margin:0 0 18px;
font-size:clamp(3rem, 7.2vw, 5.2rem);
font-weight:700;
letter-spacing:-.045em;
line-height:.9;
color:#fff;
}
.ms-discover-title-line{
display:block;
opacity:0;
transform:translateY(22px);
clip-path:inset(0 0 100% 0);
transition:
opacity .6s cubic-bezier(.22,1,.36,1),
transform .6s cubic-bezier(.22,1,.36,1),
clip-path .65s cubic-bezier(.22,1,.36,1);
}
.ms-discover-title-line--accent{
color:var(--accent);
font-size:1.06em;
letter-spacing:-.05em;
}
.ms-discover.is-in .ms-discover-title-line{
opacity:1;
transform:none;
clip-path:inset(0 0 0 0);
}
.ms-discover.is-in .ms-discover-title-line:nth-child(2){transition-delay:.12s}
.ms-discover-lead{
margin:0;
max-width:32ch;
font-size:clamp(1.08rem, 1.9vw, 1.3rem);
line-height:1.45;
letter-spacing:-.012em;
color:var(--muted);
opacity:0;
transform:translateY(14px);
transition:opacity .55s cubic-bezier(.22,1,.36,1) .22s, transform .55s cubic-bezier(.22,1,.36,1) .22s;
}
.ms-discover.is-in .ms-discover-lead{
opacity:1;
transform:none;
}
.ms-slogans{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:0;
border:none;
max-width:28ch;
}
.ms-slogan{
margin:0;
padding:clamp(16px, 2.2vw, 22px) 0;
border:none;
border-top:1px solid rgba(232,237,242,.1);
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
opacity:0;
transform:translateY(16px);
transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.ms-slogan:last-child{
border-bottom:1px solid rgba(232,237,242,.1);
}
.ms-slogan-kicker{
font-size:.72rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--accent);
line-height:1.2;
}
.ms-slogan-text{
font-size:clamp(1.12rem, 2vw, 1.4rem);
font-weight:700;
line-height:1.25;
letter-spacing:-.025em;
color:var(--ink);
transition:color .25s;
}
.ms-discover.is-in .ms-slogan{opacity:1;transform:none}
.ms-discover.is-in .ms-slogan:nth-child(1){transition-delay:.2s}
.ms-discover.is-in .ms-slogan:nth-child(2){transition-delay:.32s}
.ms-discover.is-in .ms-slogan:nth-child(3){transition-delay:.44s}
@media (hover:hover) and (pointer:fine){
.ms-discover.is-in .ms-slogan:hover .ms-slogan-text{color:#fff}
}
@media (prefers-reduced-motion:reduce){
.ms-discover-inner,
.ms-discover-title-line,
.ms-discover-lead,
.ms-slogan{opacity:1;transform:none;clip-path:none;transition:none}
.ms-discover-bg::after{transform:none;transition:none}
}
@media(max-width:860px){
.ms-discover-inner{
grid-template-columns:1fr;
gap:32px;
align-items:start;
}
.ms-discover-lead{max-width:42ch}
.ms-slogans{max-width:36ch}
}
@media(max-width:640px){
.ms-discover{padding:44px var(--page-pad) 52px}
.ms-discover-title{font-size:clamp(2.6rem, 12vw, 3.4rem)}
.ms-slogan{padding:14px 0}
}
.sports-band{background:transparent;overflow:visible}
/* First fold: míče hned vidět pod hero */
.sports-band--peek{
padding:4px 0 8px;
margin-top:-4px;
}
.sports-band--peek .sec-head{
margin-bottom:2px;
}
.sports-band--peek .sec-head h2{
font-size:clamp(1rem, 2vw, 1.15rem);
letter-spacing:.04em;
text-transform:uppercase;
color:var(--muted);
font-weight:600;
}
.sports-band--peek .channel-rail--sports{
padding-top:0;
padding-bottom:8px;
}
.sports-band .channel--ball{
opacity:0;
transform:translateY(18px);
transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.sports-band.is-in .channel--ball{opacity:1;transform:none}
.sports-band.is-in .channel--ball:nth-child(1){transition-delay:.04s}
.sports-band.is-in .channel--ball:nth-child(2){transition-delay:.1s}
.sports-band.is-in .channel--ball:nth-child(3){transition-delay:.16s}
.sports-band.is-in .channel--ball:nth-child(4){transition-delay:.22s}
.sports-band.is-in .channel--ball:nth-child(5){transition-delay:.28s}
.sports-band.is-in .channel--ball:nth-child(6){transition-delay:.34s}
@media (hover:hover) and (pointer:fine){
.sports-band.is-in .channel--ball{
transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1);
}
.sports-band.is-in .channel--ball:hover{transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){
.sports-band .channel--ball{opacity:1;transform:none;transition:none}
.sports-band.is-in .channel--ball:hover{transform:none}
}
.zapasy--peek{padding-top:20px;padding-bottom:40px}
.zapasy--peek .sec-head{margin-bottom:14px}
/* —— Homepage: dnešní zápasy (horizontální rail) —— */
.ms-upcoming{padding:20px 0 28px;overflow:hidden}
.ms-upcoming .sec-head{margin-bottom:10px}
.ms-upcoming-rail{
display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:6px var(--page-pad) 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.ms-upcoming-rail::-webkit-scrollbar{height:8px}
.ms-upcoming-rail::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px}
.ms-upcoming-card{
position:relative;flex:0 0 clamp(240px,28vw,320px);scroll-snap-align:start;
display:flex;flex-direction:column;gap:12px;
color:inherit;text-decoration:none;text-align:left;
background:transparent;border:0;padding:0;cursor:pointer;font:inherit;
transition:transform .3s cubic-bezier(.22,1,.36,1);
}
#zapasy .ms-upcoming-card{
opacity:0;
transform:translateY(16px);
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1);
}
#zapasy.is-in .ms-upcoming-card{opacity:1;transform:none}
#zapasy.is-in .ms-upcoming-card:nth-child(1){transition-delay:.04s}
#zapasy.is-in .ms-upcoming-card:nth-child(2){transition-delay:.1s}
#zapasy.is-in .ms-upcoming-card:nth-child(3){transition-delay:.16s}
#zapasy.is-in .ms-upcoming-card:nth-child(4){transition-delay:.22s}
#zapasy.is-in .ms-upcoming-card:nth-child(5){transition-delay:.28s}
#zapasy.is-in .ms-upcoming-card:nth-child(6){transition-delay:.34s}
button.ms-upcoming-card{appearance:none;-webkit-appearance:none}
@media (hover:hover) and (pointer:fine){
#zapasy.is-in .ms-upcoming-card{
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
#zapasy.is-in .ms-upcoming-card:hover,
#zapasy.is-in .ms-upcoming-card:focus-visible{transform:translateY(-5px)}
}
.ms-upcoming-media{
position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;
background:linear-gradient(145deg,#152230,#160c10);box-shadow:var(--shadow);
}
.ms-upcoming-media img{
display:block;width:100%;height:100%;object-fit:cover;
transform:scale(1.02);transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.ms-upcoming-card:hover .ms-upcoming-media img,
.ms-upcoming-card:focus-visible .ms-upcoming-media img{transform:scale(1.1)}
.ms-upcoming-fallback{
width:56px!important;height:56px!important;margin:auto;object-fit:contain!important;
position:absolute;inset:0;opacity:.85;transform:none!important;
}
.ms-upcoming-shade{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,12,18,.05) 30%,rgba(6,12,18,.78) 100%);
pointer-events:none;
}
.ms-upcoming-when{
position:absolute;left:12px;bottom:12px;z-index:1;
display:flex;flex-direction:column;gap:2px;line-height:1.1;
}
.ms-upcoming-day{
font-size:.95rem;font-weight:700;letter-spacing:.02em;color:#fff;text-transform:uppercase;
}
.ms-upcoming-clock{
font-size:1.15rem;font-weight:700;color:#fff;
}
.ms-upcoming-card.is-live .ms-upcoming-clock{color:#b8f0d0}
.ms-upcoming-live{
position:absolute;top:12px;left:12px;z-index:1;
display:inline-flex;align-items:center;gap:6px;
font-size:.7rem;font-weight:800;letter-spacing:.08em;
color:#fff;background:var(--accent);padding:6px 10px;border-radius:999px;
}
.ms-upcoming-live::before{
content:"";width:6px;height:6px;border-radius:50%;background:#fff;
animation:ms-upcoming-pulse 1.4s ease-out infinite;
}
@keyframes ms-upcoming-pulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}
70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
.ms-upcoming-live::before{animation:none}
#zapasy .ms-upcoming-card{opacity:1;transform:none;transition:none}
#zapasy.is-in .ms-upcoming-card:hover,
#zapasy.is-in .ms-upcoming-card:focus-visible{transform:none}
}
.ms-upcoming-info{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0 2px}
.ms-upcoming-sport{
font-size:.78rem;font-weight:600;color:rgba(232,237,242,.55);letter-spacing:.02em;
}
.ms-upcoming-teams{
font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.01em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ms-upcoming-comp{
font-size:.82rem;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-upcoming-empty{
margin:0;padding:8px var(--page-pad);color:var(--muted);font-weight:600;
}
@media(max-width:640px){
.ms-upcoming-card{flex-basis:clamp(220px,72vw,280px)}
.ms-upcoming-teams{font-size:.98rem}
}
.sec-hint{margin-left:auto;text-align:right;flex-shrink:0;font-size:.8rem;color:var(--muted);font-weight:600}
.rail-wrap{position:relative}
.channel-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px var(--page-pad) 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.channel-rail::-webkit-scrollbar{height:8px}
.channel-rail::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px}
/* Sporty: rozprostřít k okrajům, bez „karet“ */
.channel-rail--sports{
justify-content:space-evenly;
align-items:stretch;
gap:0;
overflow:visible;
scroll-snap-type:none;
padding:8px var(--page-pad) 16px;
}
.channel{position:relative;flex:0 0 clamp(220px,26vw,300px);scroll-snap-align:start;color:var(--ink)}
.channel-rail--sports .channel--ball{
flex:1 1 0;
min-width:0;
max-width:280px;
scroll-snap-align:none;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
overflow:visible;
}
.channel-thumb-wrap{position:relative;display:block;width:100%;aspect-ratio:16/10;isolation:isolate}
.channel--ball .channel-thumb-wrap{
aspect-ratio:1/1;
width:var(--ms-ball-size);
max-width:var(--ms-ball-size);
margin:0 auto;
overflow:visible;
}
.channel-thumb{position:absolute;inset:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,var(--accent),#b82e38)}
.channel-thumb--ball{
border-radius:0;
overflow:visible;
box-shadow:none;
background:transparent;
}
.sport-rail-ball{
position:absolute;inset:0;
pointer-events:none;z-index:1;
overflow:visible;
opacity:var(--ms-ball-opacity);
filter:var(--ms-ball-shadow);
-webkit-mask-image:var(--ms-ball-mask);
mask-image:var(--ms-ball-mask);
transition:transform .35s ease, opacity .35s ease, filter .35s ease;
}
/* VT target = čistý canvas (brand barvy z WebGL, bez CSS tintu) */
.sport-ball-vt{
position:absolute;inset:0;
width:100%;height:100%;
transform-origin:center center;
}
.sport-ball-vt canvas{
display:block;width:100%!important;height:100%!important;
}
.channel--ball:hover .sport-rail-ball{
transform:scale(1.08);
opacity:1;
filter:drop-shadow(0 18px 24px rgba(0,0,0,.55)) drop-shadow(0 5px 12px rgba(0,0,0,.38));
}
/* Capture: shell jen layout — snapshot = brand canvas 1:1 */
.sport-rail-ball.is-vt-capture{
transition:none !important;
transform:none !important;
filter:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
opacity:1 !important;
}
.sport-ball-vt.is-vt-capture{
transition:none !important;
}
.channel-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.channel:hover .channel-bg{transform:scale(1.08)}
.channel-badge{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:6px;background:#e0322c;color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:var(--radius-chip);corner-shape:squircle}
.channel-badge i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.channel-play{
position:absolute;top:50%;left:50%;z-index:3;
transform:translate(-50%,-50%) scale(1);
width:54px;height:54px;border-radius:var(--radius-squircle);corner-shape:squircle;
color:#13202b;display:grid;place-items:center;font-size:1.2rem;padding-left:3px;
background:transparent;isolation:isolate;overflow:visible;
opacity:1;transition:opacity .25s,transform .25s;pointer-events:none;
}
.channel-play::before,.rec-play::before{
content:"";
position:absolute;
inset:-3px;
border-radius:inherit;
corner-shape:inherit;
z-index:-2;
background:conic-gradient(
from var(--hero-play-angle),
transparent 0deg,
transparent 250deg,
rgba(226,61,74,.15) 280deg,
var(--accent) 318deg,
#ff6b76 338deg,
#fff 352deg,
transparent 360deg
);
animation:hero-play-orbit 2.2s linear infinite;
}
.channel-play::after,.rec-play::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
corner-shape:inherit;
z-index:-1;
background:rgba(255,255,255,.96);
box-shadow:0 6px 20px rgba(0,0,0,.28);
transition:background-color .2s,transform .2s;
}
@media(hover:hover) and (pointer:fine){
.channel-play{transform:translate(-50%,-50%) scale(.9)}
.channel:hover .channel-play{transform:translate(-50%,-50%) scale(1)}
}
@media(prefers-reduced-motion:reduce){
.channel-play::before,.rec-play::before{animation:none;background:var(--accent)}
}
.channel-info{display:flex;align-items:center;gap:10px;padding:12px 4px 2px}
.channel-info--ball{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
padding:10px 0 0;
text-align:center;
}
.channel-emoji{font-size:1.6rem;line-height:1;flex:none}
.channel-info h3{font-size:1.05rem;letter-spacing:-.3px;transition:color .2s}
.channel-sport-name{
display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
margin:0;font-size:1.1rem;font-weight:700;line-height:1.2;
color:inherit;background:transparent;
transition:color .25s ease;
}
.channel--ball .channel-sport-name{
position:relative;
padding-bottom:8px;
}
.channel--ball .channel-sport-name::after{
content:"";
position:absolute;left:50%;bottom:0;
width:0;height:2px;
border-radius:2px;
background:var(--accent);
transform:translateX(-50%);
transition:width .32s cubic-bezier(.22,1,.36,1);
}
.channel--ball:hover .channel-sport-name::after{width:2rem}
.channel-live-word{
display:inline-flex;align-items:center;gap:6px;
font-size:.68em;
font-weight:700;
letter-spacing:.04em;
color:#fff;
background:#e0322c;
padding:6px 12px;
min-height:28px;
border-radius:999px;
}
.channel-live-word i{
width:6px;height:6px;border-radius:50%;flex:none;
background:#fff;
box-shadow:0 0 0 0 rgba(255,255,255,.5);
animation:channel-live-pulse 1.4s ease-out infinite;
}
@keyframes channel-live-pulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}
70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
.channel-live-word i{animation:none}
}
.channel:hover .channel-sport-name{color:var(--accent)}
.channel:hover .channel-live-word{color:#fff;filter:brightness(1.06)}
.channel-info small{display:block;color:var(--muted);font-weight:600;font-size:.74rem;margin-top:2px}
@media(max-width:640px){
.channel-rail--sports{
justify-content:flex-start;
gap:8px;
overflow-x:auto;
scroll-snap-type:x mandatory;
}
.channel-rail--sports .channel--ball{
flex:0 0 clamp(140px,42vw,200px);
max-width:none;
scroll-snap-align:start;
}
}
.rail-arrow{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:var(--radius-squircle);corner-shape:squircle;background:var(--surface-raised);box-shadow:var(--shadow);color:var(--ink);font-size:1.5rem;line-height:1;display:grid;place-items:center;transition:transform .2s,color .2s}
.rail-arrow:hover{transform:translateY(-50%) scale(1.08);color:var(--accent)}
.rail-arrow.prev{left:8px}
.rail-arrow.next{right:8px}
.rail-arrow[hidden]{display:none!important}
.ms-rail-hint[hidden]{display:none!important}
@media(max-width:640px){.rail-arrow{display:none}}
/* MATCH WIDGETS */
.mw{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.mw-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-soft);font-weight:800}
.mw-head .emoji{font-size:1.3rem}
.mw-head a{margin-left:auto;font-size:.8rem;color:var(--accent);font-weight:700}
.mw ul{list-style:none}
.mw li{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border-soft);align-items:center}
.mw li:last-child{border-bottom:none}
.mw .d{font-weight:800;color:var(--accent);font-size:.85rem}
.mw .d small{display:block;color:var(--muted);font-weight:600}
.mw .m{font-weight:600;font-size:.92rem}
.mw .m small{display:block;color:var(--muted);font-weight:500;font-size:.78rem}
.mw li.live .d{color:#e0322c}
/* UPCOMING MATCHES — sport rows (full-bleed) */
.sport-rows{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding:0 var(--page-pad);--sport-pad:var(--page-pad);--line-inset-x:28px;--line-inset-y:24px;width:100%;margin:0}
.sport-row{
display:flex;flex-direction:column;align-items:center;gap:16px;
width:100%;box-sizing:border-box;
background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;
overflow:visible;
}
.sport-row:not(:last-child){
padding-bottom:32px;
position:relative;
}
.sport-row:not(:last-child)::after{
content:'';display:block;position:absolute;left:calc(-1 * var(--sport-pad) + var(--line-inset-x));right:calc(-1 * var(--sport-pad) + var(--line-inset-x));bottom:0;
height:1px;background:var(--divider);
}
.sr-head{
display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;
gap:10px 12px;width:100%;max-width:400px;margin:0 auto;min-height:44px;flex:none;box-sizing:border-box;
}
.sr-title-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px 10px;min-width:0}
.sr-icon{width:44px;height:44px;object-fit:contain;display:block;flex:none}
.sr-name{font-weight:800;font-size:1.4rem;letter-spacing:-.3px;margin:0;line-height:1.1;white-space:nowrap;flex:none}
.sr-link{font-size:.82rem;color:var(--accent);font-weight:700;white-space:nowrap;flex:none}
.sr-matches{display:flex;flex-wrap:nowrap;gap:18px;align-items:center;justify-content:center;width:100%}
@media(max-width:640px){
.sport-row{gap:12px}
.mimg-lg{width:100%;flex:none;max-width:100%}
.sport-rows{padding:0 16px;--sport-pad:16px}
.sport-row:not(:last-child){padding-bottom:24px}
.sec-head-inset{padding-left:16px;padding-right:16px}
section{padding:36px 0;scroll-margin-top:68px}
}
@media(min-width:1100px){
.sport-rows{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:0;
row-gap:0;
align-items:stretch;
--line-inset-x:10%;
--line-inset-y:32px;
}
.sport-row{align-items:center}
.sport-row:not(:last-child){padding-bottom:40px}
.sport-row:not(:last-child)::after{display:none}
.sport-row:nth-child(odd){border-right:0;padding-right:24px;position:relative}
.sport-row:nth-child(odd)::before{
content:'';position:absolute;top:var(--line-inset-y);bottom:var(--line-inset-y);right:0;width:1px;background:var(--divider);pointer-events:none;
}
.sport-row:nth-child(even){padding-left:24px;position:relative}
.sport-row:nth-child(odd):not(:nth-last-child(1))::after,
.sport-row:nth-child(even):not(:nth-last-child(-n+2))::after{
display:block;content:'';position:absolute;bottom:0;height:1px;background:var(--divider);
}
.sport-row:nth-child(odd):not(:nth-last-child(1))::after{left:var(--line-inset-x);right:0}
.sport-row:nth-child(even):not(:nth-last-child(-n+2))::after{left:0;right:var(--line-inset-x)}
.sport-row:nth-child(n+3){padding-top:40px}
.sport-row:last-child:nth-child(odd){padding-right:0}
.sport-row:last-child:nth-child(odd)::before{display:none}
}
.sport-rows--pair .sport-row::before,
.sport-rows--pair .sport-row::after{display:none!important}
.sport-rows--pair .sport-row:not(:last-child){padding-bottom:0}
.sport-rows--trio .sport-row:not(:last-child)::after{
left:50%;
right:auto;
width:min(400px,100%);
transform:translateX(-50%);
}
@media(min-width:1100px){
.sport-rows--pair .sport-row:nth-child(odd){padding-right:24px}
.sport-rows--pair .sport-row:nth-child(even){padding-left:24px;padding-right:0}
.sport-rows--pair .sport-row:nth-child(n+3){padding-top:0}
.sport-rows--trio{
grid-template-columns:repeat(3,minmax(0,1fr));
grid-template-rows:auto auto auto;
row-gap:16px;
align-items:stretch;
}
.sport-rows--trio .sport-row::before{display:none!important}
.sport-rows--trio .sport-row::after{display:none!important}
.sport-rows--trio .sport-row:not(:last-child){padding-bottom:0}
.sport-rows--trio .sport-row{
display:grid;
grid-template-rows:subgrid;
grid-row:span 3;
grid-template-columns:minmax(0,1fr);
justify-items:center;
align-items:start;
gap:0;
row-gap:0;
padding:0 16px;
position:relative;
}
.sport-rows--trio .mc-viewport{position:relative}
.sport-rows--trio .sport-row:not(:last-child) .mc-viewport::after{
content:'';
position:absolute;
top:0;
left:auto;
right:-16px;
bottom:auto;
width:1px;
height:100%;
background:var(--divider);
pointer-events:none;
}
.sport-rows--trio .sport-row:first-child,
.sport-rows--trio .sport-row:last-child{padding-left:16px;padding-right:16px}
.sport-rows--trio .sport-row:nth-child(n+3){padding-top:0}
.sport-rows--trio .match-carousel,
.sport-rows--trio .mc-dates,
.sport-rows--trio .sr-head{width:100%;max-width:400px}
.sport-rows--trio .mc-dates{margin-top:0;height:52px}
}
.sr-matches.match-carousel{flex-direction:column;align-items:center;gap:0;width:100%;overflow:hidden}
.match-carousel{
--mc-gap:0;
--mc-lg:100%;
position:relative;
width:100%;
max-width:400px;
margin:0 auto;
display:flex;flex-direction:column;
}
.mc-viewport{overflow:hidden;width:100%;position:relative}
.mc-stage{
position:relative;
width:100%;
aspect-ratio:2/3;
}
.mc-tile.mimg{
display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;
transition:opacity .3s cubic-bezier(.25,.1,.25,1);
}
.mc-tile.is-big{z-index:2;opacity:1}
.mc-tile.is-hidden{display:none!important}
.mc-tile.fade-out{opacity:0;z-index:1}
.mc-tile.is-off{opacity:0;pointer-events:none;z-index:0}
.mc-dates{
display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;justify-items:center;
width:100%;max-width:400px;height:52px;margin:12px auto 0;padding:0;box-sizing:border-box;
}
.mc-date-list{
display:flex;align-items:center;justify-content:center;gap:6px;
width:100%;height:52px;margin:0;
}
.mc-date-arrow{
position:static;transform:none;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;padding:0;border:2px solid transparent;border-radius:var(--radius-squircle);corner-shape:squircle;
background:#fff;color:#13202b;font-size:1.35rem;line-height:0;font-weight:700;
cursor:pointer;box-sizing:border-box;
transition:background-color .2s,color .2s,border-color .2s;
}
.mc-date-arrow.prev{justify-self:start}
.mc-date-arrow.next{justify-self:end}
.mc-date-arrow:hover{background:#e8edf2}
.mc-date{
flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
width:44px;height:52px;padding:0;border:2px solid transparent;border-radius:var(--radius-squircle);corner-shape:squircle;
background:#fff;color:#13202b;font:inherit;font-size:1rem;font-weight:700;
cursor:pointer;box-sizing:border-box;line-height:1;
transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;
}
.mc-date-num{font-size:1rem;font-weight:700;line-height:1}
.mc-date-mon{
font-size:.62rem;font-weight:700;line-height:1;letter-spacing:.02em;
text-transform:lowercase;color:rgba(19,32,43,.55);
}
.mc-date.is-active .mc-date-mon{color:rgba(255,255,255,.85)}
.mc-date:hover{background:#e8edf2}
.mc-date.is-active{
background:var(--accent);color:#fff;border-color:var(--accent);
box-shadow:0 4px 14px rgba(226,61,74,.35);
}
.mc-date:focus-visible,.mc-date-arrow:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
.mc-date-arrow:disabled{opacity:.35;cursor:default}
.mc-date-arrow:disabled:hover{background:#fff}
.mc-dates--solo .mc-date-arrow{visibility:hidden}
@media(prefers-reduced-motion:reduce){.mc-tile{transition:none!important}.mc-date,.mc-date-arrow{transition:none!important}}
.mimg{position:relative;display:flex;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(135deg,var(--accent),#b82e38);color:#fff}
.mimg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;will-change:transform;transform:scale(var(--photo-scale,1.12));transform-origin:var(--photo-origin,50% 22%);transition:transform .35s cubic-bezier(.25,.1,.25,1)}
.mc-tile.is-big .mimg-photo,.mimg-lg .mimg-photo{--photo-scale:var(--photo-hero-scale,1.14);transform-origin:var(--photo-hero-origin,50% 20%)}
.sport-row--florbal{--photo-hero-scale:1.12;--photo-peer-scale:1.34;--photo-hero-origin:36% 18%;--photo-peer-origin:40% 22%}
.sport-row--hazena{--photo-hero-scale:1.14;--photo-peer-scale:1.38;--photo-hero-origin:32% 16%;--photo-peer-origin:36% 20%}
.sport-row--volejbal{--photo-hero-scale:1.16;--photo-peer-scale:1.4;--photo-hero-origin:50% 15%;--photo-peer-origin:54% 19%}
.sport-row--futsal{--photo-hero-scale:1.1;--photo-peer-scale:1.32;--photo-hero-origin:44% 58%;--photo-peer-origin:48% 62%}
.mimg-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(16,8,10,.92) 0%,rgba(16,8,10,.55) 38%,rgba(16,8,10,.08) 68%)}
.mimg-info{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;width:100%;min-width:0;padding:20px 22px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.mimg-when{display:flex;align-items:center;gap:12px;line-height:1}
.mc-day{font-size:3rem;font-weight:800;color:#fff}
.mc-when-txt{display:flex;flex-direction:column;gap:3px}
.mc-mon{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.85)}
.mc-dow{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.85)}
.mc-teams{font-weight:700;font-size:1.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-comp{font-size:.95rem;color:rgba(255,255,255,.82);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mimg-sm .mimg-info{padding:16px 16px;gap:4px}
.mimg-sm .mc-day{font-size:2.1rem}
.mimg-sm .mimg-when{gap:8px}
.mimg-sm .mc-mon,.mimg-sm .mc-dow{font-size:.78rem}
.mimg-sm .mc-teams{font-size:1rem}
.mimg.live{outline:3px solid #e0322c;outline-offset:-3px}
.mcard-live{position:absolute;top:12px;right:12px;z-index:3;font-size:.78rem;font-weight:800;letter-spacing:.5px;color:#fff;background:#e0322c;padding:3px 11px;border-radius:var(--radius-chip);corner-shape:squircle;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mimg-lg{flex:0 0 400px;width:400px;max-width:400px;margin:0 auto;aspect-ratio:2/3}
.mimg-sm{flex:0 0 260px;width:260px;aspect-ratio:2/3}
.mimg-sm .mcard-live{font-size:.68rem;top:10px;right:10px;padding:2px 9px}
.sr-empty{align-self:center;color:var(--muted);font-weight:600;font-size:1rem}
.mimg-lg{max-width:400px;width:100%;margin:0 auto;aspect-ratio:2/3}
@media(max-width:860px){
.sport-rows{padding:0 20px;--sport-pad:20px}
.sport-row:not(:last-child){padding-bottom:28px}
.sec-head-inset{padding-left:20px;padding-right:20px}
.mc-day{font-size:2.6rem}
.sr-matches{align-items:center;gap:0;width:100%}
.mimg-lg{width:100%;flex:none;max-width:400px;margin:0 auto}
.match-carousel{width:100%;max-width:400px}
.mc-dates{margin-top:10px;height:48px;grid-template-columns:40px minmax(0,1fr) 40px}
.mc-date{width:40px;height:48px;font-size:.95rem}
.mc-date-num{font-size:.95rem}
.mc-date-mon{font-size:.58rem}
.mc-date-arrow{width:40px;height:40px;font-size:1.2rem}
.mc-date-list{height:48px;margin:0}
}
/* ZÁZNAMY — video recordings grid */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;padding:0 var(--page-pad);width:100%;margin:0}
@media(min-width:1400px){.rec-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}
@media(max-width:720px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rec-card{display:flex;flex-direction:column;text-align:left;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;width:100%;min-width:0}
/* Reveal jen na homepage section — ne na aside#zaznamy ve sport detailu */
section#zaznamy .rec-card{
opacity:0;
transform:translateY(16px);
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .48s cubic-bezier(.22,1,.36,1);
}
section#zaznamy.is-in .rec-card{opacity:1;transform:none}
section#zaznamy.is-in .rec-card:nth-child(1){transition-delay:.04s}
section#zaznamy.is-in .rec-card:nth-child(2){transition-delay:.09s}
section#zaznamy.is-in .rec-card:nth-child(3){transition-delay:.14s}
section#zaznamy.is-in .rec-card:nth-child(4){transition-delay:.19s}
section#zaznamy.is-in .rec-card:nth-child(5){transition-delay:.24s}
section#zaznamy.is-in .rec-card:nth-child(6){transition-delay:.29s}
section#zaznamy.is-in .rec-card:nth-child(7){transition-delay:.34s}
section#zaznamy.is-in .rec-card:nth-child(8){transition-delay:.39s}
@media (hover:hover) and (pointer:fine){
section#zaznamy.is-in .rec-card{
transition:opacity .48s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
section#zaznamy.is-in .rec-card:hover{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
section#zaznamy .rec-card{opacity:1;transform:none;transition:none}
section#zaznamy.is-in .rec-card:hover{transform:none}
}
.rec-thumb-wrap{position:relative;display:block;width:100%;aspect-ratio:16/9;flex:none;isolation:isolate}
.rec-thumb{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,var(--accent),#b82e38)}
.rec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rec-card:hover .rec-bg{transform:scale(1.1)}
.rec-thumb::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
background:var(--accent);transform:scaleX(0);transform-origin:left center;
transition:transform .35s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
.rec-card:hover .rec-thumb::before{transform:scaleX(1)}
.rec-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,32,0) 55%,rgba(11,22,32,.35));opacity:0;transition:opacity .25s;pointer-events:none}
.rec-card:hover .rec-thumb::after{opacity:1}
.rec-play{
position:absolute;top:50%;left:50%;z-index:3;
transform:translate(-50%,-50%) scale(1);
width:54px;height:54px;border-radius:var(--radius-squircle);corner-shape:squircle;
color:#13202b;display:grid;place-items:center;font-size:1.2rem;padding-left:3px;
background:transparent;isolation:isolate;overflow:visible;
opacity:1;transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
.rec-play{transform:translate(-50%,-50%) scale(.88)}
.rec-card:hover .rec-play{transform:translate(-50%,-50%) scale(1.08)}
}
.rec-info{display:flex;flex-direction:column;gap:5px;padding:12px 4px 2px}
.rec-title{font-size:.98rem;font-weight:700;line-height:1.35;letter-spacing:-.2px;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rec-card:hover .rec-title{color:var(--accent)}
.rec-tag{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:.78rem}
.rec-empty{color:var(--muted);font-weight:600;padding:0 var(--page-pad)}
@media(max-width:640px){.rec-grid{grid-template-columns:1fr;padding:0 16px}.rec-empty{padding:0 16px}}
/* VIDEO CARDS */
.vcard{background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.vcard:hover{transform:translateY(-4px)}
.vcard .meta{padding:14px 16px 18px}
.vcard .tag{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2)}
.vcard h3{font-size:1rem;margin-top:5px;line-height:1.35}
.vcard .video-frame{border-radius:0;box-shadow:none}
/* SPORT PAGE */
.sport-hero{
position:relative;isolation:isolate;overflow:hidden;
min-height:clamp(220px,32vw,340px);
display:flex;align-items:flex-end;
color:#fff;
border-bottom:1px solid var(--border);
}
.sport-hero-bg{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 30%;
z-index:0;
transform:scale(1.04);
filter:saturate(1.05) contrast(1.06);
}
.sport-hero-shade{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(90deg,rgba(6,14,22,.88) 0%,rgba(6,14,22,.62) 42%,rgba(6,14,22,.28) 70%,rgba(6,14,22,.18) 100%),
linear-gradient(0deg,rgba(6,14,22,.72) 0%,rgba(6,14,22,.2) 45%,rgba(6,14,22,.35) 100%);
}
/*
Hero míč: plná opacity, bez soft masky — ať se neblendí do fotky.
Stín oddělí míč od pozadí; WebGL alpha drží tvar.
*/
.sport-hero-ball{
position:absolute;z-index:1;pointer-events:none;
top:auto;
right:max(12px, var(--page-pad));
bottom:clamp(12px, 4vw, 28px);
width:var(--ms-ball-size);
height:var(--ms-ball-size);
opacity:1;
filter:var(--ms-ball-shadow);
-webkit-mask-image:none;
mask-image:none;
}
.sport-hero-ball .sport-ball-vt{
z-index:1;
opacity:1;
}
.sport-hero-ball canvas{
display:block;width:100%!important;height:100%!important;
}
/* Pending: shell/canvas nevidět, box `.sport-ball-vt` drží cílovou geometrii VT */
.sport-hero-ball.is-vt-pending{
filter:none !important;
}
.sport-hero-ball.is-vt-pending .sport-ball-vt{
opacity:0 !important;
}
/* Landing: čistý canvas 1:1 s VT */
.sport-hero-ball.is-vt-landing{
filter:none !important;
opacity:1 !important;
}
.sport-hero-ball.is-vt-landing .sport-ball-vt{
opacity:0;
animation:ms-ball-live-crossfade .18s cubic-bezier(.33,1,.36,1) forwards;
}
/* Settle: plný míč + soft stín, žádný fade do fotky */
.sport-hero-ball.is-vt-settled{
opacity:1;
filter:var(--ms-ball-shadow) !important;
-webkit-mask-image:none !important;
mask-image:none !important;
transition:filter .45s cubic-bezier(.33,1,.36,1);
}
.sport-hero-ball.is-vt-settled .sport-ball-vt{
opacity:1;
animation:none;
}
.sport-hero-content{
position:relative;z-index:3;
width:100%;
padding:36px var(--page-pad) 34px;
}
.sport-hero h1{
display:flex;align-items:center;gap:14px;
font-size:clamp(1.7rem,3.5vw,2.6rem);letter-spacing:-.5px;
text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.sport-hero-logo{
width:56px;height:56px;flex:none;object-fit:contain;
border-radius:var(--radius-squircle);corner-shape:squircle;
box-shadow:0 6px 22px rgba(0,0,0,.35);
background:rgba(10,18,26,.35);
}
.sport-hero p{
opacity:.92;max-width:48ch;margin-top:10px;color:rgba(232,237,242,.88);
text-shadow:0 1px 10px rgba(0,0,0,.4);
}
@media(max-width:640px){
.sport-hero{min-height:220px}
.sport-hero-logo{width:44px;height:44px;border-radius:var(--radius-squircle);corner-shape:squircle}
.sport-hero-content{padding:28px var(--page-pad) 26px}
.sport-hero-bg{object-position:center 25%}
.sport-hero-ball{
width:var(--ms-ball-size);
height:var(--ms-ball-size);
bottom:10px;
right:max(10px, var(--page-pad));
}
}
.sport-page{padding-bottom:56px}
.sport-section{padding:40px 0 8px;border-top:1px solid var(--border)}
.sport-section:first-child{border-top:0;padding-top:28px}
.sport-section .sec-head{margin-bottom:18px}
.sport-split-main .live-stack{gap:0;height:100%}
.sport-live-play{
position:relative;
display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;
text-align:left;font:inherit;color:inherit;border-radius:var(--radius);
overflow:visible;
}
.sport-live-thumb{
position:relative;display:block;aspect-ratio:16/9;width:100%;
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
background:#0b1620;
}
.sport-live-thumb-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.sport-live-thumb::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,22,32,.08) 40%,rgba(11,22,32,.45));
transition:opacity .25s;pointer-events:none;
}
.sport-live-play:hover .sport-live-thumb::after{opacity:.85}
.sport-live-badge{
position:absolute;top:14px;left:14px;z-index:2;
display:inline-flex;align-items:center;
background:#e0322c;color:#fff;font-size:.72rem;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius-chip);corner-shape:squircle;
}
.sport-live-play-btn{
position:absolute;top:50%;left:50%;z-index:3;
width:72px;height:72px;font-size:1.45rem;
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
.sport-live-play:hover .sport-live-play-btn::after{background:#fff}
@media(hover:hover) and (pointer:fine){
.sport-live-play-btn{transform:translate(-50%,-50%) scale(.94);opacity:1}
.sport-live-play:hover .sport-live-play-btn{transform:translate(-50%,-50%) scale(1);opacity:1}
}
/* Side stack height = main 16:9: main≈2/3 of (cqw − gap), so H = that × 9/16. */
.sport-rec-list{
display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--split-gap,14px);
width:100%;
height:calc((2 * (100cqw - var(--split-gap))) / 3 * 9 / 16);
max-height:none;overflow:hidden;padding:0;
}
.sport-rec-list .sport-rec-card{
position:relative;width:100%;min-height:0;height:100%;
display:flex;flex-direction:column;
}
.sport-rec-list .rec-thumb-wrap{
position:relative;flex:1;min-height:0;width:100%;aspect-ratio:auto;
}
.sport-rec-list .rec-thumb{
position:absolute;inset:0;border-radius:var(--radius);
}
.sport-rec-list .rec-info{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:28px 12px 10px;margin:0;
background:linear-gradient(180deg,transparent,rgba(6,14,22,.88));
pointer-events:none;
}
.sport-rec-list .rec-tag{color:rgba(232,237,242,.7);font-size:.72rem}
.sport-rec-list .rec-title{
font-size:.88rem;color:#fff;-webkit-line-clamp:2;
text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.sport-rec-list .rec-play{width:44px;height:44px;font-size:1rem}
.sport-schedule{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sport-schedule-item{
display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;
padding:14px 0;border-bottom:1px solid var(--border);
}
.sport-schedule-item:last-child{border-bottom:0}
.sport-schedule-swatch{
width:10px;height:10px;flex:none;
}
.sport-schedule-when{
display:flex;align-items:baseline;gap:8px;min-width:0;
}
.sport-schedule-day{
font-size:1.85rem;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--ink);
}
.sport-schedule-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.sport-schedule-mon{
font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:lowercase;color:var(--muted);line-height:1;
}
.sport-schedule-time{font-size:.88rem;font-weight:700;color:var(--accent);line-height:1}
.sport-schedule-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.sport-schedule-live{
display:inline-flex;align-self:flex-start;
font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:#fff;background:#e0322c;padding:3px 8px;border-radius:var(--radius-chip);corner-shape:squircle;margin-bottom:2px;
}
.sport-schedule-teams{
font-size:1.02rem;font-weight:700;letter-spacing:-.2px;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sport-schedule-comp{font-size:.82rem;font-weight:600;color:var(--muted)}
.sport-schedule-item.is-live .sport-schedule-time{color:#e0322c}
.sport-upcoming-empty{color:var(--muted);font-weight:600;margin:0}
@media(max-width:900px){
.sport-section--split{
width:auto;max-width:none;margin-left:0;margin-right:0;
padding-left:0;padding-right:0;
}
.sport-split{
grid-template-columns:1fr;
grid-template-areas:
"titleLive"
"main"
"titleRec"
"side";
row-gap:14px;
}
.sport-rec-list{
display:flex;flex-direction:column;height:auto;overflow:visible;
}
.sport-rec-list .sport-rec-card{height:auto}
.sport-rec-list .rec-thumb-wrap{aspect-ratio:16/9;flex:none}
.sport-rec-list .rec-thumb{position:absolute}
}
.subtabs{display:flex;gap:4px;margin:26px 0 6px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px;background:var(--bg-soft);border-radius:999px;position:relative;width:fit-content;max-width:100%}
.subtabs::-webkit-scrollbar{display:none}
.subtab{padding:9px 18px;border-radius:999px;font-weight:700;font-size:.9rem;background:transparent!important;transition:color .22s;flex:none;scroll-snap-align:start;position:relative;z-index:1}
.subtab:hover{color:var(--accent)}
.subtab.active{color:var(--ink)}
.subtab.is-lit{color:#fff}
.subpanel{padding-top:22px}
.rules{max-width:75ch}
.rules h2,.rules h3{margin:18px 0 6px}
.rules p{color:var(--muted);margin-bottom:8px}
.rules-back{margin:0 0 18px;font-weight:600}
/* RULES ACCORDION */
.ms-rules{
max-width:min(920px,100%);margin:0 0 22px;
display:flex;flex-direction:column;gap:10px;
}
.ms-rules--page{margin-top:22px}
.ms-rules-item{
background:
linear-gradient(160deg,rgba(255,255,255,.04),transparent 55%),
rgba(19,31,42,.88);
border-radius:var(--radius);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
overflow:hidden;
transition:background-color .18s,box-shadow .18s;
}
.ms-rules-item[open]{
background:
linear-gradient(160deg,rgba(255,107,118,.08),transparent 55%),
rgba(26,40,52,.95);
box-shadow:inset 0 0 0 1px rgba(255,107,118,.18);
}
.ms-rules-summary{
display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:14px;
list-style:none;cursor:pointer;padding:16px 18px;
user-select:none;
transition:background-color .18s,color .18s;
}
.ms-rules-summary--thumb{
grid-template-columns:auto auto minmax(0,1fr) minmax(0,1.2fr) auto;gap:12px 14px;
}
.ms-rules-summary::-webkit-details-marker{display:none}
.ms-rules-summary::marker{content:""}
.ms-rules-summary:hover{background:rgba(255,255,255,.04);color:#fff}
.ms-rules-summary:focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-radius:8px}
.ms-rules-thumb{
width:72px;height:48px;object-fit:cover;border-radius:8px;flex:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
background:var(--bg);
}
.ms-rules-num{
display:inline-flex;align-items:center;justify-content:center;
min-width:2ch;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;
color:#ff6b76;font-variant-numeric:tabular-nums;
}
.ms-rules-title{
font-weight:800;font-size:1.05rem;letter-spacing:-.3px;line-height:1.3;
min-width:0;
}
.ms-rules-preview{
min-width:0;color:var(--muted);font-size:.82rem;font-weight:500;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
text-align:right;
}
.ms-rules-item[open] .ms-rules-preview{opacity:.55}
.ms-rules-chevron{
width:10px;height:10px;flex:none;
border-right:2px solid rgba(232,237,242,.55);border-bottom:2px solid rgba(232,237,242,.55);
transform:rotate(45deg);margin-top:-4px;
transition:transform .22s cubic-bezier(.25,.1,.25,1),border-color .18s;
}
.ms-rules-item:not([open]) .ms-rules-chevron{
animation:ms-rules-chevron-nudge 1.6s ease-in-out infinite;
}
.ms-rules-item:not([open]) .ms-rules-summary{
animation:ms-rules-summary-breathe 2.4s ease-in-out infinite;
}
.ms-rules-item:not([open]):hover .ms-rules-chevron,
.ms-rules-item:not([open]):focus-within .ms-rules-chevron,
.ms-rules-item:not([open]):hover .ms-rules-summary,
.ms-rules-item:not([open]):focus-within .ms-rules-summary{
animation:none;
}
.ms-rules-item[open] .ms-rules-chevron{
animation:none;
transform:rotate(225deg);margin-top:4px;border-color:#ff6b76;
}
.ms-rules-item[open] .ms-rules-summary{animation:none;color:#fff}
@keyframes ms-rules-chevron-nudge{
0%,100%{transform:rotate(45deg) translateY(0)}
50%{transform:rotate(45deg) translateY(3px)}
}
@keyframes ms-rules-summary-breathe{
0%,100%{opacity:1}
50%{opacity:.78}
}
.ms-rules-body{
display:grid;grid-template-columns:minmax(0,1fr);gap:14px;
padding:0 18px 18px 18px;
max-width:68ch;
}
.ms-rules-body:has(.ms-rules-img){
grid-template-columns:minmax(120px,38%) minmax(0,1fr);
align-items:start;max-width:none;
}
.ms-rules-img{
width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
background:var(--bg);
}
.ms-rules-body p{
margin:0;color:var(--muted);font-size:1rem;line-height:1.6;
}
.ms-rules-body:not(:has(.ms-rules-img)) p{
padding-left:calc(2ch + 14px);
}
@media (max-width:640px){
.ms-rules-body:has(.ms-rules-img){grid-template-columns:1fr}
.ms-rules-body:not(:has(.ms-rules-img)) p{padding-left:0}
.ms-rules-thumb{width:56px;height:40px}
.ms-rules-summary,
.ms-rules-summary--thumb{
grid-template-columns:auto auto minmax(0,1fr) auto;
}
.ms-rules-summary--thumb{grid-template-columns:auto auto minmax(0,1fr) auto}
.ms-rules-preview{display:none}
}
.ms-rules-empty{margin:14px 0;color:var(--muted)}
.ms-rules-hint{
margin:0 0 12px;color:var(--muted);font-size:.88rem;font-weight:600;
letter-spacing:.01em;
}
.ms-rules-cta{margin-top:4px}
@media (prefers-reduced-motion:reduce){
.ms-rules-chevron,.ms-rules-summary,.ms-rules-item{transition:none!important;animation:none!important}
.ms-rules-item:not([open]) .ms-rules-chevron,
.ms-rules-item:not([open]) .ms-rules-summary{animation:none!important}
}
/* MEDIA LADDER (about page) */
.ladder{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;overscroll-behavior-x:contain}
.ladder img{width:300px;height:200px;object-fit:cover;object-position:center;border-radius:var(--radius);scroll-snap-align:start;flex-shrink:0;box-shadow:var(--shadow)}
.ladder::-webkit-scrollbar{height:8px}
.ladder::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}
/* SPORT GALLERY */
.ms-gallery{margin:0 calc(var(--page-pad) * -1)}
.ms-gallery-head{
padding-left:var(--page-pad);padding-right:var(--page-pad);
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.ms-gallery-head h2{margin:0}
.ms-gallery-nav{display:flex;gap:8px;flex:none}
.ms-gallery-nav[hidden]{display:none}
.ms-gallery-arrow{
width:44px;height:44px;border:1px solid rgba(255,255,255,.14);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(26,40,52,.75);color:var(--ink);font-size:1.45rem;line-height:1;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
transition:background-color .2s,border-color .2s,color .2s,transform .18s,opacity .18s;
}
.ms-gallery-arrow:hover:not(:disabled){
background:var(--surface-raised);border-color:rgba(255,107,118,.45);color:#fff;
transform:translateY(-1px);
}
.ms-gallery-arrow:disabled{
opacity:.35;cursor:default;transform:none;
}
.ms-gallery-viewport{
position:relative;
mask-image:linear-gradient(90deg,transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.ms-gallery-track{
display:flex;gap:18px;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
padding:8px var(--page-pad) 18px;
overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.ms-gallery-track::-webkit-scrollbar{height:8px}
.ms-gallery-track::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:4px}
.ms-gallery-item{
position:relative;flex:0 0 clamp(280px,48vw,640px);
height:clamp(180px,32vw,400px);padding:0;border:0;cursor:pointer;
border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;
background:var(--bg-soft);color:inherit;font:inherit;text-align:left;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.35);
transition:transform .28s cubic-bezier(.25,.1,.25,1),box-shadow .28s;
}
.ms-gallery-item:hover,
.ms-gallery-item:focus-visible{
transform:translateY(-3px) scale(1.02);
box-shadow:inset 0 0 0 1px rgba(255,107,118,.35),0 16px 36px rgba(0,0,0,.45);
z-index:1;
}
.ms-gallery-img{
width:100%;height:100%;object-fit:cover;object-position:center;
display:block;pointer-events:none;
transition:transform .4s cubic-bezier(.25,.1,.25,1);
}
.ms-gallery-item:hover .ms-gallery-img,
.ms-gallery-item:focus-visible .ms-gallery-img{transform:scale(1.04)}
.ms-gallery-empty{margin:0;padding:8px var(--page-pad);color:var(--muted)}
@media (prefers-reduced-motion:reduce){
.ms-gallery-item,.ms-gallery-img,.ms-gallery-arrow{transition:none!important}
.ms-gallery-item:hover,.ms-gallery-item:focus-visible{transform:none}
.ms-gallery-item:hover .ms-gallery-img,.ms-gallery-item:focus-visible .ms-gallery-img{transform:none}
.ms-gallery-track{scroll-behavior:auto}
}
/* LIGHTBOX */
.ms-lightbox{
position:fixed;inset:0;z-index:90;display:grid;place-items:center;
padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.ms-lightbox[hidden]{display:none}
.ms-lightbox-backdrop{
position:absolute;inset:0;border:0;padding:0;margin:0;cursor:pointer;
background:rgba(4,12,20,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ms-lightbox-dialog{
position:relative;z-index:1;display:grid;place-items:center;
width:min(92vw,1280px);max-height:88vh;
}
.ms-lightbox-img{
max-width:92vw;max-height:88vh;width:auto;height:auto;
object-fit:contain;border-radius:12px;
box-shadow:0 24px 60px rgba(0,0,0,.55);
background:var(--bg-soft);
}
.ms-lightbox-close{
position:absolute;top:-8px;right:-8px;z-index:2;
width:44px;height:44px;border:1px solid rgba(255,255,255,.18);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(26,40,52,.92);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
box-shadow:0 8px 22px rgba(0,0,0,.4);
transition:background-color .2s,border-color .2s,transform .18s;
}
.ms-lightbox-close:hover{
background:var(--surface-raised);border-color:rgba(255,107,118,.45);transform:translateY(-1px);
}
.ms-lightbox-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:48px;height:48px;border:1px solid rgba(255,255,255,.18);
border-radius:var(--radius-squircle);corner-shape:squircle;
background:rgba(26,40,52,.88);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;
box-shadow:0 8px 22px rgba(0,0,0,.35);
transition:background-color .2s,border-color .2s,transform .18s;
}
.ms-lightbox-arrow:hover{
background:var(--surface-raised);border-color:rgba(255,107,118,.45);
}
.ms-lightbox-prev{left:clamp(-8px,calc(-4vw),-20px)}
.ms-lightbox-next{right:clamp(-8px,calc(-4vw),-20px)}
@media (max-width:720px){
.ms-lightbox-prev{left:4px}
.ms-lightbox-next{right:4px}
.ms-lightbox-close{top:0;right:0}
.ms-gallery-item{flex-basis:clamp(240px,78vw,420px);height:clamp(160px,48vw,280px)}
}
@media (prefers-reduced-motion:reduce){
.ms-lightbox-close,.ms-lightbox-arrow{transition:none!important}
.ms-lightbox-close:hover{transform:none}
}
/* O NÁS / KONTAKT */
.prose{max-width:75ch}
.prose h2{margin:26px 0 10px}
.prose p{color:var(--muted);margin-bottom:12px}
.prose strong{color:var(--ink)}
.contact-card{background:var(--bg-soft);border-radius:var(--radius);padding:26px;margin-top:18px}
.contact-card p{margin-bottom:6px}
/* REZERVACE — formulář */
.res-form{margin-top:22px;max-width:680px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:22px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.span-2{grid-column:1/-1}
.form-field label{font-weight:700;font-size:.88rem}
.form-field input,.form-field select,.form-field textarea{font:inherit;padding:10px 14px;border:2px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);transition:border-color .2s}
.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-color:var(--accent)}
.link-accent{color:var(--accent);font-weight:700}
.legal-note{font-size:.88rem;margin-top:18px;color:var(--muted)}
.legal-date{font-size:.85rem;color:var(--muted)}
.lrow-placeholder{width:100%;aspect-ratio:16/11;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent),#b82e38)}
.sport-detail-spacer{height:48px}
.field-error{color:#c0362c;font-size:.8rem;font-weight:600}
.form-errors{background:#fdecea;color:#c0362c;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.9rem}
.form-success{background:#e5f4ec;color:var(--accent);border-radius:10px;padding:14px 18px;margin:14px 0 6px;font-weight:700}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
/* CONSENT / GDPR */
.consent-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,18,30,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;padding:max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-left));overscroll-behavior:contain}
.consent-overlay[hidden]{display:none}
.consent-box{background:var(--surface);border-radius:18px;max-width:480px;width:100%;padding:30px 28px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.consent-box h2{font-size:1.25rem;margin-bottom:10px}
.consent-box p{color:var(--muted);font-size:.93rem;margin-bottom:18px}
.consent-box a{color:var(--accent);font-weight:700}
.consent-actions{display:flex;gap:12px;flex-wrap:wrap}
.consent-actions .btn{padding:10px 20px;font-size:.9rem}
.consent-actions .btn-ghost{border-color:var(--muted);color:var(--muted)}
.consent-actions .btn-ghost:hover{background:var(--bg-soft);color:var(--ink)}
/* O NÁS — ladder (fotka vlevo, text se přelévá přes ni) */
.about-ladder{margin-top:34px}
.lrow{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;margin-bottom:64px}
.lrow img{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.lrow .lcard{grid-column:2;grid-row:1;position:relative;z-index:2;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 32px;margin-left:-90px}
.lrow .lcard h2{font-size:1.35rem;margin-bottom:8px}
.lrow .lcard p{color:var(--muted)}
.lrow:nth-child(2){padding-left:6%}
.lrow:nth-child(3){padding-left:12%}
@media(max-width:860px){
.lrow{grid-template-columns:1fr;padding-left:0!important}
.lrow .lcard{grid-column:1;grid-row:auto;margin:-46px 16px 0}
}
/* —— Engage: klub + podpora —— */
.ms-engage{
position:relative;
isolation:isolate;
padding:clamp(56px, 9vw, 96px) var(--page-pad) clamp(64px, 10vw, 108px);
overflow:hidden;
}
.ms-engage-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
/* One continuous wash — no competing hard blobs */
background:
radial-gradient(ellipse 95% 85% at 18% 55%, rgba(226,61,74,.2), transparent 72%),
radial-gradient(ellipse 70% 90% at 88% 40%, rgba(226,61,74,.08), transparent 68%),
linear-gradient(
180deg,
rgba(11,18,24,0) 0%,
rgba(226,61,74,.05) 38%,
rgba(226,61,74,.07) 58%,
rgba(11,18,24,0) 100%
);
}
.ms-engage-bg::before{
content:"";
position:absolute;
inset:-15%;
opacity:.03;
background:
repeating-linear-gradient(
-24deg,
transparent 0 13px,
rgba(232,237,242,.5) 13px 14px
);
mix-blend-mode:overlay;
pointer-events:none;
}
.ms-engage-inner{
position:relative;
z-index:1;
max-width:1120px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
grid-template-rows:auto auto auto auto;
column-gap:clamp(40px, 7vw, 88px);
row-gap:12px;
align-items:start;
border:none;
}
.ms-engage-block{
position:relative;
display:grid;
grid-template-rows:subgrid;
grid-row:span 4;
padding:0;
margin:0;
opacity:0;
transform:translateY(20px);
transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.ms-engage-block--club{
border-right:none;
padding-left:0;
}
/* Soft ambient under club CTA only — wide + soft so it merges with section wash */
.ms-engage-block--club::before{
content:"";
position:absolute;
left:-20%;
top:20%;
width:95%;
height:95%;
z-index:-1;
pointer-events:none;
background:radial-gradient(ellipse 70% 65% at 25% 70%, rgba(226,61,74,.22), transparent 75%);
filter:blur(18px);
opacity:0;
transition:opacity .8s cubic-bezier(.22,1,.36,1) .12s;
}
.ms-engage.is-in .ms-engage-block--club::before{opacity:1}
.ms-engage-block--support{
padding:0;
}
.ms-engage.is-in .ms-engage-block{opacity:1;transform:none}
.ms-engage.is-in .ms-engage-block--support{transition-delay:.14s}
.ms-engage-kicker{
margin:0;
font-size:.68rem;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(226,61,74,.85);
opacity:.85;
align-self:end;
}
.ms-engage-block--support .ms-engage-kicker{
color:var(--muted);
opacity:.75;
}
.ms-engage-title{
margin:0;
font-size:clamp(1.65rem, 3.2vw, 2.35rem);
font-weight:700;
letter-spacing:-.035em;
line-height:1.1;
color:#fff;
align-self:start;
}
.ms-engage-block--support .ms-engage-title{
font-size:clamp(1.65rem, 3.2vw, 2.35rem);
letter-spacing:-.035em;
line-height:1.1;
}
.ms-engage-text{
margin:0;
max-width:34ch;
font-size:clamp(1rem, 1.55vw, 1.12rem);
line-height:1.55;
color:var(--muted);
align-self:start;
}
.ms-engage-block--support .ms-engage-text{
max-width:34ch;
font-size:clamp(1rem, 1.55vw, 1.12rem);
}
.ms-engage-btn{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:start;
margin-top:14px;
background:var(--accent);
color:#fff;
border:1px solid transparent;
transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .2s, box-shadow .35s;
}
.ms-engage-block--club .ms-engage-btn{
box-shadow:0 0 0 0 rgba(226,61,74,0);
}
.ms-engage.is-in .ms-engage-block--club .ms-engage-btn{
box-shadow:
0 0 28px rgba(226,61,74,.32),
0 0 56px rgba(226,61,74,.1);
}
@media (hover:hover) and (pointer:fine){
.ms-engage.is-in .ms-engage-btn:hover{
transform:translateY(-2px);
background:#b82e38;
}
.ms-engage.is-in .ms-engage-block--club .ms-engage-btn:hover{
box-shadow:
0 0 32px rgba(226,61,74,.48),
0 4px 28px rgba(226,61,74,.18);
}
}
@media (prefers-reduced-motion:reduce){
.ms-engage-block{opacity:1;transform:none;transition:none}
.ms-engage-block--club::before{opacity:1;transition:none}
.ms-engage.is-in .ms-engage-btn:hover{transform:none}
}
@media(max-width:860px){
.ms-engage-inner{
grid-template-columns:1fr;
grid-template-rows:none;
row-gap:0;
gap:clamp(40px, 8vw, 56px);
}
.ms-engage-block{
display:flex;
flex-direction:column;
grid-row:auto;
gap:12px;
}
.ms-engage-block--club{
border-right:none;
border-bottom:none;
padding:0;
}
.ms-engage-block--club::before{
left:-10%;
width:100%;
top:10%;
filter:blur(22px);
}
.ms-engage-block--support{padding:0}
.ms-engage-btn{margin-top:2px}
.ms-engage-title,
.ms-engage-block--support .ms-engage-title{
font-size:clamp(1.55rem, 5vw, 2rem);
}
}
/* Fallback when subgrid unsupported: still top-aligned, same type scale */
@supports not (grid-template-rows:subgrid){
.ms-engage-inner{
grid-template-rows:none;
row-gap:0;
gap:clamp(40px, 7vw, 88px);
}
.ms-engage-block{
display:flex;
flex-direction:column;
grid-row:auto;
gap:12px;
}
.ms-engage-btn{margin-top:2px}
}
/* —— Partner editorial rail —— */
.sponsor-strip{
position:relative;
padding:clamp(28px, 4.5vw, 44px) var(--page-pad);
background:transparent;
border-top:1px solid rgba(232,237,242,.08);
border-bottom:1px solid rgba(232,237,242,.08);
}
.sponsor-strip--home{
padding:clamp(32px, 5vw, 52px) var(--page-pad);
}
.sponsor-strip--footer{
border-bottom:none;
padding:clamp(24px, 4vw, 36px) var(--page-pad) clamp(20px, 3vw, 28px);
}
.sponsor-strip-kicker{
margin:0 auto 18px;
max-width:1100px;
font-size:.68rem;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(226,61,74,.85);
opacity:.9;
}
.sponsor-strip-list{
list-style:none;
margin:0 auto;
padding:0;
box-sizing:border-box;
width:100%;
max-width:1100px;
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:clamp(20px, 4vw, 48px) clamp(28px, 5vw, 56px);
}
.sponsor-strip-item{flex:0 0 auto}
.sponsor-strip-link{
display:flex;
align-items:center;
justify-content:center;
height:48px;
padding:0;
opacity:.68;
transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.sponsor-strip-link:hover,
.sponsor-strip-link:focus-visible{
opacity:1;
transform:translateY(-1px);
}
.sponsor-strip-link--static{cursor:default}
.sponsor-strip-link--static:hover{
transform:none;
opacity:.68;
}
.sponsor-strip-link img{
display:block;
max-height:40px;
max-width:160px;
width:auto;
height:auto;
object-fit:contain;
}
@media(max-width:520px){
.sponsor-strip{padding:24px var(--page-pad)}
.sponsor-strip--home{padding:28px var(--page-pad)}
.sponsor-strip-kicker{margin-bottom:14px}
.sponsor-strip-list{gap:16px 24px}
.sponsor-strip-link{height:40px}
.sponsor-strip-link img{max-height:34px;max-width:130px}
}
.site-footer{
margin-top:56px;
background:#070d12;
border-top:1px solid rgba(255,255,255,.08);
color:rgba(232,237,242,.78);
font-size:.92rem;
}
.site-footer-inner{
width:100%;
max-width:1180px;
margin:0 auto;
padding:42px var(--page-pad) max(28px,env(safe-area-inset-bottom));
}
.site-footer-top{
display:flex;align-items:center;justify-content:space-between;gap:20px 28px;
flex-wrap:wrap;padding-bottom:28px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer-brand{
font-weight:800;font-size:1.35rem;letter-spacing:-.4px;color:#fff;line-height:1;
}
.site-footer-brand span{color:var(--accent)}
.site-footer-social{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.site-footer-social-label{color:rgba(232,237,242,.55);font-size:.88rem}
.site-footer-social-list{display:flex;align-items:center;gap:8px}
.site-footer-social-link{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:var(--radius-squircle);corner-shape:squircle;
border:1px solid rgba(255,255,255,.28);color:#fff;
transition:background-color .2s,border-color .2s,color .2s;
}
.site-footer-social-link:hover{
background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);color:#fff;
}
.site-footer-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:36px 48px;
padding:36px 0 40px;
}
.site-footer-heading{
font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:rgba(232,237,242,.45);margin:0 0 14px;
}
.site-footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.site-footer-links a{color:rgba(232,237,242,.88);font-weight:500;transition:color .2s}
.site-footer-links a:hover{color:#fff}
.site-footer-note{color:rgba(232,237,242,.5);font-size:.88rem;margin:0 0 14px}
.site-footer-contact{list-style:none;display:flex;flex-direction:column;gap:12px}
.site-footer-contact li{display:flex;align-items:center;gap:10px}
.site-footer-contact a{color:#fff;font-weight:600;transition:color .2s}
.site-footer-contact a:hover{color:var(--accent)}
.site-footer-ico{
display:inline-flex;align-items:center;justify-content:center;
width:28px;height:28px;flex:none;color:rgba(232,237,242,.7);
}
.site-footer-bottom{
display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
font-size:.8rem;color:rgba(232,237,242,.45);
}
.site-footer-bottom a{color:rgba(232,237,242,.55);transition:color .2s}
.site-footer-bottom a:hover{color:#fff}
.site-footer-tagline{margin:0}
@media(max-width:860px){
.hero-grid,.grid-3,.grid-2{grid-template-columns:1fr}
.site-footer-inner{padding-top:32px}
.site-footer-top{align-items:flex-start;padding-bottom:22px}
.site-footer-social{width:100%}
.site-footer-grid{grid-template-columns:1fr 1fr;gap:28px 24px;padding:28px 0 32px}
.site-footer-col--contact{grid-column:1/-1}
.site-footer-bottom{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
.site-footer-grid{grid-template-columns:1fr}
.site-footer-col--contact{grid-column:auto}
}