/* ==========================================================================
   IMPRO nábytek – hlavní styly
   ========================================================================== */

/* ---------- 1. Proměnné ---------- */
:root {
    /* Barvy – paleta (téma „gold“) */
    --primary: #f15a24;
    --primary-light: #f15a24;
    --dark: #2e2e2e;
    --light: #f4f1ec; /* teplá neutrální „kamenná“ – bez žlutého nádechu, ladí s dřevem */
    --white: #ffffff;

    /* Odvozené barvy – mění se automaticky s tématem */
    --on-primary: var(--white);                                     /* text na primární barvě */
    --primary-dark: color-mix(in srgb, var(--primary) 85%, black);  /* hover */
    --primary-text: color-mix(in srgb, var(--primary) 72%, black);  /* primární barva pro text na světlém pozadí */
    --dark-deep: color-mix(in srgb, var(--dark) 80%, black);
    --text: var(--dark);
    --text-muted: color-mix(in srgb, var(--dark) 72%, white);
    --text-on-dark: color-mix(in srgb, var(--white) 82%, var(--dark));
    --border: color-mix(in srgb, var(--primary) 28%, transparent);
    --placeholder: #d9d9d9;
    --placeholder-text: #8a8a8a;

    /* Výplně ploch – zatím bez gradientů. Pro jemný gradient stačí odkomentovat:
       --gradient-primary: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
       --gradient-dark: linear-gradient(160deg, color-mix(in srgb, var(--dark) 88%, white) 0%, var(--dark-deep) 100%);
       --gradient-light: linear-gradient(180deg, var(--light) 0%, var(--white) 100%); */
    --gradient-primary: var(--primary);
    --gradient-dark: var(--dark);
    --gradient-light: var(--white);

    /* Typografie */
    --font-heading: "Titillium Web", system-ui, sans-serif;
    --font-body: "Open Sans", system-ui, sans-serif;
    --fs-hero: clamp(2.75rem, 1.6rem + 3.6vw, 5rem);
    --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
    --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    /* Rozměry */
    --container: 88.75rem; /* 1420px */
    --container-narrow: 50rem;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --section-space: clamp(4.5rem, 3rem + 6vw, 9rem);
    --radius: 0.25rem;
    --radius-lg: 0.75rem;
    --header-h: 5rem;
    --admin-h: 0px; /* výška admin lišty (jen přihlášený administrátor) */

    --shadow-light: 0 0.75rem 2.5rem -1rem rgb(46 46 46 / 0.14);
    --shadow-soft: 0 1.5rem 3rem -1.25rem rgb(46 46 46 / 0.24);
    --transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Alternativní téma – oranžová (přepnutí: SITE_THEME="orange" v .env) */
[data-theme="orange"] {
    --primary: #e2601b;
    --primary-light: #f28c3c;
}

/* ---------- 2. Základ ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--admin-h));
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

h1, h2, h3, p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sprite {
    display: none;
}

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

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

.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

/* ---------- 3. Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-space);
}

.section--tight {
    padding-top: 0;
}

.section--light {
    background: var(--light);
}

.section-head {
    margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}

.section-head--center {
    text-align: center;
    margin-inline: auto;
}

.section-head__lead {
    margin-top: 1.5rem;
    font-size: var(--fs-lead);
    color: var(--text-muted);
}

/* ---------- 4. Typografie ---------- */
.h2,
.h3,
.hero__title {
    font-family: var(--font-heading);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.h2 {
    text-wrap: balance;
    font-size: var(--fs-h2);
    font-weight: 300;
}

.h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 1.25rem;
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary-text);
}

.eyebrow::before {
    content: "";
    width: 2.5em;
    height: 1px;
    background: var(--gradient-primary);
}

.eyebrow--light {
    color: var(--primary-light);
}

@media (max-width: 30em) {
    .eyebrow {
        font-size: 0.75rem;
        letter-spacing: 0.16em;
    }

    .eyebrow--light::before {
        display: none;
    }
}

/* ---------- 5. Tlačítka a odkazy ---------- */
.btn {
    --btn-pad-y: 1.05em;
    --btn-pad-x: 2.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn--primary {
    color: var(--on-primary);
    background: var(--gradient-primary);
    box-shadow: 0 0.75rem 1.75rem -0.75rem color-mix(in srgb, var(--primary) 65%, transparent);
}

.btn--primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn--ghost {
    color: var(--white);
    border-color: rgb(255 255 255 / 0.55);
    background: rgb(255 255 255 / 0.04);
    backdrop-filter: blur(4px);
}

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

/* obrysové tlačítko na světlém podkladu – protějšek .btn--ghost z hera */
.btn--outline {
    color: var(--dark);
    border-color: color-mix(in srgb, var(--dark) 35%, transparent);
    background: transparent;
}

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

.btn--small {
    --btn-pad-y: 0.8em;
    --btn-pad-x: 1.5em;
    font-size: 0.8125rem;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-text);
}

.link-more .icon {
    transition: transform var(--transition);
}

a.link-more {
    text-decoration: none;
}

a.link-more:hover .icon {
    transform: translateX(0.25rem);
}

/* ---------- 6. Zástupné obrázky (šedé boxy) ---------- */
.placeholder {
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--placeholder);
    color: var(--placeholder-text);
    font-size: var(--fs-small);
    text-align: center;
}

/* ---------- 7. Hlavička ---------- */
.site-header {
    position: sticky;
    top: var(--admin-h);
    z-index: 100;
    background: var(--white);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Při scrollu dolů se lišta schová, při scrollu nahoru vrátí */
.site-header.is-hidden {
    transform: translateY(calc(-100% - 2rem)); /* + rezerva na bílé logo, které přečnívá pod lištu */
    box-shadow: none;
}

.site-header--transparent {
    position: fixed;
    inset: var(--admin-h) 0 auto;
    background: transparent;
}

.site-header.is-scrolled,
.site-header.is-open {
    background: var(--white);
    box-shadow: 0 0.5rem 2rem -1rem rgb(46 46 46 / 0.25);
}

/* odscrollovaná lišta jako matné sklo – bílá jen mírně průsvitná, ať menu zůstane kontrastní;
   otevřené mobilní menu zůstává plně bílé */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header.is-scrolled:not(.is-open) {
        background: rgb(255 255 255 / 0.82);
        -webkit-backdrop-filter: blur(16px) saturate(170%);
        backdrop-filter: blur(16px) saturate(170%);
    }
}

.site-header__inner {
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: var(--header-h);
}

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

/* bílé logo (s claimem) je širší formát – větší, aby byl claim čitelný */
.site-header__logo .logo--white {
    height: 6rem;
}

@media (max-width: 48em) {
    .site-header__logo .logo--white {
        height: 4.5rem;
    }
}

.logo--white {
    display: none;
}

.site-header--transparent:not(.is-scrolled, .is-open) .logo--white {
    display: block;
}

.site-header--transparent:not(.is-scrolled, .is-open) .logo--dark {
    display: none;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.main-nav__list {
    display: flex;
    gap: 2rem;
}

.main-nav__list a {
    position: relative;
    padding-block: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--dark);
    transition: color var(--transition);
}

.main-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
}

.main-nav__list a:hover::after,
.main-nav__list a[aria-current="page"]::after {
    transform: scaleX(1);
}

.site-header--transparent:not(.is-scrolled, .is-open) .main-nav__list a {
    color: var(--white);
}

/* Formátování – samostatná služba: tenký rámeček, výrazně méně než tlačítko Poptat */
.main-nav__list .main-nav__boxed {
    --mark: 0.625rem;
    --mark-full: 50%;
    --mark-bg: transparent;
    padding: 0.5rem 0.9rem;
    box-shadow: none;
    transition: --mark 0.6s cubic-bezier(0.6, 0, 0.3, 1), color var(--transition);
}

.main-nav__list .main-nav__boxed::after {
    display: none;
}

/* jen rohové značky, při najetí (a na vlastní stránce) se spojí do rámečku */
.main-nav__list .main-nav__boxed:hover,
.main-nav__list .main-nav__boxed[aria-current="page"] {
    --mark: var(--mark-full);
}

.site-header--transparent:not(.is-scrolled, .is-open) .main-nav__boxed {
    --mark-c: linear-gradient(var(--white), var(--white));
}

.nav-toggle {
    display: none;
    padding: 0.5rem;
    border: 0;
    background: none;
    color: var(--dark);
    cursor: pointer;
}

.nav-toggle .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.site-header--transparent:not(.is-scrolled, .is-open) .nav-toggle {
    color: var(--white);
}

.nav-toggle .icon--close,
.is-open .nav-toggle .icon--open {
    display: none;
}

.is-open .nav-toggle .icon--close {
    display: block;
}

