/* =========================================================
   TennisOne — vizuálny systém
   Farby sú odvodené z areálu: antuka, zeleň stromov, biele
   čiary kurtu. Čiary kurtu sú zároveň nosným grafickým prvkom.
   ========================================================= */

:root {
    /* Farby */
    --antuka: #b94a26;
    --antuka-jas: #d9713f;
    --antuka-tlm: #f0e2db;
    --les: #16281b;
    --les-hlbka: #0d1810;
    --les-svetly: #24402b;
    --opar: #edf1e9;
    --biela: #ffffff;
    --text: #16281b;
    --text-tlm: #5c6e5e;
    --text-svetly: rgba(255, 255, 255, 0.78);
    --ciara: rgba(22, 40, 27, 0.14);
    --ciara-svetla: rgba(255, 255, 255, 0.22);

    /* Písmo */
    --pismo-nadpis: "Fraunces", Georgia, "Times New Roman", serif;
    --pismo-telo: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pismo-mono: "DM Mono", ui-monospace, "SF Mono", Consolas, monospace;

    /* Rozmery */
    --sirka: 1180px;
    --medzera-sekcia: clamp(4.5rem, 9vw, 8.5rem);
    --radius: 2px;
}

/* ---------- Základ ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--biela);
    color: var(--text);
    font-family: var(--pismo-telo);
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--antuka);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--antuka-jas);
}

:focus-visible {
    outline: 2px solid var(--antuka);
    outline-offset: 3px;
}

.skryte {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.preskocit {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 200;
    background: var(--antuka);
    color: #fff;
    padding: 0.75rem 1.25rem;
    text-decoration: none;
}

.preskocit:focus {
    left: 0;
}

/* ---------- Typografia ---------- */

.nadpisok {
    font-family: var(--pismo-mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--antuka);
    margin: 0 0 1rem;
}

.nadpisok--svetly {
    color: var(--antuka-jas);
}

.nadpis {
    font-family: var(--pismo-nadpis);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 0 1.5rem;
    color: var(--text);
}

.nadpis--svetly {
    color: var(--biela);
}

.uvodny {
    font-size: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
    line-height: 1.55;
    color: var(--text);
    margin: 0 0 1.25rem;
}

.uvodny--uzky {
    max-width: 56ch;
}

.uvodny--svetly {
    color: var(--text-svetly);
}

.zvyraznenie {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--antuka);
    border-left: 3px solid var(--antuka);
    padding-left: 1rem;
    margin: 2rem 0 0;
}

/* ---------- Tlačidlá ---------- */

