/* Barlow, Barlow Condensed, IBM Plex Mono - SIL Open Font License; self-hosted (no Google requests from visitors) */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-condensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-condensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Komponenty redizajnu SSA (prefix s-, aby nekolidovali s Bootstrapom)
   Koncept: plochy v modrej z loga s vrstevnicami (hlavicka, hlavicky podstranok, paticka), biele pracovne plochy,
   jedna signalna oranzova na akcie; uzke pismo ako sportove znacenie. */
:root {
  --ink: #0b3553;          /* deep logo blue: text */
  --ink-2: #14628f;        /* raised chrome */
  --chrome: #125985;       /* lighter logo blue: header bar, page heads, footer (white text 7.5:1) */
  --blue: #167db4;         /* logo blue, darkened to 4.5:1 on white: links, buttons */
  --sky: #1e96d3;          /* logo blue: icons, rings, bars, accents on navy */
  --signal: #d9411f;       /* signal orange-red: CTAs, live/attention */
  --signal-hover: #b8361a;
  --snow: #eaf6fc;         /* alt surface, blue tint */
  --paper: #ffffff;
  --line: #d3e8f3;
  --line-strong: #b7d8ea;
  --muted: #566778;
  --gold: #c9a227; --silver: #9aa7b4; --bronze: #b0743f;
  --ok: #1f7a4d;

  --f-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1240px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --r: 6px;
  --shadow: 0 1px 2px rgba(15, 30, 46, .06), 0 6px 20px rgba(15, 30, 46, .07);
}

*, *::before, *::after { box-sizing: border-box; }
/* atribut hidden musi vyhrat aj nad display z tried (napr. .s-two-col { display: grid }) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
[class^="s-"] img, [class*=" s-"] img { display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); text-transform: uppercase; }
h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); text-transform: uppercase; }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.s-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.s-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.s-section { padding-block: clamp(48px, 7vw, 88px); }
.s-section--snow { background: var(--snow); }
.s-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.s-section-head h2 { position: relative; }
.s-eyebrow { font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.s-eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.s-lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.s-muted { color: var(--muted); }
.s-data { font-family: var(--f-data); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.s-link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.s-link-arrow::after { content: "→"; transition: transform .15s; }
.s-link-arrow:hover::after { transform: translateX(3px); }

/* ---------- buttons, chips, badges */
.s-btn { --b: var(--signal); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  font: 600 .95rem/1 var(--f-body); letter-spacing: .02em; border-radius: var(--r); border: 2px solid var(--b); background: var(--b); color: #fff;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.s-btn:hover { --b: var(--signal-hover); color: #fff; }
.s-btn--blue { --b: var(--blue); } .s-btn--blue:hover { --b: var(--ink-2); }
.s-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.s-btn--ghost:hover { background: var(--snow); color: var(--ink); border-color: var(--ink); }
.s-btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.s-btn--light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.s-btn--sm { min-height: 36px; padding: 7px 12px; font-size: .85rem; }
.s-btn svg { width: 18px; height: 18px; flex: none; }
.s-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.s-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.s-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.s-chips--scroll::-webkit-scrollbar { display: none; }
.s-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink); font: 500 .92rem/1 var(--f-body); cursor: pointer; text-decoration: none; }
.s-chip:hover { border-color: var(--ink); color: var(--ink); }
.s-chip[aria-pressed="true"], .s-chip.s-is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.s-chip .s-n { font: 500 .75rem/1 var(--f-data); opacity: .7; }
.s-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 4px; font: 600 .74rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase;
  background: var(--snow); color: var(--ink); border: 1px solid var(--line); white-space: nowrap; }