@media (max-width: 75em) {
    .nav-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        padding: 1rem var(--gutter) 2rem;
        background: var(--white);
        box-shadow: 0 1rem 2rem -1rem rgb(46 46 46 / 0.3);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-0.5rem);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }

    .is-open .main-nav {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .main-nav__list {
        flex-direction: column;
        gap: 0;
    }

    .main-nav__list a {
        display: block;
        padding-block: 0.85rem;
        font-size: 1.125rem;
        border-bottom: 1px solid color-mix(in srgb, var(--dark) 8%, transparent);
    }

    .main-nav__list a::after {
        display: none;
    }

    /* na mobilu běžná položka seznamu (bez rohových značek) – dominantní zůstává tlačítko Poptat */
    .main-nav__list .main-nav__boxed {
        padding: 0.85rem 0;
        background: none;
    }

    .main-nav .btn {
        --btn-pad-y: 1.05em;
        font-size: 0.9375rem;
    }
}

/* ---------- 8. Hero ---------- */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + 4rem) clamp(4rem, 3rem + 6vw, 8rem);
    color: var(--white);
    background: var(--dark);
    isolation: isolate;
    overflow: hidden;
}

.hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* úvodní přiblížení začne rychle a zpomaluje (ease-out); z koncového bodu pak
       už jen pomalé lineární oddalování a přibližování dokola */
    animation:
        hero-zoom 12s cubic-bezier(0.2, 0.6, 0.35, 1) both,
        hero-zoom 30s linear 12s infinite alternate-reverse;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgb(20 20 20 / 0.6) 0%, rgb(20 20 20 / 0) 30%),
        linear-gradient(75deg, rgb(20 20 20 / 0.86) 0%, rgb(20 20 20 / 0.6) 50%, rgb(20 20 20 / 0.5) 100%);
}

/* dva sloupce přes celou šířku: text vlevo, nákres vpravo – oba bloky vystředěné ve sloupci */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    justify-items: center;
    gap: clamp(2rem, 4vw, 5rem);
    max-width: none;
}

/* šířka sloupce řídí velikost nadpisu (cqi), aby zůstal na dvou řádcích */
.hero__content {
    container-type: inline-size;
    justify-self: start;
    width: 100%;
    max-width: 35rem; /* = šířka nadpisu v max. velikosti */
    /* blok vystředěný na levou polovinu obrazovky (25vw), ale nikdy mimo svůj sloupec */
    margin-left: clamp(0px, 25vw - var(--gutter) - min(17.5rem, 50%), 100% - min(35rem, 100%));
}

.hero__title {
    max-width: 12em;
    font-size: min(var(--fs-hero), 13.5cqi);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0.15em 0.6em rgb(0 0 0 / 0.25);
}

/* delší nadpis (např. „Nábytek pro celý váš domov“) – menší písmo, aby zůstal na dvou řádcích */
.hero__title--long {
    font-size: min(var(--fs-hero) * 0.86, 12cqi);
}

.hero__title--longer {
    font-size: min(var(--fs-hero) * 0.74, 10cqi);
}

.hero__lead {
    max-width: 34rem;
    margin-block: 1.75rem 2.5rem;
    font-size: var(--fs-lead);
    color: rgb(255 255 255 / 0.88);
    text-shadow: 0 0.1em 0.5em rgb(0 0 0 / 0.3);
}

/* Nástup textů hera: postupné vyjetí a zobrazení ze ztracena.
   Výchozí stav je viditelný, takže při vypnutých animacích (reduced motion) se nic neskryje. */
.hero__line {
    display: block;
}

.hero__content > *,
.hero__line {
    animation: hero-rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__content .eyebrow      { animation-delay: 0.15s; }
.hero__line:nth-child(1)     { animation-delay: 0.3s; }
.hero__line:nth-child(2)     { animation-delay: 0.45s; }
.hero__content .hero__lead   { animation-delay: 0.7s; }
.hero__content .btn-group    { animation-delay: 0.9s; }

/* nadpis se skládá po řádcích – samotné h1 neanimovat */
.hero__content > .hero__title {
    animation: none;
}

/* eyebrow: linka se vytáhne zleva, písmena se „usadí“ (stáhne se prostrkání) */
.hero__content .eyebrow {
    animation-name: hero-rise, eyebrow-track;
    animation-duration: 1.1s, 1.6s;
}

.hero__content .eyebrow::before {
    transform-origin: left;
    animation: eyebrow-line 0.9s cubic-bezier(0.6, 0, 0.3, 1) 0.35s both;
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
}

@keyframes eyebrow-track {
    from { letter-spacing: 0.4em; }
}

@keyframes eyebrow-line {
    from { transform: scaleX(0); }
}

/* Liniový nákres kuchyně v pravém sloupci */
.hero__sketch {
    width: 100%;
    max-width: 54rem;
    height: auto;
    overflow: visible;
    pointer-events: none;
    fill: none;
    stroke: rgb(255 255 255 / 0.85);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* animace kreslení – délky linek doplní JS (třída .is-drawing) */
.hero__sketch.is-drawing g > :not(text) {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: sketch-draw 1.5s cubic-bezier(0.6, 0, 0.3, 1) forwards;
    animation-delay: calc(0.4s + var(--d) * 0.25s);
}

.hero__sketch .sketch-accent {
    stroke: var(--primary-light);
}

.hero__sketch .sketch-faint {
    stroke: rgb(255 255 255 / 0.45);
}

.hero__sketch .sketch-dim {
    stroke: rgb(255 255 255 / 0.6);
    stroke-width: 1.2;
}

.hero__sketch .sketch-mark {
    stroke: var(--primary);
    stroke-width: 2.4;
}

.hero__sketch .sketch-mark--bar {
    stroke-width: 3.6;
    fill: #fcfcfc; /* zakryje svislou čáru kříže jako v logu; o chlup tlumenější než čistá bílá */
}

/* motiv z loga: vlastní (rychlejší) časování, --d = pořadí v motivu (0 obdélníček, 1 kříž, 2 kruh) */
.hero__sketch.is-drawing .sketch-mark > * {
    animation-duration: 0.9s;
    animation-delay: calc(3.2s + var(--d) * 0.5s);
}

/* obdélníček se nakreslí první a hned vyplní – svislá čára kříže pak vede za ním */
.hero__sketch.is-drawing .sketch-mark--bar > * {
    fill-opacity: 0;
    animation:
        sketch-draw 0.6s cubic-bezier(0.6, 0, 0.3, 1) forwards,
        sketch-fill 0.25s ease forwards;
    animation-delay: 3.2s, 3.75s;
}

.hero__sketch text {
    fill: var(--primary-light);
    stroke: none;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.hero__sketch.is-drawing text {
    opacity: 0;
    animation: sketch-fade 0.8s ease forwards;
    animation-delay: calc(0.85s + var(--d) * 0.25s);
}

@keyframes sketch-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes sketch-fill {
    to { fill-opacity: 1; }
}

@keyframes sketch-fade {
    to { opacity: 1; }
}

@media (max-width: 64em) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* bez nákresu je hero jednosloupcové – text na střed */
    .hero__content {
        justify-self: center;
        margin-left: 0;
        text-align: center;
    }

    .hero__title,
    .hero__lead {
        margin-inline: auto;
    }

    .hero__content .btn-group {
        justify-content: center;
    }

    .hero__sketch {
        display: none;
    }
}

/* mobil: tlačítka pod sebou ve stejné šířce */
@media (max-width: 36em) {
    .hero__content .btn-group {
        flex-direction: column;
        max-width: 18rem;
        margin-inline: auto;
    }
}

@keyframes hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* ---------- 8b. Nástup při scrollu ---------- */
/* JS přidá .reveal nadpisům, textům a kartám sekcí a po vstupu do výřezu .is-revealed.
   Pohyb vychází z hera (hero-rise, eyebrow, dokreslení linek); --ri = pořadí v dávce
   prvků, které se zobrazily naráz, takže nastupují postupně.
   Fill „backwards“: po doběhnutí animace nic nedrží, hover efekty fungují beze změny. */
.reveal:not(.is-revealed) {
    opacity: 0;
}

.reveal.is-revealed {
    animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--ri, 0) * 0.12s);
}

.eyebrow.reveal.is-revealed {
    animation-name: hero-rise, eyebrow-track;
    animation-duration: 0.9s, 1.4s;
}

.eyebrow.reveal.is-revealed::before {
    transform-origin: left;
    animation: eyebrow-line 0.9s cubic-bezier(0.6, 0, 0.3, 1) backwards;
    animation-delay: calc(0.2s + var(--ri, 0) * 0.12s);
}