.tlacidlo {
    display: inline-block;
    background: var(--antuka);
    color: #fff;
    font-family: var(--pismo-telo);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding: 0.9rem 1.75rem;
    border: 1px solid var(--antuka);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tlacidlo:hover {
    background: var(--antuka-jas);
    border-color: var(--antuka-jas);
    color: #fff;
    transform: translateY(-2px);
}

.tlacidlo--obrys {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    font-family: var(--pismo-mono);
}

.tlacidlo--obrys:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.tlacidlo--maly {
    padding: 0.6rem 1.15rem;
    font-size: 0.85rem;
}

/* ---------- Hlavička ---------- */

.hlavicka {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    padding: 0.9rem 0;
}

.hlavicka.je-posunuta {
    background: var(--les-hlbka);
    box-shadow: 0 1px 0 var(--ciara-svetla);
    padding: 0.45rem 0;
}

.hlavicka__vnutro {
    width: min(100% - 2.5rem, var(--sirka));
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.znacka {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    margin-right: auto;
}

/* Logo ONE má nad loptičkou oblúkový nápis „Tenisový klub/škola“ — pod 56 px
   je už nečitateľný */
.znacka__obrazok {
    height: 60px;
    width: auto;
    display: block;
    transition: height 0.3s ease;
}

.hlavicka.je-posunuta .znacka__obrazok {
    height: 48px;
}

.znacka__obrazok--paticka {
    height: 84px;
}

.znacka__text {
    font-family: var(--pismo-nadpis);
    font-weight: 500;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: -0.01em;
}

.znacka__text strong {
    font-weight: 700;
    color: var(--antuka-jas);
}

.nav {
    display: flex;
    gap: 1.6rem;
}

.nav a {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--antuka-jas);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav a:hover,
.nav a.je-aktivny {
    color: #fff;
}

.nav a:hover::after,
.nav a.je-aktivny::after {
    transform: scaleX(1);
}

.nav__externy::after {
    content: "↗";
    font-size: 0.7em;
    margin-left: 0.25em;
    vertical-align: super;
}

.prepinac {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--ciara-svetla);
    border-radius: var(--radius);
    cursor: pointer;
}

.prepinac span {
    display: block;
    width: 18px;
    height: 1.5px;
    margin-inline: auto;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.prepinac[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.prepinac[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.prepinac[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- Úvod ---------- */

.uvod {
    position: relative;
    min-height: min(94vh, 820px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--les-hlbka);
}

.uvod__fotky {
    position: absolute;
    inset: 0;
}

.uvod__fotka {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
}

.uvod__fotka.je-aktivna {
    opacity: 1;
}

.uvod__zaclona {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(13, 24, 16, 0.94) 0%, rgba(13, 24, 16, 0.7) 38%, rgba(13, 24, 16, 0.25) 70%, rgba(13, 24, 16, 0.55) 100%);
}

.uvod__vnutro {
    position: relative;
    width: min(100% - 2.5rem, var(--sirka));
    margin-inline: auto;
    padding-block: 7rem 5.5rem;
    max-width: 100%;
    /* bez min-width by dlhý nadpis roztiahol flex položku nad šírku obrazovky */
    min-width: 0;
}

/* Nadpisok nad fotkou potrebuje viac kontrastu než nad plnou farbou */
.uvod .nadpisok {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 14px rgba(13, 24, 16, 0.9);
}

.uvod__nadpis {
    font-family: var(--pismo-nadpis);
    font-optical-sizing: auto;
    font-weight: 600;
    font-size: clamp(2.5rem, 1.3rem + 5.2vw, 5.5rem);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 1.5rem;
    max-width: 16ch;
    /* fotka pod nadpisom môže byť miestami svetlá */
    text-shadow: 0 2px 24px rgba(13, 24, 16, 0.55);
}

.uvod__nadpis em {
    font-style: italic;
    font-weight: 500;
    color: var(--antuka-jas);
}

.uvod__popis {
    color: var(--text-svetly);
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    max-width: 46ch;
    margin: 0 0 2.25rem;
}

.uvod__tlacidla {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

/* Podpisový prvok: nákres kurtu bielymi čiarami */
.uvod__kurt {
    position: absolute;
    right: -2%;
    bottom: 12%;
    width: min(38vw, 420px);
    color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

/* ---------- Fakty ---------- */

.fakty {
    background: var(--antuka);
    color: #fff;
}

.fakty__zoznam {
    width: min(100% - 2.5rem, var(--sirka));
    /* margin musí byť 0, inak vlastný margin zoznamu vytlačí biely pruh nad pásom */
    margin: 0 auto;
    padding: 2.5rem 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.fakty__zoznam li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.fakty__cislo {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.9rem);
    line-height: 1;
}

/* „–40“ za napočítavaným číslom; pomlčka sa nesmie odtrhnúť na nový riadok */
.fakty__rozsah {
    white-space: nowrap;
}

.fakty__cislo sup {
    font-size: 0.4em;
    vertical-align: super;
    font-family: var(--pismo-mono);
}

.fakty__popis {
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Sekcie ---------- */

.sekcia {
    padding-block: var(--medzera-sekcia);
    background: var(--biela);
    position: relative;
}

.sekcia--tmava {
    background: var(--les);
    color: var(--text-svetly);
}

.sekcia--opar {
    background: var(--opar);
}

/* Deliaci prvok: dvojica čiar ako postranná ulička kurtu */
.sekcia + .sekcia:not(.sekcia--tmava)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 2.5rem, var(--sirka));
    height: 5px;
    border-top: 1px solid var(--ciara);
    border-bottom: 1px solid var(--ciara);
}

.sekcia__vnutro {
    width: min(100% - 2.5rem, var(--sirka));
    margin-inline: auto;
}

.sekcia--tmava p {
    color: var(--text-svetly);
}

.sekcia--tmava a:not(.tlacidlo) {
    color: var(--antuka-jas);
}

/* ---------- Dvojstĺpec ---------- */

.dvojstlpec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.dvojstlpec--obratene .dvojstlpec__text {
    order: 2;
}

.dvojstlpec__text > p:last-of-type {
    margin-bottom: 0;
}

.dvojstlpec__text .tlacidlo {
    margin-top: 2rem;
}

/*
   Najviac 552 px (stĺpec má 554): dáva celé pixely aj pri 125 %, 150 % a 200 %
   zväčšení obrazovky (690, 828, 1104 px) a súbory majú presne tieto šírky
   (_zdroje/spracuj_skolu.py, RAMIK) — prehliadač fotku vykreslí 1 : 1 bez
   prepočítania. Pri 554 px (692,5 px pri 125 %) ju vždy rozmazal.
*/
.dvojstlpec__obrazok {
    margin: 0;
    position: relative;
    max-width: 552px;
}

/*
   Pomer strán určuje súbor (fotky sú už orezané na 4 : 3, široké na 9 : 4),
   nie CSS. Vynútený aspect-ratio dával rámik vysoký 415,5 px pre fotku 415 px
   a prehliadač ju kvôli tomu prepočítal — rozmazal.
*/
.dvojstlpec__obrazok img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.dvojstlpec__obrazok::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    margin: 12px;
    pointer-events: none;
}

/* ---------- Karty ---------- */

.karty {
    list-style: none;
    padding: 0;
    margin: 3rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ciara-svetla);
    border: 1px solid var(--ciara-svetla);
}

.karta {
    background: var(--les);
    padding: 2rem 1.6rem 2.2rem;
}

.karta__znak {
    font-family: var(--pismo-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--antuka-jas);
    display: block;
    margin-bottom: 1.5rem;
}

.karta h3 {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 0.7rem;
}

.karta p {
    font-size: 0.95rem;
    margin: 0;
}

.karta p + p {
    margin-top: 0.75rem;
}

/* ---------- Cenník ako výsledková tabuľa ---------- */

.tabulka-obal {
    margin-top: 2.5rem;
    overflow-x: auto;
    border: 1px solid var(--ciara);
}

.cennik {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
    background: var(--biela);
}

.cennik th,
.cennik td {
    padding: 1.1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--ciara);
}

.cennik thead th {
    background: var(--les);
    color: #fff;
    font-family: var(--pismo-mono);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: none;
}

.cennik__den {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    vertical-align: top;
    border-right: 1px solid var(--ciara);
    background: var(--opar);
}

.cennik__den span {
    display: block;
    font-family: var(--pismo-telo);
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-tlm);
    line-height: 1.5;
}

.cennik__cas {
    font-family: var(--pismo-mono);
    font-size: 0.95rem;
    color: var(--text-tlm);
    white-space: nowrap;
}

.cennik__cena {
    text-align: right;
    white-space: nowrap;
}

.cennik .suma {
    font-family: var(--pismo-mono);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--text);
}

