/* ==========================================================================
   layout.css
   Kostra webu: sekce a tmavé vložené panely, hlavička, překryvné menu,
   patička, plovoucí kontaktní kolečko.

   Model převzatý z reference: stránka je SVĚTLÁ. Tmavé jsou jen vybrané
   sekce, které dostanou panel #151717 odsazený 15px od kraje okna
   se zaoblením 1rem a barevnými zářemi v rozích.
   ========================================================================== */

/* ================================= SEKCE ================================= */

.section {
    position: relative;
    z-index: var(--z-base);
    padding-block: var(--section-pad-m);
}

@media (min-width: 75rem) {
    .section {
        padding-block: var(--section-pad);
    }
}

.section--flush-top {
    padding-top: 0 !important;
}

.section--tight {
    padding-block: calc(var(--section-pad-m) * .75);
}

@media (min-width: 75rem) {
    .section--tight {
        padding-block: var(--layout-sm);
    }
}

/* Tmavý vložený panel. Na mobilu bez odsazení, od 992px rámovaný. */
.section--dark {
    color: var(--text-on-dark);
}

.section--dark > .section__bg {
    position: absolute;
    inset: 0;
    background-color: var(--panel-dark);
    overflow: hidden;
    pointer-events: none;
}

/* Světlý vložený panel (sekce úvodu). */
.section--light > .section__bg {
    position: absolute;
    inset: 0;
    background-color: var(--surface);
    overflow: hidden;
    pointer-events: none;
}

@media (min-width: 62rem) {
    .section--dark > .section__bg,
    .section--light > .section__bg {
        inset: var(--panel-inset);
        border-radius: var(--radius-panel);
    }
}

.section--dark > .container,
.section--light > .container {
    position: relative;
    z-index: var(--z-base);
}

/* Záře v rozích tmavých panelů. Plná barva, průhlednost přes opacity. */
.oval {
    position: absolute;
    width: var(--oval-size);
    height: var(--oval-size);
    opacity: var(--oval-opacity);
    pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, var(--oval-orange) 0, transparent 100%);
}

.oval--orange { background: radial-gradient(50% 50% at 50% 50%, var(--oval-orange) 0, transparent 100%); }
.oval--pink   { background: radial-gradient(50% 50% at 50% 50%, var(--oval-pink) 0, transparent 100%); }

.oval--top    { top: calc(var(--oval-size) / -2); }
.oval--bottom { bottom: calc(var(--oval-size) / -2); }
.oval--left   { left: calc(var(--oval-size) / -2); }
.oval--right  { right: calc(var(--oval-size) / -2); }

/* ============================= MŘÍŽKA ŘÁDKŮ =============================
   Stejný model jako reference: flex řádky + šířkové zlomky sloupců.
   ========================================================================= */

.row {
    display: flex;
    flex-wrap: wrap;
}

.row--between { justify-content: space-between; }
.row--center  { justify-content: center; }
.row--middle  { align-items: center; }

.col-full { width: 100%; }

@media (min-width: 75rem) {
    .lg-w-1-3  { width: 33.333%; }
    .lg-w-2-5  { width: 40%; }
    .lg-w-1-2  { width: 50%; }
    .lg-w-5-12 { width: 41.666%; }
    .lg-w-3-5  { width: 60%; }
    .lg-w-8-12 { width: 66.666%; }
    .lg-w-9-12 { width: 75%; }
}

@media (min-width: 48rem) {
    .sm-w-1-3  { width: 33.333%; }
    .sm-w-3-5  { width: 60%; }
    .sm-w-1-2  { width: 50%; }
}

/* ===================== DVA SLOUPCE NA HRANĚ NADPISU ======================
   Od 12. 10. 2026 (Oliverovi vadil obsah „odskočený" od nadpisu stránky).
   Nadpis bloku vlevo ve dvou pětinách šířky, obsah vpravo ve třech, oba
   na hraně kontejneru, kde začíná i nadpis stránky. Pod 64rem nadpis nad
   obsahem. Nahrazuje úzký kontejner na středu (.container--narrow), jehož
   obsah začínal jinde než nadpis. Používají ho případová studie, časté
   dotazy, seznam služeb, O nás a právní stránky, takže všechny texty
   webu začínají na stejné svislici.
   ========================================================================= */