/* rámečky „detail z výkresu“: rohové značky se dokreslí z nuly */
.cat-card__icon.is-revealed,
.core-card.is-revealed .core-card__media,
.seal__panel.is-revealed,
.contact-card.is-revealed .contact-card__icon,
.company-info.is-revealed .contact-card__icon,
.audience__card.is-revealed .audience__icon,
.benefit.is-revealed .benefit__icon,
.map__panel.is-revealed,
.contact-form__panel.is-revealed {
    animation: mark-draw 1s cubic-bezier(0.6, 0, 0.3, 1) backwards;
    animation-delay: calc(0.35s + var(--ri, 0) * 0.12s);
}

.timeline.is-revealed .timeline__icon {
    animation: mark-draw 1s cubic-bezier(0.6, 0, 0.3, 1) backwards;
    animation-delay: calc(0.6s + var(--i) * 0.2s);
}

/* ikona kategorie se při nástupu nakreslí (stejně jako při najetí) */
.cat-card__icon.is-revealed .icon {
    animation: icon-draw 1.2s cubic-bezier(0.6, 0, 0.3, 1) backwards;
    animation-delay: calc(0.5s + var(--ri, 0) * 0.12s);
}

/* galerie a dlaždice kuchyní bez mezer jen prolnout (posun by odkrýval spáry), rychlejší sled */
.feature__media.reveal.is-revealed,
.gallery__grid > .reveal.is-revealed {
    animation-name: reveal-fade;
    animation-delay: calc(var(--ri, 0) * 0.06s);
}

@keyframes mark-draw {
    from { --mark: 0px; }
}

@keyframes reveal-fade {
    from { opacity: 0; }
}

/* ---------- 9. Trust bar ---------- */
.trust {
    text-align: center;
}

.trust__text {
    margin-top: 2rem;
    font-size: var(--fs-lead);
    color: var(--text-muted);
}

/* mobil: delší odstavce pod vystředěným nadpisem doleva – na střed se špatně čtou */
@media (max-width: 36em) {
    .section-head--center .section-head__lead,
    .trust__text {
        text-align: left;
    }
}

@media (min-width: 90em) {
    .trust .container--narrow {
        max-width: 78rem;
    }

    /* delší úvod procesu – plná šířka obsahu a o chlup menší písmo, ať se vejde na 3 řádky */
    .process .section-head {
        max-width: none;
    }

    .process .section-head__lead {
        font-size: calc(var(--fs-lead) * 0.95);
    }

    .trust .h2 {
        text-wrap: nowrap;
    }
}

.trust__text strong {
    font-weight: 600;
    color: var(--text);
}

/* ---------- 10. Kategorie ---------- */
/* tři bloky přes celou šířku jako O nás: text nahoře, pod ním velká fotka vyblednutá do bílé */
/* odsazení sekce je uvnitř bloků → bílé dělicí linky vedou od horního okraje sekce */
.categories {
    padding-block: 0;
}

/* texty a fotky všech tří bloků lícují (subgrid: řádek textu + řádek fotky) */
.categories__split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
}

.cat-card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

/* hlavní rozcestník: text vystředěný ve svém sloupci (na mobilu doleva – viz níže) */
.cat-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: var(--section-space) calc(var(--gutter) * 1.5) 2.5rem;
    text-align: center;
}

.cat-card__text {
    max-width: 26rem;
    text-wrap: balance;
}

.cat-card__img {
    width: 100%;
    height: calc(100% + 3rem); /* vyrovná záporný margin – sekce končí oříznutá na fotky */
    min-height: clamp(20rem, 10rem + 22vw, 36rem);
    margin-top: -3rem; /* fotka zajede pod text, vyblednutí to zakryje */
    object-fit: cover;
    /* delší, měkčí přechod (zmírněná křivka) – fotka se z pozadí vynoří až pod odkazem */
    --fade: clamp(9rem, 5rem + 8vw, 16rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.08) calc(var(--fade) * 0.25), rgb(0 0 0 / 0.3) calc(var(--fade) * 0.5), rgb(0 0 0 / 0.7) calc(var(--fade) * 0.75), #000 var(--fade));
    mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.08) calc(var(--fade) * 0.25), rgb(0 0 0 / 0.3) calc(var(--fade) * 0.5), rgb(0 0 0 / 0.7) calc(var(--fade) * 0.75), #000 var(--fade));
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* tenká bílá linka mezi bloky – naruší jednolitou plochu fotek */
.cat-card + .cat-card {
    border-left: 2px solid var(--white);
}

.cat-card:hover .cat-card__img {
    transform: scale(1.04);
}

@media (max-width: 64em) {
    .categories__split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    }

    .cat-card {
        grid-row: auto;
        grid-template-rows: auto 1fr;
    }

    .cat-card + .cat-card {
        border-left: 0;
    }

    .categories {
        padding-top: var(--section-space);
    }

    /* pod sebou zůstává obsah vystředěný jako na desktopu */
    .cat-card__body {
        padding-top: 0;
        padding-inline: var(--gutter);
    }
}

/* „Detail z výkresu“ – čtverec se zlatými rohovými značkami (ikony kategorií a kroků procesu, fotky Poctivého jádra).
   Při najetí se značky protáhnou do celého rámečku (--mark až na polovinu strany = --mark-full). */
@property --mark {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0.875rem;
}

.cat-card__icon,
.timeline__icon,
.core-card__media,
.inquiry__panel,
.inquiry__tab,
.choice,
.to-top__btn,
.seal__panel,
.contact-card__icon,
.audience__icon,
.benefit__icon,
.map__panel,
.contact-form__panel,
.upload,
.ref-tabs__link,
.main-nav__boxed,
.legal-nav__link,
.legal__card,
.notfound__link,
.site-footer__partner {
    --mark: 0.875rem;
    --mark-c: linear-gradient(var(--primary), var(--primary));
    --mark-bg: var(--white);
    background:
        var(--mark-c) top left / var(--mark) 2px,
        var(--mark-c) top left / 2px var(--mark),
        var(--mark-c) top right / var(--mark) 2px,
        var(--mark-c) top right / 2px var(--mark),
        var(--mark-c) bottom left / var(--mark) 2px,
        var(--mark-c) bottom left / 2px var(--mark),
        var(--mark-c) bottom right / var(--mark) 2px,
        var(--mark-c) bottom right / 2px var(--mark),
        var(--mark-bg);
    background-repeat: no-repeat;
    box-shadow: var(--shadow-light);
    transition: --mark 0.6s cubic-bezier(0.6, 0, 0.3, 1), color var(--transition);
}

.cat-card:hover .cat-card__icon,
.contact-card:hover .contact-card__icon,
.timeline__step:hover .timeline__icon,
.core-card:hover .core-card__media {
    --mark: var(--mark-full);
}

/* ikona kategorie – při najetí se navíc znovu dokreslí */
.cat-card__icon {
    --mark-full: 2.25rem;
    --mark-bg: transparent; /* jen rohové značky, bez bílé výplně a stínu */
    box-shadow: none;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.cat-card__icon .icon {
    width: 2.75rem;
    height: 2.75rem;
    stroke-dasharray: 300;
    stroke-dashoffset: 0;
}

.cat-card:hover .cat-card__icon .icon {
    animation: icon-draw 1.2s cubic-bezier(0.6, 0, 0.3, 1);
}

@keyframes icon-draw {
    from { stroke-dashoffset: 300; }
}

.cat-card__title {
    font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.875rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dark);
}

.cat-card__text {
    font-size: 1.0625rem;
    color: var(--text-muted);
}

.cat-card:hover .link-more .icon {
    transform: translateX(0.375rem);
}

/* ---------- 11. O nás (příběh) ---------- */
.story {
    padding-bottom: 0;
    background: var(--light);
    /* cíl „Zjistit více“ z hera: při scrollu dolů se hlavička schová, rezerva ze scroll-padding
       by nechala vykouknout hero fotku – sekce dojede až k hornímu okraji */
    scroll-margin-top: calc(var(--header-h) * -1);
}

/* dvě fotky přes celou šířku vedle sebe; text nahoře, fotka pod ním
   nahoře vyblednutá do barvy sekce (bez překryvu textu a nábytku) */
.story__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story__block {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--light);
    overflow: hidden;
}