.cennik__cena small {
    display: block;
    font-family: var(--pismo-telo);
    font-size: 0.75rem;
    color: var(--antuka);
}

.cennik tbody tr:last-child th,
.cennik tbody tr:last-child td {
    border-bottom: none;
}

.cennik__vikend .cennik__den {
    border-top: 2px solid var(--les);
}

.poznamky {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-tlm);
    max-width: 62ch;
}

.poznamky strong {
    color: var(--text);
}

/* ---------- Odrážky ---------- */

.odrazky {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.6rem;
}

.odrazky li {
    position: relative;
    padding-left: 1.75rem;
}

.odrazky li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--antuka);
}

/* ---------- Galéria ---------- */

.filtre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0 2.5rem;
}

.filter {
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tlm);
    background: transparent;
    border: 1px solid var(--ciara);
    border-radius: var(--radius);
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

.filter.je-aktivny {
    background: var(--les);
    border-color: var(--les);
    color: #fff;
}

.mriezka {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dlazdica {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--opar);
    border: none;
    padding: 0;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}

.dlazdica img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.4s ease;
}

.dlazdica:hover img,
.dlazdica:focus-visible img {
    transform: scale(1.06);
    filter: saturate(1.12);
}

.dlazdica::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 24, 16, 0.45), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dlazdica:hover::after,
.dlazdica:focus-visible::after {
    opacity: 1;
}

.dlazdica.je-skryta {
    display: none;
}

.viac-obal {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* Obrysové tlačidlo na svetlom podklade potrebuje tmavý obrys */
.tlacidlo--tmavy {
    border-color: var(--ciara);
    color: var(--text);
}

.tlacidlo--tmavy:hover {
    background: var(--les);
    border-color: var(--les);
    color: #fff;
}

.tlacidlo[hidden] {
    display: none;
}

/* ---------- Rezervácia ---------- */

.rezervacia {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2.25rem;
}

/* ---------- Kontakt ---------- */

.kontakt {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: 2.5rem;
    align-items: start;
}

.kontakt dl {
    margin: 0;
    display: grid;
    gap: 0;
}

.kontakt dt {
    font-family: var(--pismo-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--antuka);
    padding-top: 1.1rem;
    border-top: 1px solid var(--ciara);
}

.kontakt dd {
    margin: 0.4rem 0 1.1rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

.kontakt dd a {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.kontakt__mapa {
    position: relative;
    min-height: 380px;
    height: 100%;
    border: 1px solid var(--ciara);
}

.kontakt__mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.35) contrast(1.05);
}

/* ---------- Pätička ---------- */

.paticka {
    background: var(--les-hlbka);
    color: var(--text-svetly);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.paticka__vnutro {
    width: min(100% - 2.5rem, var(--sirka));
    margin-inline: auto;
}

.paticka__znacka {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.paticka__znacka p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.paticka__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2.5rem 0;
    padding-block: 1.5rem;
    border-top: 1px solid var(--ciara-svetla);
    border-bottom: 1px solid var(--ciara-svetla);
}

.paticka__nav a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
}

.paticka__nav a:hover {
    color: var(--antuka-jas);
}

.paticka__dolu {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    font-family: var(--pismo-mono);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

.paticka__dolu a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
}

.paticka__dolu a:hover {
    color: var(--antuka-jas);
}

/* ---------- Lightbox ---------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(9, 17, 11, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 5vw, 4rem);
}

.lightbox[hidden] {
    display: none;
}

.lightbox__obrazok {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius);
}

.lightbox__zavriet,
.lightbox__sip {
    position: absolute;
    background: transparent;
    border: 1px solid var(--ciara-svetla);
    color: #fff;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.2s ease, border-color 0.2s ease;
    line-height: 1;
}

.lightbox__zavriet:hover,
.lightbox__sip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

.lightbox__zavriet {
    top: 1.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
}

.lightbox__sip {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 64px;
    font-size: 2rem;
}

.lightbox__sip--vlavo {
    left: 1.25rem;
}

.lightbox__sip--vpravo {
    right: 1.25rem;
}

.lightbox__pocitadlo {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    /* s popisom fotky je text dlhší — na telefóne sa zalomí na stred */
    width: max-content;
    max-width: calc(100% - 2rem);
    text-align: center;
    margin: 0;
    font-family: var(--pismo-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
}

/* ---------- Odhalenie pri scrollovaní ---------- */

.odhal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.odhal.je-viditelny {
    opacity: 1;
    transform: none;
}

/* =========================================================
   Pohyb pri scrollovaní
   ========================================================= */

/* ---------- Ukazovateľ prescrollovanej stránky ---------- */

.postup {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hlavicka.je-posunuta .postup {
    opacity: 1;
}

.postup span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--antuka), var(--antuka-jas));
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* ---------- Úvod: fotky idú pomalšie než stránka ---------- */

.uvod__fotky {
    transform: translate3d(0, var(--posun-fotiek, 0px), 0);
    will-change: transform;
}

/* Pomalé priblíženie práve zobrazenej fotky */
.uvod__fotka {
    transform: scale(1.08);
    transition: opacity 2.5s ease-in-out, transform 9s linear;
}