.split {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 64rem) {
    .split {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--space-9);
        align-items: start;
    }

    /* Obsah bez nadpisu patří do pravého sloupce, ať všechny texty
       začínají na jedné svislici. */
    .split > .split__body:only-child { grid-column: 2; }
}

/* Přišpendlený nadpis (od 13. 10. 2026, právní stránky a Časté dotazy):
   nadpis bloku při scrollu zůstává nahoře vedle textu, dokud blok
   neskončí a nepřijede další, stejně jako názvy služeb na úvodce. Jen
   od 64rem, kde jsou sloupce vedle sebe. */
@media (min-width: 64rem) {
    .split--sticky > :first-child {
        position: sticky;
        top: calc(var(--header-height) + var(--space-5));
    }
}

.split + .split { margin-top: var(--space-10); }

@media (min-width: 75rem) {
    .split + .split { margin-top: var(--space-11); }
}

/* Nadpis bloku o stupeň pod nadpisem stránky, ve stejné šířce písma jako
   názvy projektů (112 %). Pro nadpisy uvnitř stránky (sekce studie,
   kategorie dotazů, oddíly právních textů). Hlavní nadpis sekce si nechává
   běžné h2. */
.split__title {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
    font-weight: var(--weight-medium);
    font-stretch: 112%;
    letter-spacing: var(--tracking-sub);
    line-height: 1.1;
    text-wrap: balance;
}

/* Rozestupy mezi sekčním nadpisem a obsahem. */
.mb-layout-sm { margin-bottom: calc(var(--section-pad-m) * .75); }
.mb-layout-xs { margin-bottom: calc(var(--section-pad-m) * .45); }

@media (min-width: 75rem) {
    .mb-layout-sm { margin-bottom: var(--layout-sm); }
    .mb-layout-xs { margin-bottom: var(--layout-xs); }
}

/* ======================== UKAZATEL ODSCROLLOVÁNÍ ========================
   Od 13. 10. 2026 (jako na skinskin.cz): čára 2 px úplně nahoře nad
   lištou, prodlužuje se zleva doprava podle toho, kolik stránky je za
   vámi. Natahuje se měřítkem (scaleX), takže i krátká čára nese celý
   přechod značky a od začátku vypadá stejně výrazně. Dřív se přechod
   odkrýval postupně a začátek byl jen bledě oranžový, působil tence
   a u vrchu stránky zůstával vidět jako zbytek (Filip 13. 10.).

   U vrchu stránky (prvních 100 px, třída is-scrolled z main.js) je čára
   schovaná a po odscrollování se plynule objeví, při návratu nahoru zase
   plynule zmizí. Bez JavaScriptu zůstane schovaná, je to jen ozdoba.

   Délku kreslí časová osa scrollu (animation-timeline), prohlížeč ji
   počítá mimo hlavní vlákno a nic se nezadrhává. Kde ji prohlížeč nezná,
   nastavuje --scroll-progress (0 až 1) main.js. Pohyb vzniká jen
   scrollováním návštěvníka, sám se nic nehýbe, proto platí i při
   omezeném pohybu. Při otevřeném menu se schová. */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-header) + 1);
    height: 2px;
    background: linear-gradient(to right, var(--orange), var(--red), var(--purple));
    transform: scaleX(var(--scroll-progress, 0));
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-med) var(--ease-out);
}

@supports (animation-timeline: scroll()) {
    .scroll-progress {
        animation: scroll-progress linear both;
        animation-timeline: scroll(root block);
    }
}

@keyframes scroll-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

body.is-scrolled .scroll-progress {
    opacity: 1;
}

body.is-menu-open .scroll-progress {
    visibility: hidden;
}

