/* scena.css - šablona podle djtomy.cz: bílý základ, modrotyrkysový akcent,
   střídavě bílé a světle šedé sekce, karty s jemným stínem.

   Všechno stojí pod `.site--scena` nebo pod prefixem `.sc-`. Klub jede na `.k-`
   a Vizitka na `.s-`, takže se šablony navzájem nepřebíjejí - jediné, co je
   společné, je base.css, do kterého se odsud nesahá. Přepisy sdílených tříd
   (`.s-sec`, `.s-sec__title`, `.site-foot`) proto stojí VŽDY pod `.site--scena`.

   Písmo: předloha používá Montserrat a Inter z Google Fonts. Ty sem nejdou -
   CSP webu má `font-src 'self'` a stahovat cizí soubory do repozitáře kvůli
   jednomu vzhledu se nevyplatí. Bereme Outfit, který v projektu už je: je to
   taky geometrický bezpatkový grotesk, takže sazba drží stejný charakter.

   POŘADÍ V SOUBORU NENÍ NÁHODNÉ. Skoro každý selektor tu má specificitu (0,2,0),
   takže o výsledku rozhoduje pořadí řádků. Dvě místa na tom stojí a nesmí se
   přesouvat: mobilní blok hlavičky musí být ZA pravidly loga a blok svislého
   rytmu musí být úplně poslední. Obojí je na místě popsané. */

.site--scena {
    --w: 1200px;
    --pad: 20px;

    /* ── Škála odstupů ────────────────────────────────────────────────────────
       Každý padding, margin i gap v téhle šabloně musí být jedna z těchto
       proměnných. Dřív jich tu bylo 33 v pásmu 1,6 až 120 px a šest z nich
       dělalo přesně totéž. */
    --sc-s1: .25rem;   /*  4 px - mřížka kalendáře, popisek u hodnoty */
    --sc-s2: .5rem;    /*  8 px - pilulky, řádky seznamu uvnitř karty */
    --sc-s3: .75rem;   /* 12 px - drobné mřížky, vnitřek řádků karty */
    --sc-s4: 1rem;     /* 16 px - vnitřek malých boxů, odstavce */
    --sc-s5: 1.5rem;   /* 24 px - vnitřek karet, mřížka velkých karet */
    --sc-s6: 2rem;     /* 32 px - odstup bloků uvnitř sloupce */
    --sc-s7: 3rem;     /* 48 px - odstup přímých dětí sekce */
    --sc-s8: 4rem;     /* 64 px - mezera mezi sloupci dvousloupcové sazby */

    /* Svislý vnitřek sekce: 72 px na širokém okně, 40 px na telefonu, plynule.
       Dvě sekce za sebou tedy dělí 144 px místo dosavadních 200. */
    --sc-sec-y: clamp(2.5rem, 5vw, 4.5rem);

    /* Výška hlavičky. Odvozuje se z ní odsazení hera, panel sbaleného menu
       i posun kotev - dřív bylo 80 zapsané na třech místech v CSS a počtvrté
       v scena.js. */
    --sc-navh: 80px;
    /* Jednotná výška prvků HLAVIČKY: logo, pilulka Kontakt, kolečka sítí,
       burger. NENÍ to výška formulářových prvků - ta je `--sc-ctl` a mění se
       jinak. Ty dvě proměnné se nesmí sloučit: mobilní zmenšení hlavičky by
       jinak srazilo všechna pole formuláře pod dotykový cíl. */
    --sc-nav-el: 44px;
    --sc-logo-max: 230px;
    /* Jednotná výška polí a tlačítek ve formuláři a v kalkulačce. */
    --sc-ctl: 3rem;

    /* ── Barvy ───────────────────────────────────────────────────────────────
       Akcent bere šablona z registru (SiteTemplates -> SiteRenderer vypisuje
       `:root{--accent}`). Dnes se rozejít nemůže, protože Scéna nemá varianty
       motivu; je to pojistka pro chvíli, kdy je dostane - jinak by lightbox
       z base.css zmodral jinak než zbytek webu. */
    --sc-akcent: var(--accent, #2563eb);
    --sc-akcent2: #0e7490;
    --sc-prechod: linear-gradient(135deg, var(--sc-akcent), var(--sc-akcent2));

    --sc-text: #1e293b;
    --sc-tlum: #475569;
    --sc-tlum2: #64748b;          /* nápověda v poli, minulé dny v kalendáři */
    --sc-tint: #f8fafc;
    --sc-plocha: #fff;
    --sc-tmava: #0f172a;
    --sc-line: #e2e8f0;           /* dekorativní obrys karet */
    --sc-line-pole: #7e8ea3;      /* obrys ovládacích prvků, 3,34:1 na bílé */
    --sc-na-fotce: #e2e8f0;       /* podtitulek hera - s --sc-line nesouvisí */

    /* Modrá plocha pilulek, ikon a boxu minimální objednávky. */
    --sc-akcent-plocha: #eff6ff;
    --sc-akcent-obrys: #bfdbfe;
    --sc-akcent-text: #1e3a8a;
    --sc-akcent-svetly: #7dd3fc;  /* JEN na tmavý podklad, na bílé má 1,67:1 */

    /* Stavy termínu: plocha a text. Sdílí je kalkulačka, kalendář i hlášky
       formuláře - dřív byly zapsané třikrát a legenda se s mřížkou rozešla. */
    --sc-volno-plocha: #dcfce7;     --sc-volno-text: #14532d;
    --sc-obsazeno-plocha: #fee2e2;  --sc-obsazeno-text: #7f1d1d;
    --sc-obsazeno-plocha2: #fecaca;
    --sc-predbezne-plocha: #fef3c7; --sc-predbezne-text: #78350f;
    --sc-predbezne-plocha2: #fde68a;
    --sc-neurceno-plocha: #e2e8f0;  --sc-neurceno-text: #334155;

    /* Rádiusy. Dřív jich bylo deset, mimo jiné 18px dva pixely od 16. */
    --sc-r-xs: 4px;
    --sc-r-sm: 10px;
    --sc-r-md: 12px;
    --sc-r-lg: 16px;
    --sc-r-xl: 20px;
    --sc-r-pilulka: 999px;

    /* Stíny. Jednotný tón rgba(15, 23, 42) - čistá čerň dělala pod modrošedými
       plochami našedlý, mrtvý stín. */
    --sc-stin-1: 0 1px 2px rgba(15, 23, 42, .05);
    --sc-stin: 0 4px 6px -1px rgba(15, 23, 42, .1), 0 2px 4px -1px rgba(15, 23, 42, .06);
    --sc-stin-2: 0 12px 28px -8px rgba(37, 99, 235, .25);
    --sc-stin-3: 0 18px 40px rgba(15, 23, 42, .22);
    --sc-stin-4: 0 24px 60px rgba(15, 23, 42, .38);
    --sc-stin-desticka: 0 2px 10px rgba(15, 23, 42, .2);
    --sc-stin-tlacitko: 0 12px 24px rgba(14, 116, 144, .35);
    --sc-prsten: 0 0 0 3px rgba(37, 99, 235, .14);

    /* Písmo. Verzálkový popisek má vlastní token - sdílí ho deset selektorů,
       které měly pět velikostí a pět prostrkání. */
    --sc-f-popisek: .75rem;
    --sc-f-xs: .8rem;
    --sc-f-sm: .875rem;
    --sc-f-base: .95rem;
    --sc-f-md: 1.05rem;
    --sc-f-lg: 1.15rem;
    --sc-f-xl: 1.5rem;
    --sc-f-2xl: 2.1rem;
    --sc-f-nadpis: clamp(1.9rem, 4.5vw, 2.5rem);
    --sc-ls-popisek: .07em;

    background: var(--sc-plocha);
    color: var(--sc-text);
    font-family: Outfit, system-ui, -apple-system, sans-serif;
    /* 1rem, ne 16px: v pixelech šablona ignorovala zvětšené výchozí písmo
       prohlížeče a všechny rem hodnoty níž pak přestaly sedět. */
    font-size: 1rem;
    line-height: 1.6;
}

/* ── Sekce ────────────────────────────────────────────────────────────────────
   Pás --w si drží sekce SAMA vodorovným odsazením. Dřív ho držely děti přes
   `.sc-sec > * { margin-inline: auto }`, jenže to má stejnou specificitu jako
   každé `.site--scena .sc-neco`, takže o výsledku rozhodovalo POUZE pořadí
   řádků: kdo napsal níž zkratku `margin: X 0 0`, přepsal boční okraje na nulu
   a prvek spadl k levému okraji okna. Naměřeno left 20 místo 112 u popisků
   skupin služeb a u dopravy, zálohy i patičky ceníku.

   Procento se počítá z rodiče, ne z 100vw - to by zapomnělo na svislý posuvník. */
.site--scena .sc-sec,
.site--scena .s-sec {
    max-width: none;
    padding-block: var(--sc-sec-y);
    padding-inline: max(var(--pad), calc((100% - var(--w)) / 2));
    /* Dědičné - dlouhé slovo z profilu se zalomí, místo aby vylezlo ze sekce. */
    overflow-wrap: break-word;
}

/* Sekce s vyřezanou postavou nemá spodní odsazení. Postava je obrázek bez
   pozadí, který stojí nohama na spodní hraně sekce - 72 px pod ní vypadá, jako
   by se vznášela, a předloha ji má doraženou k další sekci.

   Výjimka se váže na OBSAH, ne na pozici. Dřív tu stálo
   `.sc-hero + .sc-sec, .sc-hero + .s-sec`, tedy „první sekce za hlavičkou",
   jenže pořadí sekcí drží `SiteTemplates::all()` klíčem `sections` a pro Scénu
   zní hero, dates, about, usp, tags, gallery, pricing, contact - takže výjimku
   dostávaly VOLNÉ TERMÍNY, kde škodí (poslední řádek termínů doléhal na další
   sekci), a sekce O mně, kde je potřeba, ji nedostala. Změřeno na
   rekonstruovaném pořadí: #terminy mělo padding-bottom 0, #o-mne 72 px
   a pod postavou zbývalo 72 px prázdna.

   Poznat se to skoro nedalo: v ukázce šablony (`site-preview.php?demo=1`) jsou
   termíny i důvody prázdné, `SiteRenderer` je přeskočí a první sekcí za herem
   se náhodou stane právě O mně - v náhledu tedy všechno vypadalo správně
   a vada byla vidět jen na skutečném profilu. Pozici navíc mění sám DJ v portálu.

   `:has()` má specificitu svého nejsilnějšího argumentu, takže selektor je
   (0,3,0) a přebije `.site--scena .sc-sec` (0,2,0).

   PLATÍ TO PRO KAŽDOU FOTKU, NEJEN PRO VYŘEZANOU POSTAVU. Podmínka zněla
   `.sc-about__photo.is-cutout`, a `is-cutout` se nastaví jedině tehdy, když má
   profil vyplněnou postavu v hlavičce - to je 1 profil z 375. Všem ostatním
   (fotka se bere z profilovky nebo z galerie) zůstalo pod fotkou 72 px prázdna
   a fotka se na spodní hraně sekce nedotýkala ničeho. Vlastník to nahlásil
   snímkem Scény: postava má sedět bez mezery na sekci se službami.

   Rámovaná fotka tím nic neztrácí - rám ani stín `.sc-about__photo img`
   nekreslí (`border-radius: 0; box-shadow: none` níž), takže se odspodu chová
   stejně jako vyřezaná postava. */
.site--scena .sc-sec:has(.sc-about__photo) { padding-block-end: 0; }

/* Hlavička je `position: fixed`, takže by po kliknutí v menu překryla prvních
   80 px cílové sekce. Hero výjimku nepotřebuje - skáče se na začátek stránky. */
.site--scena .sc-sec[id],
.site--scena .s-sec[id] { scroll-margin-top: var(--sc-navh); }

/* ── Střídání pozadí ──────────────────────────────────────────────────────────
   NEPÍŠE se do šablon. Pořadí sekcí si DJ mění v portálu a SiteRenderer::section
   prázdné přeskakuje, takže napevno zapsaná třída paritu neuhlídá - ve výchozím
   pořadí vycházely #galerie i #cenik bílé a mezi jejich obsahem bylo 200 px
   prázdna bez jediného předělu. Právě proto musela být mezera tak velká: barva
   pozadí je jediné, co mezi sekcemi dělá hranu.

   PODMÍNKA, na které to stojí: každá vykreslená sekce kromě hera nese třídu
   `sc-sec`. Pak je index v `nth-of-type` vždy o jedna vyšší než v
   `nth-child(of .sc-sec)`, takže obě pravidla níž mají vždy stejnou fázi - pro
   libovolné pořadí i libovolnou podmnožinu sekcí. Kvůli tomu má Scéna vlastní
   templates/site/scena/dates.php; sdílený partial třídu `sc-sec` nemá.

   První pravidlo je záloha pro prohlížeče bez `of S`, druhá dvojice je přesnější. */
.site--scena .site__main > section:not(.sc-hero):nth-of-type(2n) {
    background: var(--sc-tint);
}
.site--scena .site__main > section:nth-child(odd of .sc-sec) { background: var(--sc-tint); }
.site--scena .site__main > section:nth-child(even of .sc-sec) { background: var(--sc-plocha); }

/* Ruční přepis odstínu. Musí stát AŽ ZA paritou a mít srovnatelnou specificitu -
   samotné `.sc-sec--tint` má jen (0,2,0) a nikdy by se neprosadilo. Je to únikový
   ventil, ne výchozí stav. */
.site--scena .site__main > section.sc-sec.sc-sec--tint { background: var(--sc-tint); }
.site--scena .site__main > section.sc-sec.sc-sec--plain { background: var(--sc-plocha); }

/* ── Nadpis sekce ─────────────────────────────────────────────────────────────
   Jedna sazba pro obě třídy. `.s-sec__title` chodí ze sdílených partialů a měl
   jiný proklad i prostrkání, což bylo na dvouřádkovém nadpisu vidět.

   Odstup pod nadpisem NENESE nadpis - drží ho blok rytmu na konci souboru, aby
   byl rytmus sekce na jednom místě a v jednom směru. */
.site--scena .sc-title,
.site--scena .s-sec__title {
    margin: 0;
    font-size: var(--sc-f-nadpis);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-align: center;
}
/* Barevná část nadpisu. background-clip na textu potřebuje průhlednou výplň. */
.site--scena .sc-grad {
    background: var(--sc-prechod);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* Ve vysokém kontrastu se `color: transparent` nepřebarvuje a barevné slovo
   z nadpisu by zmizelo celé - přeliv se tam proto vypne. */
@media (forced-colors: active) {
    .site--scena .sc-grad { background: none; color: CanvasText; }
}

/* Podnadpis sekce. `.s-sec__lead` z base.css má `opacity: .75` a zarovnání
   doleva, což pod vycentrovaným nadpisem vypadá jako nedopatření. */
.site--scena .s-sec__lead,
.site--scena .sc-seclead {
    max-width: 46rem; margin: 0 auto;
    font-size: var(--sc-f-md); line-height: 1.6; text-align: center;
    color: var(--sc-tlum); opacity: 1;
}

/* ── Verzálkový popisek ───────────────────────────────────────────────────────
   Jedna definice pro celou šablonu. Dřív pět velikostí (.68 až .8rem) a pět
   prostrkání (.04 až .08em) na deseti místech, přičemž tři z nich stojí
   v ceníku pod sebou na jedné obrazovce. */
.site--scena .sc-sluz__label,
.site--scena .sc-info__label,
.site--scena .sc-form__label,
.site--scena .sc-form__recaptitle,
.site--scena .sc-form__totallabel,
.site--scena .sc-calc__label,
.site--scena .sc-cenik__model,
.site--scena .sc-cenik__listh,
.site--scena .sc-cenik__fact dt,
.site--scena .sc-cal__wd {
    font-size: var(--sc-f-popisek);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--sc-ls-popisek);
    color: var(--sc-tlum);
}

/* ── Tlačítka ──────────────────────────────────────────────────────────────── */
.site--scena .sc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--sc-ctl); padding: 0 var(--sc-s6);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-pilulka);
    background: var(--sc-plocha); color: var(--sc-text);
    font: inherit; font-weight: 600; text-decoration: none;
    text-transform: uppercase; letter-spacing: .08em; font-size: var(--sc-f-xs);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.site--scena .sc-btn--primary {
    background: var(--sc-prechod);
    border-color: transparent; color: #fff;
}
.site--scena .sc-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--sc-stin-tlacitko);
}
.site--scena .sc-btn--block { width: 100%; }