.story__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: calc(36rem + var(--pad-out));
    padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.story__img {
    width: 100%;
    height: calc(100% + 3rem); /* vyrovná záporný margin – sekce končí oříznutá na fotku */
    min-height: clamp(18rem, 10rem + 20vw, 32rem);
    margin-top: -3rem; /* fotka zajede pod text, vyblednutí to zakryje */
    object-fit: cover;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7rem);
    mask-image: linear-gradient(180deg, transparent 0, #000 7rem);
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.story__block:hover .story__img {
    transform: scale(1.04);
}

/* zlatá linka nad nadpisem */
.story__inner::before {
    content: "";
    width: 3rem;
    height: 2px;
    background: var(--primary);
}

.story__inner .h3 {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    color: var(--dark);
}

.story__inner p {
    font-size: 1.0625rem;
    color: color-mix(in srgb, var(--dark) 85%, white);
}

/* vnější okraj textů lícuje s obsahem .container (100 % = polovina šířky okna) */
.story__block {
    --pad-out: max(var(--gutter), calc((200% - var(--container)) / 2 + var(--gutter)));
}

.story__block--left .story__inner {
    padding-left: var(--pad-out);
    padding-right: calc(var(--gutter) * 1.5);
}

/* pravý text přisazený k pravému okraji obsahu – dvojice je zrcadlově souměrná podle středu */
.story__block--right .story__inner {
    justify-self: end;
    width: 100%;
    padding-right: var(--pad-out);
    padding-left: calc(var(--gutter) * 1.5);
}

@media (max-width: 48em) {
    .story__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .story__block--left .story__inner,
    .story__block--right .story__inner {
        padding-inline: var(--gutter);
    }
}

/* ---------- 12. Proces (časová osa) ---------- */
.process__cta {
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    text-align: center;
}

/* Kroky jako list výkresu: nahoře kótovací čára se značkami (dokreslí se při zobrazení),
   pod ní karty s ikonou v rámečku a velkým obrysovým číslem */
.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 1rem + 1vw, 2rem);
    padding-top: 3.25rem;
}

/* kótovací čára přes všechny kroky */
.timeline::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--primary);
    transform-origin: left;
}

.timeline__step {
    position: relative;
    display: flex;
}

/* značka kroku na kótě (šikmá čárka jako na výkresu) + popisek */
.timeline__tick {
    position: absolute;
    top: -3.25rem;
    left: 2rem;
    padding-left: 1rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--primary-text);
}

.timeline__tick::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.25rem;
    width: 1px;
    height: 0.875rem;
    background: var(--primary);
    transform: translate(-50%, -50%) rotate(45deg);
}

.timeline__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
    padding: 2rem;
    background: var(--white);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.timeline__step:hover .timeline__card {
    transform: translateY(-0.375rem);
    box-shadow: var(--shadow-soft);
}

/* velké obrysové číslo v rohu karty */
.timeline__num {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    font-family: var(--font-heading);
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--primary) 55%, transparent);
    pointer-events: none;
    transition: -webkit-text-stroke-color var(--transition);
}

.timeline__step:hover .timeline__num {
    -webkit-text-stroke-color: var(--primary);
}

/* ikona kroku – rámeček se značkami (sdílený styl výše) */
.timeline__icon {
    --mark-full: 2.5rem;
    --mark-bg: transparent;
    box-shadow: none; /* uvnitř bílé karty stačí samotné značky */
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.timeline__icon .icon {
    width: 3.5rem;
    height: 3.5rem;
}

.timeline__title {
    color: var(--dark);
}

.timeline__text {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* nástup při zobrazení: kóta se dokreslí zleva, karty postupně vyjedou */
.timeline.is-revealed::before {
    animation: timeline-line 1.4s cubic-bezier(0.6, 0, 0.3, 1) both;
}

.timeline.is-revealed .timeline__step {
    animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.3s + var(--i) * 0.2s);
}

/* před zobrazením skryto (JS odhalí i při reduced motion / bez IntersectionObserveru) */
.timeline[data-reveal]:not(.is-revealed) .timeline__step {
    opacity: 0;
}

.timeline[data-reveal]:not(.is-revealed)::before {
    transform: scaleX(0);
}

@keyframes timeline-line {
    from { transform: scaleX(0); }
}

@media (max-width: 75em) {
    .timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 4.5rem;
    }

    /* kóta jen nad každou kartou zvlášť */
    .timeline::before {
        display: none;
    }

    .timeline__tick {
        left: 0;
        right: 0;
        padding-left: 3rem;
    }

    .timeline__tick::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 1.25rem;
        height: 1px;
        background: var(--primary);
    }

    .timeline__tick::before {
        left: 2rem;
    }
}

@media (max-width: 40em) {
    .timeline {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 13. Poctivé jádro ---------- */
/* tři sloupce bez boxů: fotka jako výřez z výkresu (rohové značky), pod ní poznámka, nadpis, text */
.core__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.core-card {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* informativní blok, ne odkaz: bez vyjetí a stínu – při najetí se jen rohové značky
   protáhnou do rámečku (sdílený styl výše) a fotka se zlehka přiblíží */
.core-card__media {
    --mark-bg: var(--white);
    --mark-full: 50%;
    margin-bottom: 1rem;
    padding: 0.75rem;
    box-shadow: none;
}

.core-card__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.core-card:hover .core-card__media img {
    transform: scale(1.02);
}

/* poznámka jako popisek na výkresu */
.core-card__spec {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding-left: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--primary-text);
}

.core-card__spec::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: var(--primary);
}

.core-card__title,
.core-card__text {
    padding-inline: 0.75rem;
}

.core-card__title {
    color: var(--dark);
}

.core-card__text {
    color: var(--text-muted);
}

/* karta s odkazem je klikací celá – odkaz roztažený přes celou kartu */
.core-card--link {
    position: relative;
    cursor: pointer;
}

.core-card--link .link-more::after {
    content: "";
    position: absolute;
    inset: 0;
}

.core-card--link .link-more:focus-visible {
    outline: none;
}

.core-card--link:has(.link-more:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 0.5rem;
}

/* ---------- 13b. Galerie realizací ---------- */
.gallery {
    padding-bottom: 0;
}

/* pod hlavičkou stejný odstup jako nad ní */
.gallery .section-head {
    margin-bottom: var(--section-space);
}

/* čtvercové dlaždice přes celou šířku okna, bez mezer */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* neúplná poslední řada se v 6 sloupcích skryje (fotky zůstávají v lightboxu) */
@media (min-width: 75.0625em) {
    .gallery__extra {
        display: none;
    }
}

/* od tabletu níž (4 a 2 sloupce) jen 8 fotek – 2 řady, resp. 4 řady na mobilu */
@media (max-width: 75em) {
    .gallery__more {
        display: none;
    }
}

.gallery__item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--dark);
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity var(--transition);
}

/* při najetí: ztmavení a jemný „zaměřovací“ kříž z loga */
.gallery__item::before,
.gallery__item::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: var(--white);
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
}

.gallery__item::before {
    width: 2.5rem;
    height: 1px;
    transform: translate(-50%, -50%) scaleX(0.4);
}

.gallery__item::after {
    width: 1px;
    height: 2.5rem;
    transform: translate(-50%, -50%) scaleY(0.4);
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
    transform: scale(1.06);
    opacity: 0.6;
}

.gallery__item:hover::before,
.gallery__item:hover::after,
.gallery__item:focus-visible::before,
.gallery__item:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.gallery__item:focus-visible {
    outline-offset: -4px;
}

@media (max-width: 75em) {
    .gallery__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 36em) {
    .gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Lightbox */
.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(3.5rem, 2rem + 4vw, 5rem) clamp(1rem, 6vw, 6rem);
    border: 0;
    color: var(--white);
    background: rgb(20 20 20 / 0.94);
}

.lightbox[open] {
    display: grid;
    place-items: center;
    animation: lightbox-in 0.3s ease;
}

@keyframes lightbox-in {
    from { opacity: 0; }
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox__figure {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 2rem 4rem -1rem rgb(0 0 0 / 0.5);
    transition: opacity 0.25s ease;
}

.lightbox__img.is-loading {
    opacity: 0;
}

.lightbox__counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    translate: -50% 0;
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    letter-spacing: 0.2em;
    color: rgb(255 255 255 / 0.7);
}

.lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.25);
    color: var(--white);
    background: rgb(20 20 20 / 0.4);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

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

.lightbox__btn .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.lightbox__btn--close {
    top: 1rem;
    right: 1rem;
}

.lightbox__btn--prev,
.lightbox__btn--next {
    top: 50%;
    translate: 0 -50%;
}

.lightbox__btn--prev {
    left: 1rem;
}

.lightbox__btn--prev .icon {
    rotate: 180deg;
}

.lightbox__btn--next {
    right: 1rem;
}

/* na mobilu šipky dole vedle počítadla, ať nepřekrývají fotku */
@media (max-width: 36em) {
    .lightbox__btn--prev,
    .lightbox__btn--next {
        top: auto;
        bottom: 0.5rem;
        translate: none;
    }
}

html.has-lightbox,
html.has-modal {
    overflow: hidden;
}

/* ---------- 13c. Poptávka (modal s formuláři) ---------- */
/* dialog přes celé okno; tmavý poloprůhledný podklad s rozmazáním (glass),
   panel jako list výkresu s rohovými značkami (sdílený styl) */