/* ================================ HLAVIČKA ==============================
   Průhledná lišta. Po odscrollování se za ní vysune matné světlé sklo
   a lišta se zúží. Při scrollování dolů zajede, nahoru se vrátí.

   Všechno se hýbe jen posunem (transform), ne změnou výšky (od 13. 10.
   2026): posun počítá grafická karta, změna výšky by při každém snímku
   přepočítávala rozvržení. Lišta proto drží plnou výšku --header-height
   a zúžení se jen předstírá: sklo vyjede shora jen do výšky
   --header-height-scrolled a obsah se posune nahoru doprostřed skla.
   Spodní průhledný pruh lišty nechytá kliknutí (pointer-events), takže
   neblokuje stránku pod sebou. */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    pointer-events: none;
    transition: transform var(--dur-med) var(--ease-out-soft);
}

.header__logo,
.header__actions {
    pointer-events: auto;
}

/* Matné sklo: schované nad oknem, po odscrollování sjede dolů tak, že
   je vidět jen jeho spodní část vysoká jako zúžená lišta. */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--bg) 50%, transparent);
    backdrop-filter: blur(var(--backdrop-blur));
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    transform: translateY(-100%);
    transition: transform var(--dur-med) var(--ease-out-soft);
}

body.is-scrolled .header::before {
    transform: translateY(calc(var(--header-height-scrolled) - var(--header-height)));
}

body.is-menu-open .header::before {
    transform: translateY(-100%);
}

body.is-scrolled.is-scrolling-down .header {
    transform: translateY(-100%);
}

body.is-menu-open .header {
    transform: translateY(0) !important;
}

.header__inner {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-height);
    transition: transform var(--dur-med) var(--ease-out-soft);
}

/* Obsah na střed zúžené lišty: o polovinu rozdílu výšek nahoru. */
body.is-scrolled .header__inner {
    transform: translateY(calc((var(--header-height-scrolled) - var(--header-height)) / 2));
}

.header__logo {
    display: block;
    flex: none;
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease-out);
}

.header__logo svg {
    height: clamp(20px, 1.2vw + 12px, 28px);
    width: auto;
    fill: currentColor;
}

/* Když je otevřené menu, logo i tlačítka zbělají (leží nad tmavým panelem). */
body.is-menu-open .header__logo,
body.is-menu-open .burger {
    color: var(--text-on-dark);
}

.header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* Tlačítko poptávky v hlavičce je jen na širších obrazovkách.
   Vyšší specificita, aby přebilo display z obecného .btn. */
.header .header__cta.btn {
    display: none;
}

@media (min-width: 62rem) {
    .header .header__cta.btn { display: inline-flex; }
}

body.is-menu-open .header__cta {
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------- přepínač jazyka */

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--size-xs);
    font-weight: var(--weight-medium);
}

.lang-switch__option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--muted);
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.lang-switch__option[aria-current='true'] {
    background-color: var(--ink);
    color: var(--bg);
}

.lang-switch__option:not([aria-current='true']):hover {
    color: var(--ink);
}

body.is-menu-open .lang-switch__option {
    color: var(--muted-on-dark);
}

body.is-menu-open .lang-switch__option[aria-current='true'] {
    background-color: var(--text-on-dark);
    color: var(--ink);
}

/* ------------------------------------------------------ tlačítko menu */
/* Tři linky: první a třetí krátké, zarovnané doprava. Hover je protáhne.
   Otevřeno: krajní zmizí, prostřední se zkříží. Přesně jako reference. */

.burger {
    position: relative;
    width: 38px;
    height: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    color: var(--ink);
    cursor: pointer;
}

.burger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform-origin: right center;
    transition: transform var(--dur-fast) var(--ease-out);
}

.burger span:nth-child(1),
.burger span:nth-child(3) {
    transform: scaleX(.55);
}

.burger:hover span:nth-child(1),
.burger:hover span:nth-child(3) {
    transform: scaleX(1);
}

/* Prostřední linka nese dvě pseudolinky, ze kterých se skládá křížek. */
.burger span:nth-child(2) {
    position: relative;
    background-color: transparent;
}

.burger span:nth-child(2)::before,
.burger span:nth-child(2)::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    transition: transform var(--dur-fast) var(--ease-out);
}

body.is-menu-open .burger span:nth-child(1),
body.is-menu-open .burger span:nth-child(3) {
    transform: scaleX(0);
}