/* ── Fixní hlavička ────────────────────────────────────────────────────────── */
.site--scena .sc-nav {
    position: fixed; inset: 0 0 auto; z-index: 50;
    height: var(--sc-navh);
    background: transparent;
    transition: background .2s, box-shadow .2s;
}
/* Třídu přidává scena.js po odrolování - nad fotkou má být hlavička neviditelná,
   níž na bílém pozadí by ale bílý text zmizel. */
.site--scena .sc-nav.is-stuck {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, .05);
    backdrop-filter: saturate(1.6) blur(6px);
}
.site--scena .sc-nav__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sc-s4);
    /* 1200 je pás OBSAHU, odsazení musí ležet vně. S `max-width: var(--w)`
       a `box-sizing: border-box` z base.css začínal obsah hlavičky o 20 px
       jinde než obsah sekcí - hlavička byla jediný prvek stránky mimo rastr. */
    max-width: calc(var(--w) + var(--pad) * 2);
    height: 100%; margin-inline: auto; padding-inline: var(--pad);
}
.site--scena .sc-nav__brand {
    /* Značka se smí zúžit, ale nesmí se roztahovat - místo v řádku patří menu.
       Deformaci loga přitom brání `object-fit: contain` níž. */
    flex: 0 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: .6rem;
    color: #fff; text-decoration: none; font-weight: 700;
    /* Textová varianta značky (profil bez loga) leží nad fotkou stejně jako
       menu vedle - potřebuje tedy stejné oddělení. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.site--scena .sc-nav.is-stuck .sc-nav__brand { color: var(--sc-text); text-shadow: none; }
.site--scena .sc-nav__mark {
    /* Textová značka drží stejnou výšku jako všechno ostatní v řadě - týká se
       většiny DJů, protože logo si zatím nahrál málokdo. */
    display: inline-grid; place-items: center;
    width: var(--sc-nav-el); height: var(--sc-nav-el);
    border-radius: var(--sc-r-sm);
    background: var(--sc-prechod);
    color: #fff; font-size: var(--sc-f-base); font-weight: 800; letter-spacing: .02em;
}
.site--scena .sc-nav__name { font-size: var(--sc-f-md); }

.site--scena .sc-nav__menu { display: flex; align-items: center; gap: var(--sc-s6); }
/* Nad fotkou je hlavička průhledná, takže bílý text leží přímo na snímku
   z akce. Stín ho od něj oddělí i na světlém místě fotky. */
/* 1,2 rem = 19,2 px, tedy přesně velikost menu na předloze djtomy.cz (změřeno
   v prohlížeči, weight 600). Dosavadních 1,05 rem bylo o osminu míň a proti
   logu to působilo drobně. */
.site--scena .sc-nav__menu a {
    color: #fff; text-decoration: none; font-weight: 600; font-size: 1.2rem;
    /* Bez tohoto se „O mně" na úzkém řádku zlomí na dva řádky a vysune celou
       hlavičku z osy. */
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    transition: color .15s;
}
/* Po najetí se barva MUSÍ zesvětlit, ne ztmavit. Dřív tu byl `--sc-akcent2`
   (#0e7490), což je tmavá tyrkysová - na tmavé fotce splynula s pozadím
   a odkaz při najetí prakticky zmizel. */
.site--scena .sc-nav__menu a:hover { color: var(--sc-akcent-svetly); }

/* Po odrolování je hlavička bílá: tam je to naopak - tmavý text bez stínu
   a po najetí sytá modrá. */
.site--scena .sc-nav.is-stuck .sc-nav__menu a { color: var(--sc-text); text-shadow: none; }
.site--scena .sc-nav.is-stuck .sc-nav__menu a:hover { color: var(--sc-akcent); }

/* Výchozí prstenec prohlížeče je nad fotkou proti bílému textu neviditelný,
   na bílé zafixované hlavičce zase splývá. Každý stav dostane vlastní barvu -
   hlavička je první prvek v pořadí tabulátoru na celé stránce. */
.site--scena .sc-nav__menu a:focus-visible,
.site--scena .sc-nav__burger:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px;
}
.site--scena .sc-nav.is-stuck .sc-nav__menu a:focus-visible,
.site--scena .sc-nav.is-stuck .sc-nav__burger:focus-visible {
    outline-color: var(--sc-akcent);
}

.site--scena .sc-nav__cta {
    /* Pevná výška, ne dopočtená z odsazení - stejnou hodnotu mají kolečka sítí
       i logo, takže všechny tři prvky sdílejí horní i dolní hranu. Dřív měly
       tři různé (logo 56, tlačítko 42, kolečka 34) a řada neseděla na ose. */
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--sc-nav-el); padding: 0 var(--sc-s5);
    border-radius: var(--sc-r-pilulka);
    background: var(--sc-prechod);
    color: #fff !important; font-weight: 700; text-transform: uppercase;
    /* Předloha má v pilulce 16 px; verzálky s prostrkáním potřebují o kousek
       míň, jinak je tlačítko širší než na předloze (tam 148 px). */
    letter-spacing: .06em; font-size: .95rem;
    /* Pilulka má vlastní podklad, stín z odkazů by na ní byl špinavý. */
    text-shadow: none;
}
.site--scena .sc-nav__cta:hover { filter: brightness(1.12); }
.site--scena .sc-nav__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Ikonky sítí za tlačítkem Kontakt. Patří k němu, ne do řady odkazů, takže drží
   poloviční odstup - a ten se počítá z proměnných, ne z ručně naladěného px. */
.site--scena .sc-nav__soc {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    gap: var(--sc-s2);
    margin-left: calc(var(--sc-s4) - var(--sc-s6));
}
/* Selektory nesou i `a`, jinak by je přebilo obecné `.sc-nav__menu a` - má
   stejnou specificitu, ale stojí v souboru výš.

   Vyplněná plocha místo průhledného obrysu: obrys rgba(255,255,255,.7) měl nad
   světlým místem fotky kontrast blízký 1:1 a kolečko zmizelo. Bílý glyf na
   akcentu dává 5,17:1. Vyplnění zároveň ruší důvod pro dvě sady přepínacích
   pravidel (is-stuck a mobil). */
.site--scena .sc-nav__menu a.sc-nav__soclink {
    display: inline-grid; place-items: center;
    width: var(--sc-nav-el); height: var(--sc-nav-el); padding: 0;
    border: 0; border-radius: var(--sc-r-pilulka);
    background: var(--sc-prechod);
    color: #fff; text-shadow: none;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .35);
    transition: filter .2s, box-shadow .2s;
}
.site--scena .sc-nav__menu a.sc-nav__soclink svg { display: block; width: 20px; height: 20px; }
.site--scena .sc-nav__menu a.sc-nav__soclink:hover { filter: brightness(1.12); }
/* Na bílé hlavičce už kolečko od pozadí oddělovat netřeba.

   BARVA GLYFU SE TU MUSÍ ZOPAKOVAT. Kolečko je vyplněné akcentem v obou
   stavech, takže glyf zůstává bílý pořád - jenže `.sc-nav.is-stuck
   .sc-nav__menu a` o řádek výš má o jednu třídu vyšší specificitu než
   pravidlo, které bílou nastavuje, a po odrolování ikonu přebarvilo na
   `--sc-text`. Tmavý glyf na sytém akcentu má kontrast 1,6:1, takže ikona
   po odrolování prakticky zmizela. */
