/* Cross Club, koncept webu. Struktura podle likova.space (Awwwards SOTD) */
:root{
  --steel:#121518; --plate:#1b2025; --plate-2:#242b31; --line:#3a434b;
  --text:#ede7dc; --muted:#b4ada2; --brass:#d29a4f; --copper:#e0703f;
  --cyan:#4fd0e6; --red:#ef5444;
  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(16px,2.2vw,32px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--steel);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:#111;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}

/* top bar: drobný verzálkový text, žádné tlačítko */
.bar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--pad);background:rgba(18,21,24,.96);border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.bar a{text-decoration:none}
.bar a:hover{color:var(--brass)}
.bar__menu{display:flex;gap:22px;flex-wrap:wrap}
.bar__mid{font-weight:700;color:var(--brass)}
.bar__right{display:flex;gap:22px;justify-content:flex-end}
.bar__right span{color:var(--muted)}
.bar a[aria-current="page"]{color:var(--brass)}

/* hero: wordmark zaříznutý do panelu s řezem budovy */
.hero{padding-top:clamp(24px,4.5vw,64px)}
.mark{position:relative;z-index:2;display:inline-flex;align-items:flex-end;gap:clamp(20px,4vw,70px);background:var(--steel);padding:0 var(--pad) clamp(10px,1.4vw,20px);width:min(52%,760px)}
.mark h1{font-family:var(--display);font-weight:800;font-size:clamp(54px,8.6vw,132px);line-height:.82;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mark h1 span{color:var(--brass)}
.panel{position:relative;margin-top:calc(-1*clamp(40px,5vw,80px)) !important;background:radial-gradient(120% 90% at 70% 10%,#22313a 0%,#151a1f 55%,#0e1114 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:-1px}
.panel__claim{position:absolute;top:clamp(18px,3vw,44px);right:calc(340px + var(--pad) * 2);max-width:300px;font-size:clamp(15px,1.3vw,19px);line-height:1.3;text-transform:uppercase;letter-spacing:.06em;z-index:2}
.panel__claim small{display:block;margin-top:10px;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.stage-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;align-items:stretch}
.section-svg{width:100%;height:auto;display:block;align-self:start;margin-top:clamp(90px,7vw,110px)}

/* SVG řez */
.space{cursor:pointer}
.space .fill{fill:#1e252b;stroke:#4b5660;stroke-width:2;transition:fill .25s ease,stroke .25s ease}
.space:hover .fill,.space:focus .fill,.space.is-on .fill{fill:#2e2618;stroke:var(--brass)}
.space:focus{outline:none}
.space:focus-visible .fill{stroke:var(--cyan);stroke-width:3}
.space .lbl{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.1em;fill:var(--text);text-transform:uppercase;pointer-events:none}
.space .sub{font-family:var(--body);font-size:12px;letter-spacing:.14em;fill:var(--muted);text-transform:uppercase;pointer-events:none}
.space.is-on .lbl{fill:var(--brass)}
.ink{fill:none;stroke:#6d7a85;stroke-width:2}
.ink-b{fill:none;stroke:var(--brass);stroke-width:2}
.solid{fill:#2b333a;stroke:#5a6670;stroke-width:1.5}
.glow-c{fill:var(--cyan);opacity:.75}
.glow-r{fill:var(--red);opacity:.8}
.pipe{fill:none;stroke:#8a6a3f;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.pipe-t{fill:none;stroke:#c48d48;stroke-width:2}
circle.teeth{fill:none;stroke:#9a7647;stroke-width:9;stroke-dasharray:5.5 5.5}
circle.teeth.sm{stroke-width:6;stroke-dasharray:3.5 3.5}
circle.hub{fill:#1a1f24;stroke:#9a7647;stroke-width:3}
.gear{transform-box:fill-box;transform-origin:center;animation:spin 26s linear infinite}
.gear.rev{animation-direction:reverse;animation-duration:18s}
@keyframes spin{to{transform:rotate(360deg)}}
.ground{stroke:#7b858e;stroke-width:2}
.soil{fill:#0f1215}

/* boční panel (tooltip jako u Likova) */
.info{border-left:1px solid var(--line);background:var(--plate);display:flex;flex-direction:column}
.info__img{aspect-ratio:4/3;object-fit:cover;width:100%;background:#0d1012}
.info__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.info h2{font-family:var(--display);font-size:38px;font-weight:800;line-height:.95;text-transform:uppercase;letter-spacing:.04em}
.info__floor{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.info__now{border-top:1px solid var(--line);padding-top:12px}
.info__now b{display:block;font-family:var(--display);font-size:24px;letter-spacing:.04em;text-transform:uppercase;color:var(--brass);line-height:1.05}
.info__now p{font-size:14px;color:var(--muted);margin-top:4px}
.info__link{margin-top:auto;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--cyan)}
.floors{display:flex;flex-wrap:wrap;border-top:1px solid var(--line)}
.floors button{flex:1 1 auto;background:none;border:0;border-right:1px solid var(--line);color:var(--text);font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:16px 14px;cursor:pointer;min-height:44px}
.floors button:last-child{border-right:0}
.floors button[aria-pressed="true"],.floors button:hover{background:var(--brass);color:#16120b}

/* sekce */
.sec{padding:clamp(64px,8vw,120px) var(--pad)}
.h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,92px);line-height:.9;letter-spacing:.04em}
.lead{max-width:56ch;color:var(--muted);font-size:17px}
.upper{text-transform:uppercase;letter-spacing:.1em;font-size:13px}

/* program podle scén */
.prog-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.stagegrp{display:grid;grid-template-columns:260px minmax(0,1fr);border-top:1px solid var(--line)}
.stagegrp:last-of-type{border-bottom:1px solid var(--line)}
.stagegrp h3{font-family:var(--display);font-size:32px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:22px 0;line-height:1}
.stagegrp h3 small{display:block;font-family:var(--body);font-size:12px;letter-spacing:.14em;color:var(--muted);font-weight:400;margin-top:8px}
.ev{display:grid;grid-template-columns:120px minmax(0,1fr) 150px;gap:18px;padding:20px 0;border-bottom:1px solid #2a3137;align-items:baseline}
.ev:last-child{border-bottom:0}
.ev time{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);font-weight:700}
.ev h4{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.ev p{font-size:14px;color:var(--muted);margin-top:4px}
.ev .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-align:right}
.ev.today h4{color:var(--cyan)}
.cta{display:inline-block;margin-top:36px;padding:18px 26px;background:var(--brass);color:#15110a;text-decoration:none;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:14px;border-radius:0}
.cta:hover{background:var(--copper)}
.cta--line{background:none;border:1px solid var(--brass);color:var(--brass)}
.cta--line:hover{background:var(--brass);color:#15110a}

/* stupňovité panely */
.steps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pad);align-items:start}
.steps .s1{grid-column:1/6}
.steps .s2{grid-column:6/13;margin-top:clamp(40px,8vw,140px)}
.steps .s3{grid-column:2/8;margin-top:calc(-1*clamp(20px,6vw,100px))}
.steps .s4{grid-column:8/13;margin-top:clamp(20px,4vw,60px)}
.steps figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.steps figcaption{font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:.06em}
.steps .txt p{margin-top:18px;max-width:46ch;color:var(--muted)}
.steps .txt p:first-of-type{color:var(--text);font-size:19px}

.split-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split-band img{width:100%;height:100%;object-fit:cover;min-height:420px}
.split-band .txt{padding:clamp(32px,5vw,72px) var(--pad);background:var(--plate)}
.split-band dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-top:24px;font-size:15px}
.split-band dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding-top:3px}

/* podstránky */
.page-hero{padding:clamp(56px,8vw,120px) var(--pad) clamp(28px,4vw,48px);border-bottom:1px solid var(--line)}
.page-hero .h2{font-size:clamp(56px,10vw,150px);letter-spacing:.1em}
.page-hero .lead{margin-top:22px}
.filter{display:flex;flex-wrap:wrap;gap:0;margin:28px 0 0;border:1px solid var(--line);width:fit-content;max-width:100%}
.filter button{background:none;border:0;border-right:1px solid var(--line);color:var(--text);font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:14px 16px;cursor:pointer;min-height:44px}
.filter button:last-child{border-right:0}
.filter button[aria-pressed="true"]{background:var(--brass);color:#15110a}
.day{display:grid;grid-template-columns:200px minmax(0,1fr);border-bottom:1px solid var(--line);padding:24px 0;gap:var(--pad)}
.day h3{font-family:var(--display);font-size:30px;text-transform:uppercase;letter-spacing:.05em;line-height:1}
.day h3 small{display:block;font-family:var(--body);font-size:12px;letter-spacing:.14em;color:var(--muted);margin-top:6px}
.day[hidden]{display:none}
.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.menu-grid > div{padding:28px var(--pad) 32px 0;border-right:1px solid var(--line);padding-left:var(--pad)}
.menu-grid > div:first-child{padding-left:0}
.menu-grid > div:last-child{border-right:0}
.menu-grid h3{font-family:var(--display);font-size:30px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.menu-grid p{color:var(--muted);font-size:15px}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--pad)}
.gallery figure:nth-child(1){grid-column:1/8}
.gallery figure:nth-child(2){grid-column:8/13;margin-top:80px}
.gallery figure:nth-child(3){grid-column:3/9}
.gallery figure:nth-child(4){grid-column:9/13;margin-top:-60px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:12px;color:var(--muted);margin-top:8px}

/* footer */
.foot{border-top:1px solid var(--line);padding:56px var(--pad) 40px;display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--pad);font-size:14px}
.foot .big{font-family:var(--display);font-size:clamp(40px,5vw,72px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:.9}
.foot h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.foot ul{list-style:none;display:grid;gap:6px}
.foot a{text-decoration:none}.foot a:hover{color:var(--brass)}
.credit{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:13px;display:grid;gap:6px}
.credit a{text-decoration:underline;color:var(--text)}

@media (max-width:1100px){
  .stage-wrap{grid-template-columns:1fr}
  .info{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .info .floors{grid-column:1/-1}
  .info__img{height:100%;aspect-ratio:auto;min-height:240px}
  .panel__claim{right:var(--pad)}
  .section-svg{margin-top:clamp(150px,18vw,190px)}
}
@media (max-width:760px){
  .bar{grid-template-columns:auto 1fr auto;gap:14px;letter-spacing:.1em;font-size:11px}
  .bar__menu a:not(:first-child){display:none}
  .bar__right{gap:12px}
  .mark{width:auto;max-width:100%}
  .mark h1{font-size:clamp(40px,13.5vw,60px);letter-spacing:.08em;white-space:normal}
  .panel__claim{position:static;padding:18px var(--pad) 0;max-width:none}
  .section-svg{margin-top:12px}
  .panel{margin-top:0 !important}
  .info{grid-template-columns:1fr}
  .info__img{aspect-ratio:16/9;min-height:0}
  .floors button{flex:1 1 33%;border-bottom:1px solid var(--line)}
  .prog-head{grid-template-columns:1fr}
  .stagegrp{grid-template-columns:1fr}
  .stagegrp h3{padding-bottom:4px}
  .ev{grid-template-columns:1fr;gap:4px}
  .ev .tag{text-align:left;color:var(--muted)}
  .steps{grid-template-columns:1fr}
  .steps > *{grid-column:1/-1 !important;margin-top:24px !important}
  .split-band{grid-template-columns:1fr}
  .split-band img{min-height:260px}
  .day{grid-template-columns:1fr;gap:10px}
  .menu-grid{grid-template-columns:1fr}
  .menu-grid > div{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .gallery{grid-template-columns:1fr}
  .gallery figure{grid-column:1/-1 !important;margin-top:0 !important}
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:first-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .gear{animation:none}
  html{scroll-behavior:auto}
  *{transition:none !important}
}