.inquiry {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: clamp(1rem, 0.5rem + 3vw, 3rem) var(--gutter);
    border: 0;
    background: transparent;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.inquiry[open] {
    display: grid;
}

.inquiry::backdrop {
    background: rgb(18 16 14 / 0.78);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
}

.inquiry[open],
.inquiry[open]::backdrop {
    animation: lightbox-in 0.35s ease;
}

.inquiry__panel {
    --mark-full: 50%;
    --mark-bg: var(--white);
    position: relative;
    width: 100%;
    max-width: 46rem;
    margin: auto; /* vystředí, a když je panel vyšší než okno, dá se odscrollovat */
    padding: clamp(1.5rem, 1rem + 3vw, 3rem);
    box-shadow: 0 2rem 5rem -1.5rem rgb(0 0 0 / 0.45);
}

.inquiry[open] .inquiry__panel {
    animation: hero-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.inquiry__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid transparent;
    color: var(--text-muted);
    background: none;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

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

.inquiry__close .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.inquiry__head {
    margin-bottom: 1.5rem;
    padding-right: 2.5rem;
}

.inquiry__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--dark);
}

.inquiry__lead {
    margin-top: 0.75rem;
    color: var(--text-muted);
}

/* záložky: dvě velké volby vedle sebe – nevybraná jen s rohovými značkami,
   vybraná se značkami spojenými do celého zlatého rámečku (plná zlatá zůstává tlačítku Odeslat) */
.inquiry__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.inquiry__tab {
    --mark-full: 50%;
    --mark-bg: var(--white);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border: 0;
    font: inherit;
    text-align: left;
    color: var(--primary-text);
    box-shadow: none;
    cursor: pointer;
}

.inquiry__tab .icon {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--primary);
}

.inquiry__tab strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.inquiry__tab small {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* najetí: značky se dotáhnou do celého rámečku (jako u karet na webu) */
.inquiry__tab:hover {
    --mark: var(--mark-full);
}

.inquiry__tab[aria-selected="true"] {
    --mark: var(--mark-full);
    --mark-bg: color-mix(in srgb, var(--primary) 6%, var(--white));
    color: var(--dark);
}

.inquiry__form:not([hidden]) {
    animation: reveal-fade 0.4s ease;
}

/* pole formuláře */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem 1.25rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    padding: 0;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dark);
}

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

.field__hint {
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--text-muted);
}

.field__input {
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 1rem;
    font: inherit;
    color: var(--text);
    background: var(--light);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

textarea.field__input {
    min-height: 6rem;
    resize: vertical;
}

.field__input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 65%, transparent);
}

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

.field__input:focus {
    outline: none;
    background: var(--white);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* chyba až po interakci uživatele, ne hned při otevření */
.field__input:user-invalid {
    border-color: #b3261e;
}

/* typ nábytku: dlaždice s ikonou, zaškrtnutím se rohové značky spojí do rámečku */
.choice-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-group legend {
    float: left; /* legend jinak nejde zařadit do gridu */
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 0.5rem;
}

.choice {
    --mark-full: 50%;
    --mark-bg: var(--white);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.25rem 0.75rem 1rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--text-muted);
    box-shadow: none;
    cursor: pointer;
}

/* skutečný checkbox přes celou dlaždici (zůstává ovladatelný klávesnicí) */
.choice input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice .icon {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--primary);
    stroke-dasharray: 300;
}

/* zaškrtávací čtvereček v rohu */
.choice::after {
    content: "";
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--white) center / 75% no-repeat;
    transition: background-color var(--transition), border-color var(--transition);
}

.choice:hover {
    color: var(--dark);
}

.choice:has(:checked) {
    --mark: var(--mark-full);
    color: var(--dark);
}

.choice:has(:checked)::after {
    border-color: var(--primary);
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
}

.choice:has(:checked) .icon {
    animation: icon-draw 1.2s cubic-bezier(0.6, 0, 0.3, 1);
}

.choice:has(:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.inquiry__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.inquiry__note {
    flex: 1 1 18rem;
    max-width: 30rem;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* poděkování po odeslání (náhled) */
.inquiry__form .contact-form__alert {
    margin-bottom: 1.5rem;
}

.inquiry__form .contact-form__alert[hidden] {
    display: none;
}

.inquiry__done {
    display: none;
    padding-block: 1rem;
    outline: none;
}

.inquiry__done .btn {
    margin-top: 2rem;
}

.inquiry.is-done .inquiry__head,
.inquiry.is-done .inquiry__tabs,
.inquiry.is-done .inquiry__form {
    display: none;
}

.inquiry.is-done .inquiry__done {
    display: block;
    animation: hero-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 36em) {
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .inquiry__tab {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }

    .inquiry__tab strong {
        font-size: 1.0625rem;
    }

    .inquiry__tab small {
        display: none;
    }

    .choice {
        padding-inline: 0.5rem;
        font-size: 0.8125rem;
    }

    .inquiry__foot .btn {
        width: 100%;
    }
}

/* ---------- 13e. Podstránky ---------- */
/* Editorial šachovnice jako v designovém magazínu: fotka a text vždy na polovinu šířky okna,
   fotky na střídačku vlevo / vpravo se dotýkají rohy (bez mezer). Vzduch je uvnitř textových polí,
   jejich vnější okraj lícuje s obsahem .container. */
.feature__grid {
    --pad-out: max(var(--gutter), calc((200% - var(--container)) / 2 + var(--gutter)));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature__media {
    position: relative;
}

.feature__frame {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.feature__frame img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* textový blok vystředěný ve své polovině, text zarovnaný k fotce (fotka vlevo → doleva, vpravo → doprava) */
.feature__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: clamp(3.5rem, 2rem + 4vw, 7rem) clamp(2.5rem, 1rem + 5vw, 7rem);
}

.feature__body > * {
    width: 100%;
    max-width: 34rem;
}

/* zrcadlová řada: fotka vpravo, text vlevo přisazený k levému okraji obsahu */
.feature__grid--reverse .feature__media {
    order: 2;
}

.feature__grid--reverse .feature__body {
    text-align: right;
}

.feature__grid--reverse .feature__body .eyebrow {
    justify-content: flex-end;
}

.feature__body .eyebrow {
    margin-bottom: -0.25rem;
}

.feature__body p:not(.eyebrow) {
    font-size: 1.0625rem;
    color: color-mix(in srgb, var(--dark) 85%, white);
}

/* popisek fotky jako poznámka na výkresu – ve spodní části fotky na tmavém přechodu */
.feature__caption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 4rem clamp(1.25rem, 0.75rem + 2vw, 2.5rem) 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
    background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / 0.45) 45%, rgb(20 20 20 / 0.72) 100%);
    pointer-events: none;
}

.feature__caption::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: var(--primary-light);
}

/* pod sebou: vždy fotka, pod ní text */
@media (max-width: 64em) {
    .feature__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature__grid--reverse .feature__media {
        order: 0;
    }

    .feature__body,
    .feature__grid--reverse .feature__body {
        padding: clamp(2.5rem, 2rem + 3vw, 4rem) var(--gutter) clamp(3.5rem, 3rem + 3vw, 5rem);
    }

    .feature__body > * {
        max-width: 40rem;
    }

    /* pod sebou text na střed */
    .feature__body,
    .feature__grid--reverse .feature__body {
        text-align: center;
    }

    .feature__body .eyebrow,
    .feature__grid--reverse .feature__body .eyebrow {
        justify-content: center;
    }
}

/* Pečeť kvality – výřez z výkresu (rohové značky) s logem Blum */
.seal__panel {
    --mark-full: 50%;
    --mark-bg: var(--white);
    box-shadow: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    max-width: 64rem;
    margin-inline: auto;
    padding: clamp(2rem, 1.25rem + 3vw, 4rem);
}

.seal__panel:hover {
    --mark: var(--mark-full);
}

.seal__logo {
    align-self: stretch;
    display: grid;
    place-items: center;
    padding-right: clamp(2rem, 1rem + 4vw, 4.5rem);
    border-right: 1px solid var(--border);
}

.seal__logo img {
    width: 8.5rem;
}

.seal__body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.seal__body .core-card__spec {
    padding-left: 0;
}

.seal__title {
    font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dark);
}

.seal__body p:not(.core-card__spec) {
    color: var(--text-muted);
}