.site--scena .sc-nav.is-stuck .sc-nav__menu a.sc-nav__soclink {
    box-shadow: none;
    color: #fff;
}
/* Totéž po najetí myší: `is-stuck ... a:hover` je zase specifičtější než
   `a.sc-nav__soclink`, takže by se glyf na akcentu obarvil na modrou. */
.site--scena .sc-nav.is-stuck .sc-nav__menu a.sc-nav__soclink:hover { color: #fff; }

.site--scena .sc-nav__burger {
    /* `flex: 0 0 auto` je nutné - bez něj ho široké logo scvrkne pod dotykový
       cíl. Je to na mobilu jediná cesta do menu. */
    display: none; flex: 0 0 auto;
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sc-s1);
    width: var(--sc-nav-el); height: var(--sc-nav-el); padding: 0;
    background: none; border: 0; cursor: pointer;
}
.site--scena .sc-nav__burger span {
    /* Mezeru drží `gap` na rodiči, ne margin - sousední bloky si marginy
       slévají, takže zapsané `margin: 4px auto` dělalo 4 px, ne 8. */
    display: block; width: 22px; height: 2px; margin: 0;
    background: #fff; border-radius: var(--sc-r-pilulka); transition: background .2s;
}
.site--scena .sc-nav.is-stuck .sc-nav__burger span { background: var(--sc-text); }

/* ── Značka v hlavičce ────────────────────────────────────────────────────────
   Logo je průhledné PNG, které si nahrává DJ - může být bílé i tmavé. Nad fotkou
   je hlavička tmavá, po odrolování světlá, takže jedna grafika v jednom ze stavů
   zmizí. Podklad proto dostane jen ta, která by splynula. */
.site--scena .sc-nav__logobox {
    display: inline-flex; align-items: center;
    max-width: 100%; min-width: 0;
    /* Odsazení destičky je STEJNÉ v obou stavech. Když se přepínalo, logo se
       při zafixování hlavičky posunulo o 10 px do strany a o 5 px dolů - značka
       se při rolování rozjela. Ze stejného důvodu není `padding` v `transition`:
       mění rozvržení, ne barvu. */
    padding: .3rem .65rem;
    border-radius: var(--sc-r-md);
    background: transparent; box-shadow: none;
    transition: background .2s, box-shadow .2s;
}
/* Pevná výška, dopočítaná šířka - přesně jak si to vyžádal vlastník.

   Předloha djtomy.cz má viditelnou kresbu loga 281x58 px, tedy skoro totéž co
   dosavadních 283x56 tady. Jenže její logo je ikona plus název plus podtitul na
   dvou řádcích, takže má při stejné výšce boxu poloviční výšku písmen, kdežto
   tady jde o jednořádkový nápis. Optická váha byla proto skoro dvojnásobná.
   Řeší se to z obou stran: logo klesá na 44 px a menu, tlačítko i kolečka
   naopak rostou z 15,2/42/34 na hodnoty blíž předloze (19,2/50/44).

   `max-width` je povinné: bez něj je šířka čistým násobkem poměru stran
   nahraného souboru a panoramatické logo 10:1 by při 44 px dalo 440 px
   a vytlačilo menu. `object-fit: contain` je povinné taky - `max-width: 100%`
   z base.css by jinak logo při zúžení řádku smáčklo do stran, výška by zůstala
   pevná a poměr stran by se ztratil. */
.site--scena .sc-nav__logo {
    display: block;
    height: var(--sc-nav-el);
    width: auto;
    max-width: var(--sc-logo-max);
    object-fit: contain;
    object-position: center;
}
/* Tmavé logo nad fotkou: světlá destička. Po odrolování je hlavička sama světlá,
   takže podklad zmizí a logo splyne s panelem. */
.site--scena .sc-nav__logobox.is-dark {
    background: rgba(255, 255, 255, .95);
    box-shadow: var(--sc-stin-desticka);
}
.site--scena .sc-nav.is-stuck .sc-nav__logobox.is-dark {
    background: transparent; box-shadow: none;
}
/* Světlé logo je nad fotkou čitelné samo; destičku potřebuje až na bílé hlavičce. */
.site--scena .sc-nav.is-stuck .sc-nav__logobox.is-light {
    background: var(--sc-tmava); box-shadow: var(--sc-stin-desticka);
}

/* ── Sbalené menu ─────────────────────────────────────────────────────────────
   Blok stojí AŽ ZA pravidly loga SCHVÁLNĚ: `.site--scena .sc-nav__logo` má
   stejnou specificitu jako pravidlo uvnitř @media, takže by ho výš v souboru
   mobilní varianta nepřepsala. Přesně to se dělo dosud - mobilní výška loga
   40 px byla mrtvá a při 360 px zabíralo logo 265 px, tedy 74 % displeje.

   Zlom je 960, ne 760: rozbalený řádek se do hlavičky nevešel už kolem 840 px
   a protože je `.sc-nav` fixed, přetečení neudělalo posuvník - jen se tiše
   překrylo. Při testu na 1440 a 375 px to nebylo vidět. */
@media (max-width: 960px) {
    /* Mění se JEN výška prvků hlavičky. `--sc-ctl` (formuláře) se nesmí sáhnout,
       jinak spadnou všechna pole pod dotykový cíl. */
    /* Strop šířky drží stejný poměr jako na desktopu (230/44 i 210/40 je 5,2),
       takže se šířkou omezí přesně ta samá panoramatická loga a běžný nápis
       si i tady zachová plnou výšku. Při 180 px se ořezávala obě loga v katalogu,
       takže z nich na telefonu bylo vidět míň než 40 px. */
    .site--scena { --sc-nav-el: 40px; --sc-logo-max: 210px; }

    .site--scena .sc-nav__burger { display: flex; }
    /* Menu se sbalí pod hlavičku. Bílé pozadí je nutné - položky mají nad
       fotkou bílý text a na průhledném panelu by zmizely. */
    .site--scena .sc-nav__menu {
        position: absolute; inset: var(--sc-navh) 0 auto; z-index: 49;
        flex-direction: column; align-items: stretch; gap: var(--sc-s1);
        /* Strop výšky a vlastní rolování: panel je `absolute` uvnitř `fixed`
           hlavičky, takže se u šesti položek nedaly spodní odrolovat vůbec.
           Dvojí max-height je záměr - první je záloha pro prohlížeče bez dvh. */
        max-height: calc(100vh - var(--sc-navh));
        max-height: calc(100dvh - var(--sc-navh));
        overflow-y: auto; overscroll-behavior: contain;
        padding: var(--sc-s2) var(--pad) var(--sc-s4);
        background: var(--sc-plocha); box-shadow: var(--sc-stin);
        display: none;
    }
    .site--scena .sc-nav__menu.is-open { display: flex; }
    /* Sbalený panel je bílý VŽDY, i když hlavička ještě není `is-stuck`. Stín
       ani světle modrý hover z nadfotkového stavu se sem proto nehodí - modrá
       #7dd3fc má na bílé 1,67:1 a zmizela by úplně stejně, jako mizela tmavá
       tyrkysová nad fotkou. */
    .site--scena .sc-nav__menu a {
        color: var(--sc-text); padding: var(--sc-s3) 0; text-shadow: none;
    }
    .site--scena .sc-nav__menu a:hover { color: var(--sc-akcent); }
    .site--scena .sc-nav__menu a:focus-visible { outline-color: var(--sc-akcent); }
    .site--scena .sc-nav__cta { align-self: stretch; margin-top: var(--sc-s2); }
    /* Ve sbaleném menu zůstanou ikonky vedle sebe - ve sloupci by zabraly dva
       zbytečné řádky. Přebarvování na šedý obrys zaniká: vyplněný přeliv je
       čitelný nad fotkou i na bílém panelu. */
    .site--scena .sc-nav__soc {
        display: flex; justify-content: center; gap: var(--sc-s3);
        margin: var(--sc-s4) 0 0; padding-top: var(--sc-s4);
        border-top: 1px solid var(--sc-line);
    }
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.site--scena .sc-hero {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    /* Horní odsazení je výška hlavičky plus vzduch, ne natvrdo zapsaný součet.
       Dřív tu bylo 120/80 px: skutečný vzduch nad textem byl 120-80 = 40 px
       a pod ním 80, takže text seděl nad optickým středem. A protože mobilní
       blok hero nezmiňoval, drželo 120 px i na telefonu. */
    min-height: 65vh;
    padding: calc(var(--sc-navh) + var(--sc-sec-y)) var(--pad) var(--sc-sec-y);
    text-align: center; color: #fff;
    background: var(--sc-tmava);   /* podklad, kdyby fotka chyběla */
}
/* Fotka i závoj drží `inset: 0`, takže z hera nemají jak přetéct a `overflow`
   tu být nemusí. Musí být pryč: ustřihl by vyskakovací kalendář kalkulačky,
   která stojí u spodní hrany. */
.site--scena .sc-hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Video na pozadí. Obal MUSÍ být: `object-fit` na iframe neplatí, takže se
   poměr 16:9 drží ručně přetažením přes hranu - a hero schválně nemá
   `overflow: hidden` (ustřihlo by kalendář kalkulačky), takže by přetečení
   propadlo na <body> a udělalo vodorovný posuvník celé stránky. Ořez proto
   dělá obal, který je jen tak velký jako hero. */
.site--scena .sc-hero__video {
    position: absolute; inset: 0; overflow: hidden;
}
.site--scena .sc-hero__video iframe {
    position: absolute; inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    /* Vezme se ten z rozměrů, který plochu pokryje; druhý dopočítá poměr. */
    width: 100%; height: 56.25vw;
    min-width: 177.78vh; min-height: 100%;
    border: 0;
    /* Bez tohohle by iframe polykal kliknutí do kalkulačky, která na něm leží. */
    pointer-events: none;
}
/* Černý závoj, ne barevný přeliv: fotky z akcí jsou samy pestré a gradient
   přes ně dělá kaši. 60 % je hranice, kde bílý text drží nad 7:1. */
.site--scena .sc-hero__veil {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .6);
}
.site--scena .sc-hero__text {
    position: relative; max-width: var(--w);
    /* Flexovou položku nelze srazit pod min-content, takže dlouhá jednoslovná
       přezdívka DJe by roztáhla hero přes celé okno. A protože hero schválně
       nemá `overflow: hidden`, propadlo by přetečení až na <body>. */
    min-width: 0; overflow-wrap: break-word;
}
.site--scena .sc-hero__name {
    margin: 0;
    font-size: clamp(2.6rem, 8vw, 5rem);
    font-weight: 800; line-height: 1.1; text-transform: uppercase;
    letter-spacing: .01em;
}
.site--scena .sc-hero__claim {
    margin: var(--sc-s4) 0 0;
    font-size: clamp(1.1rem, 2.6vw, 2rem);
    font-weight: 600; line-height: 1.35; color: var(--sc-na-fotce);
}

/* ── Volné termíny ────────────────────────────────────────────────────────────
   Pilulky v barvách šablony. Sdílené `.s-date` z base.css mají obrys
   `currentColor`, tedy tady skoro černý - vypadaly těžší než skutečná tlačítka
   na stránce, a je to druhá věc, kterou návštěvník uvidí. */
.site--scena .sc-dates {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-s2);
    margin: 0; padding: 0; list-style: none;
}
.site--scena .sc-date {
    display: inline-flex; align-items: baseline; gap: var(--sc-s1);
    padding: var(--sc-s2) var(--sc-s4);
    border: 1px solid transparent; border-radius: var(--sc-r-pilulka);
    background: var(--sc-akcent-plocha); color: var(--sc-akcent-text);
    text-decoration: none; font-size: var(--sc-f-sm); font-weight: 600;
    transition: background .15s;
}
.site--scena .sc-date:hover { background: var(--sc-akcent-obrys); }
/* Zvýhodněný termín. Barva sama informaci nenese, proto i silnější rámeček.
   Odsazení se o šířku rámečku zmenší, aby pilulka nevyskočila z řady. */
