@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/archivo-800-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: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/archivo-800-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/archivo-black-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: 'Archivo Black';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/archivo-black-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/inter-var-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: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("/fonts/inter-var-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --radius: 0.25rem;

    --font-display: "Archivo Black", "Arial Black", sans-serif;
    --font-hero: "Archivo", "Arial Black", sans-serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

    --background: oklch(0.16 0 0);
    --foreground: oklch(0.98 0 0);
    --card: oklch(0.2 0 0);
    --card-foreground: oklch(0.98 0 0);
    --popover: oklch(0.18 0 0);
    --popover-foreground: oklch(0.98 0 0);

    --primary: oklch(0.92 0.22 125);
    --primary-foreground: oklch(0.14 0.02 130);

    --secondary: oklch(0.24 0 0);
    --secondary-foreground: oklch(0.98 0 0);
    --muted: oklch(0.24 0 0);
    --muted-foreground: oklch(0.62 0 0);
    --accent: oklch(0.28 0.08 125);
    --accent-foreground: oklch(0.98 0 0);
    --destructive: oklch(0.62 0.22 25);
    --destructive-foreground: oklch(0.98 0 0);
    --border: oklch(1 0 0 / 8%);
    --input: oklch(1 0 0 / 10%);
    --ring: oklch(0.92 0.22 125);

    --lime: oklch(0.92 0.22 125);
    --lime-foreground: oklch(0.14 0.02 130);
    --surface: oklch(0.12 0 0);
    --surface-foreground: oklch(0.98 0 0);

    --primary-10: color-mix(in oklab, var(--primary) 10%, transparent);
    --primary-15: color-mix(in oklab, var(--primary) 15%, transparent);
    --primary-30: color-mix(in oklab, var(--primary) 30%, transparent);
    --primary-40: color-mix(in oklab, var(--primary) 40%, transparent);
    --primary-50: color-mix(in oklab, var(--primary) 50%, transparent);
    --primary-60: color-mix(in oklab, var(--primary) 60%, transparent);
    --primary-70: color-mix(in oklab, var(--primary) 70%, transparent);

    --background-30: color-mix(in oklab, var(--background) 30%, transparent);
    --background-40: color-mix(in oklab, var(--background) 40%, transparent);
    --background-70: color-mix(in oklab, var(--background) 70%, transparent);
    --background-80: color-mix(in oklab, var(--background) 80%, transparent);
    --background-95: color-mix(in oklab, var(--background) 95%, transparent);

    --card-40: color-mix(in oklab, var(--card) 40%, transparent);
    --card-50: color-mix(in oklab, var(--card) 50%, transparent);
    --card-60: color-mix(in oklab, var(--card) 60%, transparent);
    --card-80: color-mix(in oklab, var(--card) 80%, transparent);

    --border-40: color-mix(in oklab, var(--border) 40%, transparent);
    --border-60: color-mix(in oklab, var(--border) 60%, transparent);

    --foreground-40: color-mix(in oklab, var(--foreground) 40%, transparent);
    --foreground-70: color-mix(in oklab, var(--foreground) 70%, transparent);

    --group-kids: oklch(79.2% 0.209 151.711);
    --group-juniors: oklch(70.7% 0.165 254.624);
    --group-teens: oklch(70.4% 0.191 22.216);

    --tw-fuchsia-400: oklch(74% 0.238 322.16);
    --tw-orange-400: oklch(75% 0.183 55.934);
    --tw-sky-400: oklch(74.6% 0.16 232.661);

    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

* {
    border-color: var(--border);
}

html,
:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--font-sans);
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

:-moz-focusring { outline: auto; }
progress { vertical-align: baseline; }
summary { display: list-item; }

ol,
ul,
menu {
    list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
}

::placeholder { opacity: 1; }

@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
    ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }
}

textarea { resize: vertical; }

::-webkit-search-decoration { -webkit-appearance: none; }

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
    appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-feature-settings: "rlig" 1, "calt" 1;
}

::selection {
    background: var(--lime);
    color: var(--lime-foreground);
}

* {
    scrollbar-width: thin;
    scrollbar-color: oklch(0.92 0.22 125 / 25%) transparent;
}

*:hover {
    scrollbar-color: oklch(0.92 0.22 125 / 55%) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: oklch(0.92 0.22 125 / 25%);
    border-radius: 999px;
    transition: background 200ms ease;
}

