/* Trick-or-Treat for Charity Prague */

:root {
    color-scheme: only light;
    --purple: #4b2c6f;
    --purple-deep: #2a1740;
    --orange: #f08a3c;
    --orange-text: #a8480f;
    --mauve: #9c4f78;
    --green: #3f7d3a;
    --color-primary: #4b2c6f;
    --color-link: #6a3a99;
    --color-bg: #fdf5ea;
    --color-surface: #ffffff;
    --color-alt: #f6e6d3;
    --color-text: #241634;
    --color-text-light: #5c4a6b;
    --color-border: #e8d6c2;
    --color-tip: #2f7d4a;
    --color-note: #6a3a99;
    --color-warning: #b3540f;
    --sky-top: #f9d9b6;
    --sky-bottom: #fdf5ea;
    --skyline: #4b2c6f;
    --skyline-back: #b88fb0;
    --window: #fbe7cc;
    --window-opacity: .45;
    --moon: #f6c66b;
    --moon-glow: rgba(246, 198, 107, .28);
    --font-main: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Emilys Candy', 'PH Diakritika Display', Georgia, serif;
    --font-label: 'Lilita One', 'PH Diakritika Label', system-ui, sans-serif;
    --max-width: 72rem;
    --spacing: 1rem;
    --radius: 14px;
    --shadow: 0 2px 10px rgba(75, 44, 111, .10);
    --shadow-lift: 0 10px 24px rgba(75, 44, 111, .16);
    --stars:
        radial-gradient(circle at 18px 24px, rgba(255, 255, 255, .85) 0 1.1px, transparent 1.6px),
        radial-gradient(circle at 96px 70px, rgba(255, 255, 255, .6) 0 .9px, transparent 1.4px),
        radial-gradient(circle at 150px 18px, rgba(255, 236, 200, .8) 0 1.3px, transparent 1.8px),
        radial-gradient(circle at 60px 120px, rgba(255, 255, 255, .5) 0 .8px, transparent 1.3px),
        radial-gradient(circle at 190px 104px, rgba(255, 255, 255, .7) 0 1px, transparent 1.5px);
}

[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #c9a6f2;
    --color-link: #d8bdf7;
    --color-bg: #150d22;
    --color-surface: #22163a;
    --color-alt: #1c1230;
    --color-text: #f3eafc;
    --color-text-light: #c5b5d8;
    --color-border: #3a2a55;
    --color-tip: #7fd39a;
    --color-note: #c9a6f2;
    --color-warning: #ffaa66;
    --orange-text: #ffab6b;
    --sky-top: #0b0616;
    --sky-bottom: #150d22;
    --skyline: #05030b;
    --skyline-back: #241838;
    --window: #ffcf6b;
    --window-opacity: .95;
    --moon-glow: rgba(246, 198, 107, .22);
    --shadow: 0 2px 12px rgba(0, 0, 0, .5);
    --shadow-lift: 0 10px 26px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --color-primary: #c9a6f2;
        --color-link: #d8bdf7;
        --color-bg: #150d22;
        --color-surface: #22163a;
        --color-alt: #1c1230;
        --color-text: #f3eafc;
        --color-text-light: #c5b5d8;
        --color-border: #3a2a55;
        --color-tip: #7fd39a;
        --color-note: #c9a6f2;
        --color-warning: #ffaa66;
        --orange-text: #ffab6b;
        --sky-top: #0b0616;
        --sky-bottom: #150d22;
        --skyline: #05030b;
        --skyline-back: #241838;
        --window: #ffcf6b;
        --window-opacity: .95;
        --moon-glow: rgba(246, 198, 107, .22);
        --shadow: 0 2px 12px rgba(0, 0, 0, .5);
        --shadow-lift: 0 10px 26px rgba(0, 0, 0, .6);
    }
}