.site--scena .sc-date--pref {
    border-color: var(--sc-akcent); border-width: 2px;
    padding: calc(var(--sc-s2) - 1px) calc(var(--sc-s4) - 1px);
}
.site--scena .sc-date__price {
    color: var(--sc-akcent); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── O mně ─────────────────────────────────────────────────────────────────── */
.site--scena .sc-about {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; gap: var(--sc-s8);
}
/* Bez portrétu zůstal v dvousloupcové mřížce jediný potomek a pravá polovina
   sekce byla prázdná. `has['about']` závisí jen na biu, ne na fotce, takže je
   ten stav reálně dosažitelný. */
.site--scena .sc-about--solo { grid-template-columns: minmax(0, 1fr); }
/* POSTAVA STOJÍ NA SPODNÍ HRANĚ SEKCE, netrčí uprostřed. Mřížka je
   `align-items: center`, takže vynulované odsazení sekce (výjimka `:has()` výš)
   samo o sobě nestačí: když je textový sloupec vyšší než fotka, zůstane pod
   fotkou mezera - naměřeno 130 px na ukázkovém obsahu. Text se dál centruje,
   mění se jen fotka. V jednom sloupci (do 900 px) je každá položka vlastním
   řádkem, takže tam pravidlo nedělá nic. */
.site--scena .sc-about__photo { align-self: end; }
/* Bez rámu a bez stínu. DJové sem dávají vyřezané postavy na průhledném
   pozadí, jenže příznak `is-cutout` se nastaví jen podle toho, že fotka přišla
   z pole „Postava v hlavičce" - když tutéž grafiku nahrají jako profilovku,
   dostala rám a stín, které kolem průhledné postavy nakreslily obdélník. */
.site--scena .sc-about__photo img {
    display: block; width: 100%; height: auto;
    border-radius: 0; box-shadow: none;
}
/* Vyřezaná postava nemá pozadí ani rám - stín by kolem ní udělal obdélník.

   Strop 580 px je změřený na předloze djtomy.cz: její postava tam má 438x571
   (viewport 2328). Dosavadních 440 px bylo o třetinu míň, takže vedle stejně
   dlouhého odstavce vypadala drobně. Vazba na výšku okna zůstává, jen volnější
   (70 místo 52 vh) - na nízkém notebooku se postava pořád vejde do sekce
   a nevytlačí text pod ohyb. */
.site--scena .sc-about__photo.is-cutout img {
    border-radius: 0; box-shadow: none;
    max-height: min(70vh, 580px); width: auto; margin-inline: auto;
}
.site--scena .sc-lead {
    /* 1.7 místo 1.8: sousední `.sc-usp__text` má 1.6 a dva souvislé texty od DJe
       pod sebou měly viditelně jinou hustotu sazby. */
    font-size: var(--sc-f-md); line-height: 1.7; color: var(--sc-tlum);
}
.site--scena .sc-lead p { margin: 0 0 var(--sc-s4); }
/* Reset `.s-prose :last-child` z base.css má specificitu (0,2,0), pravidlo výš
   (0,2,1) - poslední odstavec si proto margin zdola nechával a s marginem
   tlačítka (inline-flex, marginy nekolabují) se sečetl. */
.site--scena .sc-lead > :last-child { margin-bottom: 0; }
.site--scena .sc-about__text .sc-btn { margin-top: var(--sc-s5); }

/* ── Řada důvodů ───────────────────────────────────────────────────────────── */
.site--scena .sc-usp {
    /* `auto-fit`, ne `auto-fill`: auto-fill nechá stát prázdné stopy, takže se
       tři důvody vešly do prvních tří ze šesti a schoulily se k levému okraji -
       vpravo zbývalo 500 px prázdna. auto-fit prázdné stopy sbalí, takže se
       položky vždy rozprostřou po celé šířce. */
    display: grid; gap: var(--sc-s5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    text-align: center;
}
/* Strop šířky je protějšek auto-fit: při JEDINÉM důvodu by se stopa roztáhla na
   celých 1200 px a vznikl by vycentrovaný odstavec přes celou obrazovku.
   `array_slice` v usp.php hlídá horní mez, dolní ne. Při třech a víc položkách
   se strop neuplatní (stopa je pak užší), takže rozprostření neomezuje. */
.site--scena .sc-usp__item { min-width: 0; max-width: 28rem; margin-inline: auto; }
.site--scena .sc-usp__ico {
    /* `display: block` srazí prostor pro dolní dotažnice pod řádkovým <svg>
       a teprve pak `margin auto` opravdu centruje. */
    display: block; width: 44px; height: 44px;
    margin: 0 auto var(--sc-s3);
    color: var(--sc-akcent);
}
.site--scena .sc-usp__title { margin: 0 0 var(--sc-s1); font-size: var(--sc-f-md); font-weight: 700; }
.site--scena .sc-usp__text { margin: 0; font-size: var(--sc-f-sm); color: var(--sc-tlum); line-height: 1.6; }

/* ── Moje služby ──────────────────────────────────────────────────────────────
   Systém se dá převyprávět jednou větou: KARTA JE PŘEDMĚT, PILULKA JE VLASTNOST.
   Velikost písma, řádkování, hlavička skupiny i levá zarážka jsou u obou úrovní
   SHODNÉ - o úroveň se hlásí tvar a plocha. Rozdíl proto drží i tehdy, když má
   DJ v jedné skupině dvě položky a ve druhé dvanáct.

   Dřív to byly dvě nesouvisející smyčky s vlastní sadou tříd (karty .98rem/600,
   pilulky .85rem/500 na střed), takže jedna sekce vypadala jako slepenec ze dvou
   šablon. Nadpisy skupin jsou nově VLEVO u všech čtyř stejně: mřížka karet
   i řádek pilulek začínají u levé hrany obsahu, takže nadpis na střed nad nimi
   neměl k čemu se vztáhnout - nad dvěma „Jazyky" visel uprostřed prázdna.
   Nadpis celé sekce zůstává na střed jako u ostatních sekcí.

   Není tu hover ani `cursor: pointer` - položky nejsou odkazy ani tlačítka. */
.site--scena .sc-sluz {
    display: grid;
    /* Jeden sloupec, který nesmí přerůst obal - `auto` by se roztáhl podle
       nejdelšího slova a vysunul stránku do šířky. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sc-s6);
}
/* `.sc-sluz__grp` je jen obal skupiny kvůli `gap` - vlastní styl nemá a nemá ho
   dostat. Jakmile by ho měl, přestane platit, že jsou skupiny zaměnitelné. */

/* Hlavička skupiny: barevná čárka, popisek, vlas dotažený k pravé hraně.
   Všechny čtyři ji mají stejnou, takže sekce čte jako jeden seznam o čtyřech
   oddílech, ne jako čtyři bloky, které spolu náhodou sousedí.
   Velikost, tučnost a barvu bere ze sdíleného verzálkového popisku výš. */
.site--scena .sc-sluz__label {
    display: flex; align-items: center; gap: var(--sc-s3);
    /* `margin-block`, ne zkratka `margin` - viz komentář u `.sc-sec`. */
    margin-block: 0 var(--sc-s4);
    line-height: 1.3;
}
.site--scena .sc-sluz__label::before {
    content: '';
    flex: 0 0 auto; width: 1.75rem; height: 3px;
    border-radius: var(--sc-r-pilulka);
    background: var(--sc-prechod);
}
/* Vlas doprava. Je to dekorace, proto pseudoprvek - odečítač nemá co číst. */
.site--scena .sc-sluz__label::after {
    content: ''; flex: 1 1 auto; height: 1px; background: var(--sc-line);
}

.site--scena .sc-sluz__list { margin: 0; padding: 0; list-style: none; }

/* Úroveň 1 - mřížka stejně širokých karet. `auto-fill`, ne `auto-fit`: auto-fit
   sbalí prázdné sloupce, takže jediná služba by se roztáhla přes celých 1200 px
   a vypadala jako panel. Kratší poslední řádek je záměrně nerovný - roztažení
   posledních karet by tvrdilo, že jsou důležitější. */
.site--scena .sc-sluz__list--karty {
    display: grid; gap: var(--sc-s3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
/* Úroveň 2 - volný tok, zarovnání doleva. Nad pilulkami stojí popisek u levé
   hrany a pod nimi další skupina, takže vystředěný chumel rozbíjel svislou osu
   sekce a u dvou „Jazyků" vypadal jako omyl. */
.site--scena .sc-sluz__list--pilulky {
    display: flex; flex-wrap: wrap; gap: var(--sc-s2);
}

/* Společná typografie obou úrovní - tady je jednota vidět nejvíc. */
.site--scena .sc-sluz__item { font-size: var(--sc-f-base); line-height: 1.35; }
/* Bez `min-width: 0` by flex delší název místo zalomení protlačil ze sloupce. */
.site--scena .sc-sluz__text { min-width: 0; overflow-wrap: break-word; }

/* Karta. Bílá výplň s vlasovou hranou drží i tehdy, když sekce po přehození
   pořadí v portálu skončí na bílém podkladu. Stín je na hranici viditelnosti
   schválně: dvanáct výrazných karet by z tiché sekce udělalo šachovnici.
   `align-items: flex-start` drží fajfku u prvního řádku, když se název zalomí. */
.site--scena .sc-sluz__list--karty .sc-sluz__item {
    display: flex; align-items: flex-start; gap: var(--sc-s2);
    padding: var(--sc-s3) var(--sc-s4);
    background: var(--sc-plocha);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-md);
    box-shadow: var(--sc-stin-1);
    color: var(--sc-text); font-weight: 600;
}
/* Destička s fajfkou. NENÍ to tematická ikona - ta by u všech položek musela být
   stejná, takže by nenesla informaci (přesně proto tu dřív žádná nebyla). Je to
   odrážka, kterou sebralo `list-style: none`, se sdělením „tohle je v nabídce".
   `box-sizing: border-box` je nutné - kreslítko má viewBox 24x24 a musí se vejít
   do plochy zmenšené o odsazení. */
.site--scena .sc-sluz__ico {
    flex: none; box-sizing: border-box;
    width: 1.45rem; height: 1.45rem; padding: .28rem;
    border-radius: 8px;
    background: rgba(37, 99, 235, .1);
    color: var(--sc-akcent);
}

/* Pilulka. Plochá výplň bez hrany, bez stínu a bez značky - vlastnost, ne
   předmět. Modrá je stejná jako u ikonek v kontaktu, takže do šablony nepřibývá
   nová barva. Kontrast 11:1. */
.site--scena .sc-sluz__list--pilulky .sc-sluz__item {
    padding: var(--sc-s2) var(--sc-s4);
    border-radius: var(--sc-r-pilulka);
    background: var(--sc-akcent-plocha); color: var(--sc-akcent-text);
    font-weight: 500;
    /* Jednoslovný žánr bez mezer by jinak přetekl. */
    overflow-wrap: break-word;
}

/* ── Galerie ───────────────────────────────────────────────────────────────── */
.site--scena .sc-gal {
    /* 22rem, ne 15: komentář v gallery.php slibuje mřížku 3x3, ale s 15rem
       vycházely na 1200 px čtyři sloupce. `auto-fill` navíc drží dlaždici
       v rastru i tehdy, když má DJ jedinou fotku. */
    display: grid; gap: var(--sc-s3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.site--scena .sc-gal__item {
    position: relative;
    margin: 0; padding: 0;
    /* 4px rohy vypadaly prakticky ostře a devět fotek je největší souvislá
       plocha stránky - sekce působila jako vložená z jiné šablony. */
    aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--sc-r-md);
    /* Žádný rámeček. Dlaždice fotky je <button>, takže od prohlížeče dostane
       `border: 2px outset ButtonBorder` a `appearance: button` - ten si na
       Safari domaluje vlastní obrys i přes `border: 0`. */
    border: 0;
    appearance: none; -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    /* Podklad byl `--sc-tint` a proti bílé sekci se choval jako světlý obrys. */
    background: none;
    /* `pointer`, ne `zoom-in`: lupa je slabší signál a spousta lidí ji z jiných
       webů nezná, takže nebylo poznat, že se na dlaždici dá kliknout. */
    cursor: pointer;
}
.site--scena .sc-gal__item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .3s;
}
.site--scena .sc-gal__item:hover img { transform: scale(1.04); }
/* Prstenec dovnitř: po zavření lightboxu se fokus vrací na dlaždici a vně by
   vypadal jako trvalý rámeček kolem fotky. */
.site--scena .sc-gal__item:focus-visible {
    outline: 3px solid var(--sc-akcent); outline-offset: -3px;
}
/* Fotka i video mají `pointer` z pravidla výš - obojí je klikací dlaždice. */
.site--scena .sc-gal__play {
    position: absolute; inset: 0; display: grid; place-items: center;
}
.site--scena .sc-gal__play svg { width: 56px; height: 56px; }
/* Barvy přehrávače patří sem, ne do atributů v šabloně - v značkování by je
   žádná záměna tokenů nenašla. */
.site--scena .sc-gal__play svg circle {
    fill: rgba(15, 23, 42, .45); stroke: rgba(255, 255, 255, .85);
}
.site--scena .sc-gal__play svg polygon { fill: var(--sc-plocha); }

/* ── Ceník ───────────────────────────────────────────────────────────────────
   Stejná struktura jako v šabloně Klub, jen ve světlé sazbě Scény. Do minule
   sem sáhla nula pravidel, takže sekce jela na sdíleném `_partials/pricing.php`
   v systémovém stylu a jako jediná vypadala jako cizí těleso. */
.site--scena .sc-cenik {
    display: grid; gap: var(--sc-s5);
    /* `min(100%, 15rem)` - jediná mřížka v souboru, která pojistku neměla.
       Pod 240 px obsahové šířky (náhled v portálu, zvětšení na 200 %) přerostla
       sekci a udělala vodorovný posuvník.

       PRÁZDNÉ MÍSTO VZNIKALO DVĚMA ZPŮSOBY A OBA SE ŘEŠÍ TADY.

       1. `auto-fill` DRŽÍ prázdné sloupce. Na mřížce 1200 px vyrobil čtyři
          stopy po 282 px, i když měl DJ naceněné dva typy akcí - vpravo tak
          zbylo 612 px prázdna, tedy polovina řady. `auto-fit` prázdné stopy
          sbalí, takže řada končí za poslední kartou.
       2. Roztažení do `1fr` by ale u jediné karty udělalo pruh přes celou
          šířku a u neúplné poslední řady by se prázdno vrátilo. Strop
          `20rem` tomu brání a `justify-content: center` zbylé místo
          rozdělí na obě strany - to čte oko jako vystředěnou skupinu,
          ne jako díru. Změřeno: nad 1280 px tři karty v řadě a 96 px
          po stranách, na 768 px dvě karty a 23 px. Pod 600 px přebírá
          řízení media query na konci souboru (jeden sloupec přes celou
          šířku), takže se strop na mobilu neuplatní vůbec.

       `align-items: start` řeší svislé prázdno: se `stretch` byla každá karta
       vysoká jako nejvyšší v řadě, takže „Ples / bál" (pevná cena, bez
       balíčků) měl pod obsahem 182 px bílé plochy. Karta je teď vysoká podle
       toho, co v ní je. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), var(--sc-cenik-max, 20rem)));
    justify-content: center;
    align-items: start;
}

/* STROP ŠÍŘKY SE ŘÍDÍ POČTEM KARET. Jeden pevný strop je kompromis, který
   nesedí ani jedné straně: co je akorát pro sedm naceněných typů, nechá
   u dvou kolem karet zbytečně široký lem. Počet se pozná selektorem
   `:has(> :nth-child(N):last-child)`, tedy „N-tá karta je zároveň
   poslední".

   Hodnoty jsou dopočítané k obsahové šířce 1200 px a mezeře `--sc-s5`,
   ať se počet sloupců nezlomí o pár pixelů: tři karty po 23rem se do řady
   ještě vejdou, po 24rem už ne a spadly by na dvě řady.

   Prohlížeč bez `:has()` pravidla přeskočí a zůstane mu výchozích 20rem -
   tedy dnešní stav, ne rozbité rozvržení. */
/* Strop je MENŠÍ z dvou čísel: kolik karta smí mít, a kolik jí zbude, když
   se má do řady vejít celý ten počet. Bez druhé části se strop choval jako
   pevná šířka: na 1024 px se dvě karty po 32rem do řady nevešly, `auto-fit`
   sloupec ubral a karty se poskládaly pod sebe s lemem 226 px - tedy přesně
   to prázdno, které se tu odstraňuje. */
.site--scena .sc-cenik:has(> :first-child:last-child) { --sc-cenik-max: min(38rem, 100%); }
.site--scena .sc-cenik:has(> :nth-child(2):last-child) {
    --sc-cenik-max: min(32rem, calc((100% - var(--sc-s5)) / 2));
}
.site--scena .sc-cenik:has(> :nth-child(3):last-child) {
    --sc-cenik-max: min(23rem, calc((100% - 2 * var(--sc-s5)) / 3));
}
.site--scena .sc-cenik__card {
    /* Odstupy mezi bloky karty nese `gap`, ne sedm různých marginů (dřív 4,8 až
       14,4 px). Ve třech kartách vedle sebe se tak řádky srovnají. */
    display: flex; flex-direction: column; gap: var(--sc-s3);
    padding: var(--sc-s5);
    background: var(--sc-plocha);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-lg);
    box-shadow: var(--sc-stin);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.site--scena .sc-cenik__card:hover {
    transform: translateY(-2px);
    border-color: var(--sc-akcent);
    box-shadow: var(--sc-stin-2);
}

.site--scena .sc-cenik__head { margin: 0; }
.site--scena .sc-cenik__name {
    margin: 0; font-size: var(--sc-f-lg); font-weight: 700; line-height: 1.25;
    color: var(--sc-text); overflow-wrap: break-word;
}
.site--scena .sc-cenik__model { display: inline-block; margin-top: var(--sc-s1); }

/* Částka a jednotka jsou dva prvky, ne jeden řetězec - „2 000 Kč" tak může být
   velké a barevné, kdežto „/ hod" drobné a tlumené na téže účaře. Přeliv na
   částce dělá sdílená třída `.sc-grad` ve značkování, ne čtvrtá kopie triku
   s background-clip: kdyby v jedné z kopií chyběla prefixovaná varianta, cena
   by zmizela úplně (`color: transparent` bez funkčního oříznutí pozadí). */
.site--scena .sc-cenik__amount {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sc-s1);
    margin: 0;
}
.site--scena .sc-cenik__num {
    font-size: var(--sc-f-2xl); font-weight: 700; line-height: 1.05;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.site--scena .sc-cenik__unit { font-size: var(--sc-f-sm); color: var(--sc-tlum); }

.site--scena .sc-cenik__note {
    /* S `gap: var(--sc-s3)` na kartě je nad linkou i pod ní shodných 12 px -
       dosud 8 nad a 11,2 pod, takže se linka opticky sesouvala nahoru. */
    margin: 0; padding-top: var(--sc-s3);
    border-top: 1px solid var(--sc-line);
    font-size: var(--sc-f-xs); color: var(--sc-tlum);
}

.site--scena .sc-cenik__pkgs {
    display: grid; gap: var(--sc-s2); margin: 0; padding: 0; list-style: none;
}
.site--scena .sc-cenik__pkg {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sc-s3);
    padding: var(--sc-s3) var(--sc-s4);
    background: var(--sc-tint); border-radius: var(--sc-r-md);
}
.site--scena .sc-cenik__pkgname {
    display: grid; gap: .15rem; min-width: 0;
    font-size: var(--sc-f-sm); font-weight: 600; overflow-wrap: break-word;
}
.site--scena .sc-cenik__pkgdesc {
    font-size: var(--sc-f-xs); font-weight: 400; color: var(--sc-tlum); line-height: 1.45;
}
.site--scena .sc-cenik__pkgprice {
    white-space: nowrap; color: var(--sc-akcent); font-variant-numeric: tabular-nums;
}

/* Minimální objednávka není poznámka, ale podmínka - dostane vlastní plochu.
   `margin-top: auto` ji drží na dně karty. Od chvíle, kdy mřížka srovnává karty
   na `start`, je karta vysoká podle obsahu a volné místo pod ním nezbývá, takže
   auto vyjde nula a odstup drží `gap` karty. Pravidlo tu ZŮSTÁVÁ pro případ,
   že by karta výšku dostala odjinud (ruční `min-height`, budoucí `stretch`) -
   bez něj by se box zvedl k obsahu a v řadě by seděl pokaždé jinde. */
.site--scena .sc-cenik__min {
    margin: 0; margin-top: auto; width: 100%;
    padding: var(--sc-s3) var(--sc-s4);
    background: var(--sc-akcent-plocha);
    border: 1px solid var(--sc-akcent-obrys); border-radius: var(--sc-r-md);
    font-size: var(--sc-f-xs); color: var(--sc-akcent-text);
}
.site--scena .sc-cenik__min strong {
    color: var(--sc-akcent); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Doprava a záloha. Pricing::publicView je počítá vždycky, ceník je zahazoval -
   přitom jsou to čísla, kvůli kterým lidé píšou, že „cena nesedí".

   Odstup shora přebírá blok rytmu na konci souboru: zkratka `margin: X 0 0` tu
   boční okraje vynulovala a celý pás vyjížděl z kontejneru o 92 px vlevo. */
.site--scena .sc-cenik__facts {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-s3);
    margin: 0; padding: 0;
}
.site--scena .sc-cenik__fact {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sc-s2);
    /* Flexová položka má výchozí minimum min-content. Bez tohoto by pilulka
       s dlouhým nezlomitelným popiskem pásma přerostla sekci a přetečení by
       propadlo na <body> - vodorovný posuvník celé stránky. */
    min-width: 0; max-width: 100%;
    padding: var(--sc-s2) var(--sc-s4);
    /* Bílá pilulka na bílé sekci měla kontrast obrysu 1,23:1 a nebyla vidět;
       vedle přitom stojí `.sc-cenik__pkg` s podkladem --sc-tint. */
    background: var(--sc-tint);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-pilulka);
}
.site--scena .sc-cenik__fact dt { white-space: nowrap; }
.site--scena .sc-cenik__fact dd {
    margin: 0; min-width: 0;
    font-size: var(--sc-f-sm); font-weight: 600; overflow-wrap: anywhere;
}

.site--scena .sc-cenik__lists {
    display: grid; gap: var(--sc-s5); margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.site--scena .sc-cenik__list {
    padding: var(--sc-s5);
    background: var(--sc-plocha);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-lg);
    box-shadow: var(--sc-stin);
}
.site--scena .sc-cenik__listh { margin: 0 0 var(--sc-s3); }
.site--scena .sc-cenik__items {
    display: grid; gap: var(--sc-s2); margin: 0; padding: 0; list-style: none;
}
.site--scena .sc-cenik__items li {
    position: relative; padding-left: 1.5rem; font-size: var(--sc-f-base);
}
/* Fajfka místo odrážky. Kreslí se ze dvou linek, takže nepotřebuje SVG ani
   font s ikonami - a nezávisí na tom, jaké písmo prohlížeč použije. */
.site--scena .sc-cenik__items li::before {
    content: ''; position: absolute; left: .25rem; top: .42rem;
    width: .35rem; height: .62rem;
    border: solid var(--sc-akcent); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.site--scena .sc-cenik__items--paid li {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-s3);
}
.site--scena .sc-cenik__items--paid strong {
    white-space: nowrap; color: var(--sc-akcent); font-variant-numeric: tabular-nums;
}
.site--scena .sc-cenik__agree { color: var(--sc-tlum); font-weight: 500; }

.site--scena .sc-cenik__foot {
    /* Odstup shora nese blok rytmu; zkratka `margin: 1.5rem 0 0` tu vynulovala
       boční okraje a věta seděla o 92 px vlevo proti nadpisu sekce. */
    margin: 0; text-align: center; font-size: var(--sc-f-xs); color: var(--sc-tlum);
}

/* ── Kontakt ───────────────────────────────────────────────────────────────── */
.site--scena .sc-contact {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--sc-s8); align-items: start;
}
/* Nadpis kontaktu stojí uvnitř sloupce, ne nad sekcí - proto je menší než
   `.sc-title`. Odstupy ale drží stejnou škálu; dosud měl 8 px pod sebou, což je
   míň než řádkový krok perexu, takže nadpis a perex splývaly v jeden odstavec.
   Zároveň měl 1.9rem, tedy přesně spodní mez clampu sekčních nadpisů: pod
   676 px šířky okna byl stejně velký jako <h2> „Ceník". */
.site--scena .sc-contact__h {
    margin: 0 0 var(--sc-s3);
    font-size: var(--sc-f-xl); font-weight: 700; line-height: 1.2;
}
.site--scena .sc-contact__lead { margin: 0 0 var(--sc-s7); color: var(--sc-tlum); }

.site--scena .sc-info { display: grid; gap: var(--sc-s5); margin: 0; padding: 0; list-style: none; }
.site--scena .sc-info__item { display: flex; align-items: flex-start; gap: var(--sc-s4); }
.site--scena .sc-info__ico {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: var(--sc-r-sm);
    background: var(--sc-akcent-plocha); color: var(--sc-akcent);
}
.site--scena .sc-info__ico svg { width: 19px; height: 19px; }
.site--scena .sc-info__body { display: grid; gap: .1rem; min-width: 0; }
.site--scena .sc-info__val {
    color: var(--sc-text); font-weight: 500; text-decoration: none;
    overflow-wrap: anywhere;
}
.site--scena a.sc-info__val:hover { color: var(--sc-akcent); text-decoration: underline; }
/* Poznámka k DPH pod fakturačními údaji. Menší a tlumená - je to podmínka
   k cenám v ceníku, ne další kontaktní řádek. */
.site--scena .sc-info__note {
    margin: var(--sc-s4) 0 0;
    font-size: var(--sc-f-sm); color: var(--sc-tlum);
}

.site--scena .sc-soc {
    display: flex; flex-wrap: wrap; gap: var(--sc-s2);
    margin: var(--sc-s6) 0 0; padding: 0; list-style: none;
}
.site--scena .sc-soc a {
    display: inline-block; padding: var(--sc-s2) var(--sc-s4);
    border-radius: var(--sc-r-pilulka);
    border: 1px solid var(--sc-line); color: var(--sc-tlum);
    text-decoration: none; font-size: var(--sc-f-sm);
}
.site--scena .sc-soc a:hover { border-color: var(--sc-akcent); color: var(--sc-akcent); }

/* ── Poptávkový formulář ──────────────────────────────────────────────────────
   Stejná stavba jako v šabloně Klub - rekapitulace zadání, doladění, cena,
   kontakt - jen v barvách Scény: bílá karta místo tmavého panelu. */
.site--scena .sc-form {
    padding: var(--sc-s5);
    background: var(--sc-plocha);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-lg);
    box-shadow: var(--sc-stin);
}
.site--scena .sc-form__h { margin: 0 0 var(--sc-s5); font-size: 1.4rem; font-weight: 700; }