body.is-menu-open .burger span:nth-child(2)::before {
    transform: rotate(45deg);
}

body.is-menu-open .burger span:nth-child(2)::after {
    transform: rotate(-45deg);
}

/* ============================ PŘEKRYVNÉ MENU =============================
   Stránka zůstane světlá, přes ni ztmavovací závoj a tmavý zaoblený panel
   s barevnými zářemi. Panel vyrůstá z pravého horního rohu.
   ========================================================================= */

.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--header-height) + var(--space-3)) var(--space-4) var(--space-4);
    background-color: var(--scrim);
    opacity: 0;
    visibility: hidden;
    /* Při zavírání se visibility odloží až za doběh průhlednosti, aby panel
       zmizel plynule a až potom přestal být dostupný. */
    transition: opacity var(--dur-fast) var(--ease-out),
                visibility 0s linear var(--dur-fast);
}

/* Při otevření musí být panel viditelný okamžitě. Prvek s visibility: hidden
   nejde zaostřit, takže by do menu nešel přesunout fokus. */
body.is-menu-open .menu-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-fast) var(--ease-out),
                visibility 0s linear 0s;
}

.menu-overlay__box {
    position: relative;
    width: min(100%, clamp(58rem, 32rem + 23vw, 95vw));
    max-height: calc(100vh - var(--header-height) - var(--space-6));
    max-height: calc(100dvh - var(--header-height) - var(--space-6));
    border-radius: var(--radius-media);
    overflow: hidden;
}

.menu-overlay__bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--panel-dark);
    background-image:
        radial-gradient(circle at 90% 110%, color-mix(in srgb, var(--violet) 30%, transparent) 0, transparent 45%),
        radial-gradient(circle at 0 -20%, color-mix(in srgb, var(--pink) 20%, transparent) 0, transparent 55%);
}

.menu-overlay__inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: calc(var(--section-pad-m) * .75) var(--space-6);
    overflow-y: auto;
    max-height: inherit;
    color: var(--text-on-dark);
}

@media (min-width: 75rem) {
    .menu-overlay__inner {
        flex-direction: row;
        padding: var(--layout-sm) 9.5%;
    }
}

.menu-side__group-title {
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

/* Odkazy menu: střídmá velikost, čárka nalevo při hoveru, růžová aktivní. */
.menu-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-7);
}

.menu-nav__link {
    position: relative;
    display: inline-block;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-heading);
    line-height: 1.2;
}

.menu-nav__link::before {
    content: '';
    position: absolute;
    right: calc(100% + 1rem);
    top: 50%;
    height: 1px;
    width: 1.5rem;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-med) var(--ease-out-soft);
}

.menu-nav__link:hover::before,
.menu-nav__link[aria-current='page']::before {
    transform: scaleX(1);
}

.menu-nav__link:hover,
.menu-nav__link[aria-current='page'] {
    color: var(--red);
}

/* Rozbalovací Služby (od 13. 10. 2026): tlačítko vypadá jako ostatní
   odkazy, vedle něj šipka, která se při rozbalení otočí. */
.menu-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-nav__toggle[aria-expanded='true'] {
    color: var(--red);
}

.menu-nav__chevron {
    width: .45em;
    height: .45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--dur-med) var(--ease-out-soft);
}

.menu-nav__toggle[aria-expanded='true'] .menu-nav__chevron {
    transform: translateY(15%) rotate(-135deg);
}

/* Seznam služeb: výška se rozbalí přes grid-template-rows (0fr na 1fr),
   bez měření v JS. Sbalený seznam je i skrytý (visibility), aby se do
   něj nedalo dostat tabulátorem; při sbalování se skryje až po doběhu. */
.menu-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-med) var(--ease-out);
}

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

.menu-sub__inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear var(--dur-med);
}

.menu-sub.is-open .menu-sub__inner {
    visibility: visible;
    transition: visibility 0s linear 0s;
}

.menu-sub__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-3);
    padding-left: var(--space-1);
}

.menu-sub__link {
    display: inline-block;
    font-size: clamp(1rem, .9rem + .4vw, 1.15rem);
    color: var(--muted-2-on-dark);
    transition: color var(--dur-fast) var(--ease-out);
}