/* === BASE === */
html { scroll-behavior: smooth; scroll-padding-top: 4.75rem; }
body {
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
}
a { color: var(--color-link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; color: var(--color-primary); }
h1 { font-size: clamp(2rem, 6vw + .5rem, 4.4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.6rem, 2.6vw + .8rem, 2.4rem); margin: 0 0 .75rem; }
h3 { font-size: 1.35rem; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: .875rem; color: var(--color-text-light); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--purple); color: #fff; padding: .5rem 1rem; z-index: 1000; }
.skip-link:focus { left: 0; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing); }
@media (min-width: 1800px) { :root { --max-width: 84rem; } html { font-size: 112.5%; } }
@media (min-width: 2600px) { html { font-size: 137.5%; } }

/* Podstránky: večerní nebe a netopýři v horní části */
body:not(.page-home) {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%234b2c6f' fill-opacity='.2'%3E%3Cpath transform='translate(6 30) scale(1.1)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3Cpath transform='translate(62 6) scale(.8)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3Cpath transform='translate(84 38) scale(.6)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3C/g%3E%3C/svg%3E") right 6% top 5.25rem / 7.5rem auto no-repeat,
        linear-gradient(180deg, var(--sky-top), var(--color-bg) 22rem) top / 100% 22rem no-repeat,
        var(--color-bg);
}
[data-theme="dark"] body:not(.page-home) {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23c9a6f2' fill-opacity='.22'%3E%3Cpath transform='translate(6 30) scale(1.1)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3Cpath transform='translate(62 6) scale(.8)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3Cpath transform='translate(84 38) scale(.6)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3C/g%3E%3C/svg%3E") right 6% top 5.25rem / 7.5rem auto no-repeat,
        linear-gradient(180deg, var(--sky-top), var(--color-bg) 22rem) top / 100% 22rem no-repeat,
        var(--color-bg);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) body:not(.page-home) {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%23c9a6f2' fill-opacity='.22'%3E%3Cpath transform='translate(6 30) scale(1.1)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3Cpath transform='translate(62 6) scale(.8)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3Cpath transform='translate(84 38) scale(.6)' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3C/g%3E%3C/svg%3E") right 6% top 5.25rem / 7.5rem auto no-repeat,
            linear-gradient(180deg, var(--sky-top), var(--color-bg) 22rem) top / 100% 22rem no-repeat,
            var(--color-bg);
    }
}