.uvod__fotka.je-aktivna {
    transform: scale(1);
}

/* Text úvodu sa pri odchode zo scény zdvihne a vytratí */
.uvod__vnutro {
    transform: translate3d(0, calc(var(--uvod-postup, 0) * -70px), 0);
    opacity: calc(1 - var(--uvod-postup, 0) * 1.25);
    will-change: transform, opacity;
}

/* Nákres kurtu sa dokreslí po načítaní a plynie so scrollom */
.uvod__kurt {
    transform: translate3d(0, calc(var(--uvod-postup, 0) * 90px), 0);
}

.uvod__kurt g {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: kurt-kresli 2.8s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes kurt-kresli {
    to {
        stroke-dashoffset: 0;
    }
}

/* Zvyšok úvodného bloku dobehne za nadpisom */
.uvod__popis,
.uvod__tlacidla {
    animation: nabehne 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.uvod__popis {
    animation-delay: 0.5s;
}

.uvod__tlacidla {
    animation-delay: 0.66s;
}

@keyframes nabehne {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Nadpisy: slová vystupujú spod masky ---------- */

.slovo {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /*
       Nadpisy majú line-height pod 1, takže do riadkového rámčeka sa nezmestí
       ani mäkčeň nad veľkým písmenom, ani presah kurzívy, ani chvost písmena j,
       ktorý je pri veľkom optickom stupni Fraunces obzvlášť dlhý. Overflow reže
       až po hrane výplne, preto maske pridáme výplň na všetky strany a rovnako
       veľkým záporným okrajom vrátime pôvodnú sadzbu.
    */
    --maska-hore: 0.7em;
    --maska-bok: 0.5em;
    --maska-dole: 0.62em;
    padding: var(--maska-hore) var(--maska-bok) var(--maska-dole);
    margin: calc(-1 * var(--maska-hore)) calc(-1 * var(--maska-bok)) calc(-1 * var(--maska-dole));
}

.slovo > span {
    display: inline-block;
    /*
       Slovo musí skončiť pod spodnou hranou výplne, inak by vykúkalo spod
       riadku. Posun je preto naviazaný priamo na rozmery masky.
    */
    transform: translateY(calc(100% + var(--maska-dole) + var(--maska-hore)));
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--o, 0ms);
}

.je-viditelny .slovo > span,
.slovo.je-viditelny > span {
    transform: none;
}

/* ---------- Nadpisok dostane dokresľovanú linku ---------- */

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

.nadpisok::before {
    content: "";
    flex: none;
    width: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.nadpisok.je-viditelny::before {
    width: 2.5rem;
}

/* ---------- Deliaca čiara sekcie sa roztiahne ---------- */

.sekcia + .sekcia:not(.sekcia--tmava)::before {
    width: 0;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.sekcia + .sekcia:not(.sekcia--tmava).je-v-zabere::before {
    width: min(100% - 2.5rem, var(--sirka));
}

/* ---------- Obrázky v dvojstĺpci: odkrytie ---------- */

.dvojstlpec__obrazok {
    overflow: hidden;
    border-radius: var(--radius);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
   Triedu drží rodič, nie samotný rámik: rámik sa clip-path-om orezáva na nulovú
   plochu a IntersectionObserver by ho preto nikdy nevyhlásil za viditeľný —
   sám seba by zamkol v skrytom stave.
*/
.dvojstlpec.je-odkryte .dvojstlpec__obrazok {
    clip-path: inset(0 0 0 0);
}

/*
   Fotky v rámiku sa zámerne nehýbu (žiadna paralaxa): paralaxa potrebovala
   fotku zväčšiť o 16 %, prehliadač ju potom prepočítaval lacným filtrom a
   fotka bola o tretinu menej ostrá ako originál.
*/

/* ---------- Karty: obsah nabieha po jednej ---------- */

.karta > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.karty.je-viditelny .karta > * {
    opacity: 1;
    transform: none;
}

.karty.je-viditelny .karta:nth-child(1) > * {
    transition-delay: 0.05s;
}

.karty.je-viditelny .karta:nth-child(2) > * {
    transition-delay: 0.16s;
}

.karty.je-viditelny .karta:nth-child(3) > * {
    transition-delay: 0.27s;
}

.karty.je-viditelny .karta:nth-child(4) > * {
    transition-delay: 0.38s;
}

/* ---------- Dlaždice galérie ---------- */

.dlazdica {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--o, 0ms);
}

.dlazdica.je-viditelny {
    opacity: 1;
    transform: none;
}

.dlazdica img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.dlazdica:hover img,
.dlazdica:focus-visible img {
    transform: scale(1.08);
    filter: saturate(1.12) brightness(1.04);
}

/* ---------- Čísla v pásiku faktov ---------- */

.fakty__zoznam li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--o, 0ms);
}

.fakty__zoznam.je-viditelny li {
    opacity: 1;
    transform: none;
}

/* ---------- Tabuľka cenníka: riadky po jednom ---------- */

.tabulka-obal.je-viditelny .cennik tbody tr {
    animation: riadok-nabehne 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tabulka-obal.je-viditelny .cennik tbody tr:nth-child(1) {
    animation-delay: 0.1s;
}

.tabulka-obal.je-viditelny .cennik tbody tr:nth-child(2) {
    animation-delay: 0.2s;
}

.tabulka-obal.je-viditelny .cennik tbody tr:nth-child(3) {
    animation-delay: 0.3s;
}

.tabulka-obal.je-viditelny .cennik tbody tr:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes riadok-nabehne {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   Responzivita
   ========================================================= */

@media (max-width: 980px) {
    .mriezka {
        grid-template-columns: repeat(3, 1fr);
    }

    .kontakt {
        grid-template-columns: 1fr;
    }

    .kontakt__mapa {
        min-height: 320px;
    }
}

@media (max-width: 860px) {
    .hlavicka__cta {
        display: none;
    }

    .prepinac {
        display: flex;
    }

    .nav {
        position: fixed;
        inset: 0 0 auto;
        top: 0;
        flex-direction: column;
        gap: 0;
        background: var(--les-hlbka);
        padding: 5.5rem 1.5rem 2rem;
        transform: translateY(-100%);
        transition: transform 0.35s ease;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    }

    .nav.je-otvorene {
        transform: translateY(0);
    }

    .nav a {
        padding: 1rem 0;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--ciara-svetla);
    }

    .nav a:hover,
    .nav a.je-aktivny {
        border-bottom-color: var(--ciara-svetla);
        color: var(--antuka-jas);
    }

    .dvojstlpec {
        grid-template-columns: 1fr;
    }

    /* v jednom stĺpci fotka zaberá celú šírku */
    .dvojstlpec__obrazok {
        max-width: none;
    }

    .dvojstlpec--obratene .dvojstlpec__text {
        order: 0;
    }

    .fakty__zoznam {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1rem;
    }

    .uvod__kurt {
        display: none;
    }
}

@media (max-width: 620px) {
    .mriezka {
        grid-template-columns: repeat(2, 1fr);
    }

    .karty {
        grid-template-columns: 1fr;
    }

    .uvod {
        min-height: auto;
    }

    .uvod__vnutro {
        padding-block: 8rem 4rem;
    }

    /* Na úzkej obrazovke musí nadpis zalamovať prirodzene, inak pretečie */
    .uvod__nadpis {
        font-size: clamp(2rem, 1rem + 7vw, 3rem);
        max-width: none;
    }

    .uvod__nadpis br {
        display: none;
    }

    .uvod__popis {
        max-width: none;
    }

    .uvod__tlacidla .tlacidlo {
        flex: 1 1 100%;
        text-align: center;
    }

    /* Cenník sa na mobile mení na karty */
    .tabulka-obal {
        border: none;
        overflow: visible;
    }

    .cennik {
        min-width: 0;
        border: none;
    }

    .cennik thead {
        display: none;
    }

    .cennik tbody,
    .cennik tr,
    .cennik th,
    .cennik td {
        display: block;
        width: 100%;
    }

    .cennik tr {
        border: 1px solid var(--ciara);
        margin-bottom: -1px;
        padding: 0.5rem 0;
    }

    .cennik th,
    .cennik td {
        border-bottom: none;
        padding: 0.4rem 1rem;
    }

    .cennik__den {
        border-right: none;
        background: transparent;
        padding-top: 0.9rem;
    }

    .cennik__den span {
        display: inline;
        font-size: inherit;
        color: inherit;
    }

    .cennik__cas {
        color: var(--text);
        font-size: 1rem;
    }

    .cennik__cena {
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
    }

    .cennik__cena::before {
        content: "Prenájom";
        font-family: var(--pismo-mono);
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-tlm);
    }

    .cennik__cena:last-child::before {
        content: "Sezónny prenájom";
    }

    .cennik__vikend .cennik__den {
        border-top: none;
    }

    .lightbox__sip {
        width: 40px;
        height: 52px;
        font-size: 1.6rem;
    }

    .lightbox__sip--vlavo {
        left: 0.5rem;
    }

    .lightbox__sip--vpravo {
        right: 0.5rem;
    }
}

@media (max-width: 379px) {
    .fakty__zoznam {
        grid-template-columns: 1fr;
    }
}

/* ---------- Obmedzený pohyb ---------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .odhal {
        opacity: 1;
        transform: none;
    }

    .uvod__fotky,
    .uvod__vnutro,
    .uvod__kurt {
        transform: none;
    }

    .uvod__fotka {
        transform: none;
    }

    .uvod__vnutro {
        opacity: 1;
    }

    .uvod__kurt g {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }

    .dvojstlpec__obrazok {
        clip-path: none;
    }

    .slovo > span,
    .karta > *,
    .dlazdica,
    .fakty__zoznam li {
        opacity: 1;
        transform: none;
    }

    .nadpisok::before {
        width: 2.5rem;
    }

    .sekcia + .sekcia:not(.sekcia--tmava)::before,
    .sekcia + .sekcia:not(.sekcia--tmava).je-v-zabere::before {
        width: min(100% - 2.5rem, var(--sirka));
    }
}

/* ---------- Tlač ---------- */

@media print {

    .hlavicka,
    .uvod__fotky,
    .filtre,
    .lightbox,
    .kontakt__mapa {
        display: none;
    }

    body {
        color: #000;
    }
}

/* =========================================================
   Súhlas s cookies a blokovanie tretích strán
   ========================================================= */

/* ---------- Zablokovaný obsah namiesto mapy ---------- */

.suhlas-blok {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--opar);
    border: 1px dashed var(--ciara);
}


.suhlas-blok.je-odomknuty {
    display: block;
    padding: 0;
    border: none;
    background: none;
    min-height: 0;
}

.suhlas-blok__vnutro {
    max-width: 46ch;
    text-align: center;
}

.suhlas-blok__nadpis {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: var(--text);
}


.suhlas-blok__text {
    font-size: 0.95rem;
    color: var(--text-tlm);
    margin: 0 0 1.5rem;
}


.suhlas-blok__tlacidla {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.suhlas-blok__poznamka {
    margin: 1.25rem 0 0;
    font-size: 0.82rem;
    color: var(--text-tlm);
}


/* ---------- Spodná lišta ---------- */

.suhlas-lista {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 150;
    background: var(--les-hlbka);
    color: var(--text-svetly);
    border-top: 3px solid var(--antuka);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
    animation: suhlasHore 0.4s ease;
}

.suhlas-lista[hidden] {
    display: none;
}

@keyframes suhlasHore {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.suhlas-lista__vnutro {
    width: min(100% - 2.5rem, var(--sirka));
    margin-inline: auto;
    padding: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.suhlas-lista__nadpis {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.15rem;
    color: #fff;
    margin: 0 0 0.4rem;
}

.suhlas-lista__text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
}

.suhlas-lista__text a {
    color: var(--antuka-jas);
}

.suhlas-lista__tlacidla {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-shrink: 0;
    min-width: 210px;
}

/* Odmietnutie musí byť rovnako výrazné ako prijatie — zhodná veľkosť aj váha */
.suhlas-lista__tlacidla .tlacidlo {
    text-align: center;
    width: 100%;
}

.suhlas-lista__odkaz {
    background: none;
    border: none;
    padding: 0.25rem;
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.suhlas-lista__odkaz:hover {
    color: #fff;
}

/* ---------- Panel s podrobnými nastaveniami ---------- */

.suhlas-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(9, 17, 11, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    overflow-y: auto;
}

.suhlas-panel[hidden] {
    display: none;
}

.suhlas-panel__okno {
    position: relative;
    background: var(--biela);
    color: var(--text);
    width: min(100%, 640px);
    max-height: 88vh;
    overflow-y: auto;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: var(--radius);
}

.suhlas-panel__zavriet {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--ciara);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
}

.suhlas-panel__zavriet:hover {
    background: var(--opar);
}

.suhlas-panel__nadpis {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    margin: 0 0 0.75rem;
    padding-right: 3rem;
}

.suhlas-panel__uvod {
    font-size: 0.95rem;
    color: var(--text-tlm);
    margin: 0 0 2rem;
}

.suhlas-polozka {
    padding: 1.25rem 0;
    border-top: 1px solid var(--ciara);
}

.suhlas-polozka__hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.suhlas-polozka h3 {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.05rem;
    margin: 0;
}

.suhlas-polozka p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-tlm);
}

.suhlas-polozka__stav {
    font-family: var(--pismo-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tlm);
    white-space: nowrap;
}

/* Prepínač */

.prepinac-suhlas {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
}

.prepinac-suhlas input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.prepinac-suhlas__telo {
    display: block;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    background: #c9d2c6;
    transition: background 0.2s ease;
}

.prepinac-suhlas__telo::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.prepinac-suhlas input:checked + .prepinac-suhlas__telo {
    background: var(--antuka);
}

.prepinac-suhlas input:checked + .prepinac-suhlas__telo::after {
    transform: translateX(24px);
}

.prepinac-suhlas input:focus-visible + .prepinac-suhlas__telo {
    outline: 2px solid var(--antuka);
    outline-offset: 3px;
}

.suhlas-panel__tlacidla {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ciara);
}