@media (max-width: 48em) {
    .seal__panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .seal__logo {
        justify-items: start;
        padding: 0 0 2rem;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
}

/* Úvod nad dlaždicemi – bílý */
/* stejný odstup nad i pod hlavičkou */
.tiles-intro .section-head {
    margin-bottom: 0;
}

/* širší hlavička: delší úvodní text na 3 řádky, nadpis zůstává úzký */
@media (min-width: 64em) {
    .section-head--wide {
        max-width: 74rem;
    }

    .section-head--wide .h2 {
        max-width: 44rem;
        margin-inline: auto;
    }
}

/* kratší úvodní text – užší hlavička, aby zůstal na 3 řádcích */
@media (min-width: 64em) {
    .section-head--wide.section-head--mid {
        max-width: 52rem;
    }
}

/* Pás „jako O nás“ (úvod i konverzní blok) – text na střed, pod ním fotka přes celou šířku
   vyblednutá do barvy sekce; sekce končí oříznutá na fotku */
.band {
    padding-bottom: 0;
    /* cíl „Zjistit více“ z hera – dojede k hornímu okraji (jako O nás na homepage) */
    scroll-margin-top: calc(var(--header-h) * -1);
}

.band .section-head {
    margin-bottom: 0;
}

/* tlačítka jako v heru (primární + obrysové), na mobilu pod sebou ve stejné šířce */
.band__actions {
    justify-content: center;
    margin-top: 2.5rem;
}

@media (max-width: 36em) {
    .band__actions {
        flex-direction: column;
        max-width: 18rem;
        margin-inline: auto;
    }
}

.band__img {
    width: 100%;
    height: clamp(22rem, 12rem + 28vw, 42rem);
    margin-top: clamp(4rem, 2.5rem + 4vw, 7rem);
    object-fit: cover;
    /* dlouhý měkký přechod (zmírněná křivka jako u kategorií) – fotka se z pozadí vynoří pozvolna */
    --fade: clamp(12rem, 7rem + 10vw, 22rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.08) calc(var(--fade) * 0.25), rgb(0 0 0 / 0.3) calc(var(--fade) * 0.5), rgb(0 0 0 / 0.7) calc(var(--fade) * 0.75), #000 var(--fade));
    mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.08) calc(var(--fade) * 0.25), rgb(0 0 0 / 0.3) calc(var(--fade) * 0.5), rgb(0 0 0 / 0.7) calc(var(--fade) * 0.75), #000 var(--fade));
}

/* úvodní fotka: obraz posunutý dolů – pod přechodem zůstane vidět i horní část kuchyně */
.band__img--high {
    object-position: center 25%;
}

/* konverzní blok: fotka o třetinu vyšší */
.band__img--low {
    height: clamp(29.25rem, 16rem + 37.33vw, 56rem);
    object-position: center 65%;
}

/* ---------- 13f. Kontakt ---------- */
/* Rychlé kontakty: čtyři bílé karty, celé jsou odkazem; ikona v rohových značkách jako u kategorií */
.contacts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    height: 100%;
    padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    color: inherit;
    text-decoration: none;
    background: var(--white);
    box-shadow: var(--shadow-light);
    transition: box-shadow var(--transition), transform var(--transition);
}

.contact-card:hover {
    box-shadow: var(--shadow-soft);
    transform: translateY(-3px);
}

.contact-card__icon {
    --mark-full: 2rem;
    --mark-bg: transparent;
    box-shadow: none;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.contact-card__icon .icon {
    width: 1.875rem;
    height: 1.875rem;
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}

.contact-card:hover .contact-card__icon .icon {
    animation: icon-draw-short 1.2s cubic-bezier(0.6, 0, 0.3, 1);
}

@keyframes icon-draw-short {
    from { stroke-dashoffset: 100; }
}

.contact-card__label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary-text);
}

.contact-card__value {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--dark);
    overflow-wrap: break-word;
}

.contact-card__note {
    margin-top: auto;
    padding-top: 0.25rem;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* Fakturační údaje – přes celou šířku pod kartami, údaje jako políčka razítka výkresu */
.company-info {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.5rem clamp(2rem, 1rem + 3vw, 4rem);
    margin-top: 1.25rem;
    padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    background: var(--white);
    box-shadow: var(--shadow-light);
}

.company-info__head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.company-info__head .contact-card__icon {
    margin-bottom: 0;
}

.company-info__head .contact-card__label {
    margin: 0;
}

.company-info__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.25rem 0;
    margin: 0;
}

.company-info__list > div {
    padding-inline: 1.5rem;
    border-left: 1px solid var(--border);
}

.company-info__list dt {
    margin-bottom: 0.25rem;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.company-info__list dd {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    color: var(--dark);
}

.company-info__note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

@media (max-width: 48em) {
    .company-info {
        grid-template-columns: 1fr;
    }

    .company-info__list > div {
        padding-inline: 1rem 0;
    }
}

/* Mapa přes celou šířku, tlumené barvy; panel s navigací v rohových značkách lícuje s obsahem */
.map {
    position: relative;
    background: var(--light);
}

.map__frame {
    display: block;
    width: 100%;
    height: clamp(24rem, 16rem + 22vw, 38rem);
    border: 0;
    filter: grayscale(0.85) contrast(1.05);
}

.map__inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* vpravo – vlevo nahoře má Google vlastní kartičku místa */
    pointer-events: none;
}

.map__panel {
    --mark-full: 50%;
    --mark-bg: var(--white);
    max-width: 24rem;
    padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    box-shadow: var(--shadow-soft);
    pointer-events: auto;
}

.map__title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dark);
}

.map__address {
    margin-top: 0.5rem;
    color: var(--text-muted);
}

.map__actions {
    margin-top: 1.75rem;
}

/* mobil: panel pod mapou přes celou šířku */
@media (max-width: 48em) {
    .map__inner {
        position: static;
        padding: 0;
    }

    .map__panel {
        max-width: none;
        width: 100%;
        box-shadow: none;
        text-align: center;
    }

    .map__actions {
        justify-content: center;
    }
}

/* Poptávkový formulář: úvod vlevo, formulář vpravo jako list výkresu */
/* cíl #poptavka z hera: dojede až k přednadpisu „Nezávazná …“ – přeskočí horní odsazení sekce
   i rezervu pro hlavičku (při scrollu dolů se schová), nahoře zůstane malá mezera */
.contact-form {
    scroll-margin-top: calc((var(--section-space) + var(--header-h)) * -1 + 2.5rem);
}

.contact-form__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
}

.contact-form__head .section-head__lead {
    max-width: 30rem;
}

.contact-form__alt {
    margin-top: 2rem;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    color: var(--dark);
}

.contact-form__alt a {
    font-weight: 600;
    color: var(--primary-text);
    text-decoration: none;
    white-space: nowrap;
}

.contact-form__alt a:hover {
    text-decoration: underline;
}

.contact-form__panel {
    --mark-full: 50%;
    --mark-bg: var(--white);
    position: relative;
    padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}

@media (max-width: 64em) {
    .contact-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form__head {
        text-align: center;
    }

    .contact-form__head .section-head__lead {
        margin-inline: auto;
    }
}

@media (max-width: 36em) {
    .contact-form .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* výběrové menu v jednotném stylu polí (šipka zůstává i při focusu, kde se mění pozadí) */
.field__select,
.field__select:focus {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232e2e2e' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem;
    cursor: pointer;
}

.field--error .field__input {
    border-color: #b3261e;
}

.field__error {
    font-size: 0.8125rem;
    color: #b3261e;
}

.contact-form__alert {
    padding: 1rem 1.25rem;
    font-size: var(--fs-small);
    color: #8c1d18;
    background: color-mix(in srgb, #b3261e 7%, var(--white));
    border-left: 2px solid #b3261e;
}

/* příloha: celé pole je klikací, nevybráno = rohové značky, se soubory = rámeček */
.upload {
    --mark-full: 50%;
    --mark-bg: var(--light);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    box-shadow: none;
    cursor: pointer;
}

.upload:hover,
.upload.has-files {
    --mark: var(--mark-full);
}

.upload.has-files {
    --mark-bg: color-mix(in srgb, var(--primary) 6%, var(--white));
}

.upload:has(:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload__icon .icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--primary);
}

.upload__text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--dark);
}

.upload__text small {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* past na roboty – pro lidi skrytá */
.contact-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 0.5rem;
}

.contact-form__note {
    max-width: 22rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

@media (max-width: 36em) {
    .contact-form__foot .btn {
        width: 100%;
    }
}

.contact-form__done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 1.5rem;
}

.contact-form__done-title {
    font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dark);
}

.contact-form__done p:not(.eyebrow) {
    color: var(--text-muted);
}

/* ---------- 13g. Realizace ---------- */
/* Přepínač kategorií: lepí se k hornímu okraji (pod vrácenou hlavičku), matné sklo jako hlavička;
   záložky v rohových značkách, aktuální galerie = značky spojené do rámečku */