*::-webkit-scrollbar-thumb:hover {
    background: oklch(0.92 0.22 125 / 65%);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

.font-display {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.font-hero {
    font-family: var(--font-hero);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.text-stroke-lime {
    color: transparent;
    -webkit-text-stroke: 2px var(--lime);
}

.grid-bg {
    background-image:
        linear-gradient(oklch(1 0 0 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, oklch(1 0 0 / 3%) 1px, transparent 1px);
    background-size: 48px 48px;
}

.glow-lime {
    box-shadow: 0 0 60px -10px oklch(0.92 0.22 125 / 40%);
}

@keyframes lime-fill-loop {
    0%   { clip-path: inset(0 100% 0 0); }
    35%  { clip-path: inset(0 0 0 0); }
    65%  { clip-path: inset(0 0 0 0); }
    90%  { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
}

.lime-fill {
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--lime);

    white-space: nowrap;
}

@media (min-width: 768px) {
    .lime-fill {
        -webkit-text-stroke: 2px var(--lime);
    }
}

.lime-fill::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--lime);
    -webkit-text-stroke: 0;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0);
    animation: lime-fill-loop 5s cubic-bezier(0.65, 0, 0.35, 1) 0.3s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .lime-fill::before {
        animation: none;
        clip-path: inset(0 0 0 0);
    }
}

@keyframes blur-fade-in {
    0%   { opacity: 0; backdrop-filter: blur(0px); background-color: oklch(0.16 0 0 / 0); }
    100% { opacity: 1; backdrop-filter: blur(14px); background-color: oklch(0.16 0 0 / 0.72); }
}

@keyframes blur-fade-out {
    0%   { opacity: 1; backdrop-filter: blur(14px); background-color: oklch(0.16 0 0 / 0.72); }
    100% { opacity: 0; backdrop-filter: blur(0px); background-color: oklch(0.16 0 0 / 0); }
}

.animate-blur-in {
    animation: blur-fade-in 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.animate-blur-out {
    animation: blur-fade-out 0.35s cubic-bezier(0.55, 0.06, 0.75, 0.6) forwards;
}

@keyframes ui-fade-in {
    from { opacity: 0; }
}

@keyframes ui-zoom-in-95 {
    from { transform: scale(0.95); }
}

.eyebrow {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.eyebrow--muted {
    color: var(--muted-foreground);
}

.text-primary {
    color: var(--primary);
}

.rule {
    height: 0.375rem;
    width: 6rem;
    background-color: var(--primary);
}

.badge-soon {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.25rem 0.5rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-soon--corner {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem 0.75rem;
}

.tag {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.25rem 0.5rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tag--lg {
    padding: 0.25rem 0.625rem;
}

.spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--background);
    padding: 0.25rem 0.5rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.spec-chip--lg {
    gap: 0.375rem;
    background-color: var(--card);
    padding: 0.5rem 0.75rem;
}

.spec-chip__icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--primary);
}

.section-head {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-head__title {
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
}

.section-head__line {
    height: 0.25rem;
    flex: 1 1 0%;
    background-color: var(--border);
}

@media (min-width: 768px) {
    .section-head__title {
        font-size: 2.25rem;
        line-height: calc(2.5 / 2.25);
    }
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.back-link:hover {
    color: var(--primary);
}

.back-link__icon {
    width: 1rem;
    height: 1rem;
}

.btn {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn--md  { padding: 1rem 1.5rem; }
.btn--lg  { padding: 1rem 2rem; }

.btn--solid {
    background-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 0 60px -10px oklch(0.92 0.22 125 / 40%);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.btn--solid:hover {
    transform: scale(1.05);
}

.btn--ghost {
    border-width: 1px;
    border-color: var(--border);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn--inline-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.btn--inline-center {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn--center { text-align: center; }

.btn__arrow {
    width: 1rem;
    height: 1rem;
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.btn:hover .btn__arrow {
    transform: translateX(0.25rem);
}

.social-round {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    border-color: var(--border);
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.social-round:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.social-round__icon {
    width: 1rem;
    height: 1rem;
}

.social-square {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--border);
}

.social-square:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.glow-orb {
    position: absolute;
    height: 37.5rem;
    width: 37.5rem;
    border-radius: 9999px;
    background-color: var(--primary-10);
    filter: blur(120px);
    pointer-events: none;
}

.glow-orb--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.glow-orb--sm {
    height: 24rem;
    width: 24rem;
}

.glow-orb--top-right { top: 0; right: 0; }
.glow-orb--top-quarter { top: 0; left: 25%; }
.glow-orb--trainer { top: -5rem; left: 33.333333%; }

.grid-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(oklch(1 0 0 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, oklch(1 0 0 / 3%) 1px, transparent 1px);
    background-size: 48px 48px;
}

.grid-layer--40 { opacity: 0.4; }
.grid-layer--30 { opacity: 0.3; }

.shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.shell__main {
    flex: 1 1 0%;
}

.shell--landing {
    position: relative;
}

.shell__landing-copy {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-block: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom-width: 1px;
    border-color: var(--border-60);
    background-color: var(--background-80);
    backdrop-filter: blur(12px);
}

.site-header__inner {
    margin-inline: auto;
    display: flex;
    max-width: 80rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.site-header__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__logo {
    height: 3rem;
    width: auto;
}

.site-nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

.site-nav__group {
    position: relative;
}

.site-nav__link {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.site-nav__link:hover {
    color: var(--foreground);
}

.site-nav__link--group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.site-nav__group:hover .site-nav__link--group {
    color: var(--foreground);
}

.site-nav__link.is-active,
.site-nav__group:hover .site-nav__link--group.is-active,
.site-nav__link.is-active:hover {
    color: var(--primary);
}

.site-nav__chevron {
    width: 0.75rem;
    height: 0.75rem;
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.site-nav__group:hover .site-nav__chevron {
    transform: rotate(180deg);
}

.site-nav__dropdown {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    padding-top: 0.5rem;
    opacity: 0;
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.site-nav__group:hover .site-nav__dropdown {
    visibility: visible;
    opacity: 1;
}

.site-nav__dropdown-inner {
    min-width: 260px;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--background-95);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-xl);
}

.site-nav__dropdown-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    border-color: var(--border-40);
    background-color: var(--card-50);
    padding: 0.75rem 1rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.site-nav__dropdown-all:hover {
    background-color: var(--card);
}

.site-nav__dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    border-bottom-width: 1px;
    border-color: var(--border-40);
    padding: 0.75rem 1rem;
}

.site-nav__dropdown-item:last-child {
    border-bottom-width: 0;
}

.site-nav__dropdown-item:hover {
    background-color: var(--card);
}

.site-nav__dropdown-label {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.site-nav__dropdown-hint {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.site-header__actions {
    display: none;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.site-header__cta {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.625rem 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    letter-spacing: 0.1em;
    box-shadow: 0 0 60px -10px oklch(0.92 0.22 125 / 40%);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.site-header__cta:hover { transform: scale(1.03); }
.site-header__cta:active { transform: scale(0.95); }

.site-header__burger {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--border);
}

.site-header__burger-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* 1180, nie 1024. Pełny nagłówek potrzebuje ok. 1134 px (logo 60 + menu 640
   + przełącznik lokalizacji i przycisk 370 + marginesy 64). Włączany od 1024
   nie mieścił się i rozpychał stronę w bok o ponad 100 px w całym zakresie
   1024-1179 — czyli m.in. na iPadzie w poziomie. Do tej szerokości zostaje
   menu pod hamburgerem, które mieści się zawsze. */
@media (min-width: 1180px) {
    .site-header__inner { padding-inline: 2rem; }
    .site-header__logo { height: 3.5rem; }
    .site-nav { display: flex; }
    .site-header__actions { display: flex; }
    .site-header__burger { display: none; }
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-default);
}

.drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1180px) {
    .drawer { display: none; }
}

.drawer__backdrop {
    position: absolute;
    inset: 0;
    animation: blur-fade-out 0.35s cubic-bezier(0.55, 0.06, 0.75, 0.6) forwards;
}

.drawer.is-open .drawer__backdrop {
    animation: blur-fade-in 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.drawer__panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 86%;
    max-width: 24rem;
    background-color: var(--background);
    border-left-width: 1px;
    border-color: var(--border);
    box-shadow: var(--shadow-2xl);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-out);
}

.drawer.is-open .drawer__panel {
    transform: translateX(0);
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom-width: 1px;
    border-color: var(--border-60);
    padding: 1rem 1.25rem;
}

.drawer__logo {
    height: 2.25rem;
    width: auto;
}

.drawer__close {
    display: inline-flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--border);
    color: var(--foreground);
}

.drawer__close:hover {
    background-color: var(--card);
}

.drawer__close-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.drawer__switcher {
    padding-inline: 1.25rem;
    padding-top: 1.25rem;
}

.drawer__nav {
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 1.25rem;
}

.drawer__list {
    display: flex;
    flex-direction: column;
}

.drawer__item {
    border-bottom-width: 1px;
    border-color: var(--border-40);
}

.drawer__group-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-block: 1rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.drawer__group-btn:hover { color: var(--foreground); }
.drawer__group-btn.is-open { color: var(--foreground); }

.drawer__group-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.drawer__group-btn.is-open .drawer__group-chevron {
    transform: rotate(180deg);
}

.drawer__collapse {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition-property: grid-template-rows;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-out);
}

.drawer__collapse.is-open {
    grid-template-rows: 1fr;
}

.drawer__collapse-inner {
    min-height: 0;
}

.drawer__sublist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left-width: 2px;
    border-color: var(--primary-60);
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.drawer__sub-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-width: 1px;
    border-color: var(--primary-40);
    background-color: var(--primary-10);
    padding: 0.75rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.drawer__sub-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-width: 1px;
    border-color: var(--border-60);
    background-color: var(--card-40);
    padding: 0.75rem;
    color: var(--foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.drawer__sub-link:hover {
    border-color: var(--primary);
    background-color: var(--card);
}

.drawer__sub-icon {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--primary-40);
    background-color: var(--primary-10);
    color: var(--primary);
    flex-shrink: 0;
}

.drawer__sub-icon svg {
    width: 1rem;
    height: 1rem;
}

.drawer__sub-text {
    display: flex;
    flex-direction: column;
}

.drawer__sub-label {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.drawer__sub-hint {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.drawer__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.drawer__link:hover { color: var(--foreground); }
.drawer__link.is-active { color: var(--primary); }

.drawer__link-icon {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
}

.drawer__link.is-active .drawer__link-icon {
    color: var(--primary);
}

.drawer__cta-wrap {
    border-top-width: 1px;
    border-color: var(--border-60);
    padding: 1.25rem;
}

.drawer__cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.875rem 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    letter-spacing: 0.1em;
    box-shadow: 0 0 60px -10px oklch(0.92 0.22 125 / 40%);
    transition-property:
        color, background-color, border-color, outline-color, text-decoration-color,
        fill, stroke, opacity, box-shadow, transform, translate, scale, rotate,
        filter, -webkit-backdrop-filter, backdrop-filter;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.drawer__cta:hover {
    filter: brightness(1.1);
}

.loc-switch {
    display: inline-flex;
    align-items: center;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 0.25rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.loc-switch--compact {
    font-size: 10px;
}

.loc-switch__btn {
    padding: 0.375rem 0.75rem;
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.loc-switch__btn:hover {
    color: var(--foreground);
}

.loc-switch--compact .loc-switch__btn {
    padding: 0.25rem 0.625rem;
}

.loc-switch__btn.is-active,
.loc-switch__btn.is-active:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.loc-switch__soon {
    margin-left: 0.375rem;
    background-color: var(--background-30);
    padding: 0.125rem 0.25rem;
    font-size: 8px;
    line-height: 1;
}

.unity-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.unity-logo__img {
    height: 2.25rem;
    width: auto;
    flex-shrink: 0;
}

.unity-logo__img--footer {
    height: 4rem;
}

.site-footer {
    border-top-width: 1px;
    border-color: var(--border-60);
    background-color: var(--surface);
}

.site-footer__inner {
    margin-inline: auto;
    max-width: 80rem;
    padding: 3.5rem 1rem;
}

.site-footer__grid {
    display: grid;
    gap: 2.5rem;
}

.site-footer__about {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.site-footer__socials {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.site-footer__heading {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foreground);
}

.site-footer__list {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.site-footer__list > :not(:last-child) {
    margin-bottom: 0.5rem;
}

.site-footer__list a:hover {
    color: var(--primary);
}

.site-footer__contact {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.site-footer__contact > :not(:last-child) {
    margin-bottom: 0.75rem;
}

.site-footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.site-footer__contact-row--center {
    align-items: center;
}

.site-footer__contact-icon {
    margin-top: 0.125rem;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}

.site-footer__contact-row--center .site-footer__contact-icon {
    margin-top: 0;
}

.site-footer__contact a {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.site-footer__contact a:hover {
    color: var(--primary);
}

.site-footer__bottom {
    margin-top: 3.5rem;
    border-top-width: 1px;
    border-color: var(--border-60);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.site-footer__author {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    opacity: 0.6;
}

.site-footer__author a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border);
    transition: color 0.15s, text-decoration-color 0.15s;
}

.site-footer__author a:hover,
.site-footer__author a:focus-visible {
    color: var(--primary);
    text-decoration-color: var(--primary);
}

@media (min-width: 640px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .site-footer__inner { padding-inline: 2rem; }
    .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.floating-actions {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.floating-loc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.floating-loc__menu {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    pointer-events: none;
    transform: translateY(1rem);
    opacity: 0;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-default);
}

.floating-loc__menu.is-open {
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
}

.floating-loc__action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--background-95);
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--foreground);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(12px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.floating-loc__action:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.floating-loc__action-icon {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
}

.floating-loc__close {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--background-95);
    color: var(--foreground);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(12px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.floating-loc__close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.floating-loc__close svg {
    width: 1rem;
    height: 1rem;
}

.floating-loc__fab,
.floating-call {
    position: relative;
    display: flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 0 24px -4px rgba(132, 204, 22, 0.45);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.floating-loc__fab:hover,
.floating-call:hover { transform: scale(1.05); }

.floating-loc__fab:active,
.floating-call:active { transform: scale(0.95); }

.floating-call__icon {
    width: 1.5rem;
    height: 1.5rem;
}

.floating-loc__fab-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.floating-loc__fab:hover .floating-loc__fab-icon {
    transform: rotate(-12deg);
}

@media (min-width: 1024px) {
    .floating-actions { bottom: 2rem; right: 2rem; }
    .floating-loc__fab,
    .floating-call { height: 4rem; width: 4rem; }
    .floating-loc__fab-icon,
    .floating-call__icon { width: 1.75rem; height: 1.75rem; }
}

.landing {
    position: relative;
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.landing__inner {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 64rem;
    padding: 4rem 1rem;
}

.landing__head {
    text-align: center;
    margin-bottom: 3rem;
}

.landing__badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--primary-10);
    border-width: 1px;
    border-color: var(--primary-30);
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.landing__title {
    font-family: var(--font-hero);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 0.85;
}

.landing__lead {
    margin-top: 1.5rem;
    max-width: 36rem;
    margin-inline: auto;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.landing__cards {
    display: grid;
    gap: 1rem;
}

.loc-card {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 2rem;
    text-align: left;
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.loc-card:hover {
    border-color: var(--primary);
    transform: translateY(-0.25rem);
}

.loc-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.loc-card__pin {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--primary);
}

.loc-card__title {
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
    margin-bottom: 0.5rem;
}

.loc-card__tagline {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
    margin-bottom: 2.5rem;
}

.loc-card__cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.loc-card__arrow {
    width: 1rem;
    height: 1rem;
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.loc-card:hover .loc-card__arrow {
    transform: translateX(0.5rem);
}

@media (min-width: 640px) {
    .landing__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .landing__title {
        font-family: var(--font-display);
        font-weight: 900;
        letter-spacing: -0.02em;
        font-size: 4.5rem;
    }
    .landing__lead {
        font-size: 1rem;
        line-height: calc(1.5 / 1);
    }
}

@media (min-width: 1024px) {
    .landing__inner { padding-inline: 2rem; }
    .landing__title { font-size: 6rem; }
}

.soon-bar {
    background-color: var(--primary);
    color: var(--primary-foreground);
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.home-hero {
    position: relative;
    overflow: hidden;
}

.home-hero__bg {
    position: absolute;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    mix-blend-mode: luminosity;
}

.home-hero__bg--m-top {
    left: 0;
    right: 0;
    top: 0;
    height: 42%;
    opacity: 0.28;
    background-image: url("../img/hero-dance.webp");
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%);
}

.home-hero__bg--m-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    opacity: 0.3;
    background-image: url("../img/hero-calisthenics.webp");
    -webkit-mask-image: linear-gradient(to top, black 0%, black 35%, transparent 100%);
    mask-image: linear-gradient(to top, black 0%, black 35%, transparent 100%);
}

.home-hero__bg--d-left {
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    width: 48%;
    opacity: 0.22;
    background-image: url("../img/hero-dance.webp");
    -webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 45%, transparent 100%);
}

.home-hero__bg--d-right {
    display: none;
    top: 0;
    bottom: 0;
    right: 0;
    width: 48%;
    opacity: 0.26;
    background-image: url("../img/hero-calisthenics.webp");
    -webkit-mask-image: linear-gradient(to left, black 0%, black 45%, transparent 100%);
    mask-image: linear-gradient(to left, black 0%, black 45%, transparent 100%);
}

.home-hero__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
        to bottom,
        var(--background-70) 0%,
        var(--background-40) 50%,
        var(--background-80) 100%
    );
}

.home-hero__inner {
    position: relative;
    margin-inline: auto;
    max-width: 80rem;
    padding: 5rem 1rem;
}

.home-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0.75rem;
    border-width: 1px;
    border-color: var(--primary-30);
    background-color: var(--primary-10);
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.home-hero__badge-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.home-hero__title {
    font-family: var(--font-hero);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1.02;
}

.home-hero__lead {
    margin-top: 2rem;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.625;
    color: var(--muted-foreground);
}

.home-hero__actions {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .home-hero__bg--m-top,
    .home-hero__bg--m-bottom,
    .home-hero__veil { display: none; }

    .home-hero__bg--d-left,
    .home-hero__bg--d-right { display: block; }

    .home-hero__title {
        font-family: var(--font-display);
        font-weight: 900;
        letter-spacing: -0.02em;
        font-size: 4.5rem;
        line-height: 1.05;
    }

    .home-hero__lead {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    .home-hero__inner { padding: 8rem 2rem; }
    .home-hero__title { font-size: 8rem; }
}

.home-programs {
    border-top-width: 1px;
    border-color: var(--border-60);
    background-color: var(--surface);
}

.home-programs__inner {
    margin-inline: auto;
    max-width: 80rem;
    padding: 5rem 1rem;
}

.home-programs__head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.home-programs__title {
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
}

.home-programs__rule {
    margin-top: 1rem;
}

.home-programs__note {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.featured-grid {
    display: grid;
    gap: 1rem;
}

.featured-card {
    position: relative;
    aspect-ratio: 4 / 5;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    overflow: hidden;
}

.featured-card__img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.8;
    transition-property: transform, translate, scale, rotate;
    transition-duration: 700ms;
    transition-timing-function: var(--ease-default);
}

.featured-card:hover .featured-card__img {
    transform: scale(1.05);
}

.featured-card__veil {
    position: absolute;
    inset: 0;
    z-index: 10;
    background-image: linear-gradient(
        to top,
        var(--background) 0%,
        var(--background-40) 50%,
        transparent 100%
    );
}

.featured-card__icon {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary-70);
    z-index: 10;
}

.featured-card__arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 30;
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-default);
}

.featured-card:hover .featured-card__arrow {
    transform: translate(-0.25rem, -0.25rem);
}

.featured-card__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.featured-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    z-index: 20;
    transition-property: transform, translate, scale, rotate;
    transition-duration: 500ms;
    transition-timing-function: var(--ease-default);
}

.featured-card:hover .featured-card__body {
    transform: translateY(-0.5rem);
}

.featured-card__kicker {
    display: block;
    color: var(--primary);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.featured-card__name {
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
    margin-bottom: 1rem;
}

.featured-card__short {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
    padding-right: 3rem;
}

.featured-card__underline {
    height: 0.25rem;
    width: 0;
    background-color: var(--primary);
    margin-top: 1.5rem;
    transition-property: all;
    transition-duration: 500ms;
    transition-timing-function: var(--ease-default);
}

.featured-card:hover .featured-card__underline {
    width: calc(100% - 3.5rem);
}

.more-programs {
    margin-top: 4rem;
}

.more-programs__divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.more-programs__line {
    height: 1px;
    flex: 1 1 0%;
    background-color: var(--border);
}

.more-grid {
    display: grid;
    gap: 1rem;
}

.mini-card {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 1.5rem;
    padding-bottom: 3.5rem;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.mini-card:hover {
    border-color: var(--primary);
}

.mini-card__inner {
    position: relative;
}

.mini-card__icon {
    width: 2rem;
    height: 2rem;
    color: var(--primary-70);
    margin-bottom: 1rem;
}

.mini-card__kicker {
    display: block;
    color: var(--primary);
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.mini-card__name {
    font-size: 1.25rem;
    line-height: calc(1.75 / 1.25);
    margin-bottom: 0.5rem;
}

.mini-card__short {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.mini-card__underline {
    height: 0.25rem;
    width: 0;
    background-color: var(--primary);
    margin-top: 1rem;
    transition-property: all;
    transition-duration: 500ms;
    transition-timing-function: var(--ease-default);
}

.mini-card:hover .mini-card__underline {
    width: calc(100% - 3rem);
}

.mini-card__arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 300ms;
    transition-timing-function: var(--ease-default);
}

.mini-card:hover .mini-card__arrow {
    transform: translate(-0.25rem, -0.25rem);
}

.mini-card__arrow svg {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 640px) {
    .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-programs__title { font-size: 3rem; line-height: 1; }
}

@media (min-width: 1024px) {
    .home-programs__inner { padding: 6rem 2rem; }
    .home-programs__head {
        flex-direction: row;
        align-items: flex-end;
    }
    .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-about {
    border-top-width: 1px;
    border-color: var(--border-60);
}

.home-about__inner {
    margin-inline: auto;
    max-width: 80rem;
    padding: 5rem 1rem;
    display: grid;
    gap: 3rem;
    align-items: center;
}

.home-about__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
}

.home-about__text {
    margin-top: 1.5rem;
    color: var(--muted-foreground);
    line-height: 1.625;
}

.home-about__list {
    margin-top: 2rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}

.home-about__list > :not(:last-child) {
    margin-bottom: 0.75rem;
}

.home-about__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-about__dash {
    height: 0.375rem;
    width: 1.5rem;
    background-color: var(--primary);
    flex-shrink: 0;
}

.home-about__visual {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--card);
    border-width: 1px;
    border-color: var(--border);
    overflow: hidden;
    background-image:
        linear-gradient(oklch(1 0 0 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, oklch(1 0 0 / 3%) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ─── Dwie sale rozdzielone skosem ────────────────────────────────
   Zamiast składać jeden obrazek w grafice, tniemy dwa zdjęcia przez
   clip-path. Zdjęcia zostają osobnymi plikami — łatwiej je podmienić,
   a każde ma własny opis alt dla czytników ekranu.

   Skos idzie z lewego-dolnego do prawego-górnego rogu, więc Czarna
   (siłowa) zajmuje lewy dół, a Biała (taneczna) prawą górę — zgodnie
   z kolejnością w podpisie „Czarna & Biała". */

.rooms {
    position: relative;
    /* Jedna definicja cięcia dla obu połówek i dla limonkowej kreski:
       x na górnej krawędzi, x na dolnej i szerokość szczeliny. */
    --skos-gora: 55%;
    --skos-dol: 43%;
    --skos-szer: 1.1%;
}

.rooms__half {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.rooms__half--dark {
    clip-path: polygon(0 0, var(--skos-gora) 0, var(--skos-dol) 100%, 0 100%);
}
.rooms__half--light {
    clip-path: polygon(
        calc(var(--skos-gora) + var(--skos-szer)) 0, 100% 0,
        100% 100%, calc(var(--skos-dol) + var(--skos-szer)) 100%
    );
}

.rooms__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kadrowanie: w każdej połówce widać tylko jej trójkąt, więc przesuwamy
   zdjęcia tak, żeby ludzie i sprzęt trafili po właściwej stronie cięcia. */
.rooms__half--dark .rooms__img  { object-position: 62% 46%; }
.rooms__half--light .rooms__img { object-position: 42% 58%; }

/* Czarna Sala jest ciemna sama z siebie, Biała bardzo jasna — lekkie
   przyciemnienie od dołu wyrównuje je i daje tło pod podpisy. */
.rooms__half::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, oklch(0 0 0 / 62%) 0%, oklch(0 0 0 / 10%) 45%, transparent 70%);
}

/* Kreska na linii podziału. Nie rotujemy jej o stały kąt — kąt skosu
   zależy od proporcji kadru, więc obrócona linia rozjeżdżała się z cięciem
   przy innej szerokości ekranu. Zamiast tego wycinamy ją TYM SAMYM
   wielokątem, czyli dokładnie szczeliną między połówkami: pasuje zawsze. */
.rooms__seam {
    position: absolute;
    inset: 0;
    background: var(--primary);
    clip-path: polygon(
        var(--skos-gora) 0,
        calc(var(--skos-gora) + var(--skos-szer)) 0,
        calc(var(--skos-dol) + var(--skos-szer)) 100%,
        var(--skos-dol) 100%
    );
}

/* Hasło na górę — dół należy do nazw sal. */
.rooms .home-about__visual-caption {
    top: 1.25rem;
    bottom: auto;
    z-index: 2;
}

.rooms .home-about__visual-sub {
    padding: 0.375rem 0.625rem;
    background-color: oklch(0 0 0 / 55%);
    color: #fff;
}

.rooms__label {
    position: absolute;
    bottom: 1.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    z-index: 2;
}

.rooms__half--dark  .rooms__label { left: 1.5rem; }
.rooms__half--light .rooms__label { right: 1.5rem; text-align: right; }

.rooms__name {
    font-size: 1.75rem;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.rooms__what {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--primary);
}

/* Na telefonie zostawiamy ten sam pionowy skos co na desktopie —
   zmieniamy tylko proporcje kadru na pionowe, żeby oba trójkąty miały
   sensowną powierzchnię. Skos robi się przez to bardziej stromy. */
@media (max-width: 767px) {
    .rooms {
        aspect-ratio: 4 / 5;
        --skos-gora: 57%;
        --skos-dol: 42%;
        --skos-szer: 1.4%;
    }

    .rooms__half--dark  .rooms__label { left: 1.125rem; }
    .rooms__half--light .rooms__label { right: 1.125rem; }
    .rooms__label { bottom: 1.125rem; }
    .rooms__name  { font-size: 1.5rem; }
}

.home-about__visual-note {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.home-about__visual-caption {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.home-about__visual-title {
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
    color: var(--primary);
}

.home-about__visual-sub {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.home-cta {
    border-top-width: 1px;
    border-color: var(--border-60);
    background-color: var(--surface);
}

.home-cta__inner {
    margin-inline: auto;
    max-width: 80rem;
    padding: 5rem 1rem;
    text-align: center;
}

.home-cta__title {
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
}

.home-cta__lead {
    margin-top: 1rem;
    max-width: 32rem;
    margin-inline: auto;
    color: var(--muted-foreground);
}

.home-cta__actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .home-about__title { font-size: 3rem; line-height: 1; }
    .home-cta__title { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 1024px) {
    .home-about__inner {
        padding: 6rem 2rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-cta__inner { padding: 6rem 2rem; }
}

.program-grid {
    margin-inline: auto;
    max-width: 80rem;
    padding: 4rem 1rem;
}

.program-grid__head {
    margin-bottom: 3rem;
}

.program-grid__title {
    margin-top: 0.75rem;
    font-size: 2.25rem;
    line-height: 1.05;
}

.program-grid__rule {
    margin-top: 1.5rem;
}

.program-grid__lead {
    margin-top: 1.5rem;
    max-width: 36rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.program-grid__grid {
    display: grid;
    gap: 1rem;
}

.program-card {
    position: relative;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 1.75rem;
    padding-bottom: 4rem;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.program-card:hover {
    border-color: var(--primary);
}

.program-card__icon {
    margin-bottom: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary);
}

.program-card__kicker {
    margin-bottom: 0.25rem;
}

.program-card__name {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
}

.program-card__short {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.program-card__arrow {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.program-card:hover .program-card__arrow {
    transform: translateX(0.25rem);
}

.program-card__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 768px) {
    .program-grid__title { font-size: 3.75rem; }
    .program-grid__lead { font-size: 1rem; line-height: calc(1.5 / 1); }
    .program-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .program-card { padding: 2rem; padding-bottom: 5rem; }
}

@media (min-width: 1024px) {
    .program-grid { padding: 6rem 2rem; }
}

.offer-index {
    margin-inline: auto;
    max-width: 80rem;
    padding: 5rem 1rem;
}

.offer-index__head {
    margin-bottom: 3.5rem;
}

.offer-index__title {
    margin-top: 0.75rem;

    /* Rozmiar płynny, bo „SPOŁECZNOŚĆ" to najdłuższe słowo na stronie i przy
       stałych 3rem wyjeżdżało poza ekran na wszystkim węższym niż 430 px,
       ciągnąc za sobą poziome przewijanie całej strony. */
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1;
}

.offer-index__rule {
    margin-top: 1.5rem;
}

.offer-index__grid {
    display: grid;
    gap: 1rem;
}

.offer-card {
    position: relative;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 2rem;
    overflow: hidden;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.offer-card:hover {
    border-color: var(--primary);
}

.offer-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.offer-card__kicker {
    margin-bottom: 0.25rem;
}

.offer-card__name {
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
    margin-bottom: 0.75rem;
}

.offer-card__short {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
}

.offer-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.offer-card:hover .offer-card__cta {
    color: var(--primary);
}

.offer-card__cta svg {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 768px) {
    .offer-index__title { font-size: 3.75rem; }
    .offer-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .offer-index { padding: 6rem 2rem; }
}

.program-page {
    position: relative;
    overflow: hidden;
}

.program-page__inner {
    position: relative;
    margin-inline: auto;
    max-width: 64rem;
    padding: 2.5rem 1rem;
}

.program-page__head {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.program-page__icon {
    width: 2rem;
    height: 2rem;
    color: var(--primary);
    flex-shrink: 0;
}

.program-page__head-text {
    min-width: 0;
    flex: 1 1 0%;
}

.program-page__kicker {
    margin-bottom: 0.5rem;
}

.program-page__title {
    font-size: 1.75rem;
    line-height: 1.25;
}

.program-page__soon {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-width: 2px;
    border-color: var(--primary);
    background-color: var(--primary-10);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.program-page__soon-text {
    font-size: 0.875rem;
    line-height: 1.7;
}

.program-page__soon-link {
    color: var(--primary);
    font-weight: 700;
}

.program-page__soon-link:hover {
    opacity: 0.75;
}

.program-page__long {
    font-size: 1rem;
    line-height: 1.625;
    color: var(--muted-foreground);
    margin-bottom: 2rem;
}

.program-page__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 3.5rem;
}

.program-page__bullets {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 3.5rem;
}

.bullet {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
}

.bullet__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.bullet__text {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}

.program-page__groups {
    margin-bottom: 2.5rem;
}

.group-list {
    display: grid;
    gap: 0.75rem;
}

.group-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 1rem 1.25rem;
}

.group-chip__dot {
    height: 0.625rem;
    width: 0.625rem;
    flex-shrink: 0;
}

.group-chip__dot--kids    { background-color: var(--group-kids); }
.group-chip__dot--juniors { background-color: var(--group-juniors); }
.group-chip__dot--teens   { background-color: var(--group-teens); }

.group-chip__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.group-chip__name {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.group-chip__age {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

@media (min-width: 640px) {
    .group-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.program-videos[id] {
    scroll-margin-top: 6rem;
}

.pricing {
    margin-bottom: 2.5rem;
}

.pricing__grid {
    display: grid;
    gap: 0.75rem;
}

.pricing__item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 1.25rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
}

.pricing__label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.pricing__note {
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    color: var(--muted-foreground);
}

.pricing__value {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 1.875rem;
    line-height: 1;
}

.pricing__promo {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 1.25rem;
    border-width: 2px;
    border-color: var(--primary);
    background-color: var(--primary-10);
}

.pricing__promo-tag {
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.25rem 0.625rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pricing__promo-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.pricing__promo-title {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    font-weight: 700;
}

.pricing__promo-value {
    margin-left: auto;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--primary);
}

@media (min-width: 768px) {
    .pricing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.program-poster {
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.program-poster__btn {
    position: relative;
    display: block;
    width: 100%;
    max-width: 28rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    overflow: hidden;
    cursor: zoom-in;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.program-poster__btn:hover { border-color: var(--primary); }
.program-poster__btn:focus { outline: 2px solid transparent; outline-offset: 2px; }
.program-poster__btn:focus-visible { border-color: var(--primary); }

.program-poster__img {
    display: block;
    width: 100%;
    height: auto;
}

.program-poster__zoom {
    pointer-events: none;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.program-poster__btn:hover .program-poster__zoom { opacity: 1; }

.program-poster__zoom svg {
    width: 0.875rem;
    height: 0.875rem;
}

.program-poster__caption {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    text-align: center;
}

.program-videos {
    margin-bottom: 3.5rem;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Poniżej 768 px siatka ma dwie kolumny, więc przy nieparzystej liczbie
   zdjęć ostatnie zostaje samo w rzędzie i wygląda jak niedokończone.
   Chowamy właśnie je — reguła jest ogólna, działa przy 15, 13, 21…
   Pełnej galerii nie dotyczy: tam komplet musi zostać kompletem. */
@media (max-width: 767px) {
    .gallery:not(.gallery--full) .gallery__item:last-child:nth-child(odd) {
        display: none;
    }
}

.gallery__item {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    cursor: zoom-in;
}

.gallery__item:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.gallery__item:focus-visible {
    border-color: var(--primary);
}

.gallery__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition-property: transform, translate, scale, rotate;
    transition-duration: 500ms;
    transition-timing-function: var(--ease-default);
}

.gallery__item:hover .gallery__img {
    transform: scale(1.05);
}

.gallery__veil {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to top,
        var(--background-70) 0%,
        transparent 50%,
        transparent 100%
    );
    opacity: 0.7;
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.gallery__item:hover .gallery__veil {
    opacity: 0.4;
}

.gallery__zoom {
    pointer-events: none;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.gallery__item:hover .gallery__zoom {
    opacity: 1;
}

.gallery__zoom svg {
    width: 0.875rem;
    height: 0.875rem;
}

@media (min-width: 640px) {
    .program-page__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (min-width: 768px) {
    .program-page__head { gap: 1.5rem; margin-bottom: 2.5rem; }
    .program-page__icon { width: 4rem; height: 4rem; }
    .program-page__title { font-size: 3.75rem; line-height: 0.9; }
    .program-page__long { font-size: 1.125rem; }
    .program-page__bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .gallery:has(.gallery__item:last-child:nth-child(1)) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 21rem;
    }

    .gallery:has(.gallery__item:last-child:nth-child(2)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 42rem;
    }

    .gallery:has(.gallery__item:last-child:nth-child(3)) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .program-page__inner { padding: 6rem 2rem; }
}

/* ─── Przejście do pełnej galerii ────────────────────────────────── */

.gallery-more {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.gallery-more__count {
    margin-left: 0.625rem;
    padding: 0.125rem 0.5rem;
    background-color: rgb(0 0 0 / 0.16);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ─── Podstrona pełnej galerii ───────────────────────────────────── */

.gallery-head { margin-bottom: 2rem; }

.gallery-count {
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

@media (min-width: 640px) {
    .gallery--full { gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .gallery--full { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ─── Archiwum galerii (na razie nieaktywne) ─────────────────────── */

.archive { display: flex; flex-direction: column; gap: 0.75rem; }

.archive__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.5rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
}

.archive__kicker { margin-bottom: 0.5rem; }
.archive__name { font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; }

.archive__count {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
}

.archive__btn { flex-shrink: 0; }

.schedule-soon {
    margin-inline: auto;
    max-width: 56rem;
    padding: 6rem 1rem;
    text-align: center;
}

.schedule-soon__badge {
    display: inline-block;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.25rem 0.75rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.schedule-soon__title {
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1;
}

.schedule-soon__lead {
    margin-top: 1.5rem;
    color: var(--muted-foreground);
    max-width: 32rem;
    margin-inline: auto;
}

.schedule {
    margin-inline: auto;
    max-width: 80rem;
    padding: 4rem 1rem;
}

.schedule__head {
    margin-bottom: 2.5rem;
}

.schedule__title {
    margin-top: 0.75rem;
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1;
}

.schedule__filters {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-width: 1px;
    border-color: var(--border);
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-btn.is-active,
.filter-btn.is-active:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.schedule__days {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.day-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    border-width: 1px;
    border-color: var(--border);
    color: var(--muted-foreground);
    flex-shrink: 0;
}

.day-btn.is-active {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

.schedule__grid {
    display: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.day-col {
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
}

.day-col__head {
    border-bottom-width: 1px;
    border-color: var(--border);
    background-color: var(--surface);
    padding: 1.25rem;
}

.day-col__name {
    font-size: 1.5rem;
    line-height: 1;
}

.day-col__count {
    margin-top: 0.5rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.day-col__body {
    padding: 0.75rem;
    min-height: 400px;
}

.slots {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.slots--grouped {
    gap: 1rem;
}

.schedule:not([data-room="all"]) .slots--grouped {
    gap: 0.75rem;
}

.slots__empty {
    text-align: center;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    color: var(--muted-foreground);
    padding-block: 2rem;
}

.room-group__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-inline: 0.25rem;
}

.room-dot {
    height: 0.5rem;
    width: 0.5rem;
    flex-shrink: 0;
    border-width: 1px;
    border-color: var(--border);
}

.room-dot--czarna { background-color: var(--foreground); }
.room-dot--biala { background-color: var(--background); }

.room-group__label {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.schedule-card {
    border-left-width: 2px;
    background-color: var(--background);
    padding: 0.75rem;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.schedule-card:hover {
    background-color: var(--surface);
}

.schedule-card--kalistenika { border-left-color: var(--primary); }
.schedule-card--taniec      { border-left-color: var(--tw-fuchsia-400); }
.schedule-card--fitness     { border-left-color: var(--tw-orange-400); }
.schedule-card--personalny  { border-left-color: var(--tw-sky-400); }

.schedule-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.schedule-card__time {
    font-size: 1rem;
    line-height: 1;
    color: var(--primary);
}

.schedule-card__duration {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.schedule-card__title {
    font-size: 0.75rem;
    line-height: 1.375;
    font-weight: 700;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.625;
    color: var(--muted-foreground);
}

.legend {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top-width: 1px;
    border-color: var(--border-60);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.legend__swatch {
    height: 0.5rem;
    width: 1rem;
}

.legend__swatch--kalistenika { background-color: var(--primary); }
.legend__swatch--taniec      { background-color: var(--tw-fuchsia-400); }
.legend__swatch--fitness     { background-color: var(--tw-orange-400); }
.legend__swatch--personalny  { background-color: var(--tw-sky-400); }

@media (min-width: 640px) {
    .legend {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 1.5rem;
        row-gap: 0.5rem;
    }
    .legend__rooms { margin-left: auto; }
}

@media (min-width: 768px) {
    .schedule-soon__title { font-size: 4.5rem; }
    .schedule__title { font-size: 3.75rem; }
}

@media (min-width: 1024px) {
    .schedule-soon { padding: 8rem 2rem; }
    .schedule { padding: 5rem 2rem; }
    .schedule__days { display: none; }
    .schedule__mobile { display: none; }
    .schedule__grid { display: grid; }
    .schedule-card { padding: 1rem; }
    .schedule-card__time { font-size: 1.25rem; }
    .schedule-card__duration { font-size: 10px; }
    .schedule-card__title { font-size: 13px; }
    .schedule-card__meta { font-size: 10px; }
}

@media (min-width: 1280px) {
    .schedule { max-width: 90rem; }
    .schedule__grid { gap: 1rem; }
    .schedule-card__title { font-size: 0.875rem; }
}

@media (min-width: 1536px) {
    .schedule { max-width: 100rem; }
}

.trainers {
    margin-inline: auto;
    max-width: 80rem;
    padding: 4rem 1rem;
}

.trainers__head {
    margin-bottom: 3rem;
}

.trainers__title {
    margin-top: 0.75rem;
    font-size: 3rem;
    line-height: 1;
}

.trainers__rule {
    margin-top: 1.5rem;
}

.trainers__filters {
    margin-bottom: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trainer-filter {
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 0.625rem 1rem;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.trainer-filter:hover {
    border-color: var(--primary);
    color: var(--foreground);
}

.trainer-filter.is-active,
.trainer-filter.is-active:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.trainer-grid {
    display: grid;
    gap: 1rem;
}

.trainer-card {
    position: relative;
    display: block;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    overflow: hidden;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.trainer-card:hover { border-color: var(--primary); }
.trainer-card:focus { outline: 2px solid transparent; outline-offset: 2px; }
.trainer-card:focus-visible { border-color: var(--primary); }

.trainer-card__media {
    aspect-ratio: 4 / 5;
    background-color: var(--surface);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image:
        linear-gradient(oklch(1 0 0 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, oklch(1 0 0 / 3%) 1px, transparent 1px);
    background-size: 48px 48px;
}

.trainer-card__initials {
    font-size: 6rem;
    line-height: 1;
    color: var(--primary-40);
}

.trainer-card__tags {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    z-index: 1;
}

.trainer-card__fade {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to top,
        var(--card) 0%,
        transparent 50%,
        transparent 100%
    );
}

.trainer-card__body {
    padding: 1.5rem;
}

.trainer-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.75rem;
}

.trainer-card__ident {
    min-width: 0;
}

.trainer-card__name {
    font-size: 1.5rem;
    line-height: 1.25;
}

.trainer-card__role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-top: 0.25rem;
}

.trainer-card__arrow {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.trainer-card:hover .trainer-card__arrow {
    transform: translateX(0.25rem);
}

.trainer-card__arrow svg {
    width: 1rem;
    height: 1rem;
}

.trainer-card__bio {
    font-size: 0.875rem;
    line-height: 1.625;
    color: var(--muted-foreground);
    margin-bottom: 1rem;
}

.trainer-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

@media (min-width: 768px) {
    .trainers__title { font-size: 3.75rem; }
    .trainer-filter { padding-inline: 1.25rem; }
    .trainer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .trainers { padding: 6rem 2rem; }
    .trainer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.carousel {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.carousel__track {
    --i: 0;
    display: flex;
    height: 100%;
    width: 100%;
    transform: translateX(calc(var(--i) * -100%));
    transition-property: transform, translate, scale, rotate;
    transition-duration: 500ms;
    transition-timing-function: var(--ease-out);
}

.carousel__img {
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    object-fit: cover;
}

.carousel__img--zoom {
    cursor: zoom-in;
}

.carousel__img--pos-right-center {
    object-position: right center;
}

.carousel__expand {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    background-color: var(--background-70);
    color: var(--foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.carousel__expand:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.carousel__expand svg {
    width: 0.875rem;
    height: 0.875rem;
}

.carousel__nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    height: 2rem;
    width: 2rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    background-color: var(--background-70);
    color: var(--foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.carousel__nav:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.carousel__nav--prev { left: 0.5rem; }
.carousel__nav--next { right: 0.5rem; }

.carousel__nav svg {
    width: 1rem;
    height: 1rem;
}

.carousel__dots {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    z-index: 10;
    display: flex;
    transform: translateX(-50%);
    gap: 0.375rem;
}

.carousel__dot {
    height: 0.375rem;
    width: 0.375rem;
    background-color: var(--foreground-40);
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.carousel__dot:hover {
    background-color: var(--foreground-70);
}

.carousel__dot.is-active,
.carousel__dot.is-active:hover {
    width: 1.5rem;
    background-color: var(--primary);
}

.trainer-page {
    position: relative;
    overflow: hidden;
}

.trainer-page__inner {
    position: relative;
    margin-inline: auto;
    max-width: 72rem;
    padding: 2.5rem 1rem;
}

.trainer-page__hero {
    display: grid;
    gap: 2rem;
}

.trainer-page__media {
    position: relative;
    margin-inline: auto;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 15rem;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--surface);
    background-image:
        linear-gradient(oklch(1 0 0 / 3%) 1px, transparent 1px),
        linear-gradient(90deg, oklch(1 0 0 / 3%) 1px, transparent 1px);
    background-size: 48px 48px;
}

.trainer-page__initials-wrap {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.trainer-page__initials {
    font-size: 6rem;
    line-height: 1;
    color: var(--primary-40);
}

.trainer-page__info {
    display: flex;
    flex-direction: column;
}

.trainer-page__tags {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.trainer-page__name {
    font-size: 2rem;
    line-height: 1.05;
}

.trainer-page__role {
    margin-top: 0.75rem;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.trainer-page__rule {
    margin-top: 1.5rem;
}

.trainer-page__bio {
    margin-top: 1.5rem;
}

.trainer-page__bio > :not(:last-child) {
    margin-bottom: 1rem;
}

.trainer-page__bio p {
    font-size: 1rem;
    line-height: 1.625;
    color: var(--muted-foreground);
}

.trainer-page__block { margin-top: 2rem; }
.trainer-page__block--spec { margin-top: 2.5rem; }

.subheading {
    margin-bottom: 0.75rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.achievements > :not(:last-child) {
    margin-bottom: 0.5rem;
}

.achievements__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.achievements__icon {
    margin-top: 0.125rem;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--primary);
}

.trainer-page__actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trainer-page__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.trainer-videos,
.other-trainers {
    margin-top: 4rem;
}

.video-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.video-item {
    width: 100%;
    max-width: 300px;
}

.video-yt {
    width: 100%;
    max-width: 300px;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
}

.video-yt__frame {
    aspect-ratio: 9 / 16;
    background-color: var(--surface);
}

.video-yt__frame iframe {
    height: 100%;
    width: 100%;
}

.video-caption {
    padding: 0.75rem 1rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.video-placeholder {
    display: flex;
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-width: 1px;
    border-style: dashed;
    border-color: var(--border);
    background-color: var(--card-60);
    text-align: center;
}

.video-placeholder__icon {
    display: flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-15);
    color: var(--primary);
}

.video-placeholder__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.video-placeholder__text {
    padding-inline: 1.5rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.other-grid {
    display: grid;
    gap: 1rem;
}

.other-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 1rem;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.other-card:hover { border-color: var(--primary); }

.other-card__media {
    height: 4rem;
    width: 4rem;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--surface);
}

.other-card__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.other-card__img--pos-right-center {
    object-position: right center;
}

.other-card__initials {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: calc(1.75 / 1.25);
    color: var(--primary-50);
}

.other-card__text {
    min-width: 0;
    flex: 1 1 0%;
}

.other-card__name {
    font-size: 1.125rem;
    line-height: 1.25;
}

.other-card__cats {
    margin-top: 0.25rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.other-card__arrow {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.other-card:hover .other-card__arrow {
    transform: translateX(0.25rem);
    color: var(--primary);
}

.other-trainers__more {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.btn--outline-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-width: 1px;
    border-color: var(--border);
    padding: 0.75rem 1.5rem;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.btn--outline-sm:hover {
    border-color: var(--primary);
    color: var(--primary);
}

@media (min-width: 640px) {
    .trainer-page__media { max-width: 20rem; }
    .trainer-page__actions { flex-direction: row; flex-wrap: wrap; }
    .other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .trainer-page__media { max-width: 17rem; }
    .trainer-page__name { font-size: 3.75rem; line-height: 0.95; }
    .trainer-videos,
    .other-trainers { margin-top: 6rem; }
}

@media (min-width: 1024px) {
    .trainer-page__inner { padding: 5rem 2rem; }
    .trainer-page__hero {
        grid-template-columns: minmax(0, 1fr) 1.1fr;
        gap: 3rem;
    }
    .trainer-page__media { margin-inline: 0; max-width: none; }
    .other-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.video-player {
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
}

.video-player__stage {
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background-color: var(--surface);
}

.video-player__video {
    height: 100%;
    width: 100%;
    cursor: pointer;
    object-fit: cover;
    object-position: center;
}

.video-player__toggle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.video-player__toggle.is-playing { opacity: 0; }
.video-player__stage:hover .video-player__toggle.is-playing { opacity: 1; }

.video-player__toggle-icon {
    display: flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.video-player__toggle-icon:hover { transform: scale(1.05); }

.video-player__toggle.is-playing .video-player__toggle-icon {
    background-color: var(--background-80);
    color: var(--foreground);
}

.video-player__toggle-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.video-player__expand {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.video-player__expand:hover { transform: scale(1.05); }

.video-player__expand svg {
    width: 1rem;
    height: 1rem;
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-95);
    padding: 1rem;
}

.video-modal__close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.video-modal__close:hover { transform: scale(1.05); }

.video-modal__close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.video-modal__video {
    max-height: 88vh;
    width: auto;
    max-width: 100%;
    border-width: 1px;
    border-color: var(--border);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-95);
    backdrop-filter: blur(8px);
    animation: ui-fade-in 200ms both;
}

.lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    color: var(--foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.lightbox__close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.lightbox__close svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Gdy kafelek nie ma miniatury, chowamy obrazek do czasu wczytania —
   lepiej pusto niż poprzednie zdjęcie. */
.lightbox__img.is-blank { visibility: hidden; }

/* ─── Dokumenty tekstowe (polityka prywatności) ──────────────────── */

.doc-head { margin-bottom: 1rem; }

.doc__updated {
    margin-bottom: 2.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.doc { max-width: 46rem; }

.doc__lead {
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--primary);
    background-color: var(--card);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.doc h2 {
    margin: 2.5rem 0 0.875rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.doc p { margin-bottom: 1rem; line-height: 1.75; color: var(--muted-foreground); }
.doc strong { color: var(--foreground); }
.doc a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.doc ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.doc li { margin-bottom: 0.5rem; line-height: 1.7; color: var(--muted-foreground); }

.doc__table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.doc__table th,
.doc__table td {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    line-height: 1.6;
}

.doc__table th {
    background-color: var(--card);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.doc__table td { color: var(--muted-foreground); }

.doc__small { font-size: 0.8125rem; color: var(--muted-foreground); }

/* Tabela nie może rozpychać strony na telefonie. */
@media (max-width: 599px) {
    .doc__table { display: block; overflow-x: auto; white-space: normal; }
    .doc h2 { font-size: 1.125rem; }
}

/* ─── Zgoda przy formularzu ──────────────────────────────────────── */

.consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.25rem;
    cursor: pointer;
}

.consent__box {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.consent__text {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

.consent__text a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.site-footer__policy {
    color: var(--muted-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}
.site-footer__policy:hover { color: var(--primary); }

.lightbox__nav {
    position: absolute;
    z-index: 10;
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card-80);
    color: var(--foreground);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.lightbox__nav:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }

.lightbox__nav svg {
    width: 1.25rem;
    height: 1.25rem;
}

.lightbox__figure {
    margin-inline: 1rem;
    display: flex;
    max-height: 85vh;
    width: 100%;
    max-width: 56rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.lightbox__img {
    max-height: 75vh;
    width: auto;
    max-width: 100%;
    border-width: 1px;
    border-color: var(--border);
    object-fit: contain;
    animation: ui-zoom-in-95 200ms both;
}

.lightbox__caption {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.lightbox__index { color: var(--primary); }

.lightbox__sep {
    height: 1px;
    width: 1.5rem;
    background-color: var(--border);
}

@media (min-width: 768px) {
    .lightbox__nav--prev { left: 1.5rem; }
    .lightbox__nav--next { right: 1.5rem; }
}

.about-hero {
    position: relative;
    overflow: hidden;
    border-bottom-width: 1px;
    border-color: var(--border-60);
}

.about-hero__inner {
    position: relative;
    margin-inline: auto;
    max-width: 80rem;
    padding: 5rem 1rem;
}

.about-hero__title {
    margin-top: 0.75rem;
    font-size: 3rem;
    line-height: 0.9;
}

.about-hero__lead {
    margin-top: 2rem;
    max-width: 42rem;
    font-size: 1.125rem;
    line-height: 1.625;
    color: var(--muted-foreground);
}

.values {
    border-bottom-width: 1px;
    border-color: var(--border-60);
    background-color: var(--surface);
}

.values__inner,
.locations__inner {
    margin-inline: auto;
    max-width: 80rem;
    padding: 5rem 1rem;
}

.values__title,
.locations__title {
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
    margin-bottom: 0.5rem;
}

.values__rule { margin-bottom: 3rem; }
.locations__rule { margin-bottom: 2.5rem; }

.values__grid {
    display: grid;
    gap: 1rem;
}

.value-card {
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 1.5rem;
}

.value-card__icon {
    width: 2rem;
    height: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.value-card__title {
    font-size: 1.25rem;
    line-height: calc(1.75 / 1.25);
    margin-bottom: 0.5rem;
}

.value-card__body {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.locations__grid {
    display: grid;
    gap: 1rem;
}

.location-card {
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.location-card:hover { border-color: var(--primary); }

.location-card__title {
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.location-card:hover .location-card__title { color: var(--primary); }

.location-card__tagline {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

@media (min-width: 640px) {
    .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .about-hero__title { font-size: 4.5rem; }
    .values__title,
    .locations__title { font-size: 3rem; line-height: 1; }
    .locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .about-hero__inner { padding: 7rem 2rem; }
    .values__inner,
    .locations__inner { padding-inline: 2rem; }
    .values__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.contact {
    margin-inline: auto;
    max-width: 80rem;
    padding: 4rem 1rem;
}

.contact__head {
    margin-bottom: 3rem;
}

.contact__title {
    margin-top: 0.75rem;
    font-size: 3rem;
    line-height: 1;
}

.contact__title-accent {
    display: inline;
    color: var(--primary);
}

.contact__grid {
    display: grid;
    gap: 2rem;
}

.contact__aside > :not(:last-child) {
    margin-bottom: 1.5rem;
}

.info-card {
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 1.5rem;
}

.info-card__title {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 1rem;
}

.info-list {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}

.info-list > :not(:last-child) {
    margin-bottom: 1rem;
}

.info-list__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.info-list__row--center {
    align-items: center;
}

.info-list__icon {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.info-list__row--center .info-list__icon {
    margin-top: 0;
}

.info-list a {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.info-list a:hover { color: var(--primary); }

.info-card__socials {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.info-card__socials svg {
    width: 1rem;
    height: 1rem;
}

.hours-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.hours-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hours-badge--open {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.hours-badge--closed {
    border-width: 1px;
    border-color: var(--border);
    color: var(--muted-foreground);
}

.hours-badge--soon {
    border-width: 1px;
    border-color: var(--primary);
    color: var(--primary);
}

.hours-badge svg {
    width: 0.75rem;
    height: 0.75rem;
}

.hours-soon {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.hours-soon a {
    color: var(--primary);
    font-weight: 700;
}

.hours-list {
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}

.hours-list > :not(:last-child) {
    margin-bottom: 0.5rem;
}

.hours-list__row {
    display: flex;
    justify-content: space-between;
}

.hours-list__day {
    color: var(--muted-foreground);
}

.hours-list__value {
    color: var(--foreground);
    font-weight: 500;
}

.hours-list__value--closed {
    color: var(--muted-foreground);
    font-weight: inherit;
}

.form-card {
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--card);
    padding: 2rem;
}

.form-card > :not(:last-child) {
    margin-bottom: 1.25rem;
}

.form-card__title {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
}

.form-row {
    display: grid;
    gap: 1rem;
}

.field__label {
    display: block;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.field__control {
    width: 100%;
    background-color: var(--background);
    border-width: 1px;
    border-color: var(--border);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
}

.field__control:focus {
    border-color: var(--primary);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.form-card__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 0 60px -10px oklch(0.92 0.22 125 / 40%);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.form-card__submit:hover { transform: scale(1.05); }

.form-card__submit svg {
    width: 1rem;
    height: 1rem;
}

.form-card__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-card__note {
    font-size: 10px;
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.form-card__note a {
    color: var(--primary);
}

.form-card__note a:hover {
    opacity: 0.75;
}

.form-card__note.is-warning {
    color: var(--foreground);
    border-left-width: 2px;
    border-color: var(--primary);
    padding-left: 0.75rem;
}

@media (min-width: 640px) {
    .contact__title-accent { display: inline-block; }
}

@media (min-width: 768px) {
    .contact__title { font-size: 4.5rem; }
    .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .contact { padding: 6rem 2rem; }
    .contact__grid { grid-template-columns: 1fr 1.2fr; }
}

.error-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: var(--background);
    padding-inline: 1rem;
}

.error-page__inner {
    max-width: 28rem;
    text-align: center;
}

.error-page__code {
    font-size: 6rem;
    line-height: 1;
    color: var(--primary);
}

.error-page__title {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: calc(2 / 1.5);
}

.error-page__text {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);
    color: var(--muted-foreground);
}

.error-page__actions {
    margin-top: 1.5rem;
}

.error-page__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-foreground);
    transition-property: transform, translate, scale, rotate;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.error-page__btn:hover { transform: scale(1.05); }

.loc-soon {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 12rem);
}

.loc-soon__inner {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 56rem;
    padding: 5rem 1rem;
    text-align: center;
}

.loc-soon__title {
    margin-top: 1.5rem;
    font-size: 3rem;
    line-height: 0.95;
}

.loc-soon__rule {
    margin: 1.5rem auto 0;
}

.loc-soon__lead {
    margin-top: 1.5rem;
    margin-inline: auto;
    max-width: 36rem;
    font-size: 1rem;
    line-height: 1.625;
    color: var(--muted-foreground);
}

.loc-soon__actions {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.loc-soon__note {
    margin-top: 3rem;
    font-size: 0.75rem;
    line-height: calc(1 / 0.75);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
}

.loc-soon__note a {
    color: var(--primary);
    transition-property: opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--ease-default);
}

.loc-soon__note a:hover {
    opacity: 0.75;
}

@media (min-width: 768px) {
    .loc-soon__title { font-size: 4.5rem; }
    .loc-soon__lead  { font-size: 1.125rem; }
}

@media (min-width: 1024px) {
    .loc-soon__inner { padding: 7rem 2rem; }
}

.schedule[data-room="czarna"] .schedule-card[data-room="biala"],
.schedule[data-room="biala"]  .schedule-card[data-room="czarna"],
.schedule[data-room="czarna"] .room-group[data-room="biala"],
.schedule[data-room="biala"]  .room-group[data-room="czarna"] {
    display: none;
}

.schedule[data-room="all"] .schedule-card__room,
.schedule[data-room="all"] .schedule-card__sep {
    display: none;
}

.schedule:not([data-room="all"]) .room-group__head {
    display: none;
}

.schedule__mobile-day {
    display: none;
}

.schedule[data-day="pon"] .schedule__mobile-day[data-day="pon"],
.schedule[data-day="wt"]  .schedule__mobile-day[data-day="wt"],
.schedule[data-day="sr"]  .schedule__mobile-day[data-day="sr"],
.schedule[data-day="czw"] .schedule__mobile-day[data-day="czw"],
.schedule[data-day="pt"]  .schedule__mobile-day[data-day="pt"] {
    display: block;
}

.trainers[data-filter="kalistenika"]  .trainer-card:not([data-category~="kalistenika"]),
.trainers[data-filter="taniec"]       .trainer-card:not([data-category~="taniec"]),
.trainers[data-filter="joga-pilates"] .trainer-card:not([data-category~="joga-pilates"]),
.trainers[data-filter="fitness"]      .trainer-card:not([data-category~="fitness"]) {
    display: none;
}

body.is-locked {
    overflow: hidden;
    padding-right: var(--scrollbar-w, 0px);
}

body.is-locked .site-header {
    padding-right: var(--scrollbar-w, 0px);
}