.menu-sub__link:hover,
.menu-sub__link[aria-current='page'] {
    color: var(--text-on-dark);
}

.menu-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Tlačítko poptávky a Zavřít vedle sebe, na úzkém displeji pod sebou. */
.menu-side__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
}

.menu-side__item {
    display: inline-block;
    font-size: 1.1rem;
}

.menu-side__item:hover {
    color: var(--pink);
}

.menu-side__socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.menu-side__social {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-on-dark);
    border-radius: var(--radius-pill);
    font-size: var(--size-small);
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.menu-side__social:hover {
    border-color: var(--pink);
    color: var(--pink);
}

/* Naskočení položek: zdola, z rozostření, jedna po druhé. */
.menu-anim {
    opacity: 0;
    transform: translateY(50px);
    filter: blur(30px);
}

body.is-menu-open .menu-anim {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity .9s var(--ease-out),
                transform .9s var(--ease-out),
                filter .9s var(--ease-out);
    transition-delay: calc(var(--menu-index, 0) * 75ms + 300ms);
}

/* Panel vyrůstá z pravého horního rohu. */
.menu-overlay__box {
    transform: scale(.6);
    transform-origin: top right;
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease-out),
                opacity var(--dur-med) var(--ease-out);
}

body.is-menu-open .menu-overlay__box {
    transform: scale(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .menu-anim,
    .menu-overlay__box {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ================================ PATIČKA ================================
   Tmavý vložený panel se třemi zářemi, drobné písmo, sloupce odkazů.
   ========================================================================= */

.footer {
    position: relative;
    background-color: var(--bg);
    overflow: hidden;
    /* clip ořízne stejně jako hidden, ale patička se nestane scrollovacím
       kontejnerem. Jinak by pojistka viditelnosti formuláře (časová osa
       view() v components.css) neměla podle čeho běžet. Prohlížeče, které
       clip neznají, zůstanou u hidden. */
    overflow: clip;
    color: var(--text-on-dark);
}

.footer__bg {
    position: absolute;
    inset: 0;
    background-color: var(--panel-dark);
    overflow: hidden;
    pointer-events: none;
}

@media (min-width: 62rem) {
    .footer__bg {
        inset: var(--panel-inset);
        border-radius: var(--radius-panel);
    }
}

.footer > .container {
    position: relative;
    z-index: var(--z-base);
    padding-top: var(--section-pad-m);
    padding-bottom: var(--space-8);
}

@media (min-width: 75rem) {
    .footer > .container {
        padding-top: var(--layout-sm);
    }
}

/* Od 13. 10. 2026 dva sloupce i na telefonu: Navigace a Služby vedle sebe
   (dřív všechno pod sebou, přes 400 px navíc). Značka a kontakt na telefonu
   přes celou šířku. Na telefonu je celá patička zarovnaná na střed (Filip
   13. 10. 2026; zkoušená varianta s Kontaktem pod Službami se nelíbila). */
.footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
    font-size: var(--size-small);
}

@media (max-width: 47.99rem) {
    .footer__grid {
        text-align: center;
    }

    .footer__brand,
    .footer__grid > :last-child {
        grid-column: 1 / -1;
    }

    /* Logo je blok, na střed ho dají okraje. */
    .footer__brand svg {
        margin-inline: auto;
    }
}

@media (min-width: 75rem) {
    .footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    }
}

.footer__brand svg {
    height: 2rem;
    width: auto;
    fill: var(--text-on-dark);
    margin-bottom: var(--space-4);
}

/* Nadpisy sloupců ve stylu nadpisů stránek (od 13. 10. 2026): verzálky
   v šířce loga se zářezem, stejná maska title-cut.svg a stejné míry jako
   u nadpisů v pages.css (řádek 1.05em, na tom maska stojí). Bez červené
   tečky, teček je na webu dost. Šířka nadpisu je šířka textu
   (inline-block), aby zářez prošel celým slovem. */
.footer__col-title {
    display: inline-block;
    font-size: var(--size-h5);
    font-weight: var(--weight-semibold);
    font-stretch: 118%;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
    -webkit-mask-image: url("../img/brand/title-cut.svg");
    mask-image: url("../img/brand/title-cut.svg");
    -webkit-mask-size: 100% 1.05em;
    mask-size: 100% 1.05em;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
}

.footer__list li + li {
    margin-top: var(--space-2);
}

/* Telefon: odkazy o stupeň větší a s větší mezerou, ať se dají pohodlně
   trefit prstem (dřív 14 px písmo a 8 px mezi řádky). */
@media (max-width: 47.99rem) {
    .footer__list {
        font-size: var(--size-link-touch);
    }

    .footer__list li + li {
        margin-top: var(--space-3);
    }
}

.footer__link {
    color: var(--muted-2-on-dark);
}

.footer__link:hover {
    color: var(--text-on-dark);
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-9);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-on-dark);
    font-size: var(--size-xs);
    color: var(--muted-2-on-dark);
}

.footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}

/* Telefon: spodní řada na střed jako zbytek patičky, IČO na vlastním
   řádku (bez tečky), ať se zarovnaný text nezalomí uprostřed údaje. */
@media (max-width: 47.99rem) {
    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer__sep {
        display: none;
    }

    .footer__ico {
        display: block;
        margin-top: var(--space-1);
    }

    /* Pod sebou: v jedné řadě na střed by druhý odkaz zajel pod plovoucí
       kolečko vpravo dole. */
    .footer__legal-links {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
}

/* Plovoucí kolečko "Napište nám" (níž v tomhle souboru) stojí pevně vpravo
   dole, přesně tam, kde při dojetí na konec stránky končí dolní řada patičky
   s posledním právním odkazem. Bez rezervy ho zakrývalo.
   Na telefonu se řada zalomí a poslední odkaz skončí pod kolečkem, proto
   spodní okraj. Na širších displejích se řadě vpravo nechá místo: šířka
   kolečka plus jeho odstup od okraje okna plus mezera. Okraj okna už část
   místa dává sám (padding kontejneru a na velkých monitorech i boční okraje
   kolem kontejneru omezeného na --container-max), proto se odečte. Na velkém
   monitoru tak rezerva vyjde nula (záporný padding prohlížeč ořízne na nulu)
   a řada nekončí dřív než zbytek patičky. Mezní šířka je stejná jako
   u kolečka. Dřív to byla jen v consent.css, která se načítá jen se
   zapnutou analytikou, takže bez ní kolečko odkaz pořád zakrývalo. */
@media (max-width: 47.9rem) {
    .footer__bottom {
        padding-bottom: var(--space-5);
    }
}

@media (min-width: 48rem) {
    .footer__bottom {
        padding-right: calc(
            var(--speak-size) + var(--space-5) + var(--space-4)
            - var(--container-pad)
            - (100vw - min(100vw, var(--container-max))) / 2
        );
    }
}

/* ===================== PLOVOUCÍ KONTAKTNÍ KOLEČKO ========================
   Limetkový disk vpravo dole, černý text, na hover se lehce zmenší.
   Hodnoty z reference: 5rem, popisek .75rem, tučnost 500.
   ========================================================================= */

.speak {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-gravity);
    width: var(--speak-size);
    height: var(--speak-size);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background-color: var(--lime);
    color: var(--on-lime);
    font-size: var(--size-xs);
    font-weight: var(--weight-medium);
    line-height: 1.05;
    transition: transform var(--dur-med) var(--ease-out-soft);
}

.speak:hover {
    transform: scale(.9);
}

.speak__icon {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
}

@media (max-width: 47.9rem) {
    .speak {
        width: var(--speak-size-sm);
        height: var(--speak-size-sm);
        bottom: var(--space-4);
        right: var(--space-4);
    }

    .speak__label { display: none; }
    .speak__icon { display: block; }
}

/* ------------------------------------------- jazyková nápověda (proužek) */

.lang-hint {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translateX(-50%) translateY(150%);
    z-index: var(--z-gravity);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: var(--surface);
    font-size: var(--size-small);
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-med) var(--ease-out);
}

.lang-hint.is-visible {
    transform: translateX(-50%) translateY(0);
}