/* Rekapitulace z kalkulačky. Vlastní podklad, ať je vidět, že jde o převzaté
   zadání a ne o další pole k vyplnění. */
.site--scena .sc-form__recap {
    margin-bottom: var(--sc-s5); padding: var(--sc-s4);
    background: var(--sc-tint); border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-md);
}
.site--scena .sc-form__recaphead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sc-s4); margin-bottom: var(--sc-s2);
}
.site--scena .sc-form__change { font-size: var(--sc-f-xs); color: var(--sc-akcent); }
/* Rekapitulaci plní scena.js textem od návštěvníka - `auto 1fr` má minimum
   min-content, takže dlouhý název obce vylezl z bílé karty přes pravou hranu. */
.site--scena .sc-form__facts {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sc-s1) var(--sc-s3); margin: 0;
    font-size: var(--sc-f-base);
}
.site--scena .sc-form__facts dt { color: var(--sc-tlum); }
.site--scena .sc-form__facts dd {
    margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere;
}

.site--scena .sc-form__grid {
    display: grid; gap: var(--sc-s3); grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--sc-s5);
}
.site--scena .sc-form__field { display: grid; gap: var(--sc-s1); min-width: 0; }
.site--scena .sc-form__field--wide { grid-column: 1 / -1; }