.ref-tabs {
    position: sticky;
    top: var(--admin-h);
    z-index: 80;
    background: rgb(255 255 255 / 0.88);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 0.5rem 2rem -1.25rem rgb(46 46 46 / 0.25);
    transition: top var(--transition);
}

body:has(.site-header.is-scrolled:not(.is-hidden)) .ref-tabs {
    top: calc(var(--header-h) + var(--admin-h));
}

.ref-tabs__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-block: 0;
    padding-block: 0.875rem;
    list-style: none;
}

.ref-tabs__link {
    --mark-full: 50%;
    --mark-bg: transparent;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 0.875rem 1.25rem;
    color: var(--dark);
    text-decoration: none;
    box-shadow: none;
}

.ref-tabs__link .icon {
    flex: none;
    width: 2rem;
    height: 2rem;
    color: var(--primary);
}

.ref-tabs__link strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
}

.ref-tabs__link small {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.ref-tabs__link:hover,
.ref-tabs__link[aria-current="true"] {
    --mark: var(--mark-full);
}

.ref-tabs__link[aria-current="true"] {
    --mark-bg: color-mix(in srgb, var(--primary) 6%, var(--white));
}

/* mobil: ikona nad názvem, bez počtu fotek */
@media (max-width: 48em) {
    .ref-tabs__list {
        gap: 0.5rem;
        padding-block: 0.625rem;
    }

    .ref-tabs__link {
        flex-direction: column;
        justify-content: center;
        gap: 0.375rem;
        padding: 0.625rem 0.5rem;
        text-align: center;
    }

    .ref-tabs__link .icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .ref-tabs__link strong {
        font-size: 0.875rem;
    }

    .ref-tabs__link small {
        display: none;
    }
}

/* odkaz na podstránku kategorie pod nadpisem galerie */
.gallery__link {
    margin-top: 1.75rem;
}

.gallery__link:hover .icon {
    transform: translateX(0.375rem);
}

.ref-cta .section-head {
    margin-bottom: 0;
}

/* ---------- 13h. Nářezové centrum (Formátování) ---------- */
/* Pro koho: dvě bílé karty A / B, obrysové písmeno v rohu jako číslo kroku v Procesu */
.audience__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.audience__card {
    position: relative;
    padding: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
    background: var(--white);
    box-shadow: var(--shadow-light);
}

.audience__tag {
    position: absolute;
    top: 1rem;
    right: 1.75rem;
    font-family: var(--font-heading);
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--primary) 55%, transparent);
    pointer-events: none;
}

.audience__icon,
.benefit__icon {
    --mark-full: 2.25rem;
    --mark-bg: transparent;
    box-shadow: none;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    color: var(--primary);
}

.audience__icon .icon,
.benefit__icon .icon {
    width: 2.75rem;
    height: 2.75rem;
}

.audience__icon {
    margin-bottom: 1.5rem;
}

.audience__title {
    max-width: 24ch;
    margin-bottom: 1.5rem;
    color: var(--dark);
}

/* odrážky jako krátké zlaté linky (kóta) */
.dash-list {
    display: grid;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-list li {
    position: relative;
    padding-left: 2.25rem;
    color: var(--text-muted);
}

.dash-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 1.25rem;
    height: 1px;
    background: var(--primary);
}

.dash-list strong {
    font-weight: 600;
    color: var(--dark);
}

/* Výhody: čtyři sloupce oddělené tenkými linkami (políčka razítka) */
.benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.benefit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-inline: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
    border-left: 1px solid var(--border);
}

.benefit__icon {
    margin-bottom: 0.75rem;
}

.benefit__title {
    font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    color: var(--dark);
}

.benefit__text {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

/* Co potřebujeme: číslovaný seznam v linkách vedle formuláře */
.needs__title {
    margin: 2.5rem 0 1rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
}

.needs {
    max-width: 30rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    border-top: 1px solid var(--border);
}

.needs li {
    display: flex;
    gap: 1.25rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.needs__num {
    flex: none;
    min-width: 1.75rem;
    padding-top: 0.15em;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--primary-text);
}

.needs strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--dark);
}

.needs small {
    display: block;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

@media (max-width: 64em) {
    .audience__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .needs {
        margin-inline: auto;
    }
}

@media (max-width: 36em) {
    .benefits__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 13i. Právní dokumenty ---------- */
/* Ochrana osobních údajů, cookies, obchodní podmínky (inc/legal.php): klidná textová stránka.
   Hlavička na světlém pozadí, přepínač dokumentů v rohových značkách (aktuální = spojený rámeček),
   vlevo lepivý obsah, vpravo text s číslovanými oddíly jako položky výkresu. */
.legal-head {
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
    background: var(--light);
}

.legal-head__title {
    max-width: 22ch;
}

.legal-head__lead {
    max-width: 46rem;
    margin-top: 1.5rem;
    font-size: var(--fs-lead);
    color: var(--text-muted);
}

.legal-head__meta {
    margin-top: 1.5rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.legal-nav__link {
    --mark: 0.625rem;
    --mark-full: 50%;
    --mark-bg: transparent;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--dark);
    box-shadow: none;
}

.legal-nav__link:hover,
.legal-nav__link[aria-current="page"] {
    --mark: var(--mark-full);
}

.legal-nav__link[aria-current="page"] {
    --mark-bg: var(--white);
}

.legal__grid {
    display: grid;
    grid-template-columns: 16rem minmax(0, 46rem);
    gap: clamp(3rem, 1rem + 5vw, 7rem);
    padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem) var(--section-space);
}

.legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--admin-h) + 2rem);
    align-self: start;
    font-size: var(--fs-small);
}

.legal__toc-title {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-text);
}

.legal__toc ol {
    display: grid;
    gap: 0.5rem;
}

.legal__toc a {
    display: flex;
    gap: 0.75rem;
    line-height: 1.45;
    text-decoration: none;
    color: var(--text-muted);
    transition: color var(--transition);
}

.legal__toc a:hover {
    color: var(--dark);
}

.legal__toc span {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-text);
}

.legal__section {
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.legal__section + .legal__section {
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    border-top: 1px solid var(--border);
}

.legal__section > * + * {
    margin-top: 1rem;
}

.legal__title {
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.2;
    color: var(--dark);
}

.legal__num {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    letter-spacing: 0.22em;
    color: var(--primary-text);
}

.legal__body a {
    color: var(--primary-text);
    text-underline-offset: 0.2em;
}

.legal__body strong {
    font-weight: 600;
    color: var(--dark);
}

.legal__body ul {
    display: grid;
    gap: 0.6rem;
}

.legal__body ul li {
    position: relative;
    padding-left: 2rem;
}

.legal__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 1rem;
    height: 1px;
    background: var(--primary);
}

/* identifikace firmy jako razítko výkresu */
.legal__card {
    --mark-bg: var(--light);
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
    padding: 1.5rem 1.75rem;
    font-size: 0.9375rem;
    box-shadow: none;
}