/* ---------- Právne odkazy v pätičke ---------- */

.paticka__pravne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.paticka__pravne a,
.paticka__nastavenia {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.paticka__nastavenia {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.paticka__pravne a:hover,
.paticka__nastavenia:hover {
    color: var(--antuka-jas);
}

@media (max-width: 860px) {
    .suhlas-lista__vnutro {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.25rem 0;
        max-height: 80vh;
        overflow-y: auto;
    }

    .suhlas-lista__tlacidla {
        min-width: 0;
    }
}

/* =========================================================
   Právne podstránky
   ========================================================= */

.pravna-hlavicka {
    background: var(--les-hlbka);
    padding-block: 1rem;
}

.pravna-hlavicka__vnutro {
    width: min(100% - 2.5rem, var(--sirka));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.pravna-hlavicka .znacka__obrazok {
    height: 52px;
}

.pravna-hlavicka__spat {
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.pravna-hlavicka__spat:hover {
    color: var(--antuka-jas);
}

.pravna {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.pravna__vnutro {
    width: min(100% - 2.5rem, 780px);
    margin-inline: auto;
}

.pravna__nadpis {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}

.pravna__datum {
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tlm);
    margin: 0 0 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ciara);
}

.pravna__vnutro h2 {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 3rem 0 1rem;
}

.pravna__vnutro h3 {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 2rem 0 0.6rem;
}

.pravna__vnutro p,
.pravna__vnutro li {
    font-size: 1rem;
    line-height: 1.7;
}

.pravna__vnutro ul,
.pravna__vnutro ol {
    padding-left: 1.35rem;
    display: grid;
    gap: 0.5rem;
}

.pravna__vnutro dl {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 0.35rem 1.5rem;
    margin: 1.25rem 0;
}

.pravna__vnutro dt {
    font-family: var(--pismo-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tlm);
    padding-top: 0.35rem;
}

.pravna__vnutro dd {
    margin: 0;
    line-height: 1.6;
}

/* Miesto, kam prevádzkovateľ musí doplniť vlastný údaj */
.doplnit {
    display: inline-block;
    background: #fff4e8;
    border: 1px dashed var(--antuka);
    border-radius: var(--radius);
    padding: 0.1em 0.5em;
    font-family: var(--pismo-mono);
    font-size: 0.85em;
    color: var(--antuka);
}

.pravna-tabulka {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9rem;
}

.pravna-tabulka th,
.pravna-tabulka td {
    text-align: left;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--ciara);
    vertical-align: top;
}

.pravna-tabulka thead th {
    background: var(--les);
    color: #fff;
    font-family: var(--pismo-mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pravna-tabulka__obal {
    overflow-x: auto;
    border: 1px solid var(--ciara);
    margin: 1.5rem 0;
}

.pravna-tabulka__obal .pravna-tabulka {
    margin: 0;
    min-width: 560px;
}

.ramcek {
    background: var(--opar);
    border-left: 3px solid var(--antuka);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}

.ramcek p:first-child {
    margin-top: 0;
}

.ramcek p:last-child {
    margin-bottom: 0;
}

@media (max-width: 620px) {
    .pravna__vnutro dl {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .pravna__vnutro dd {
        margin-bottom: 1rem;
    }
}

/* Odmietnutie musí byť rovnako nápadné ako prijatie (EDPB, § 109 ods. 8
   zák. 452/2021 Z. z.) — rovnaká veľkosť, rovnaké písmo, rovnaká plnosť.
   Preto v lište prepisujeme obrysový variant na plný svetlý. */
.suhlas-lista__tlacidla .tlacidlo--obrys {
    background: #fff;
    border-color: #fff;
    color: var(--les-hlbka);
    font-family: var(--pismo-telo);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.suhlas-lista__tlacidla .tlacidlo--obrys:hover {
    background: var(--opar);
    border-color: var(--opar);
    color: var(--les-hlbka);
}

/* =========================================================
   Stránka tenisovej školy
   ========================================================= */

/* Podstránka nepotrebuje celú výšku obrazovky ako úvod klubu */
.uvod--podstranka {
    min-height: min(76vh, 660px);
}

/*
   Fotky školy sú plné tvárí, ktoré by prekryl nadpis. Preto zaberajú len
   pravú časť úvodu a doľava sa strácajú do tmavého pozadia.
*/
.uvod--podstranka .uvod__fotka {
    inset: 0 0 0 auto;
    width: 62%;
    object-position: 50% 35%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28%);
    mask-image: linear-gradient(to right, transparent, #000 28%);
}

.uvod--podstranka .uvod__fotka--cibulkova {
    object-position: 48% 25%;
}

/* Na tablete a mobile je fotka pás nad textom, text začína až pod tvárami */
@media (max-width: 1100px) {
    .uvod--podstranka .uvod__fotka {
        inset: 0 0 auto 0;
        width: 100%;
        height: 21rem;
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
        mask-image: linear-gradient(to bottom, #000 70%, transparent);
    }

    .uvod--podstranka .uvod__fotka--cibulkova {
        object-position: 48% 20%;
    }

    .uvod--podstranka .uvod__vnutro {
        padding-top: 19rem;
    }
}

/* ---------- Rýchle odkazy na sekcie stránky ---------- */

.podmenu {
    background: var(--biela);
    border-bottom: 1px solid var(--ciara);
}

.podmenu__vnutro {
    width: min(100% - 2.5rem, var(--sirka));
    margin-inline: auto;
    display: flex;
    gap: 2rem;
    padding-block: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.podmenu__vnutro::-webkit-scrollbar {
    display: none;
}

.podmenu a {
    font-family: var(--pismo-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tlm);
    text-decoration: none;
    white-space: nowrap;
}

.podmenu a:hover {
    color: var(--antuka);
}

/* ---------- Programy tréningov ---------- */

.karty--dva {
    grid-template-columns: repeat(2, 1fr);
}

.karta .odrazky {
    margin: 1.25rem 0 0;
    gap: 0.45rem;
    font-size: 0.95rem;
}

.karta .odrazky li::before {
    background: var(--antuka-jas);
}

/* Kľúčové údaje programu — dajú sa porovnať jedným pohľadom */
.karta__fakty {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 1.5rem 0 0;
    border-top: 1px solid var(--ciara-svetla);
    border-bottom: 1px solid var(--ciara-svetla);
}

.karta__fakty div {
    padding: 0.85rem 0.75rem 0.9rem 0;
}

.karta__fakty div + div {
    padding-left: 1rem;
    border-left: 1px solid var(--ciara-svetla);
}

.karta__fakty dt {
    font-family: var(--pismo-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--antuka-jas);
}

.karta__fakty dd {
    margin: 0.3rem 0 0;
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.2;
    color: #fff;
}

.karta .karta__poznamka {
    margin-top: 1.5rem;
    font-family: var(--pismo-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--antuka-jas);
}

.treningy__vyzva {
    margin: 2rem 0 0;
    font-size: 1.05rem;
}

/* ---------- Časová os: kariéra trénera a história klubu ---------- */

.casova-os {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    border-top: 1px solid var(--ciara);
}

.casova-os li {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 1.25rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--ciara);
}

.casova-os__rok {
    font-family: var(--pismo-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--antuka);
    padding-top: 0.2em;
    white-space: nowrap;
}

/* ---------- História: časová os vedľa fotky ---------- */

.historia {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    margin-bottom: 1.5rem;
}

/* bez min-width by dlhý text roztiahol stĺpec mriežky nad jeho podiel */
.historia__text {
    min-width: 0;
}

.historia .casova-os li {
    grid-template-columns: 5rem 1fr;
}

.historia__foto {
    margin: 0;
    position: sticky;
    top: 6rem;
}

.historia__foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Fotky zo starého webu školy majú pomer 9 : 4 — orezom na 4 : 3 by prišli o polovicu skupiny */
.dvojstlpec__obrazky {
    display: grid;
    gap: 1rem;
}

/* Popis priamo na fotke, v rohu pod rámikom */
.obrazok-popis {
    position: absolute;
    left: 1.5rem;
    bottom: 1.4rem;
    z-index: 1;
    padding: 0.35rem 0.65rem;
    background: rgba(13, 24, 16, 0.78);
    border-radius: var(--radius);
    font-family: var(--pismo-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

/* Popis na dlaždici galérie — menší, dlaždica je len štvorček */
.dlazdica .obrazok-popis {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: left;
}

/* ---------- Odporúčania ---------- */

.odporucania {
    list-style: none;
    padding: 0;
    margin: 3rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
}

.odporucanie {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ciara-svetla);
}

.odporucanie img {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 4;
    object-fit: cover;
}

.odporucanie__citat {
    margin: 0;
    padding: 1.75rem 1.6rem 0;
    flex: 1;
}

.odporucanie__citat p {
    margin: 0;
    font-family: var(--pismo-nadpis);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    line-height: 1.35;
    color: #fff;
}

.odporucanie__autor {
    padding: 1.25rem 1.6rem 1.75rem;
    font-family: var(--pismo-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--antuka-jas);
}

.odporucanie__autor span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--text-svetly);
}

/* ---------- Tréner: portrét vedľa mena ---------- */

.trener-hlavicka {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    margin-bottom: 1.5rem;
}

.trener-hlavicka .nadpis {
    margin: 0;
}

/* Zdroj má len 156 px — väčší výrez by bol rozmazaný */
.trener-hlavicka__foto {
    flex: none;
    width: clamp(88px, 10vw, 128px);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--biela);
    box-shadow: 0 0 0 1px var(--antuka);
}

/* ---------- Tréner: odporúčania pod úvodom ---------- */

.trener-odporucania {
    margin-top: clamp(3rem, 6vw, 5rem);
}

.trener-odporucania .odporucania {
    margin-top: 1.5rem;
}

/* Odporúčania na svetlom podklade sekcie Tréner */
.odporucania--svetle .odporucanie {
    border-color: var(--ciara);
    background: #fff;
}

.odporucania--svetle .odporucanie__citat p {
    color: var(--text);
}

.odporucania--svetle .odporucanie__autor {
    color: var(--antuka);
}

.odporucania--svetle .odporucanie__autor span {
    color: var(--text-tlm);
}

/* ---------- Výsledky trénera a články ---------- */

.trener-viac {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--ciara);
}

.trener-viac__nadpis {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0;
}

.trener-viac .casova-os {
    margin-top: 1.25rem;
}

.trener-viac .casova-os li {
    grid-template-columns: 3.5rem 1fr;
}

.trener-viac__text {
    margin: 1.25rem 0 0;
}

.dokumenty {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    border-top: 1px solid var(--ciara);
}

.dokumenty li {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--ciara);
}

.dokumenty a {
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
}

.dokumenty a:hover {
    color: var(--antuka);
}

.dokumenty a::after {
    content: "→";
    display: inline-block;
    margin-left: 0.4em;
    color: var(--antuka);
    transition: transform 0.2s ease;
}

.dokumenty a:hover::after {
    transform: translateX(4px);
}

.dokumenty__typ {
    font-family: var(--pismo-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tlm);
}

/* ---------- Výzva na prihlásenie ---------- */

.skola-vyzva {
    background: var(--les);
    color: var(--text-svetly);
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: var(--radius);
}

.skola-vyzva p {
    color: var(--text-svetly);
}

.skola-vyzva__nadpis {
    font-family: var(--pismo-nadpis);
    font-weight: 600;
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
    line-height: 1.1;
    color: #fff;
    margin: 0 0 1rem;
}

.skola-vyzva__tlacidla {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 1.75rem 0;
}

.skola-vyzva__poznamka {
    font-size: 0.9rem;
    margin: 0;
}

.skola-vyzva__poznamka a {
    color: var(--antuka-jas);
}

@media (max-width: 860px) {
    .trener-viac,
    .historia {
        grid-template-columns: 1fr;
    }

    .historia__foto {
        position: relative;
        top: 0;
        max-width: 420px;
    }
}

@media (max-width: 620px) {
    /* päť odkazov sa na šírku telefónu nezmestí — radšej dva riadky než skrytý Kontakt */
    .podmenu__vnutro {
        flex-wrap: wrap;
        gap: 0.6rem 1.4rem;
    }

    .karty--dva {
        grid-template-columns: 1fr;
    }

    .odporucania {
        grid-template-columns: 1fr;
    }

    /* tri stĺpce sú na telefóne príliš úzke — údaje idú pod seba ako riadky */
    .karta__fakty {
        grid-template-columns: 1fr;
    }

    .karta__fakty div,
    .karta__fakty div + div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.65rem 0;
        border-left: none;
    }

    .karta__fakty div + div {
        border-top: 1px solid var(--ciara-svetla);
    }

    .karta__fakty dd {
        margin: 0;
        font-size: 1.05rem;
    }

    .casova-os li,
    .historia .casova-os li,
    .trener-viac .casova-os li {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .skola-vyzva__tlacidla .tlacidlo {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Odkaz z karty na úvodnej stránke na podstránku školy */
.karta .karta__odkaz {
    margin-top: 1rem;
    font-family: var(--pismo-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
}