/* Ovládací prvky formuláře i kalkulačky mají JEDNU výšku. Dřív čtyři různé
   (46,4 / 49,6 / 48,7 / 52), které se v jedné mřížce nesrovnaly.

   Výplň --sc-tint na bílé kartě dává 1,05:1 a obrys --sc-line 1,23:1 - u hranice
   vstupního pole se chce 3:1, takže prázdné pole „Místo konání" s kartou úplně
   splývalo. `--sc-line-pole` má 3,34:1. */
.site--scena .sc-form input,
.site--scena .sc-form select,
.site--scena .sc-calc input,
.site--scena .sc-calc select {
    width: 100%; min-width: 0;
    min-height: var(--sc-ctl); padding: 0 var(--sc-s3);
    border: 1px solid var(--sc-line-pole); border-radius: var(--sc-r-sm);
    background: var(--sc-tint); color: var(--sc-text);
    font: inherit; font-size: var(--sc-f-base);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.site--scena .sc-form textarea {
    width: 100%; min-width: 0; min-height: 6rem; padding: var(--sc-s3);
    border: 1px solid var(--sc-line-pole); border-radius: var(--sc-r-sm);
    background: var(--sc-tint); color: var(--sc-text);
    font: inherit; font-size: var(--sc-f-base);
    resize: vertical;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
/* Stejné pole v hlavičce se po najetí zvýrazňovalo, ve formuláři dole ne -
   a #c7d2fe bylo indigo, ne modrá z palety šablony. */
.site--scena .sc-form input:hover,
.site--scena .sc-form select:hover,
.site--scena .sc-form textarea:hover,
.site--scena .sc-calc input:hover,
.site--scena .sc-calc select:hover { border-color: var(--sc-akcent-obrys); }
.site--scena .sc-form input:focus,
.site--scena .sc-form select:focus,
.site--scena .sc-form textarea:focus,
.site--scena .sc-calc input:focus,
.site--scena .sc-calc select:focus {
    background: var(--sc-plocha); border-color: var(--sc-akcent); outline: 0;
    box-shadow: var(--sc-prsten);
}
/* Výchozí šeď prohlížeče má na světlém poli sotva 2,5:1. Nápovědný text sice
   nese informaci navíc k popisku pole, ale nemá být na hranici čitelnosti. */
.site--scena .sc-calc ::placeholder,
.site--scena .sc-form ::placeholder { color: var(--sc-tlum2); opacity: 1; }

/* Past na roboty - musí zůstat v DOMu, ale nesmí být vidět ani na čtečce.
   Ne `left: -9999px`: to závisí na tom, že žádný předek není pozicovaný, a v
   tomhle souboru už jeden vzor „transform na předkovi" existuje.

   Selektor nese i `input`, protože pravidlo pro pole výš ho má taky, a tím pádem
   vyšší specificitu (0,2,1) než samotná třída (0,2,0). Bez toho by past dostala
   šířku 100 %, rámeček a `min-height: 48px` - tedy plnohodnotné prázdné pole
   uprostřed formuláře, kde návštěvník nemá co vyplňovat. */
.site--scena .sc-form input.sc-form__trap {
    position: absolute; width: 1px; height: 1px; min-height: 0;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Telefon s předvolbou. `View::phoneField()` obalí select a input do
   `<span class="phone-field">`, ale sazbu té třídy má jen `assets/css/app.css`
   - a ten se na osobní web NENAČÍTÁ (`SiteRenderer` posílá `base.css` a soubor
   šablony, nic víc). Bez tohohle bloku je z obalu obyčejný `inline` prvek,
   oba prvky mají z pravidla výš `width: 100%` a stojí POD SEBOU.

   Selektory nesou element (`select`, `input`) schválně, stejně jako past na
   roboty pár řádků výš. Pravidlo pro pole má `.site--scena .sc-form select`,
   tedy (0,2,1); holá třída `.site--scena .phone-field__cc` má jen (0,2,0)
   a prohrála by bez ohledu na pořadí řádků. Blok tady tedy stál a nedělal nic:
   předvolba dostala `width: 100 %`, `flex: 0 0 auto` jí nedovolilo se zmenšit
   a na číslo zbylo 25,8 px, které navíc PŘETÉKALO 33,8 px za pravou hranu
   obalu. To se hlásí hůř než původní zalomení na dva řádky - vypadá to jako
   ořízlé pole, ne jako chybějící styl. S elementem je selektor (0,3,1) a vyhraje.

   `width: auto` u čísla je nutné z téhož důvodu: bez něj mu `width: 100 %`
   z pravidla výš dá základní šířku celého obalu a `flex-basis: auto` z ní pak
   počítá, takže se řádek roztáhne přes obal a číslo znovu přeteče.

   `min-width: 0` na OBALU je nutné právě kvůli tomu `width: auto`. Obal je
   položka mřížky `.sc-form__field` a položky mřížky mají `min-width: auto`,
   tedy minimum = min-content. Dokud mělo číslo šířku v procentech, byl
   min-content obalu jen předvolba (procenta se do vnitřní velikosti nepočítají)
   a obal se do buňky vešel. S `width: auto` se do min-contentu započítá
   i vlastní šířka pole, takže obal narostl na 379 px v buňce široké 279
   a přetekl o 100 px ven z formuláře. Přesun přetečení z pole na obal je
   zákeřný: kontrola „číslo se vejde do obalu" projde, protože obal se přetekl
   společně s ním. V katalogu tenhle řádek chybět může (`app.css`) - tam si
   číslo procentní šířku nechává.

   Nespadne přitom nic a v katalogu to vypadá správně, protože tam app.css je;
   pozná se to jedině pohledem na osobní web. Klub tatáž pravidla má
   (`klub.css`) - kdo přidá čtvrtou šablonu, musí je přidat taky. */
.site--scena .phone-field {
    display: flex; gap: var(--sc-s2); align-items: stretch; min-width: 0;
}
.site--scena .phone-field > select.phone-field__cc { flex: 0 0 auto; width: 10.5rem; }
.site--scena .phone-field > input.phone-field__num { flex: 1 1 auto; width: auto; min-width: 0; }
@media (max-width: 480px) {
    .site--scena .phone-field > select.phone-field__cc { width: 7.5rem; }
}
/* Telefon zabírá celý řádek mřížky - stejně jako u Vizitky, a ze stejného
   důvodu. Srovnání specificity výš samo o sobě POUŽITELNÉ POLE NEVYROBÍ:
   nad 900 px se kontakt přepne na dva sloupce, formulář spadne do poloviční
   šířky a buňka klesne na 182 px. Předvolba si z ní vezme 168, na číslo zbude
   6,5 px - jenže vstup se pod vlastní výplň nesmrskne, takže znovu PŘETÉKÁ
   (naměřeno +19,3 px při 902 px a +3,4 px při 960 px).

   A i tam, kde přesah zmizí, je pole krátké: na maximu má vnitřek 77 px, kdežto
   „777 123 456" v tomtéž fontu měří 82,1 px, tedy se do něj nevejde na ŽÁDNÉ
   šířce nad 900 px. Pásmo 901-1200 px se přitom do obvyklých měřených šířek
   (400, 800, 1440) vůbec netrefí, takže vada projde jako opravená.

   Roztažení nic nepřesouvá: telefon je třetí ze čtyř polí té mřížky, takže na
   svém řádku stál sám tak jako tak a pravá polovina zůstávala prázdná. Vazba
   přes `:has()`, ne přes třídu v šabloně - `templates/site/` patří jiné větvi
   a zásah do něj by zvedl otisk všech šablon. */
.site--scena .sc-form__grid > .sc-form__field:has(.phone-field) {
    grid-column: 1 / -1;
}

/* Volitelné služby z cenotvorby. Autorské `display: grid` přebíjí `[hidden]`
   z prohlížeče (autorský původ vyhrává nad UA bez ohledu na specificitu), takže
   se skrytí musí napsat ručně - jinak ve formuláři trvale svítí prázdný popisek
   „Chci k akci navíc" a šedý pruh „Orientační cena" bez čísla. */
.site--scena .sc-form__extras { display: grid; gap: var(--sc-s2); margin-bottom: var(--sc-s5); }
.site--scena .sc-form__extras[hidden] { display: none; }
.site--scena .sc-form__extraslist { display: grid; gap: var(--sc-s2); }
.site--scena .sc-extra {
    display: flex; align-items: center; gap: var(--sc-s3);
    padding: var(--sc-s3) var(--sc-s4);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-sm);
    font-size: var(--sc-f-base); cursor: pointer;
}
.site--scena .sc-extra:hover { border-color: var(--sc-akcent); }
/* `flex: none` je nutné. Zaškrtávátko je flexová položka a bez toho se smrsklo
   ve prospěch dlouhého popisu - u položky s dvouřádkovým textem vycházelo
   7,9 x 13 px místo 13 x 13 a vypadalo jako jiný ovládací prvek než ostatní.
   Totéž platí pro cenu vpravo, jen tam to zatím nebylo vidět. */
.site--scena .sc-extra input {
    flex: none; width: auto; min-height: 0; padding: 0; accent-color: var(--sc-akcent);
}
/* Dlouhý název volitelné služby jde z cenotvorby a JS ho neořezává. */
.site--scena .sc-extra__name {
    flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem;
    overflow-wrap: break-word;
}
.site--scena .sc-extra__desc { font-size: var(--sc-f-xs); color: var(--sc-tlum); line-height: 1.45; }
.site--scena .sc-extra__price {
    flex: none; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Cena. Kvůli ní sem návštěvník došel, takže dostane vlastní plochu. */
.site--scena .sc-form__total {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sc-s1) var(--sc-s3);
    margin-bottom: var(--sc-s5); padding: var(--sc-s3) var(--sc-s4);
    background: var(--sc-tint); border-radius: var(--sc-r-md);
}
.site--scena .sc-form__total[hidden] { display: none; }
.site--scena .sc-form__totallabel { flex: 1 1 auto; }
.site--scena .sc-form__totalval {
    font-size: var(--sc-f-xl); font-weight: 700; letter-spacing: -.02em;
}
.site--scena .sc-form__totalnote { flex: 1 0 100%; font-size: var(--sc-f-xs); color: var(--sc-tlum); }

.site--scena .sc-form__btn {
    width: 100%; min-height: var(--sc-ctl); padding: 0 var(--sc-s5);
    border: 0; border-radius: var(--sc-r-md);
    background: var(--sc-prechod);
    color: #fff; font: inherit; font-weight: 700; font-size: var(--sc-f-sm);
    text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.site--scena .sc-form__btn:hover:not(:disabled) {
    transform: translateY(-2px); box-shadow: var(--sc-stin-tlacitko);
}
/* Symetrie s `.sc-calc__btn` - obě tlačítka mají stejnou roli. */
.site--scena .sc-form__btn:active:not(:disabled) { transform: none; }
.site--scena .sc-form__btn:disabled { filter: grayscale(.4); opacity: .75; cursor: progress; }

.site--scena .sc-form__note {
    margin: var(--sc-s4) 0 0; font-size: var(--sc-f-xs);
    color: var(--sc-tlum); text-align: center;
}
.site--scena .sc-form__msg {
    margin: var(--sc-s4) 0 0; padding: var(--sc-s3) var(--sc-s4);
    border-radius: var(--sc-r-sm); font-size: var(--sc-f-base); font-weight: 500;
}
.site--scena .sc-form__msg.is-ok { background: var(--sc-volno-plocha); color: var(--sc-volno-text); }
.site--scena .sc-form__msg.is-err { background: var(--sc-obsazeno-plocha); color: var(--sc-obsazeno-text); }
.site--scena .sc-form__msg[hidden] { display: none; }

/* ── Kalkulačka v hlavičce ────────────────────────────────────────────────────
   Klub má tmavý panel se žlutým tlačítkem; tady je světlá karta na tmavé fotce.

   Pole stojí v pevné mřížce, ne v `auto-fit`: ten sázel tři pole na první řádek
   a čtvrté s tlačítkem na druhý, kde po tlačítku zbývala prázdná půlka. */
.site--scena .sc-calc {
    position: relative;
    max-width: 44rem; margin: var(--sc-s6) auto 0;
    padding: var(--sc-s5);
    /* Barevná linka nahoře je VRSTVA POZADÍ karty, ne samostatný prvek. Jako
       `::before` to nešlo srovnat: 4px vysoký proužek si prohlížeč poloměr
       zmenší na 4px (poloměr nesmí přesáhnout box), takže mu rohy vykukovaly
       přes zaoblení karty. Jako pozadí se ořízne přesně podle rádiusu karty
       a karta nepotřebuje `overflow: hidden`, který ustřihl kalendář. */
    background: var(--sc-prechod) top / 100% 4px no-repeat, var(--sc-plocha);
    border-radius: var(--sc-r-xl);
    box-shadow: var(--sc-stin-4);
    text-align: left; color: var(--sc-text);
}
.site--scena .sc-calc__row {
    display: grid; gap: var(--sc-s3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site--scena .sc-calc__field { display: grid; gap: var(--sc-s1); min-width: 0; }

/* Tlačítko přes celou šířku pod poli - je to jediná akce karty a půlka řádku
   vedle posledního pole vypadala jako nedopatření. */
.site--scena .sc-calc__btn {
    grid-column: 1 / -1;
    min-height: var(--sc-ctl); margin-top: 0;
    border: 0; border-radius: var(--sc-r-md);
    background: var(--sc-prechod);
    color: #fff; font: inherit; font-weight: 700; font-size: var(--sc-f-sm);
    text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.site--scena .sc-calc__btn:hover:not(:disabled) {
    transform: translateY(-2px); box-shadow: var(--sc-stin-tlacitko);
}
.site--scena .sc-calc__btn:active:not(:disabled) { transform: none; }
.site--scena .sc-calc__btn:disabled { filter: grayscale(.4); opacity: .75; cursor: progress; }

/* ── Výsledek ─────────────────────────────────────────────────────────────── */
.site--scena .sc-calc__out {
    display: block; margin-top: var(--sc-s5); padding-top: var(--sc-s5);
    border-top: 1px dashed var(--sc-line);
}
.site--scena .sc-calc__out[hidden] { display: none; }

.site--scena .sc-calc__state {
    display: inline-flex; align-items: center; gap: var(--sc-s1);
    margin-bottom: var(--sc-s3);
    padding: var(--sc-s1) var(--sc-s3); border-radius: var(--sc-r-pilulka);
    font-size: var(--sc-f-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}
/* Tečka místo ikony - nepotřebuje SVG a nese stejnou informaci. */
.site--scena .sc-calc__state::before {
    content: ''; width: .5rem; height: .5rem; border-radius: 50%;
    background: currentColor;
}
.site--scena .sc-calc__state.is-free      { background: var(--sc-volno-plocha); color: var(--sc-volno-text); }
.site--scena .sc-calc__state.is-busy      { background: var(--sc-obsazeno-plocha); color: var(--sc-obsazeno-text); }
.site--scena .sc-calc__state.is-tentative { background: var(--sc-predbezne-plocha); color: var(--sc-predbezne-text); }
.site--scena .sc-calc__state.is-unknown   { background: var(--sc-neurceno-plocha); color: var(--sc-neurceno-text); }

.site--scena .sc-calc__lines { display: grid; gap: var(--sc-s2); }
.site--scena .sc-calc__line {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-s4);
    font-size: var(--sc-f-base); color: var(--sc-tlum);
}
.site--scena .sc-calc__line strong {
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Barva se nesmí dát všem: součtový řádek nese `.sc-grad`, která potřebuje
   `color: transparent`, aby přes text prosvítal přeliv. Selektor s prvkem má
   vyšší specificitu než samotná třída, takže by ji jinak přebil a z přelivu
   by nebylo vidět nic. */
.site--scena .sc-calc__line strong:not(.sc-grad) { color: var(--sc-text); }
/* Součet je to, kvůli čemu kalkulačku někdo otevřel - dostane vlastní plochu.
   Přeliv na částce nese `.sc-grad`, kterou tam dává scena.js. */
.site--scena .sc-calc__line.is-total {
    margin-top: var(--sc-s2); padding: var(--sc-s3) var(--sc-s4);
    background: var(--sc-tint); border-radius: var(--sc-r-md);
    font-size: var(--sc-f-md); font-weight: 700; color: var(--sc-text);
}
/* Hodnota má stejnou velikost jako popisek řádku - zvýraznění nese tučnost
   a přeliv, ne velikost. Součet je jednou částka („14 000 Kč"), jindy slovo
   („na dotaz"), a při 1,5 rem proti popisku 1,05 rem to slovo řvalo, přestože
   nenese žádné číslo. Stejné pravidlo má Vizitka. */
.site--scena .sc-calc__line.is-total strong {
    font-size: var(--sc-f-md); letter-spacing: -.02em;
}
.site--scena .sc-calc__note {
    margin: var(--sc-s3) 0 0; font-size: var(--sc-f-xs);
    color: var(--sc-tlum); line-height: 1.55;
}

/* Odkaz z výsledku dolů na poptávku je po výpočtu DALŠÍ KROK, takže dostane
   tvar tlačítka. Obrysové, ne plné: přímo nad ním sedí plné „Spočítat cenu"
   a dvě stejné plochy pod sebou by si konkurovaly - nebylo by poznat, které
   z nich je to čerstvé. Stejné řešení má Vizitka. */
.site--scena .sc-calc__next {
    display: flex; align-items: center; justify-content: center; gap: var(--sc-s2);
    width: 100%; min-height: var(--sc-ctl); margin-top: var(--sc-s4);
    padding: 0 var(--sc-s5);
    border: 1px solid var(--sc-akcent); border-radius: var(--sc-r-pilulka);
    background: var(--sc-plocha); color: var(--sc-akcent);
    font-weight: 700; font-size: var(--sc-f-sm);
    text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
    transition: background .15s, color .15s;
}
.site--scena .sc-calc__next::after { content: '\2192'; font-size: 1.1em; line-height: 1; transition: transform .15s; }
.site--scena .sc-calc__next:hover { background: var(--sc-akcent); color: #fff; text-decoration: none; }
.site--scena .sc-calc__next:hover::after { transform: translateX(3px); }

/* ── Výběr data ───────────────────────────────────────────────────────────────
   Nativní `type="date"` ukazuje „dd.mm.rrrr" a vlastní černou ikonu, kterou
   nejde nastylovat ani sladit se zbytkem karty. Datum proto drží skryté pole
   a vidět je čitelný zápis s vlastním kalendářem - ten navíc umí rovnou obarvit
   obsazené dny, což nativní pole neumí vůbec. */
.site--scena .sc-calc__field--date { position: relative; }
.site--scena .sc-calc__datewrap { position: relative; display: block; }
.site--scena .sc-calc__datebtn { cursor: pointer; padding-right: 2.6rem; }
.site--scena .sc-calc__dateico {
    position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--sc-akcent); pointer-events: none;
}

.site--scena .sc-pop {
    position: absolute; z-index: 30; top: calc(100% + .5rem); left: 0;
    /* Strop podle okna, ne jen podle pole - na 360px displeji přetékal popover
       na obě strany a hero schválně nemá `overflow: hidden`, takže by přetečení
       propadlo až na <body>. */
    width: min(20rem, 84vw); max-width: calc(100vw - var(--pad) * 2);
    padding: var(--sc-s4);
    background: var(--sc-plocha); border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
    box-shadow: var(--sc-stin-3);
}
.site--scena .sc-pop[hidden] { display: none; }
.site--scena .sc-pop__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sc-s3);
}
.site--scena .sc-pop__month {
    font-weight: 700; font-size: var(--sc-f-base); text-transform: capitalize;
}
.site--scena .sc-pop__arr {
    width: 2rem; height: 2rem; border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-sm);
    background: var(--sc-plocha); color: var(--sc-text); font: inherit;
    font-size: var(--sc-f-md); line-height: 1; cursor: pointer;
}
.site--scena .sc-pop__arr:hover { border-color: var(--sc-akcent); color: var(--sc-akcent); }

.site--scena .sc-cal {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sc-s1);
    text-align: center;
}
.site--scena .sc-cal__wd { padding: var(--sc-s1) 0; }
.site--scena .sc-cal__day {
    display: grid; place-items: center; aspect-ratio: 1;
    border: 0; border-radius: var(--sc-r-sm);
    background: none; color: var(--sc-text);
    font: inherit; font-size: var(--sc-f-sm); cursor: pointer;
    transition: background .12s, color .12s;
}
.site--scena .sc-cal__day:hover { background: var(--sc-akcent-plocha); }
/* Barva nese informaci, ale ne sama: obsazené dny mají navíc `title`
   a legendu pod mřížkou. */
.site--scena .sc-cal__day--busy { background: var(--sc-obsazeno-plocha); color: var(--sc-obsazeno-text); }
.site--scena .sc-cal__day--busy:hover { background: var(--sc-obsazeno-plocha2); }
.site--scena .sc-cal__day--tentative {
    background: var(--sc-predbezne-plocha); color: var(--sc-predbezne-text);
}
/* Obsazený den na najetí reagoval, předběžný ne - obojí je klikatelné tlačítko. */
.site--scena .sc-cal__day--tentative:hover { background: var(--sc-predbezne-plocha2); }
/* Bylo #cbd5e1 s kontrastem 1,48:1 - minulé dny byly prakticky neviditelné. */
.site--scena span.sc-cal__day--past { color: var(--sc-tlum2); cursor: default; }
.site--scena .sc-cal__day.is-active {
    background: var(--sc-akcent); color: #fff; font-weight: 700;
}

/* Legenda musí tvrdit totéž, co mřížka kreslí. Dřív měla u „volno" šedou plochu,
   ačkoliv je volný den bez podkladu, a u „obsazeno" odstín, který je ve
   skutečnosti až stav po najetí. Sedělo jedině „předběžně". */
.site--scena .sc-pop__legend {
    display: flex; flex-wrap: wrap; gap: var(--sc-s3); justify-content: center;
    margin: var(--sc-s3) 0 0; font-size: var(--sc-f-popisek); color: var(--sc-tlum);
}
.site--scena .sc-pop__key { display: inline-flex; align-items: center; gap: var(--sc-s1); }
.site--scena .sc-pop__key::before {
    content: ''; box-sizing: border-box;
    width: .55rem; height: .55rem; border-radius: var(--sc-r-xs);
}
.site--scena .sc-pop__key--free::before {
    background: var(--sc-plocha); border: 1px solid var(--sc-line);
}
.site--scena .sc-pop__key--tentative::before { background: var(--sc-predbezne-plocha); }
.site--scena .sc-pop__key--busy::before { background: var(--sc-obsazeno-plocha); }

/* ── Fokus ────────────────────────────────────────────────────────────────────
   Prstenec z `:focus` má na bílé 1,22:1, takže sám za indikátor nestačí - plný
   obrys v akcentu dává 5,17:1. Do minule byl v celém souboru JEDINÝ výskyt
   `:focus-visible`, a to na dlaždici galerie. */
.site--scena .sc-form input:focus-visible,
.site--scena .sc-form select:focus-visible,
.site--scena .sc-form textarea:focus-visible,
.site--scena .sc-calc input:focus-visible,
.site--scena .sc-calc select:focus-visible,
.site--scena .sc-btn:focus-visible,
.site--scena .sc-form__btn:focus-visible,
.site--scena .sc-calc__btn:focus-visible,
.site--scena .sc-cal__day:focus-visible,
.site--scena .sc-pop__arr:focus-visible,
.site--scena .sc-extra:focus-within,
.site--scena .sc-calc__next:focus-visible,
.site--scena .sc-date:focus-visible,
.site--scena .sc-info__val:focus-visible,
.site--scena .sc-soc a:focus-visible {
    outline: 2px solid var(--sc-akcent);
    outline-offset: 2px;
}

/* ── Patička ──────────────────────────────────────────────────────────────────
   Tmavý závěr, ne třetí odstín světlé: parita sekcí končí podle jejich počtu,
   takže by patička jednou splynula s poslední sekcí a jednou ne. Stejný tón jako
   podklad hera - stránka tím dostane rám. Do base.css se přitom nesahá, pravidlo
   stojí pod `.site--scena`. */
.site--scena .site-foot {
    padding: var(--sc-s7) var(--pad);
    background: var(--sc-tmava); color: #cbd5e1;
}
.site--scena .site-foot__inner { gap: var(--sc-s1); }
.site--scena .site-foot__name { color: #fff; }
/* `opacity: .65` z base.css by na tmavém podkladu spadlo pod čitelnost. */
.site--scena .site-foot__legal,
.site--scena .site-foot__by { opacity: 1; color: #94a3b8; }
.site--scena .site-foot__by a { color: var(--sc-akcent-svetly); text-decoration: underline; }

/* ── Body zlomu ───────────────────────────────────────────────────────────────
   Sada je 480 / 600 / 780 (min) / 960. Dřív jich bylo pět bez systému
   (480, 600, 720 min, 760, 900) a v překryvu 720-760 platilo obojí: menu už bylo
   sbalené do burgeru, ale kalkulačka držela čtyři sloupce v 640 px. */
@media (min-width: 780px) {
    /* Čtyři pole vedle sebe: datum a místo potřebují víc místa než typ a délka.
       `minmax(0, ...)`, ne holé `fr` - to má minimum min-content položky. */
    .site--scena .sc-calc__row {
        grid-template-columns:
            minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .75fr);
    }
    /* Bez typů akcí jsou pole jen tři - jinak zbude prázdná čtvrtá stopa. */
    .site--scena .sc-calc__row--3 {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr);
    }
}

@media (max-width: 900px) {
    .site--scena .sc-about,
    .site--scena .sc-contact { grid-template-columns: minmax(0, 1fr); gap: var(--sc-s7); }
    .site--scena .sc-about__photo { max-width: 22rem; margin-inline: auto; }
    /* Odsazení pod sekcí O mně se tady VRACÍ. V jednom sloupci už postava vedle
       textu nestojí - je nad ním, takže spodní hranu sekce dělá odstavec
       a tlačítko „Nezávazná poptávka". S `padding-block-end: 0` by se text
       doslova dotýkal další sekce a přišel by o hranu, kterou jinak dělá
       střídání pozadí. Specificita je stejná (0,3,0), rozhoduje pořadí - proto
       to musí stát tady dole, ne u výjimky samotné.

       PODMÍNKA MUSÍ ZŮSTAT STEJNĚ ŠIROKÁ JAKO TA, KTEROU RUŠÍ. Obě zněly
       `.sc-about__photo.is-cutout`; když se ta horní rozšířila na každou fotku,
       tahle by bez rozšíření zůstala u vyřezané postavy a na telefonu by se
       text u všech ostatních profilů dotkl další sekce. */
    .site--scena .sc-sec:has(.sc-about__photo) {
        padding-block-end: var(--sc-sec-y);
    }
}

@media (max-width: 760px) {
    /* Sekce mají uvnitř 40 px, takže 48 px pod nadpisem by z úspory ukrojilo
       skoro všechno - sekce by dýchaly uvnitř víc než mezi sebou. Je to jediné
       místo, kde se přepisuje token škály, a je to úmyslné: mění rytmus všech
       sekcí najednou, ne jeden prvek. */
    .site--scena { --sc-s7: 2rem; }

    .site--scena .sc-form { padding: var(--sc-s4); }
    .site--scena .sc-form__grid { grid-template-columns: minmax(0, 1fr); }
    .site--scena .sc-sluz { gap: var(--sc-s5); }
    .site--scena .sc-sluz__label { margin-block: 0 var(--sc-s3); }
    /* Karty jsou v jednom sloupci, takže jich je na displeji hodně - nižší karta
       udrží sekci v rozumné výšce. */
    .site--scena .sc-sluz__list--karty .sc-sluz__item { padding: var(--sc-s2) var(--sc-s3); }
}

@media (max-width: 600px) {
    /* Částka se na úzkém okně zmenší přepsáním tokenu, ne prvku - jinak by se
       desktop a mobil při další změně rozešly. */
    .site--scena { --sc-f-2xl: 1.8rem; }
    .site--scena .sc-cenik { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .site--scena .sc-calc { padding: var(--sc-s4); }
    .site--scena .sc-calc__row { grid-template-columns: minmax(0, 1fr); }
    .site--scena .sc-pop { left: 50%; transform: translateX(-50%); }
}

/* ── Omezený pohyb ────────────────────────────────────────────────────────────
   base.css pokrývá jen `.s-btn`. Scéna má vlastní posuny tlačítek, karet
   a zvětšení fotky - nic z toho se dosud nevypínalo. */
@media (prefers-reduced-motion: reduce) {
    .site--scena *,
    .site--scena *::before,
    .site--scena *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .site--scena .sc-btn--primary:hover,
    .site--scena .sc-form__btn:hover,
    .site--scena .sc-calc__btn:hover,
    .site--scena .sc-cenik__card:hover { transform: none; }
    .site--scena .sc-gal__item:hover img { transform: none; }
}

/* ── Tisk ─────────────────────────────────────────────────────────────────────
   V projektu nebyl jediný `@media print`. Vytištěný ceník neměl čísla:
   `.sc-grad` jede na `color: transparent` a přeliv se netiskne. */
@media print {
    .site--scena .sc-nav,
    .site--scena .sc-hero__bg,
    .site--scena .sc-hero__veil,
    .site--scena .sc-calc,
    .site--scena .sc-form,
    .site--scena .sc-pop { display: none !important; }
    .site--scena .sc-hero {
        min-height: 0; padding: var(--sc-s5) 0;
        background: none; color: #000;
    }
    .site--scena .sc-grad {
        background: none; color: #000; -webkit-text-fill-color: #000;
    }
    .site--scena .sc-sec,
    .site--scena .s-sec { padding-block: var(--sc-s5); background: none !important; }
    .site--scena .sc-cenik__card,
    .site--scena .sc-cenik__list { box-shadow: none; break-inside: avoid; }
    .site--scena .site-foot { background: none; color: #000; }
}

/* ── Svislý rytmus sekcí ──────────────────────────────────────────────────────
   TENHLE BLOK MUSÍ ZŮSTAT ÚPLNĚ POSLEDNÍ. Odstupy jdou JEN shora a jen na
   přímých dětech sekce; pravidlo se stejnou specificitou výš by je přebilo.

   Dřív měla jedna role šest hodnot ve dvou směrech - 48 px v sekci služeb,
   20 px v ceníku - takže ceník splýval v chuchvalec, zatímco služby dýchaly,
   a z kódu nešlo odečíst výsledek, protože se marginy místy slévaly a místy ne. */
.site--scena .sc-sec > * + *,
.site--scena .s-sec > * + * { margin-block-start: var(--sc-s7); }

/* Podnadpis patří k nadpisu, ne k obsahu pod ním. Dřív byl 48 px pod nadpisem
   a jen 20 px nad seznamem termínů, tedy vizuálně u seznamu. */
.site--scena .sc-title + .s-sec__lead,
.site--scena .sc-title + .sc-seclead,
.site--scena .s-sec__title + .s-sec__lead { margin-block-start: var(--sc-s3); }