.legal__card dt {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.legal__card dd {
    margin: 0;
}

.legal__section > .legal__card {
    margin-block: 1.5rem;
}

.legal__table-wrap {
    overflow-x: auto;
}

.legal__table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.legal__table th,
.legal__table td {
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.legal__table th {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (max-width: 62em) {
    .legal__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .legal__toc {
        display: none;
    }
}

@media (max-width: 36em) {
    .legal__card {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 1.25rem;
    }

    .legal__card dd + dt {
        margin-top: 0.75rem;
    }
}

/* ---------- 13d. Tlačítko Nahoru ---------- */
/* Jen šipka v rohových značkách. Dok s nulovou výškou leží na spodní hraně patičky
   a je sticky u spodního okraje okna: při scrollu tlačítko plave vpravo dole,
   na konci stránky se zastaví svisle na středu řádku „© …“ (vodorovně drží okraj okna). */
.to-top {
    --btn: 3.25rem;
    position: sticky;
    bottom: 0.75rem;
    z-index: 90;
    height: 0;
    pointer-events: none;
}

.to-top__btn {
    --mark: 0.625rem;
    --mark-full: 50%;
    --mark-bg: transparent;
    position: absolute;
    right: var(--gutter);
    /* střed posledního řádku spodní lišty: padding lišty + půl řádku − půl tlačítka */
    bottom: calc(1.75rem + var(--fs-small) * 1.7 / 2 - var(--btn) / 2);
    display: grid;
    place-items: center;
    width: var(--btn);
    height: var(--btn);
    color: var(--primary);
    box-shadow: none;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition:
        --mark 0.6s cubic-bezier(0.6, 0, 0.3, 1),
        color var(--transition),
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition);
}

.to-top.is-visible .to-top__btn {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* zaparkované v tmavé patičce – světlejší zlatá */
.to-top.is-docked .to-top__btn {
    --mark-c: linear-gradient(var(--primary-light), var(--primary-light));
    color: var(--primary-light);
}

.to-top__btn:hover {
    --mark: var(--mark-full);
}

.to-top__btn .icon {
    width: 1.375rem;
    height: 1.375rem;
    rotate: -90deg;
    transition: translate var(--transition);
}

.to-top__btn:hover .icon {
    translate: 0 -0.2rem;
}

/* ---------- 13k. Stránka 404 ---------- */
/* Obrysové „404“ jako detail z výkresu s kótou pod ním, text na střed, rozcestník v rohových značkách */
.notfound {
    background: var(--light);
}

.notfound__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(4rem, 3rem + 5vw, 8rem) var(--section-space);
    text-align: center;
}

.notfound__code {
    display: grid;
    justify-items: center;
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.notfound__num {
    font-family: var(--font-heading);
    font-size: clamp(7rem, 4rem + 14vw, 15rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--primary);
}

/* kóta: linka s koncovými značkami a popiskem uprostřed */
.notfound__dim {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1rem;
    border-top: 1px solid var(--primary);
}

.notfound__dim::before,
.notfound__dim::after {
    content: "";
    position: absolute;
    top: -0.45rem;
    width: 1px;
    height: 0.9rem;
    background: var(--primary);
    transform: rotate(45deg);
}

.notfound__dim::before {
    left: 0;
}

.notfound__dim::after {
    right: 0;
}

.notfound__dim span {
    margin-top: -0.75em;
    padding-inline: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-text);
    background: var(--light);
}

.notfound__title {
    max-width: 18ch;
}

.notfound__lead {
    max-width: 38rem;
    margin-top: 1.5rem;
    font-size: var(--fs-lead);
    color: var(--text-muted);
}

.notfound__actions {
    justify-content: center;
    margin-top: 2.5rem;
}

.notfound__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.notfound__link {
    --mark: 0.625rem;
    --mark-full: 50%;
    --mark-bg: transparent;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--dark);
    box-shadow: none;
}

.notfound__link .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.notfound__link:hover {
    --mark: var(--mark-full);
    --mark-bg: var(--white);
}

/* ---------- 13j. Admin lišta ---------- */
/* Jen pro přihlášeného administrátora (inc/admin-bar.php): žlutá lišta pevně nahoře,
   hlavička webu i lepivé prvky se posunou o její výšku (--admin-h). */
.has-admin-bar {
    --admin-h: 2.25rem;
}

.has-admin-bar body {
    padding-top: var(--admin-h);
}

.admin-strip {
    position: fixed;
    inset: 0 0 auto;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 0 1.5rem;
    height: var(--admin-h);
    padding-inline: var(--gutter);
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    color: #2e2e2e;
    background: #ffd21f;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.12);
    white-space: nowrap;
}

.admin-strip a,
.admin-strip button {
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

.admin-strip__brand {
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-strip__user {
    margin-left: auto;
}

.admin-strip__user strong {
    font-weight: 600;
}

.admin-strip__logout button {
    padding: 0.2rem 0.75rem;
    border: 1px solid rgb(46 46 46 / 0.4);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
}

.admin-strip a:hover,
.admin-strip__logout button:hover {
    color: #000;
    border-color: #000;
}

@media (max-width: 48em) {
    .admin-strip__user {
        display: none;
    }

    .admin-strip__logout {
        margin-left: auto;
    }
}

/* ---------- 14. Patička ---------- */
.site-footer {
    padding-top: clamp(4rem, 3rem + 4vw, 6.5rem);
    color: var(--text-on-dark);
    background: var(--gradient-dark);
    font-size: 0.9375rem;
}

.site-footer a {
    text-decoration: none;
    transition: color var(--transition);
}

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

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}

.site-footer__brand img {
    width: auto;
    height: 5rem;
    margin-bottom: 1.5rem;
}

.site-footer__title {
    margin-bottom: 1.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-light);
}

.contact-list {
    display: grid;
    gap: 1rem;
}

.contact-list li {
    display: flex;
    gap: 0.875rem;
    line-height: 1.5;
}

.contact-list .icon {
    margin-top: 0.1em;
    color: var(--primary-light);
}

.contact-list strong {
    font-weight: 600;
    color: var(--white);
}

.contact-list small {
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--text-on-dark) 75%, var(--dark));
}

.site-footer__seo {
    color: color-mix(in srgb, var(--text-on-dark) 75%, var(--dark));
    line-height: 1.8;
}

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

.socials a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 50%;
    transition: border-color var(--transition), color var(--transition);
}

.socials a:hover {
    border-color: var(--primary-light);
}

/* Odkaz na sesterský web Nebeské pergoly pod sociálními sítěmi:
   jen rohové značky (bílé jako kolečka sítí), při najetí se spojí do zlatého rámečku */
.site-footer__partner {
    --mark-full: 50%;
    --mark-c: linear-gradient(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.2));
    --mark-bg: transparent;
    display: grid;
    gap: 0.375rem;
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    line-height: 1.5;
    box-shadow: none;
}

.site-footer__partner:hover {
    --mark: var(--mark-full);
    --mark-c: linear-gradient(var(--primary-light), var(--primary-light));
}

.site-footer__partner strong {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--white);
    transition: color var(--transition);
}

.site-footer__partner:hover strong {
    color: var(--primary-light);
}

.site-footer__partner span {
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--text-on-dark) 75%, var(--dark));
}

/* © vlevo, povinné dokumenty uprostřed */
.site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding-block: 1.75rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    font-size: var(--fs-small);
    color: color-mix(in srgb, var(--text-on-dark) 65%, var(--dark));
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
}

/* pod sebou a doleva – lícuje s obsahem patičky nad lištou */
@media (max-width: 62em) {
    .site-footer__bottom {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .site-footer__legal {
        order: -1;
        justify-content: flex-start;
    }
}

@media (max-width: 62em) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__col--wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 36em) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 15. EU dotace ---------- */
.eu-funding {
    padding-block: 2.5rem;
    background: var(--white);
}

.eu-funding__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 52rem;
    text-align: center;
}

.eu-funding img {
    width: min(100%, 30rem);
}

.eu-funding p {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---------- 16. Omezení animací ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Cookie lišta ---------- */
/* bílá lišta dole přes celou šířku; „Odmítnout“ stejně velké a stejně dostupné jako „Přijmout“ */
.cookie-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 200;
    padding-block: 1.25rem;
    background: var(--white);
    border-top: 2px solid var(--primary);
    box-shadow: 0 -1rem 2rem -1rem rgb(46 46 46 / 0.3);
}

.cookie-bar[hidden] {
    display: none;
}

.cookie-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2.5rem;
}

.cookie-bar__text {
    flex: 1 1 28rem;
    max-width: 52rem;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

.cookie-bar__actions {
    display: flex;
    gap: 0.75rem;
}

.cookie-bar__settings {
    flex: 1 1 100%;
    display: grid;
    gap: 0.85rem;
    justify-items: start;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.cookie-bar__settings[hidden] {
    display: none;
}

.cookie-bar__option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    max-width: 52rem;
    font-size: var(--fs-small);
    color: var(--text-muted);
    cursor: pointer;
}

.cookie-bar__option input {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    accent-color: var(--primary);
}

.cookie-bar__option strong {
    color: var(--dark);
}

.cookie-bar__settings .btn {
    margin-top: 0.25rem;
}

@media (max-width: 36em) {
    .cookie-bar {
        max-height: 100svh;
        overflow-y: auto;
    }

    .cookie-bar__actions {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .cookie-bar__actions .btn {
        flex: 1;
    }

    /* Nastavení pod nimi přes celou šířku, ať se dvě hlavní volby vejdou vedle sebe */
    .cookie-bar__actions [data-cookie-panel] {
        flex: 1 1 100%;
        order: 1;
    }

    .cookie-bar__settings .btn {
        width: 100%;
    }
}

/* Mapa bez souhlasu: místo iframe náhrada stejné výšky s jemnou mřížkou „výkresu“ */
.map__frame:not([src]) {
    display: none;
}

.map__consent {
    display: flex;
    align-items: center;
    height: clamp(24rem, 16rem + 22vw, 38rem);
    background:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--dark) 6%, transparent) 0 1px, transparent 1px 2.5rem),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--dark) 6%, transparent) 0 1px, transparent 1px 2.5rem),
        var(--light);
}

.map__consent[hidden] {
    display: none;
}

.map__consent-inner p {
    max-width: 20rem;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
}

/* mobil: panel je pod mapou, text náhrady na střed */
@media (max-width: 48em) {
    .map__consent {
        height: 16rem;
        text-align: center;
    }

    .map__consent-inner p {
        margin-inline: auto;
    }
}