/* Ozdobná vlnovka pod nadpisy */
.page > h1::after,
.section > .container > h2::after,
.section.container > h2:not(.visually-hidden)::after,
.section .split > div > h2::after {
    content: ""; display: block; width: 4.5rem; height: .6rem; margin-top: .4rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'%3E%3Cpath d='M2 6c8-6 14-6 20 0s12 6 18 0 12-6 18 0 12 6 18 0' fill='none' stroke='%23f08a3c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.page > h1::after { width: 6rem; height: .75rem; margin-top: .5rem; }

/* === PREVIEW BAR === */
.preview-bar {
    display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: center; align-items: center;
    background: repeating-linear-gradient(-45deg, #2a1740 0 14px, #3b2258 14px 28px);
    color: #ffd9b8; font-size: .8rem; padding: .35rem var(--spacing); text-align: center;
}
.preview-phases a { color: #fff; margin: 0 .15rem; }
.preview-phases a[aria-current] { color: var(--orange); font-weight: 700; }

/* === HEADER === */
.site-header { background: var(--purple-deep); color: #fff; position: sticky; top: 0; z-index: 50; }
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: linear-gradient(90deg, var(--orange), var(--mauve) 55%, var(--purple));
}
.header-inner { display: flex; align-items: center; gap: .5rem; min-height: 3.5rem; }
.logo { display: inline-flex; align-items: center; gap: .45rem; color: #fff; text-decoration: none; margin-right: auto; }
.logo-mark { width: 2rem; height: 2rem; flex: none; transition: transform .2s; }
.logo:hover .logo-mark { transform: rotate(-10deg) scale(1.08); }
.logo-text { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; white-space: nowrap; }
.logo-small { color: var(--orange); }
.nav-menu { display: none; list-style: none; margin: 0; padding: 0; gap: .25rem; }
.nav-menu a { color: #f1e6ff; text-decoration: none; padding: .5rem .7rem; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.nav-menu a:hover, .nav-menu a[aria-current] { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-menu a.nav-cta { background: var(--orange); color: var(--purple-deep); }
.nav-menu a.nav-cta:hover { background: #ffa25c; }
.lang-switch, .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
    color: #fff; background: none; border: 0; font-weight: 700; text-decoration: none; font-size: .9rem; border-radius: 8px;
}
.theme-toggle svg { width: 1.2rem; height: 1.2rem; }
.theme-toggle .icon-sun { display: none; color: #ffd27a; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
    :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
}
.lang-switch:hover, .theme-toggle:hover { background: rgba(255, 255, 255, .12); }
.social, .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px;
    color: #fff; background: none; border: 0; border-radius: 8px; padding: 0;
}
.social svg, .menu-toggle svg { width: 1.45rem; height: 1.45rem; }
.social:hover, .menu-toggle:hover { background: rgba(255, 255, 255, .12); }
.social--fb:hover { color: #8fb8ff; }
.social--ig:hover { color: #ffb3d9; }
.menu-only { display: none; }
/* Pod 64rem: hamburger; CZ/EN, Facebook a Instagram zůstávají vidět */
@media (max-width: 63.99rem) {
    .header-inner { position: relative; gap: .15rem; }
    .nav-menu.is-open {
        display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px;
        background: var(--purple-deep); padding: .5rem var(--spacing) 1rem; gap: .2rem; max-height: calc(100vh - 8.5rem); overflow-y: auto; box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
    }
    .nav-menu a, .menu-theme button { display: block; padding: .8rem 1rem; font-size: 1.05rem; }
    .menu-theme button { width: 100%; text-align: left; color: #f1e6ff; background: none; border: 0; font-weight: 600; border-radius: 999px; }
}
@media (min-width: 64rem) { .nav-menu { display: flex; } .logo { margin-right: 1rem; } .nav-menu { margin-right: auto; } .menu-toggle { display: none; } }
@media (max-width: 63.99rem) {
    .header-inner > .social, .header-inner > .theme-toggle { display: none; }
    .menu-only { display: block; }
    .menu-social { display: flex; gap: .5rem; padding-bottom: .4rem; margin-bottom: .3rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
    .nav-menu .menu-social a { display: inline-flex; align-items: center; gap: .5rem; flex: 1; justify-content: center; background: rgba(255, 255, 255, .1); }
    .menu-social svg { width: 1.5rem; height: 1.5rem; }
}
@media (max-width: 22rem) { .container.header-inner { padding: 0 .5rem; } .logo-text { font-size: 1.12rem; } }
/* Patička: velké ikony sítí */
.footer-social { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .8rem; }
.social-big {
    display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem .55rem .6rem; border-radius: 999px;
    color: #fff !important; text-decoration: none; font-weight: 700;
}
.social-big svg { width: 2rem; height: 2rem; }
.social-big.social--fb { background: #1877f2; }
.social-big.social--ig { background: linear-gradient(45deg, #f09433, #dc2743 50%, #bc1888); }
.social-big:hover { filter: brightness(1.1); }

.breadcrumb { padding-top: .9rem; font-size: .875rem; color: var(--color-text-light); }
.breadcrumb a { text-decoration: none; }

/* === HERO === */
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
    padding: 1.75rem 0 clamp(6.5rem, 16.7vw - 2.5rem, 13rem);
}
/* Hvězdy jen v tmavém režimu, u textu slabší */
.hero::before {
    content: ""; position: absolute; inset: 0 0 30% 0; background: var(--stars); background-size: 210px 140px; display: none; pointer-events: none;
    opacity: .75;
    -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, .3) 35%, #000 70%);
    mask-image: linear-gradient(100deg, rgba(0, 0, 0, .3) 35%, #000 70%);
}
[data-theme="dark"] .hero::before { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hero::before { display: block; } }
/* Výška roste se šířkou, aby věže sv. Ludmily a Žižkovská věž nebyly useknuté */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(7rem, 16.7vw, 16rem); pointer-events: none; }
.sky-city, .sky-bats { fill: var(--skyline); }
.sky-city { opacity: .92; }
.sky-back { fill: var(--skyline-back); opacity: .55; }
.sky-windows { fill: var(--window); opacity: var(--window-opacity); }
.sky-beacon { fill: #e5484d; opacity: .9; }
.sky-pumpkins { fill: var(--orange); }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 1.5rem; align-items: center; }
.kicker { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--orange-text); font-size: .95rem; margin-bottom: .5rem; }
.h1-sub { display: block; font-size: .55em; color: var(--mauve); margin-top: .2em; }
[data-theme="dark"] .h1-sub { color: var(--orange); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .h1-sub { color: var(--orange); } }
.hero-facts { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-facts li {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px;
    background: var(--color-surface); border: 1px solid var(--color-border); font-weight: 700; font-size: .95rem; box-shadow: var(--shadow);
}
.hero-facts svg { width: 1.15rem; height: 1.15rem; color: var(--orange-text); flex: none; }
.hero-badge {
    position: relative; display: inline-block; font-family: var(--font-label); font-size: 1.1rem; letter-spacing: .02em;
    background: var(--purple); color: #fff; padding: .35rem .9rem; border-radius: 8px; transform: rotate(-1.5deg);
}
.hero--live .hero-badge { background: #b3261e; }
.hero--live .hero-badge::after {
    content: ""; position: absolute; inset: -3px; border: 2px solid #e5484d; border-radius: 10px;
    animation: ping 1.8s ease-out infinite;
}
@keyframes ping { from { transform: scale(.96); opacity: .8; } to { transform: scale(1.12); opacity: 0; } }
.hero-lead { font-size: 1.1rem; max-width: 38rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1rem; }
.countdown {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; margin: 0;
    padding: .35rem 1rem; border: 2px dashed var(--orange); border-radius: 999px;
    background: var(--color-surface); font-size: .95rem; color: var(--color-text-light);
}
.countdown strong { font-family: var(--font-label); font-weight: 400; color: var(--orange-text); font-size: 1.15rem; letter-spacing: .02em; }
.hero-art { position: relative; isolation: isolate; margin: 0 auto; max-width: 22rem; width: 100%; }
.hero-art img, .art-frame img {
    width: 100%; border-radius: 46% 46% 18px 18px / 30% 30% 18px 18px; box-shadow: 0 14px 40px rgba(42, 23, 64, .25);
    border: 6px solid var(--color-surface);
}
/* Měsíc s netopýrem vykukuje zpoza oblouku ilustrace */
.hero-art::before {
    content: ""; position: absolute; z-index: -1; top: -1.4rem; right: .25rem; width: 4rem; height: 4rem; border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1.5 32 15'%3E%3Cpath fill='%232a1740' fill-opacity='.8' d='M0 4.5c6-6 12-6 16 0 4-6 10-6 16 0-6 0-10 4-16 8-6-4-10-8-16-8z'/%3E%3C/svg%3E") 34% 58% / 58% auto no-repeat,
        radial-gradient(circle at 70% 30%, rgba(214, 160, 70, .35) 0 9%, transparent 10%),
        radial-gradient(circle at 30% 72%, rgba(214, 160, 70, .3) 0 7%, transparent 8%),
        radial-gradient(circle at 38% 34%, #fff6d8 0, #f8d78a 48%, #eab25a 100%);
    box-shadow: 0 0 0 10px var(--moon-glow), 0 0 48px 18px var(--moon-glow);
}
[data-theme="dark"] .hero-art img { box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 60px rgba(240, 138, 60, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hero-art img { box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 60px rgba(240, 138, 60, .18); } }
@media (min-width: 48rem) {
    .hero { padding-top: 3rem; }
    .hero-grid { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
    .hero-art { max-width: 26rem; }
    .hero-art::before { top: -2rem; right: -.75rem; width: 5.5rem; height: 5.5rem; }
}
@media (min-width: 100rem) { .hero-art { max-width: 30rem; } }

/* === BUTTONS === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 48px; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none;
    border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background-image: linear-gradient(var(--orange), var(--orange)); background-color: var(--orange); color: var(--purple-deep); box-shadow: 0 6px 18px rgba(240, 138, 60, .35); }
.btn-primary:hover { background-image: linear-gradient(#ffa25c, #ffa25c); box-shadow: 0 9px 22px rgba(240, 138, 60, .45); }
.btn-secondary { background: var(--purple); color: #fff; }
.btn-ghost { border-color: currentColor; color: var(--color-primary); background: transparent; }
.btn-ghost:hover { background: var(--color-surface); }
.btn-block { width: 100%; }

/* === SECTIONS === */
.section { padding: 3rem 0; }
.section.container { padding-left: var(--spacing); padding-right: var(--spacing); }
.section--alt { background: var(--color-alt); }
.section--night {
    position: relative; color: #f3eafc; padding-top: 3.75rem;
    background-color: var(--purple-deep);
    background-image: var(--stars);
    background-size: 210px 140px;
}
.section--night::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 22px; background: var(--color-bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cpath d='M0 0H160V6C150 6 148 7 147 10C146 15 143 17 140 17C137 17 135 15 134 10C133 7 130 6 120 6H96C88 6 86 7 85.5 9C85 12 83 13 81 13C79 13 77 12 76.5 9C76 7 74 6 66 6H42C34 6 32 7 31 11C30 17 27 20 23.5 20C20 20 17 17 16 11C15 7 13 6 8 6H0Z'/%3E%3C/svg%3E") left top / 160px 22px repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cpath d='M0 0H160V6C150 6 148 7 147 10C146 15 143 17 140 17C137 17 135 15 134 10C133 7 130 6 120 6H96C88 6 86 7 85.5 9C85 12 83 13 81 13C79 13 77 12 76.5 9C76 7 74 6 66 6H42C34 6 32 7 31 11C30 17 27 20 23.5 20C20 20 17 17 16 11C15 7 13 6 8 6H0Z'/%3E%3C/svg%3E") left top / 160px 22px repeat-x;
}
.section--night h2 { color: #fff; }
.section-lead { font-size: 1.1rem; color: var(--color-text-light); max-width: 46rem; }
.section-tight { padding: 1.5rem 0; }
.page { padding-top: 1rem; padding-bottom: 3rem; }
.page--prose { max-width: 50rem; }
.split { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }

.tldr {
    background: var(--color-surface); border-left: 5px solid var(--orange); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 1.1rem 1.3rem; margin: 0 0 1.5rem; font-size: 1.05rem;
}
.tldr p { margin: 0; }

.facts-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.facts-table caption { text-align: left; font-weight: 700; padding: 0 0 .5rem; color: var(--color-text-light); }
.facts-table th, .facts-table td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: 0; }
.facts-table th { width: 34%; color: var(--color-primary); font-weight: 700; }
.facts-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-alt) 45%, transparent); }
.facts-table thead th { background: var(--purple); color: #fff; }
@media (max-width: 30rem) {
    .facts-table:not(.legend) th, .facts-table:not(.legend) td { display: block; width: auto; }
    .facts-table:not(.legend) th { border-bottom: 0; padding-bottom: 0; }
}

.steps { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--color-surface); border-radius: var(--radius); padding: 1.4rem 1.25rem 1.25rem; box-shadow: var(--shadow); position: relative; border-bottom: 4px solid var(--orange); }
.step:nth-child(2) { border-bottom-color: var(--mauve); }
.step:nth-child(3) { border-bottom-color: var(--purple); }
.step:nth-child(4) { border-bottom-color: var(--green); }
.step p { margin: 0; }
/* Číslo kroku jako dýně se stopkou */
.step-num {
    position: relative; display: inline-flex; width: 2.7rem; height: 2.35rem; align-items: center; justify-content: center;
    border-radius: 48% 48% 44% 44% / 55% 55% 45% 45%; margin-bottom: .6rem;
    background: radial-gradient(ellipse at 50% 40%, #ffa65e, var(--orange) 60%, #d96d22);
    color: var(--purple-deep); font-family: var(--font-label); font-size: 1.25rem;
    box-shadow: inset 6px 0 0 -3px rgba(0, 0, 0, .08), inset -6px 0 0 -3px rgba(0, 0, 0, .08);
}
.step-num::before {
    content: ""; position: absolute; top: -.42rem; left: 50%; width: .4rem; height: .6rem; margin-left: -.2rem;
    background: var(--green); border-radius: 3px 3px 1px 1px; transform: rotate(14deg);
}

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232a1740' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; }
.timeline { padding-left: 1.4rem; }
.timeline li { margin-bottom: .6rem; }
.timeline li::marker { color: var(--orange-text); font-weight: 700; }

.callout { border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1rem 0; border-left: 4px solid var(--color-note); background: var(--color-surface); }
.callout p { margin: 0; }
.callout--tip { border-left-color: var(--color-tip); }
.callout--warning { border-left-color: var(--color-warning); }
.callout--state {
    border-left: 6px solid var(--orange); font-size: 1.05rem; margin: 0 0 1.25rem;
    background: var(--color-surface);
    background: color-mix(in srgb, var(--orange) 14%, var(--color-surface));
}

.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { background: var(--color-surface); border: 1px dashed var(--orange); border-radius: 999px; padding: .3rem .8rem; font-size: .95rem; }
.tags li:nth-child(4n+2) { border-color: var(--mauve); }
.tags li:nth-child(4n+3) { border-color: var(--color-tip); }
.tags li:nth-child(4n) { border-color: var(--color-note); }

.stats { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
@media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats li { text-align: center; padding: 1.25rem .5rem; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.stats strong { display: block; font-family: var(--font-label); font-weight: 400; font-size: clamp(1.6rem, 3vw + .8rem, 2.6rem); color: var(--orange); line-height: 1.1; text-shadow: 0 0 22px rgba(240, 138, 60, .45); }
.stats span { color: #d9cbea; }
.stats-note { color: #d9cbea; font-size: .9rem; max-width: 46rem; }

.cards { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(4, 1fr); } .cards--2 { grid-template-columns: 1fr 1fr; } }
.card { display: block; background: var(--color-surface); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); color: var(--color-text); text-decoration: none; border: 1px solid var(--color-border); transition: transform .15s, border-color .15s, box-shadow .15s; }
a.card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: var(--shadow-lift); }
a.card h3::after { content: "→"; display: inline-block; margin-left: .35rem; color: var(--orange-text); font-family: var(--font-main); font-size: 1.1rem; transition: transform .15s; }
a.card:hover h3::after { transform: translateX(4px); }
.card p { margin: 0 0 .75rem; color: var(--color-text-light); }
.card-icon {
    display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; margin-bottom: .7rem;
    border-radius: 50%; font-size: 1.8rem; line-height: 1; background: var(--color-alt); border: 2px dashed var(--orange);
}
.cards > :nth-child(4n+2) .card-icon { border-color: var(--mauve); }
.cards > :nth-child(4n+3) .card-icon { border-color: var(--color-tip); }
.cards > :nth-child(4n) .card-icon { border-color: var(--color-note); }
.card--static h2 { font-size: 1.6rem; }

.reg-grid { display: grid; gap: 1.25rem; margin: 1rem 0; }
@media (min-width: 52rem) { .reg-grid { grid-template-columns: 1fr 1fr; } }
.reg-card { background: var(--color-surface); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); border-top: 6px solid var(--purple); }
.reg-card--families { border-top-color: var(--orange); }
.reg-deadline { font-family: var(--font-label); color: var(--orange-text); letter-spacing: .02em; }

.art-frame { margin: 0; max-width: 24rem; }

/* === FAQ === */
.faq details { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: .6rem; background: var(--color-surface); transition: border-color .15s; }
.faq details[open] { border-color: var(--orange); box-shadow: var(--shadow); }
.faq summary { font-weight: 700; cursor: pointer; list-style: none; padding: .9rem 2.8rem .9rem 1.1rem; position: relative; min-height: 44px; border-radius: var(--radius); }
.faq summary:hover { color: var(--color-primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: .8rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--color-alt); color: var(--orange-text); font-size: 1.25rem; line-height: 1; transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.1rem 1rem; margin: 0; }

/* === GALLERY === */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1rem 0 1.5rem; }
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, 1fr); gap: .9rem; } }
@media (min-width: 90rem) { .gallery:not(.gallery--teaser) { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.gallery figcaption { font-size: .78rem; color: var(--color-text-light); margin-top: .25rem; }
.gallery a { display: block; overflow: hidden; border-radius: 10px; }
.gallery a img { transition: transform .3s; }
.gallery a:hover img { transform: scale(1.04); }
/* Ukázka na úvodu: polaroidy */
.gallery--teaser { gap: 1rem; padding: .5rem 0; }
.gallery--teaser figure {
    background: var(--color-surface); padding: .45rem .45rem 1.3rem; border-radius: 4px; box-shadow: var(--shadow);
    transform: rotate(-1.6deg); transition: transform .2s, box-shadow .2s;
}
.gallery--teaser figure:nth-child(2n) { transform: rotate(1.3deg); }
.gallery--teaser figure:nth-child(3n) { transform: rotate(-.6deg); }
.gallery--teaser figure:hover { transform: rotate(0) scale(1.03); box-shadow: var(--shadow-lift); }
.gallery--teaser img { border-radius: 2px; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(10, 5, 20, .92); }
.lightbox img { max-width: 96vw; max-height: 84vh; width: auto; border-radius: 8px; margin: 0 auto; }
.lightbox-cap { color: #eee; text-align: center; margin: .5rem 0 0; font-size: .9rem; }
.lightbox-close, .lightbox-nav {
    position: fixed; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255, 255, 255, .92); color: #222; font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox-close { top: .5rem; right: .5rem; }
.lightbox-nav { top: 50%; margin-top: -24px; }
.lightbox-prev { left: .5rem; }
.lightbox-next { right: .5rem; }
.video-wrap video { width: 100%; max-width: 22rem; aspect-ratio: 9 / 16; height: auto; border-radius: var(--radius); background: #000; box-shadow: var(--shadow); border: 6px solid var(--color-surface); }

.posters { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 48rem) { .posters { grid-template-columns: repeat(4, 1fr); } }
.posters a { display: block; text-decoration: none; color: var(--color-text); }
.posters img { width: 100%; aspect-ratio: 210 / 297; border-radius: 8px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.posters a:hover img { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.posters span { display: block; font-size: .875rem; margin-top: .35rem; }
.posters small { color: var(--color-text-light); }

.press { list-style: none; padding: 0; }
.press li { padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
.press span { color: var(--color-text-light); font-size: .9rem; }

/* === 404 === */
.e404__notice { display: flex; gap: .85rem; padding: .9rem 1.1rem; margin: 1rem 0 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--orange); border-radius: var(--radius); }
.e404__badge { flex: none; font-size: .75rem; font-weight: 700; color: var(--purple-deep); background: var(--orange); padding: .2rem .45rem; border-radius: 4px; height: fit-content; }
.e404__headline { font-size: 1.6rem; margin: 0 0 .25rem; }
.e404__path { margin: 0; color: var(--color-text-light); font-size: .9rem; }
.e404__url { word-break: break-all; }
.e404__block { margin-bottom: 2rem; }
.e404__block-title { font-size: 1.4rem; border-bottom: 2px solid var(--orange); padding-bottom: .4rem; }
.e404__block-kicker { display: block; font-family: var(--font-label); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-text); }
.e404__hub-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.e404__hub-list a { display: block; padding: .55rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; text-decoration: none; }
.e404__hub-list a:hover { border-color: var(--orange); }
.e404__guess-list { list-style: none; padding: 0; }
.e404__guess-list a { display: block; padding: .7rem .5rem; border-bottom: 1px solid var(--color-border); text-decoration: none; }
.e404__guess-url { display: block; font-size: .75rem; color: var(--color-text-light); }

/* === FOOTER (nad ní silueta střech) === */
.site-footer { position: relative; background: var(--purple-deep); color: #d9cbea; padding: 2.5rem 0 1.5rem; margin-top: 4.25rem; }
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 3.25rem; background: var(--purple-deep);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40'%3E%3Cpath d='M0 40V26h26l13-11 13 11h18V16h10V9h6v7h10v10h32V20l17-13 17 13v6h24V14h8V6h4v8h8v12h30l15-12 15 12h22V18h40v8h20l12-9 12 9h18V12h6V4h4v8h6v14h34V20l14-10 14 10v6h12V40z'/%3E%3C/svg%3E") left bottom / 39rem 3.25rem repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40'%3E%3Cpath d='M0 40V26h26l13-11 13 11h18V16h10V9h6v7h10v10h32V20l17-13 17 13v6h24V14h8V6h4v8h8v12h30l15-12 15 12h22V18h40v8h20l12-9 12 9h18V12h6V4h4v8h6v14h34V20l14-10 14 10v6h12V40z'/%3E%3C/svg%3E") left bottom / 39rem 3.25rem repeat-x;
}
.site-footer a { color: #f1e6ff; }
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin-bottom: .4rem; }
.footer-head { font-weight: 700; color: #fff; margin-bottom: .4rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .2rem; }
.footer-links a { display: inline-block; padding: .3rem 0; }
.footer-small { font-size: .8rem; color: #b9a8cf; }
.footer-fan { font-size: .9rem; color: #f1e6ff; border-left: 3px solid var(--orange); padding-left: .7rem; }

/* === INSTALACE APLIKACE (patička) === */
.pwa-appstore-btn { display: inline-flex; align-items: center; gap: .4rem; background: #000; border: 1px solid #a6a6a6; border-radius: 7px; padding: .4rem 1rem .4rem .5rem; text-decoration: none; margin-top: .25rem; }
.site-footer .pwa-appstore-btn { color: #fff; }
.pwa-appstore-btn:hover { background: #222; border-color: #ccc; }
.pwa-appstore-btn[hidden] { display: none; }
.pwa-appstore-btn svg { flex-shrink: 0; }
.pwa-appstore-text { display: flex; flex-direction: column; align-items: flex-start; }
.pwa-appstore-small { font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; }
.pwa-appstore-big { font-size: 1rem; font-weight: 600; line-height: 1.2; }

/* === SPODNÍ MOBILNÍ LIŠTA (do šířky, od které je vidět horní menu) === */
.nav-mobile { display: none; }
@media (max-width: 63.99rem) {
    .nav-mobile {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex;
        background: var(--color-bg);
        background: color-mix(in srgb, var(--color-bg) 97%, transparent);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 14px rgba(42, 23, 64, .08);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .nav-mobile a, .nav-mobile .nav-app {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
        gap: .15rem; padding: .5rem .2rem .45rem; min-height: 56px; text-decoration: none;
        color: var(--color-text-light); font-size: .66rem; font-weight: 600; min-width: 0;
        background: none; border: 0; cursor: pointer; font-family: inherit; line-height: inherit;
    }
    .nav-mobile [hidden] { display: none; }
    .nav-mobile a.active, .nav-mobile a:hover, .nav-mobile .nav-app:hover { color: var(--color-primary); }
    .nav-mobile svg { width: 22px; height: 22px; }
    .nav-mobile .nav-book { color: var(--orange-text); }
    .nav-mobile .nav-book-circle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 3.6rem; height: 3.6rem; margin-top: -1.7rem; margin-bottom: .05rem;
        background: var(--purple-deep); border-radius: 50%; border: 3px solid var(--orange);
        box-shadow: 0 6px 16px rgba(42, 23, 64, .45); transition: transform .15s;
    }
    .nav-mobile .nav-book:hover .nav-book-circle, .nav-mobile .nav-book[aria-current] .nav-book-circle { transform: translateY(-2px) rotate(-6deg); }
    .nav-mobile .nav-book-circle svg { width: 34px; height: 34px; }
    body { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}

.keep-light { color-scheme: only light; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .site-header, .site-footer, .theme-toggle, .skip-link, .nav-mobile, .preview-bar, .skyline, .hero-cta { display: none; }
    body, body:not(.page-home) { padding-bottom: 0; background: #fff; }
    .hero { background: none; padding: 0; }
    .hero::before, .hero-art::before { display: none; }
}