.s-badge--sp { background: #e4f3fb; border-color: #bfe2f4; color: #12699a; }
.s-badge--msr { background: #fdebe6; border-color: #f6cbbf; color: #a3301a; }
.s-badge--done { background: #e8f3ed; border-color: #c8e2d3; color: var(--ok); }
.s-badge svg { width: 14px; height: 14px; }

/* ---------- header */
.s-util { background: var(--ink); color: rgba(255,255,255,.75); font-size: .82rem; }
.s-util .s-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 36px; }
.s-util a { color: rgba(255,255,255,.85); text-decoration: none; }
.s-util a:hover { color: #fff; }
.s-util-links { display: flex; gap: 18px; align-items: center; }
.s-util-social { display: flex; gap: 12px; }
.s-util-social svg { width: 16px; height: 16px; fill: currentColor; }
.s-site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.s-site-header .s-wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.s-logo { display: block; flex: none; }
.s-logo img { height: 42px; width: auto; }
.s-nav { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 0; align-items: stretch; align-self: stretch; } /* bootstrap dava ul margin-bottom 10px */
.s-nav > li { display: flex; }
.s-nav > li > a, .s-nav > li > button { min-height: 76px; }
.s-nav > li { list-style: none; position: relative; }
.s-nav ul { padding: 0; margin: 0; }
.s-nav a, .s-nav button { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 12px; font: 600 1.06rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 4px; }
.s-nav a:hover, .s-nav button:hover { color: var(--blue); }
.s-nav a[aria-current="page"], .s-nav .s-is-current > button { color: var(--blue); box-shadow: inset 0 -3px 0 var(--signal); border-radius: 0; }
.s-nav .s-caret { flex: none; width: 14px; height: 14px; margin-left: 2px; stroke-width: 2.4; opacity: .7; transition: transform .2s ease, opacity .2s; }
.s-nav li:hover > button .s-caret, .s-nav li:focus-within > button .s-caret { transform: rotate(180deg); opacity: 1; }
.s-nav .s-sub { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 8px; display: none; }
.s-nav li:hover > .s-sub, .s-nav li:focus-within > .s-sub { display: block; }
.s-nav .s-sub a { text-transform: none; font: 500 1rem/1.2 var(--f-body); letter-spacing: 0; padding: 10px 12px; }
.s-nav .s-sub a:hover { background: var(--snow); color: var(--ink); }
.s-nav .s-sub li { list-style: none; }
.s-nav > li:nth-last-child(-n+2) > .s-sub { left: auto; right: 0; }
.s-nav .s-sub a { flex-direction: column; align-items: flex-start; gap: 2px; }
.s-nav .s-sub small { display: block; font-size: .8rem; line-height: 1.25; color: var(--muted); }
.s-header-cta { flex: none; }
.s-burger { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
.s-burger svg { width: 22px; height: 22px; }

/* mobile drawer */
.s-drawer { position: fixed; inset: 0; z-index: 80; background: var(--ink); color: #fff; padding: 20px var(--gut) 32px; overflow-y: auto; display: none;
  background-image: url(../images/ssa/topo-light.png); background-size: 1400px auto; background-position: 40% 100%; background-repeat: no-repeat; }
.s-drawer.s-is-open { display: block; }
.s-drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.s-drawer-top img { height: 36px; filter: brightness(0) invert(1); }
.s-drawer-close { width: 46px; height: 46px; border-radius: var(--r); border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 26px; cursor: pointer; }
.s-drawer nav a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none;
  font: 600 1.6rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.s-drawer nav a small { font: 400 .85rem/1.2 var(--f-body); color: rgba(255,255,255,.6); text-transform: none; letter-spacing: 0; align-self: center; }
.s-drawer .s-drawer-lbl { display: block; margin-top: 22px; padding-bottom: 4px; font: 600 .78rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.s-drawer .s-drawer-sec { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-drawer .s-drawer-sec a { font: 500 1rem/1.2 var(--f-body); color: rgba(255,255,255,.85); text-decoration: none; padding: 6px 0; }
.s-drawer .s-btn { width: 100%; margin-top: 26px; }

/* mobile tab bar */
.s-tabbar { display: none; }

/* ---------- page head (subpages) */
.s-page-head { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.s-page-head::before { content: ""; position: absolute; inset: 0; background: url(../images/ssa/topo-light.png) right -200px center / 1500px auto no-repeat; opacity: .9; }
.s-page-head .s-wrap { position: relative; padding-block: 34px 40px; }
.s-page-head { box-shadow: inset 0 -4px 0 var(--sky); }
.s-page-head--tabs { box-shadow: none; }
.s-page-head h1 { color: #fff; }
.s-page-head .s-lead { color: rgba(255,255,255,.78); margin: 14px 0 0; }
.s-crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; font-size: .86rem; color: rgba(255,255,255,.65); }
.s-crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.s-crumbs a:hover { color: #fff; text-decoration: underline; }
.s-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.s-page-head .s-head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.s-page-head .s-tabs { display: flex; gap: 4px; margin-top: 26px; flex-wrap: wrap; }
.s-page-head .s-tabs a { color: rgba(255,255,255,.78); text-decoration: none; padding: 10px 14px; font: 600 1rem/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; border-radius: 4px 4px 0 0; }
.s-page-head .s-tabs a:hover { color: #fff; background: rgba(255,255,255,.07); }
.s-page-head .s-tabs a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.s-page-head--tabs .s-wrap { padding-bottom: 0; }

/* ---------- hero (home) */
.s-hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; }
.s-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center 30%; }
.s-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,22,36,.92) 0%, rgba(10,22,36,.72) 38%, rgba(10,22,36,.15) 70%), linear-gradient(0deg, rgba(10,22,36,.7), transparent 45%); }
.s-hero .s-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: end; padding-block: clamp(70px, 10vw, 130px) 56px; }
.s-hero h1, .s-hero .s-hero-title { font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: .95; color: #fff; margin: 0; }
/* viac snimok: pozadia sa prelinaju, texty su na sebe v jednej bunke mriezky (vyska podla najdlhsieho) */
.s-hero--slides .s-hero-img { opacity: 0; transition: opacity .8s ease; }
.s-hero--slides .s-hero-img.s-is-active { opacity: 1; }
.s-slides { display: grid; }
.s-slide { grid-area: 1 / 1; min-width: 0; align-self: end; }
.s-hero h1 + .s-hero-actions, .s-hero-title + .s-hero-actions { margin-top: 28px; }
.s-hero-img:not([style]) { background: url(../images/ssa/topo-light.png) center / 1100px auto; opacity: .5; }
.s-hero--slides .s-hero-img:not([style]):not(.s-is-active) { opacity: 0; }
.s-hero--slides .s-slide { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.s-hero--slides .s-slide.s-is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .15s, transform .5s ease .15s, visibility 0s; }
.s-slider-nav { display: flex; align-items: center; gap: 10px; margin-top: 32px; }
.s-slider-dots { display: flex; gap: 6px; }
.s-slider-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.s-slider-dots button::before { content: ""; position: absolute; left: 4px; right: 4px; top: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.35); transition: background .2s; }
.s-slider-dots button[aria-current="true"]::before { background: var(--signal); }
.s-slider-dots button:hover::before { background: rgba(255,255,255,.7); }
.s-slider-arrow, .s-slider-pause { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.s-slider-pause { margin-left: 4px; position: relative; }
/* ikona pauzy = dva pruhy, po zastaveni trojuholnik (spustit) */
.s-slider-pause::before { content: ""; width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; box-sizing: border-box; }
.s-slider-pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 6px 0 6px 10px; margin-left: 3px; }
.s-slider-arrow:hover, .s-slider-pause:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.s-hero .s-lead { color: rgba(255,255,255,.85); font-size: 1.25rem; margin: 18px 0 28px; }
.s-hero .s-eyebrow { color: var(--sky); }
.s-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.s-season-card { background: rgba(15,30,46,.78); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 22px; backdrop-filter: blur(6px); }
.s-season-card h2 { font-size: 1.3rem; color: #fff; letter-spacing: .06em; }
.s-season-card .s-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.s-season-card .s-stat b { display: block; font: 700 2.4rem/1 var(--f-display); color: #fff; }
.s-season-card .s-stat span { font-size: .8rem; color: rgba(255,255,255,.7); line-height: 1.25; display: block; margin-top: 4px; }
.s-season-card .s-next { border-top: 1px solid rgba(255,255,255,.15); padding-top: 14px; font-size: .92rem; color: rgba(255,255,255,.8); }
.s-season-card a { color: #fff; }

/* quick links */
.s-quick { margin-top: -1px; background: var(--paper); border-bottom: 1px solid var(--line); }
.s-quick .s-wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.s-quick a { display: flex; gap: 14px; align-items: center; padding: 22px 18px; text-decoration: none; color: var(--ink); border-right: 1px solid var(--line); }
.s-quick a:first-child { border-left: 1px solid var(--line); }
.s-quick a:hover { background: var(--snow); }
.s-quick svg { width: 34px; height: 34px; flex: none; color: var(--sky); }
.s-quick b { display: block; font: 700 1.2rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.s-quick span { font-size: .86rem; color: var(--muted); line-height: 1.3; display: block; margin-top: 3px; }

/* ---------- cards */
.s-grid { display: grid; gap: 28px; }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.s-card-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--ink); max-width: 100%; }
.s-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.s-card:hover .s-card-media img { transform: scale(1.035); }
.s-card-media .s-ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink-2) url(../images/ssa/topo-light.png) center / 900px auto; }
.s-card-media .s-ph img { width: 44%; height: auto; filter: brightness(0) invert(1); opacity: .9; transform: none !important; }
.s-card h3 { font-size: 1.4rem; line-height: 1.1; }
.s-card:hover h3 { color: var(--blue); }
.s-card p { margin: 0; color: var(--muted); font-size: .97rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.s-card .s-meta { display: flex; gap: 10px; align-items: center; font-size: .84rem; color: var(--muted); }
.s-feature { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: center; text-decoration: none; color: var(--ink); margin-bottom: 40px; }
.s-feature .s-card-media { aspect-ratio: 16 / 9; }
.s-feature h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); text-transform: uppercase; margin: 10px 0 14px; }
.s-feature p { color: var(--muted); font-size: 1.07rem; }
.s-feature:hover h3 { color: var(--blue); }

/* race list rows */
.s-race { display: grid; grid-template-columns: 84px 132px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.s-race:first-child { border-top: 1px solid var(--line); }
.s-date-block { text-align: center; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.s-date-block .s-d { display: block; font: 700 2.1rem/1 var(--f-display); padding: 8px 0 2px; }
.s-date-block .s-m { display: block; font: 600 .74rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 8px; }
.s-date-block .s-w { display: block; background: var(--ink); color: #fff; font: 600 .7rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 5px 0; }
.s-race-thumb { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--snow); border: 1px solid var(--line); }
.s-race-thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-race-thumb .s-ph { width: 100%; height: 100%; display: grid; place-items: center; background: var(--snow) url(../images/ssa/topo-dark.png) center / 700px auto; color: var(--sky); }
.s-race-thumb .s-ph svg { width: 42px; height: 42px; }
.s-race h3 { font-size: 1.5rem; margin-bottom: 8px; }
.s-race h3 a { color: var(--ink); text-decoration: none; }
.s-race h3 a:hover { color: var(--blue); }
.s-race .s-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.s-race p { margin: 10px 0 0; color: var(--muted); font-size: .95rem; max-width: 70ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-race-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.s-month { font: 700 1rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 30px 0 12px; display: flex; align-items: center; gap: 12px; }
.s-month::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* season timeline (home) */
/* casova os: kazda polozka kresli usek ciary od svojej ikony k dalsej, takze ciara ide presne cez stredy ikon a konci na poslednom preteku */
.s-timeline { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0; overflow-x: auto; padding: 4px 8px 14px; margin-inline: -8px; scroll-padding-inline: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.s-timeline.s-more-right { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.s-timeline.s-more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); mask-image: linear-gradient(90deg, transparent, #000 15%); }
.s-timeline.s-more-left.s-more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.s-tl { position: relative; padding: 0 18px 0 0; text-decoration: none; color: var(--ink); scroll-snap-align: start; }
.s-tl::before { content: ""; position: absolute; left: 22px; width: 100%; top: 45px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
.s-tl.s-is-past::before { background: var(--sky); }
.s-tl:last-child::before { display: none; }
.s-tl .s-tl-date { display: block; height: 14px; font: 600 .8rem/14px var(--f-data); color: var(--muted); white-space: nowrap; }
.s-tl .s-tl-ic { width: 44px; height: 44px; margin: 10px 0 14px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--sky); color: var(--sky); position: relative; z-index: 1; transition: transform .2s ease, box-shadow .2s ease; }
.s-section--snow .s-tl .s-tl-ic { box-shadow: 0 0 0 5px var(--snow); }
.s-tl .s-tl-ic svg { width: 22px; height: 22px; }
.s-tl.s-is-msr .s-tl-ic { border-color: var(--signal); color: var(--signal); }
.s-tl.s-is-past .s-tl-ic { background: var(--sky); color: #fff; }
.s-tl.s-is-past.s-is-msr .s-tl-ic { background: var(--signal); }
.s-tl.s-is-next .s-tl-ic { box-shadow: 0 0 0 5px var(--snow), 0 0 0 7px var(--sky); }
.s-tl.s-is-next.s-is-msr .s-tl-ic { box-shadow: 0 0 0 5px var(--snow), 0 0 0 7px var(--signal); }
.s-tl.s-is-next .s-tl-date { color: var(--ink); }
.s-tl.s-is-next .s-tl-date::after { content: "Najbližší"; margin-left: 8px; padding: 2px 6px; border-radius: 3px; background: var(--ink); color: #fff; font: 600 .62rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.s-tl b { display: block; font: 700 1.08rem/1.1 var(--f-display); }
.s-tl span { font-size: .82rem; color: var(--muted); }
.s-tl:hover .s-tl-ic { transform: translateY(-2px); }
.s-tl:hover b { color: var(--blue); }
.s-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }
.s-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sky); vertical-align: -1px; margin-right: 6px; }
.s-legend i.s-msr { border-color: var(--signal); }
.s-legend i.s-done { background: var(--sky); }

/* podium / bib */
.s-podiums { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.s-podium { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.s-podium h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.s-podium h3 span { font: 500 .82rem/1 var(--f-body); color: var(--muted); text-transform: none; letter-spacing: 0; }
.s-p-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.s-medal { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 1.2rem/1 var(--f-display); color: #fff; background: var(--silver); }
.s-medal.s-g1 { background: var(--gold); } .s-medal.s-g2 { background: var(--silver); } .s-medal.s-g3 { background: var(--bronze); }
.s-p-row b { display: block; font-size: 1.05rem; }
.s-p-row small { color: var(--muted); font-size: .82rem; }
.s-p-row .s-pts { font: 700 1.6rem/1 var(--f-display); text-align: right; }
.s-p-row .s-pts small { display: block; font: 500 .7rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.s-bar { height: 4px; background: var(--snow); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.s-bar i { display: block; height: 100%; background: var(--sky); }

/* athlete bib cards */
.s-bibs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.s-bib { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); }
.s-bib-top { position: relative; aspect-ratio: 4 / 4.2; background: var(--ink-2) url(../images/ssa/topo-light.png) center / 800px auto; display: grid; place-items: center; overflow: hidden; }
.s-bib-top img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.s-bib-tag { width: 64%; aspect-ratio: 1.25; background: #fff; border-radius: 10px; display: grid; place-items: center; position: relative; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.s-bib-tag::before, .s-bib-tag::after { content: ""; position: absolute; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); }
.s-bib-tag::before { left: 10px; } .s-bib-tag::after { right: 10px; }
.s-bib-tag b { font: 700 3.1rem/1 var(--f-display); color: var(--ink); letter-spacing: .02em; }
.s-bib-tag span { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 600 .6rem/1 var(--f-body); letter-spacing: .18em; color: var(--signal); }
.s-bib-tag i { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #fff 0 33%, var(--blue) 33% 66%, var(--signal) 66%); }
.s-bib-body { padding: 14px 16px 16px; }
.s-bib-body b { display: block; font: 700 1.3rem/1.1 var(--f-display); text-transform: uppercase; }
.s-bib-body span { font-size: .86rem; color: var(--muted); }
.s-bib .s-cat { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* tables */
.s-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
table.s-t { width: 100%; border-collapse: collapse; font-size: .97rem; }
.s-t th { position: sticky; top: 0; background: var(--snow); text-align: left; font: 600 .76rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.s-t td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.s-t tr:last-child td { border-bottom: 0; }
.s-t tbody tr:hover { background: #f8fafc; }
.s-t .s-num { text-align: right; font-variant-numeric: tabular-nums; }
.s-t .s-rank { font: 700 1.15rem/1 var(--f-display); width: 56px; }
.s-t .s-name { font-weight: 600; }
.s-t .s-races { display: flex; gap: 4px; flex-wrap: wrap; }
.s-t .s-races span { font-size: .76rem; padding: 3px 7px; border-radius: 3px; background: var(--snow); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.s-t .s-pts { font: 700 1.25rem/1 var(--f-display); }
.s-t .s-pts-cell { width: 200px; }
.s-empty { padding: 40px; text-align: center; color: var(--muted); }

/* toolbar */
.s-toolbar { display: flex; gap: 14px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.s-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.s-search input { width: 100%; min-height: 44px; padding: 10px 14px 10px 40px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 400 1rem var(--f-body); background: var(--paper); color: var(--ink); }
.s-search svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); }
.s-select { min-height: 44px; padding: 8px 36px 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 500 1rem var(--f-body); background: var(--paper); color: var(--ink); }

/* layouts */
.s-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.s-two-col--narrow { grid-template-columns: minmax(0, 1fr) 340px; }
/* oznam "pripravujeme" pre aktualnu sezonu bez pretekov/vysledkov */
.s-soon { display: flex; gap: 18px; align-items: flex-start; max-width: 760px; }
.s-soon > svg { flex: none; width: 34px; height: 34px; color: var(--sky); }
.s-soon b { display: block; font: 700 1.25rem/1.2 var(--f-display); color: var(--ink); }
.s-soon p { margin: 6px 0 0; }
/* poradie SP: nadpis kategorie a odstupy len pri hladani, ked je vidno viac kategorii naraz */
.s-pane-title { display: none; }
.s-searching > [data-pane] + [data-pane] { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.s-searching .s-pane-title { display: block; margin: 0 0 12px; font-size: 1.5rem; }
.s-searching .s-sticky { display: none; }
.s-searching > .s-two-col--narrow { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.s-sticky { position: sticky; top: 100px; }
.s-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.s-panel--snow { background: var(--snow); border-color: transparent; }
.s-panel h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 14px; }
.s-facts { display: grid; gap: 0; margin: 0; }
.s-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.s-facts dt { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 2px; }
.s-facts dd { margin: 0; font-weight: 500; }
.s-stack { display: grid; gap: 10px; }

/* article */
.s-article { max-width: 720px; }
.s-article p { font-size: 1.12rem; line-height: 1.7; }
.s-article h2 { font-size: 1.7rem; margin: 1.6em 0 .6em; text-transform: none; }
.s-article ul { padding-left: 1.2em; font-size: 1.12rem; }
.s-article figure { margin: 0 0 32px; }
.s-article figcaption { font-size: .86rem; color: var(--muted); margin-top: 8px; }
.s-callout { border-left: 4px solid var(--signal); background: var(--snow); padding: 18px 22px; border-radius: 0 var(--r) var(--r) 0; margin: 28px 0; }
.s-callout b { font: 700 1.25rem/1.15 var(--f-display); text-transform: uppercase; display: block; margin-bottom: 6px; }
.s-share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 36px 0; }
.s-athletes-inline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 26px; }
.s-athletes-inline a { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.s-athletes-inline img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.s-athletes-inline b { font: 700 1.05rem/1.05 var(--f-display); text-transform: uppercase; }

/* gallery */
.s-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.s-album { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; color: #fff; text-decoration: none; background: var(--ink); }
.s-album img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.s-album:hover img { transform: scale(1.04); }
.s-album::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,22,36,.88), rgba(10,22,36,0) 60%); }
.s-album .s-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.s-album .s-cap b { font: 700 1.4rem/1.05 var(--f-display); text-transform: uppercase; display: block; }
.s-album .s-cap span { font-size: .84rem; opacity: .85; }
.s-masonry { columns: 3 280px; column-gap: 14px; }
.s-masonry a { display: block; margin-bottom: 14px; border-radius: 6px; overflow: hidden; break-inside: avoid; cursor: zoom-in; }
.s-masonry img { width: 100%; transition: opacity .2s; }
.s-masonry a:hover img { opacity: .88; }
.s-lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8,16,26,.94); display: none; align-items: center; justify-content: center; padding: 60px 70px; }
.s-lightbox.s-is-open { display: flex; }
.s-lightbox img { max-height: 100%; max-width: 100%; border-radius: 4px; }
.s-lightbox button { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; width: 52px; height: 52px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.s-lightbox .s-lb-close { top: 16px; right: 16px; } .s-lightbox .s-lb-prev { left: 12px; } .s-lightbox .s-lb-next { right: 12px; }
.s-lightbox .s-lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font: 500 .9rem var(--f-data); }

/* steps / forms */
.s-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: s; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.s-step { padding: 22px; border-right: 1px solid var(--line); counter-increment: s; }
.s-step:last-child { border-right: 0; }
.s-steps--2 { grid-template-columns: 1fr 1fr; }
.s-steps--2 .s-step:nth-child(2n) { border-right: 0; }
.s-step--row2 { border-top: 1px solid var(--line); }
.s-people--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-step::before { content: counter(s); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 1.2rem/1 var(--f-display); margin-bottom: 12px; }
.s-step b { display: block; font: 700 1.2rem/1.1 var(--f-display); text-transform: uppercase; margin-bottom: 6px; }
.s-step p { margin: 0; color: var(--muted); font-size: .95rem; }
.s-fees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.s-fee { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: var(--paper); }
.s-fee b { display: block; font: 700 2.6rem/1 var(--f-display); }
.s-fee span { color: var(--muted); font-size: .9rem; }
.s-fee.s-is-main { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--signal); }
.s-form { display: grid; gap: 20px; }
.s-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 22px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; background: var(--paper); }
.s-form legend { font: 700 1.15rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; padding: 0 8px; }
.s-field { display: grid; gap: 6px; min-width: 0; }
.s-field--full { grid-column: 1 / -1; }
.s-field label, .s-field .s-lbl { font-weight: 600; font-size: .92rem; }
.s-field label .s-req { color: var(--signal); }
.s-field input, .s-field textarea, .s-field select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 400 1rem var(--f-body); color: var(--ink); background: var(--paper); }
.s-field textarea { min-height: 130px; resize: vertical; }
.s-field input:focus, .s-field textarea:focus, .s-field select:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(30,150,211,.2); outline: none; }
.s-field .s-hint { font-size: .82rem; color: var(--muted); }
.s-radios { display: flex; gap: 10px; }
.s-radios label { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r); font-weight: 500; cursor: pointer; }
.s-check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.s-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

/* documents */
.s-docs { display: grid; gap: 0; }
.s-doc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.s-doc .s-ext { width: 40px; height: 48px; border-radius: 4px; display: grid; place-items: end center; padding-bottom: 6px; font: 700 .64rem/1 var(--f-body); letter-spacing: .06em; color: #fff; background: #b83a2a; position: relative; text-transform: uppercase; }
.s-doc .s-ext.s-docx, .s-doc .s-ext.s-doc { background: #2b5797; } .s-doc .s-ext.s-web { background: var(--ink-2); } .s-doc .s-ext.s-xlsx, .s-doc .s-ext.s-xls { background: #1f7a4d; }
.s-doc .s-ext::before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 12px 12px 0; border-style: solid; border-color: var(--paper) rgba(0,0,0,.25) rgba(0,0,0,.25) var(--paper); }
.s-doc b { font-weight: 600; display: block; }
.s-doc small { color: var(--muted); }
.s-doc .s-yr { font: 500 .85rem var(--f-data); color: var(--muted); }
details.s-group { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 14px; background: var(--paper); }
details.s-group > summary { list-style: none; cursor: pointer; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 700 1.25rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
details.s-group > summary::-webkit-details-marker { display: none; }
details.s-group > summary::after { content: "+"; font: 400 1.6rem/1 var(--f-body); color: var(--muted); }
details.s-group[open] > summary::after { content: "–"; }
details.s-group > summary .s-n { font: 500 .85rem var(--f-data); color: var(--muted); margin-left: auto; margin-right: 12px; }
details.s-group .s-docs { padding: 0 20px 10px; }

/* support */
.s-calc { display: grid; gap: 14px; }
.s-calc .s-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s-calc .s-out div { background: var(--snow); border-radius: var(--r); padding: 14px; }
.s-calc .s-out b { display: block; font: 700 2rem/1 var(--f-display); }
.s-calc .s-out span { font-size: .82rem; color: var(--muted); }
.s-big-stat { font: 700 clamp(4rem, 9vw, 7rem)/.85 var(--f-display); color: var(--signal); }

/* contact */
.s-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-person { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.s-person .s-ini { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 1.15rem/1 var(--f-display); letter-spacing: .04em; }
.s-person b { display: block; font-weight: 600; }
.s-person span { font-size: .85rem; color: var(--muted); }
.s-contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s-cc { padding: 22px; border-radius: 8px; background: var(--snow); }
.s-cc .s-k { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.s-cc .s-v { font: 700 1.45rem/1.15 var(--f-display); margin: 6px 0 12px; word-break: break-word; }
.s-copy { font: 600 .85rem var(--f-body); color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; }

/* membership band */
.s-band { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.s-band::before { content: ""; position: absolute; inset: 0; background: url(../images/ssa/topo-light.png) left -300px center / 1600px auto no-repeat; }
.s-band .s-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: clamp(56px, 8vw, 90px); }
.s-band h2 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.s-band p { color: rgba(255,255,255,.78); }
.s-band .s-fees .s-fee { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.s-band .s-fees .s-fee span { color: rgba(255,255,255,.7); }
.s-band .s-fees .s-fee.s-is-main { border-color: #fff; }
.s-ticks { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; }
.s-ticks li { display: flex; gap: 10px; align-items: flex-start; }
.s-ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E") center / 20px; }

/* disciplines */
.s-disc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.s-disc > div { padding: 22px 22px 22px 0; border-right: 1px solid var(--line); }
.s-disc > div + div { padding-left: 22px; }
.s-disc > div:last-child { border-right: 0; }
.s-disc svg { width: 46px; height: 46px; color: var(--sky); margin-bottom: 12px; }
.s-disc b { display: block; font: 700 1.35rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 8px; }
.s-disc p { font-size: .95rem; color: var(--muted); margin: 0; }

/* partners + footer */
.s-partners { border-top: 1px solid var(--line); }
.s-partners .s-wrap { display: flex; align-items: center; gap: 24px 48px; flex-wrap: wrap; justify-content: space-between; padding-block: 34px; }
.s-partners .s-lbl { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; flex: none; }
.s-partners .s-logos { display: flex; gap: 22px 44px; align-items: center; flex-wrap: wrap; flex: 1; justify-content: space-between; }
.s-partners img { height: 40px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.s-partners img:hover { filter: none; opacity: 1; }
.s-footer { background: var(--ink); color: rgba(255,255,255,.78); font-size: .95rem; position: relative; overflow: hidden; }
.s-footer::before { content: ""; position: absolute; inset: 0; background: url(../images/ssa/topo-light.png) right -300px top -100px / 1500px auto no-repeat; opacity: .6; }
.s-footer .s-wrap { position: relative; }
.s-footer-main { display: grid; grid-template-columns: 1.3fr minmax(0, 2.4fr) 1.4fr; gap: 40px; padding-block: 60px 40px; }
.s-footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.s-footer h4 { font: 700 1rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.s-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.s-footer a:hover { color: #fff; text-decoration: underline; }
.s-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.s-footer .s-flogo { height: 38px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.s-footer address { font-style: normal; line-height: 1.7; }
.s-funding { font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.66); }
.s-funding .s-flogos { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.s-funding .s-flogos img { height: 44px; width: auto; }
.s-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.s-footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* newsletter / social row */
.s-connect { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
.s-connect .s-panel { display: grid; gap: 14px; align-content: start; }
.s-inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.s-inline-form input { flex: 1 1 220px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 400 1rem var(--f-body); }
.s-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.s-socials a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); text-decoration: none; color: var(--ink); font-weight: 600; }
.s-socials svg { width: 18px; height: 18px; fill: currentColor; }

/* cookie card */
.s-cookie { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: 380px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 16px 18px; font-size: .88rem; display: flex; gap: 14px; align-items: center; }
.s-cookie p { margin: 0; color: var(--muted); }
.s-cookie[hidden] { display: none; }

/* product */
.s-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.s-product .s-card-media { aspect-ratio: 1; background: var(--snow); }
.s-sizes { display: flex; gap: 8px; }

/* ---------- responsive */
@media (max-width: 1100px) {
  .s-nav, .s-header-cta { display: none; }
  .s-burger { display: inline-flex; }
  .s-hero .s-wrap { grid-template-columns: 1fr; }
  .s-two-col, .s-two-col--narrow { grid-template-columns: minmax(0, 1fr); }
  .s-sticky { position: static; }
  .s-footer-main { grid-template-columns: 1fr 1fr; }
  .s-footer-links { grid-column: 1 / -1; }
  .s-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-disc { grid-template-columns: 1fr 1fr; }
  .s-disc > div:nth-child(2) { border-right: 0; }
  .s-disc > div:nth-child(3) { padding-left: 0; }
}
@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .s-util { display: none; }
  .s-site-header .s-wrap { min-height: 62px; gap: 12px; }
  .s-logo img { height: 34px; }
  .s-header-cta--mobile { display: inline-flex !important; margin-left: auto; min-height: 40px; padding: 8px 12px; font-size: .85rem; }
  .s-burger { margin-left: 0; width: 42px; height: 42px; }
  .s-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper); border-top: 1px solid var(--line);
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); box-shadow: 0 -4px 16px rgba(15,30,46,.06); }
  .s-tabbar a, .s-tabbar button { display: grid; justify-items: center; gap: 3px; padding: 6px 0; font: 600 .7rem/1 var(--f-body); letter-spacing: .03em; color: var(--muted); text-decoration: none; background: none; border: 0; }
  .s-tabbar svg { width: 22px; height: 22px; }
  .s-tabbar [aria-current="page"] { color: var(--signal); }
  .s-cookie { left: 12px; right: 12px; max-width: none; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .s-hero .s-wrap { padding-block: 64px 28px; }
  .s-hero .s-lead { font-size: 1.08rem; }
  .s-season-card .s-stat b { font-size: 2rem; }
  .s-quick .s-wrap { grid-template-columns: 1fr 1fr; padding: 0; }
  .s-quick a { border-left: 0 !important; border-bottom: 1px solid var(--line); padding: 16px; }
  .s-quick a:nth-child(2n) { border-right: 0; }
  .s-quick svg { width: 28px; height: 28px; }
  .s-quick b { font-size: 1.05rem; }
  .s-quick span { display: none; }
  .s-grid--3, .s-grid--4, .s-albums, .s-podiums, .s-connect, .s-people, .s-contact-cards, .s-fees, .s-product, .s-band .s-wrap, .s-feature { grid-template-columns: 1fr; }
  .s-grid { gap: 26px; }
  .s-feature { gap: 16px; }
  .s-race { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
  .s-race-thumb { display: none; }
  .s-date-block .s-d { font-size: 1.7rem; }
  .s-race h3 { font-size: 1.28rem; }
  .s-race-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .s-race-actions .s-btn { flex: 1 1 auto; }
  .s-timeline { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; padding-inline: 0; margin-inline: 0; }
  .s-tl { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 0 0 18px; }
  .s-tl::before { left: 21px; top: 22px; width: 2px; height: 100%; background: repeating-linear-gradient(180deg, var(--line-strong) 0 6px, transparent 6px 11px); }
  .s-tl .s-tl-ic { grid-row: 1 / span 3; margin: 0; }
  .s-steps { grid-template-columns: 1fr; }
  .s-step { border-right: 0; border-bottom: 1px solid var(--line); }
  .s-form fieldset { grid-template-columns: 1fr; padding: 18px; }
  .s-disc { grid-template-columns: 1fr; }
  .s-disc > div, .s-disc > div + div { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .s-footer-main { grid-template-columns: 1fr; gap: 30px; padding-block: 44px 28px; }
  .s-partners .s-wrap { flex-direction: column; align-items: flex-start; gap: 18px; padding-block: 26px; }
  .s-partners .s-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; width: 100%; align-items: center; justify-items: center; }
  .s-partners img { height: 30px; }
  .s-band .s-fees { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .s-band .s-fees .s-fee { padding: 12px; }
  .s-band .s-fees .s-fee b { font-size: 1.8rem; }
  .s-eyebrow { letter-spacing: .1em; flex-wrap: wrap; line-height: 1.3; }
  .s-doc { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .s-doc .s-yr { display: none; }
  .s-t .s-hide-sm { display: none; }
  .s-t .s-pts-cell { width: 92px; }
  .s-t td, .s-t th { padding: 11px 10px; }
  .s-t th { white-space: normal; }
  .s-t .s-rank { width: 40px; }
  .s-t .s-pts-cell .s-bar { width: 72px; margin-left: auto; }
  .s-people--2 { grid-template-columns: 1fr; }
  .s-steps--2 { grid-template-columns: 1fr; }
  .s-steps--2 .s-step { border-right: 0; }
  .s-step--row2 { border-top: 0; }
  .s-page-head .s-wrap { padding-block: 22px 28px; }
  .s-page-head .s-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: none; }
  .s-page-head .s-tabs a { white-space: nowrap; }
  .s-athletes-inline { grid-template-columns: 1fr; }
  .s-lightbox { padding: 60px 8px; }
  .s-bibs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .s-bib-body b { font-size: 1.1rem; }
  .s-bib-tag b { font-size: 2.2rem; }
  .s-facts div { grid-template-columns: 100px minmax(0, 1fr); }
}
.s-header-cta--mobile { display: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* variant C: lighter logo-blue chrome */
.s-util { background: #0f4a72; }
.s-hero, .s-footer, .s-page-head, .s-drawer, .s-band { background-color: var(--chrome); }
.s-hero-img::after { background: linear-gradient(90deg, rgba(18,89,133,.93) 0%, rgba(18,89,133,.72) 38%, rgba(18,89,133,.1) 70%), linear-gradient(0deg, rgba(18,89,133,.72), transparent 45%); }
.s-season-card { background: rgba(15,74,114,.82); }
.s-band { background-image: linear-gradient(120deg, #125985 0%, #167db4 100%); }
.s-band .s-fees .s-fee { background: rgba(255,255,255,.12); }
.s-card-media .s-ph, .s-bib-top { background-color: var(--ink-2); }
.s-quick { background: #f3fafe; }
.s-quick a:hover { background: #e3f3fb; }
.s-podium { border-color: #cfe6f3; }
.s-medal.s-g2 { background: #8fb3c9; }

/* ---------- doplnky pre sablony webu */
.s-docs-title { font-size: 1.6rem; margin: 36px 0 14px; }
.s-poster { margin: 0 0 28px; background: var(--snow); border-radius: var(--r); overflow: hidden; }
.s-poster img { margin: 0 auto; max-height: 720px; width: auto; }
.s-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 28px 0; }
.s-gallery-item { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 47 / 30; background: var(--snow); cursor: zoom-in; }
.s-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.s-gallery-item:hover img { transform: scale(1.04); }
.s-p-row--link { text-decoration: none; color: inherit; }
.s-p-row--link:hover b { color: var(--blue); }
.s-medal--date { background: var(--ink); font-size: .85rem; letter-spacing: -.02em; }
.s-article.ckeditor-text { max-width: 720px; }
@media (max-width: 760px) { .s-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.s-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.s-pagination-info { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 10px; }
.s-article h2 { font-size: 1.7rem; margin: 1.6em 0 .6em; text-transform: none; }
html .s-article .ckeditor-text, body .s-article .ckeditor-text { font-size: 1.12rem; line-height: 1.7; }
.s-cc-text { font: 700 1.15rem/1.35 var(--f-display); margin-top: 6px; }
.s-cc-text p { margin: 0; }
.s-kontakt-text { margin-top: 48px; max-width: 900px; }
.s-message { padding: 24px; border-radius: 8px; border: 1px solid var(--line); background: var(--snow); font-size: 1.05rem; }
.s-message--success { border-color: #c8e2d3; background: #e8f3ed; }
.s-message--danger, .s-message--error { border-color: #f6cbbf; background: #fdebe6; }
.s-team-cat { font-size: 1.6rem; margin: 36px 0 18px; text-transform: uppercase; }
.s-fees--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 30px; }
.s-toolbar h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
@media (max-width: 760px) { .s-hide-sm { display: none !important; } .s-fees--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .s-fees--stats .s-fee b { font-size: 1.8rem; } .s-fees--stats .s-fee { padding: 12px; } .s-fees--stats .s-fee span { font-size: .78rem; line-height: 1.25; display: block; overflow-wrap: anywhere; } }
.s-big-stat-row { display: flex; gap: 28px; align-items: end; flex-wrap: wrap; margin-bottom: 30px; }
.s-big-stat-row .s-lead { margin: 0; max-width: 40ch; }
.s-h2-sm { font-size: 1.7rem; margin-bottom: 18px; }
.s-panel.s-card svg { width: 34px; height: 34px; color: var(--sky); }
.s-reg-form { margin-top: 48px; max-width: 860px; }
.s-fees--list { grid-template-columns: 1fr; }
.s-fees--list .s-fee { display: flex; justify-content: space-between; align-items: center; }
.s-fees--list .s-fee b { font-size: 1.8rem; }
.s-req { color: var(--signal); }
.s-reg-text { max-width: 720px; }
.s-form .defaultErr:empty { display: none; }
.input-hidden { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* merch: zoznam a detail produktu */
.s-product-tag { position: absolute; top: 10px; left: 10px; background: var(--signal); color: #fff; }
.s-chips--sm .s-chip { min-height: 28px; padding: 3px 10px; font-size: .82rem; }
.s-product-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.s-price { font: 700 1.3rem/1.1 var(--f-display); color: var(--ink); }
.s-price s { font-size: .8em; font-weight: 500; color: var(--muted); margin-left: 6px; }
.s-price--lg { font-size: 2rem; margin-bottom: 8px; }
.s-btn--block { display: flex; width: 100%; margin: 18px 0 12px; }
.s-small { font-size: .88rem; margin: 0; }
.s-shop-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 48px; }
.s-shop-note > svg { width: 36px; height: 36px; color: var(--blue); }
.s-shop-note p { margin: 4px 0 0; color: var(--muted); }
.s-product-view { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.s-product-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: sticky; top: 100px; }
.s-product-main { grid-column: 1 / -1; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--snow); cursor: zoom-in; position: relative; }
.s-product-main img, .s-product-gallery .s-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.s-product-gallery .s-gallery-item { aspect-ratio: 1; }
.s-product-info { display: grid; gap: 24px; min-width: 0; }
.s-variants dl { margin: 12px 0 0; }
.s-variants dt { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.s-variants dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.s-variants .btn { border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); padding: 6px 14px; }
.s-variants .btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.s-video { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.s-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .s-product-view { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .s-product-gallery { position: static; }
  .s-shop-note { grid-template-columns: minmax(0, 1fr); text-align: left; }
}
/* Uprava povodnych sablon (kosik, pokladna, e-shop), ktore este nemaju novy dizajn */
.container { max-width: 1240px; }
.btn-primary, .btn-secondary, .btn-tertiary { font-family: var(--f-body); font-weight: 600; text-transform: none; border-radius: var(--r); }
.btn-tertiary, .btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn-tertiary:hover, .btn-primary:hover, .btn-tertiary:focus, .btn-primary:focus { background: var(--signal-hover); border-color: var(--signal-hover); color: #fff; }
.btn-secondary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-secondary:hover, .btn-secondary:focus { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.h1-divider { background: var(--signal); }
.form-control:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(30, 150, 211, .2); }

/* povodny screen.css nastavuje pisma a farby odkazov selektormi html/body (vyssia vaha), preto rovnaka vaha tu */
html, body { font-family: var(--f-body); font-weight: 400; color: var(--ink); }
html h1, html .h1, html h2, html .h2, html h3, html .h3, body h1, body .h1, body h2, body .h2, body h3, body .h3 { font-family: var(--f-display); color: var(--ink); font-weight: 700; }
html h1, html .h1, body h1, body .h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
html a, body a { color: var(--blue); }
html a:hover, html a:focus, body a:hover, body a:focus { color: var(--ink); }
.s-hero h1, .s-page-head h1, .s-band h2, .s-season-card h2 { color: #fff; }
html { font-size: 100%; } /* bootstrap 3 nastavuje 10px, novy dizajn pocita rem zo 16px */
.s-logos a { display: flex; align-items: center; justify-content: center; min-width: 0; }
.s-logos img { max-width: 100%; }
.s-band .s-eyebrow, .s-hero .s-eyebrow { color: #ffd2c7; }
/* v novych komponentoch neplati float a kapitalky nadpisov z povodneho screen.css */
html :where([class*="s-"]) h1, body :where([class*="s-"]) h1 { float: none; }
html :where([class*="s-"]) h3, body :where([class*="s-"]) h3 { text-transform: none; }
/* stranky v povodnom rozlozeni (kosik, pokladna, produkt) pod novou hlavickou podstranky */
.s-page-head ~ .container { margin-top: 36px; margin-bottom: 56px; }