/* ==========================================================================
   Truhlářství Suchánek — statický web

   Hodnoty nejsou odvozené z Elementor proměnných, ale naměřené v prohlížeči
   na ostrém webu (vypočítané styly, šířka 1440 / 1024 / 480 px). Elementor
   totiž většinu proměnných vůbec nepoužívá — nadpisy dědí Ubuntu z kitu
   a text Open Sans z těla stránky.
   ========================================================================== */

/* --------------------------------------------------------------- fonty -- */

/* Ubuntu — všechny nadpisy. Váhu 600 font nemá, prohlížeč sáhne po 700,
   stejně jako na původním webu. */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ubuntu-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ubuntu-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/ubuntu-500-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/ubuntu-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ubuntu-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ubuntu-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Open Sans — běžný text, popisky, odkazy. Variabilní, 400–700. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/open-sans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/open-sans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat — jen hero nadpis a tlačítka. Variabilní, 600–700. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url(../fonts/montserrat-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- tokeny -- */

:root {
    --barva-zelena:     #0B8600;   /* akcent, tlačítka, podtržení, číslice kroků */
    --barva-zelena-ikona: #289C23; /* kolečka pod ikonami — jiný odstín */
    --barva-krem:       #EDEAE6;   /* světlé plochy a text na tmavém pozadí */
    --barva-hneda:      #522E0A;
    --barva-bila:       #FFFFFF;
    --barva-text:       #333333;   /* běžný text — ne černá */
    --barva-text-tmava: #000000;   /* odkazy v menu a kontaktech */
    --barva-text-tlum:  #303030;   /* zvýrazněné slovo v nadpisu */
    --barva-paticka:    #1F1F1F;   /* kontakty v patičce */

    --pismo-nadpis:  'Ubuntu', sans-serif;
    --pismo-text:    'Open Sans', sans-serif;
    --pismo-tlacitko:'Montserrat', sans-serif;

    --sirka-obsahu:  1320px;
    --sirka-paticky: 1320px;
    --radius:        25px;
    --radius-male:   15px;

    --sekce-y: 50px;
    --sekce-x: 10px;
}

/* --------------------------------------------------------------- reset -- */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--pismo-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--barva-text);
    background: var(--barva-bila);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--barva-text-tmava); font-weight: 600; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pismo-nadpis);
    margin: 0;
    line-height: 1;
}

p { margin: 0 0 14px; }

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

strong { font-weight: 700; }

/* -------------------------------------------------------------- layout -- */

.sekce { padding: var(--sekce-y) var(--sekce-x); }

.obsah {
    width: 100%;
    max-width: var(--sirka-obsahu);
    margin-inline: auto;
}

/* -------------------------------------------- opakující se komponenty -- */

/* Štítek nad nadpisem — text mezi dvěma zelenými svislicemi. */
.stitek {
    font-family: var(--pismo-nadpis);
    font-size: 22px;
    font-weight: 700;
    line-height: 2em;
    text-align: center;
    color: var(--barva-text);
    padding: 5px 30px;
    border-inline: 4px solid var(--barva-zelena);
    align-self: flex-start;
    margin: 0;
}

.stitek--stred { align-self: center; }

/* Nadpis se zvýrazněným slovem, pod kterým se kreslí zelená klikatá čára. */
.nadpis-zvyrazneny {
    font-family: var(--pismo-nadpis);
    font-size: 35px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--barva-text);
    max-width: 75%;
    /* Widget animovaného nadpisu nemá reset okrajů jako ostatní nadpisy,
       takže mu zůstávají výchozí .5rem nahoře a 1rem dole. */
    margin: 8px 0 16px;
}

.nadpis-zvyrazneny--stred {
    align-self: center;
    text-align: center;
}

.zvyraznene {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: var(--barva-text-tlum);
    /* Bez tohohle by se rámeček slova zarovnal na účaří, sedl v řádku výš
       a klikatá čára by zajížděla do písmen. */
    vertical-align: bottom;
}

/* Naměřeno na originále: plátno přesahuje slovo o 10 px na všechny strany.
   Dráha se do něj natahuje nerovnoměrně (preserveAspectRatio="none"), takže
   na výšce plátna závisí i tloušťka čáry — proto ty rozměry sedí přesně. */
.zvyraznene svg {
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    overflow: visible;
    pointer-events: none;
    /* Pod text — jinak čára přejede háčky a čárky na dalším řádku. */
    z-index: -1;
}

.zvyraznene svg path {
    stroke: var(--barva-zelena);
    stroke-width: 9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Čára je vykreslená ve výchozím stavu — když JS neproběhne, podtržení
       tam pořád je. Animace ji jen přehraje od začátku (třída .kresli). */
    stroke-dasharray: var(--delka, 1000);
    stroke-dashoffset: 0;
}

.zvyraznene.kresli svg path {
    animation: kresleni 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes kresleni {
    from { stroke-dashoffset: var(--delka, 1000); }
    to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .menu, .menu.menu--otevrene { transition: none; }
    .zvyraznene svg path { animation: none; }
}

/* Tlačítko */
.tlacitko {
    display: inline-block;
    font-family: var(--pismo-tlacitko);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    color: var(--barva-krem);
    background: var(--barva-zelena);
    border: 0;
    border-radius: var(--radius);
    padding: 15px 35px;
    cursor: pointer;
    transition: background-color .3s, color .3s;
}

.tlacitko:hover,
.tlacitko:focus-visible {
    background: #0a7300;
    color: var(--barva-bila);
}

/* Tlačítko v hlavičce a odesílací tlačítko formuláře jsou menší. */
.tlacitko--male {
    font-size: 18px;
    font-weight: 600;
}

/* Odrážkový seznam se zelenou ikonou */
.seznam-odrazky li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.seznam-odrazky li:not(:last-child) { padding-bottom: 9.5px; }

.seznam-odrazky li:not(:first-child) { margin-top: 9.5px; }

/* Ikona je bílá v zeleném kolečku. Kolečko má vlastní odstín zelené,
   jinou než tlačítka. */
.seznam-odrazky svg {
    flex: 0 0 auto;
    width: 48px;
    /* Pevná výška schválně: náš vnější <svg> nemá viewBox, takže by
       height:auto spadlo na výchozích 150 px. */
    height: 48px;
    padding: 10px;
    background: var(--barva-zelena-ikona);
    border-radius: 50%;
    fill: var(--barva-bila);
}

/* ------------------------------------------------------------ hlavička -- */

.hlavicka { padding: 10px; }

.hlavicka__vnitrek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--sirka-obsahu);
    margin-inline: auto;
    padding: 10px 30px;
    background: var(--barva-krem);
    border-radius: var(--radius);
}

.hlavicka__logo {
    flex: 0 0 auto;
    width: 16.734%;
    min-width: 150px;
}

.hlavicka__vpravo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.menu {
    display: flex;
    align-items: center;
}

.menu a {
    font-family: var(--pismo-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    color: var(--barva-text-tmava);
    padding: 13px 20px;
    transition: color .3s;
}

.menu a:hover,
.menu a:focus-visible { color: var(--barva-zelena); }

/* Přepínač mobilního menu — na desktopu skrytý. */
.menu-prepinac {
    display: none;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: var(--barva-zelena);
    color: var(--barva-krem);
    cursor: pointer;
}

.menu-prepinac svg { width: 18px; height: 18px; fill: currentColor; }

/* Otevřený přepínač ukazuje křížek, jako na originále. */
.menu-prepinac__zavrit { display: none; }

.menu-prepinac[aria-expanded="true"] .menu-prepinac__otevrit { display: none; }

.menu-prepinac[aria-expanded="true"] .menu-prepinac__zavrit { display: block; }

/* --------------------------------------------------------------- úvod -- */

.uvod { padding: 0 var(--sekce-x) var(--sekce-y); }

.uvod__vnitrek {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: var(--sirka-obsahu);
    margin: 10px auto;
    padding: 110px;
    border-radius: var(--radius);
    background-color: #181717;
    background-image: image-set(url(../img/hero-pozadi.webp) type('image/webp'),
                                url(../img/hero-pozadi.jpg)  type('image/jpeg'));
    background-repeat: no-repeat;
    background-size: cover;
    /* Originál pozici neurčuje, takže platí výchozí 0% 0% — jiný výřez fotky. */
    background-position: 0 0;
    overflow: hidden;
}

/* Ztmavovací překryv nad fotkou, aby byl text čitelný. */
.uvod__vnitrek::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #020101;
    opacity: .5;
}

.uvod__vnitrek > * { position: relative; }

.uvod .stitek { color: var(--barva-bila); }

.uvod__nadpis {
    max-width: 730px;
    font-family: var(--pismo-tlacitko);
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--barva-bila);
}

.uvod__text {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--barva-krem);
}

/* -------------------------------------------------------------- o nás -- */

/* Dva stejně široké sloupce (na 1440 px každý 660). Fotka je uvnitř svého
   sloupce zarovnaná vlevo, proto vzniká mezera před textem. */
.o-nas__vnitrek {
    display: flex;
    align-items: flex-start;
    max-width: var(--sirka-obsahu);
    margin-inline: auto;
}

.o-nas__foto {
    flex: 1 1 50%;
    min-width: 0;
    padding: 10px;
}

.o-nas__foto img {
    width: 476px;
    max-width: 100%;
    border-radius: var(--radius);
}

.o-nas__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 1 50%;
    min-width: 0;
    padding: 10px;
}

.o-nas__popis {
    max-width: 95.633%;
}

/* ------------------------------------------------------------- služby -- */

.sluzby__vnitrek {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: var(--sirka-obsahu);
    margin: 10px auto;
    padding: 30px 0 0;
    border-radius: var(--radius);
    background: var(--barva-krem);
}

.sluzby__karusel {
    position: relative;
    width: 100%;
    padding: 0 10px 70px;
}

/* Vodorovný posuvník s přichytáváním — bez JS knihovny.
   Schválně bez scroll-behavior: smooth — animaci si řídí skript a CSS by
   rozhýbalo i okamžité přeskoky na klon, které mají být neviditelné.
   Z téhož důvodu jen "proximity", ne "mandatory": tvrdé přichytávání
   pere se s vlastní animací. */
.karusel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 20px) / 3);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

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

/* Slide je o 10 px širší než karta — stejný odstup má i originál. */
.karusel__polozka {
    scroll-snap-align: start;
    padding-inline: 10px;
}

.karta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    height: 100%;
    padding: 10px;
    background: var(--barva-bila);
    border: 1px solid var(--barva-text-tmava);
    border-radius: var(--radius);
}

.karta__foto {
    border: 1px solid var(--barva-text-tmava);
    border-radius: 22px;
    overflow: hidden;
}

/* Fotka služby je na originále výrazně nižší než čtverec. */
.karta__foto img {
    width: 100%;
    aspect-ratio: 383 / 230;
    object-fit: cover;
}

.karta__nadpis {
    padding-inline: 10px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    color: var(--barva-text);
}

.karta__text {
    padding-inline: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.karta__tlacitko { padding-inline: 10px; }

/* Šipky karuselu. Originál je má vyvěšené z toku a místo pro ně dělá
   spodní odsazení karuselu — jinak by sekce byla o 60 px vyšší. */
.karusel-ovladani {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.karusel-sipka {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--barva-hneda);
    cursor: pointer;
}

.karusel-sipka svg { width: 100%; height: 100%; fill: currentColor; }

.karusel-sipka:disabled { opacity: .35; cursor: default; }

/* Elementor mezerník mezi nadpisem sekce a jejím obsahem. */
.mezera { flex: 0 0 auto; width: 100%; height: 20px; }

/* ------------------------------------------------------------ kontakt -- */

.kontakt__vnitrek {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--sirka-obsahu);
    margin-inline: auto;
}

.kontakt__zahlavi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    /* Horní odsazení je o 20 px větší kvůli skryté kotvě, která v originále
       taky zabírá jednu mezeru. */
    padding: 30px 10px 10px;
}

.kontakt__udaje {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 50%;
    min-width: 0;
    padding: 30px 70px 30px 30px;
}

.kontakt__nadpis {
    font-size: 35px;
    font-weight: 600;
    line-height: 1;
    color: var(--barva-text);
}

.kontakt__seznam li a {
    text-decoration: none;
    font-weight: 700;
}

.kontakt__seznam li a:hover { text-decoration: underline; }

.kontakt__formular {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 50%;
    min-width: 0;
    padding: 30px;
    border-radius: var(--radius);
    background: var(--barva-krem);
}

/* ----------------------------------------------------------- formulář -- */

/* Na originále jsou všechna pole přes celou šířku pod sebou, ne ve dvou
   sloupcích. Odstupy odpovídají naměřeným hodnotám. */
.formular__pole {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -5px;
}

.pole {
    flex: 1 1 100%;
    margin-bottom: 20px;
    padding-inline: 5px;
}

/* Hvězdička u povinných polí — na originále červená. */
.pole__povinne { color: #d0021b; }

.pole label {
    /* Inline-block, aby popisek zabíral jen svůj text jako na originále. */
    display: inline-block;
    padding-bottom: 10px;
    font-family: var(--pismo-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--barva-text);
}

.pole input,
.pole textarea {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 21px;
    color: var(--barva-text);
    background: var(--barva-bila);
    border: 1px solid #d5d0c9;
    border-radius: var(--radius-male);
}

.pole input:focus,
.pole textarea:focus {
    outline: 2px solid var(--barva-zelena);
    outline-offset: 1px;
}

/* Čtyři řádky po 21 px, jako na originále. */
.pole textarea {
    height: 96px;
    padding: 5px 14px;
    resize: vertical;
}

/* Past na roboty — pro člověka neviditelná, pro spam boty lákavá. */
.pole--past {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formular__souhlas {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.5;
}

.formular__zprava {
    margin: 0;
    padding: 12px 16px;
    border-radius: var(--radius-male);
    font-size: 16px;
    line-height: 1.5;
}

.formular__zprava--ok    { background: #dff3dd; color: #14520d; }
.formular__zprava--chyba { background: #fbe0e0; color: #7a1414; }

.formular__zprava[hidden] { display: none; }

/* ---------------------------------------------------------- realizace -- */

.realizace__vnitrek {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--sirka-obsahu);
    margin-inline: auto;
}

.realizace__zahlavi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 10px;
}

.kroky {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Tři kroky na řádek, bez mezer mezi sloupci — stejně jako originál. */
.krok {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 0 0 33.3333%;
    min-width: 0;
    padding: 10px;
}

.krok__cislo {
    flex: 0 0 auto;
    font-family: var(--pismo-nadpis);
    font-size: 80px;
    font-weight: 600;
    line-height: 1;
    color: var(--barva-zelena);
}

.krok__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    /* Bez flex-grow by se sloupec smrskl na obsah a text by se lámal dřív. */
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
}

.krok__nadpis {
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    color: var(--barva-text);
}

.krok__popis { margin: 0 0 14px; }

/* ------------------------------------------------------------ galerie -- */

/* Sekce galerie má na originále spodní odsazení 100 px, ne 50. */
.galerie { padding-bottom: 100px; }

.galerie__vnitrek {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: var(--sirka-obsahu);
    margin-inline: auto;
}

/* "Justified" galerie: všechny fotky mají stejnou výšku a šířka odpovídá
   jejich poměru stran. Docílíme toho flex-basis 0 a flex-grow úměrným
   poměru — první fotka je na výšku, proto je užší. */
.galerie__mrizka {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    width: 100%;
}

/* Elementor tu má "justified" galerii. Tři fotky 4:3 na řádek se do obsahu
   vejdou právě při poměru 4/3, takže výška vychází z šířky. */
.galerie__polozka {
    position: relative;
    display: block;
    flex: 4 1 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
}

.galerie__polozka--na-vysku {
    flex-grow: 2.25;
    aspect-ratio: 3 / 4;
}

.galerie__polozka img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms;
}

.galerie__polozka::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / .5);
    opacity: 0;
    transition: opacity 800ms;
}

.galerie__polozka:hover img,
.galerie__polozka:focus-visible img { transform: scale(1.05); }

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

/* Galerie na originále nabíhá při scrollu zdola (Elementor "fadeInUp",
   1,25 s). Do doby, než se dostane do zorného pole, je skrytá. */
.nabiha { visibility: hidden; }

.nabiha.nabehlo {
    visibility: visible;
    animation: nabehnuti 1.25s both;
}

@keyframes nabehnuti {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nabiha { visibility: visible; }
    .nabiha.nabehlo { animation: none; }
}

/* Lightbox ve stylu Elementoru: prosvítající tmavý překryv, počítadlo vlevo
   nahoře, tenké šipky po stranách, popisek pod fotkou.
   Zavřený <dialog> má display:none, ale pravidlo níž by ho přebilo — proto
   tahle pojistka, jinak by překryv svítil přes celou stránku. */
.lightbox:not([open]) { display: none; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 60px 80px;
    background: rgb(0 0 0 / .8);
    border: 0;
    color: #fff;
}

.lightbox::backdrop { background: transparent; }

.lightbox__obsah {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.lightbox__obsah img {
    max-width: 100%;
    min-height: 0;
    object-fit: contain;
}

/* Přepnutí fotky nalétne ze strany, ze které se listuje. */
.lightbox__obsah img.prijizdi-zprava { animation: prijezd-zprava .35s ease both; }
.lightbox__obsah img.prijizdi-zleva  { animation: prijezd-zleva  .35s ease both; }

@keyframes prijezd-zprava {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
}

@keyframes prijezd-zleva {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: none; }
}

.lightbox__popisek {
    font-family: var(--pismo-text);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.lightbox__pocitadlo {
    position: absolute;
    top: 18px;
    left: 22px;
    margin: 0;
    font-size: 15px;
}

.lightbox__zavrit,
.lightbox__sipka {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s;
}

.lightbox__zavrit:hover,
.lightbox__sipka:hover { opacity: 1; }

.lightbox__zavrit { top: 14px; right: 18px; width: 34px; height: 34px; }

.lightbox__zavrit svg { fill: currentColor; }

.lightbox__sipka { top: 50%; width: 44px; height: 44px; transform: translateY(-50%); }

.lightbox__sipka--zpet  { left: 20px; }
.lightbox__sipka--vpred { right: 20px; }
/* ---------------------------------------------------------------- CTA -- */

.vyzva {
    position: relative;
    padding: 145px 20px;
    background-color: #1D1F24;
    background-image: image-set(url(../img/cta-pozadi-1920.webp) type('image/webp'),
                                url(../img/cta-pozadi-1920.jpg)  type('image/jpeg'));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.vyzva::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: .5;
}

/* Tahle sekce je na originále přes celou šířku, ne omezená na 1320 px. */
.vyzva__vnitrek {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.vyzva__nadpis {
    width: 66%;
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    color: var(--barva-krem);
}

.vyzva__podnadpis {
    width: 66%;
    margin: 0;
    font-family: var(--pismo-nadpis);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: var(--barva-krem);
}

/* ------------------------------------------------------------- patička -- */

.paticka {
    padding: 100px 20px 30px;
    background: var(--barva-bila);
}

.paticka__vnitrek {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: var(--sirka-paticky);
    margin-inline: auto;
}

.paticka__sloupec { flex: 1 1 260px; }

.paticka__logo { max-width: 300px; margin-bottom: 20px; }

.paticka__nadpis {
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--barva-text);
}

.paticka p { margin: 0 0 14.4px; }

.paticka a { text-decoration: none; }

.paticka a:hover { text-decoration: underline; }

.paticka .kontakt__seznam li a { color: var(--barva-paticka); }

.paticka__spodek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--sirka-paticky);
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgb(0 0 0 / .12);
    font-size: 16px;
    font-weight: 700;
}

/* -------------------------------------------------------------- cookies -- */

/* Lišta sedí dole přes celou šířku. Zavírá se jen rozhodnutím, ne klikem
   vedle — souhlas musí být vědomý. */
.souhlas {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--barva-bila);
    box-shadow: 0 -4px 24px rgb(0 0 0 / .16);
}

.souhlas[hidden] { display: none; }

.souhlas__vnitrek {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: var(--sirka-obsahu);
    margin-inline: auto;
    padding: 20px 24px;
}

.souhlas__text {
    margin: 0;
    font-family: var(--pismo-text);
    font-size: 15px;
    line-height: 1.5;
    color: var(--barva-text);
}

.souhlas__tlacitka {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Přijmout i odmítnout vypadají stejně — odmítnutí nesmí být schované. */
.souhlas__tlacitko {
    padding: 12px 26px;
    border: 0;
    border-radius: var(--radius);
    background: var(--barva-zelena);
    font-family: var(--pismo-tlacitko);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--barva-krem);
    cursor: pointer;
    transition: background-color .3s;
}

.souhlas__tlacitko:hover,
.souhlas__tlacitko:focus-visible { background: #096b00; }

.souhlas__odkaz {
    padding: 4px;
    border: 0;
    background: none;
    font-family: var(--pismo-text);
    font-size: 15px;
    line-height: 1.4;
    text-decoration: underline;
    color: var(--barva-text);
    cursor: pointer;
}

.souhlas-okno {
    width: min(520px, calc(100vw - 32px));
    max-width: none;
    padding: 28px;
    border: 0;
    border-radius: var(--radius-male);
    background: var(--barva-bila);
    font-family: var(--pismo-text);
    color: var(--barva-text);
}

.souhlas-okno::backdrop { background: rgb(0 0 0 / .5); }

.souhlas-okno__nadpis {
    margin: 0 0 20px;
    font-family: var(--pismo-nadpis);
    font-size: 26px;
    line-height: 1.3;
    color: var(--barva-text-tmava);
}

.souhlas-okno__polozka { margin-bottom: 20px; }

.souhlas-okno__polozka label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
}

.souhlas-okno__polozka input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--barva-zelena);
}

.souhlas-okno__polozka input:disabled { cursor: default; }

.souhlas-okno__polozka p {
    margin: 6px 0 0 26px;
    font-size: 14px;
    line-height: 1.5;
}

.souhlas-okno__poznamka {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.5;
}

.souhlas-okno__tlacitka {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Odkaz v patičce, kterým se dá volba kdykoli změnit. */
.paticka__cookies {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    color: inherit;
    cursor: pointer;
}

/* --------------------------------------------------------- responzivně -- */

@media (max-width: 1024px) {
    /* Sekce mají po stranách 10 px, jen Proces realizace 30 px. */
    .realizace { padding-inline: 30px; }

    /* Rozbalené menu je pruh přes celou šířku okna, ne box uvnitř hlavičky. */
    .hlavicka { padding-inline: 10px; position: relative; }

    .hlavicka__logo { width: 193.609px; min-width: 0; }

    /* Menu se schová za přepínač a rozbaluje se pod hlavičkou. */
    .menu-prepinac { display: flex; }

    .hlavicka__vpravo { gap: 10px; }

    .menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 0;
        background: var(--barva-bila);
        /* Rozbaluje se plynule přes max-height (0,3 s), stejně jako originál.
           Viditelnost se přepne až po dojetí, aby v zavřeném stavu nešlo
           na odkazy skočit tabulátorem. */
        overflow: hidden;
        max-height: 0;
        visibility: hidden;
        transition: max-height .3s, visibility 0s .3s;
    }

    .menu.menu--otevrene {
        visibility: visible;
        transition: max-height .3s, visibility 0s;
    }

    .menu a {
        display: block;
        padding: 10px 20px;
        font-size: 13px;
        line-height: 20px;
        color: #33373D;
    }


    .uvod { padding-inline: 10px; }

    .uvod__vnitrek { margin: 0; padding: 50px 30px; }

    .uvod__nadpis { font-size: 44px; }

    .uvod__text { font-size: 18px; }

    /* Nadpisy sekcí, karty ani kontakt se nezmenšují — kit pro ně
       responzivní hodnoty nemá. Mění se jen hero, kroky, CTA a patička. */
    .hlavicka .tlacitko--male { font-size: 16px; }

    .paticka__nadpis { font-size: 22px; line-height: 1.2; }

    /* Na tabletu je fotka pod textem. */
    .o-nas__vnitrek { flex-direction: column-reverse; }

    .o-nas__foto { width: 100%; }
    .o-nas__foto img { width: 100%; }

    .o-nas__text { padding-inline: 30px; }

    .karusel { grid-auto-columns: calc((100% - 10px) / 2); }

    /* Na tabletu je formulář pod kontakty a kroky jsou dva na řádek. */
    .kontakt__udaje,
    .kontakt__formular { flex: 1 1 100%; }

    .kontakt__udaje { padding: 0 30px; }

    /* Odchylka od originálu: tam se formulář lepí přímo na kontakty.
       Na přání klienta má mezeru. */
    .kontakt__formular { margin-top: 20px; }

    .krok { flex: 0 0 50%; }

    /* V patičce jde logo na vlastní řádek, údaje a kontakty vedle sebe. */
    .paticka__sloupec:first-child { flex: 1 1 100%; }

    .vyzva {
        padding: 60px 20px;
        /* Na užších displejích stačí menší pozadí. */
        background-image: image-set(url(../img/cta-pozadi-1200.webp) type('image/webp'),
                                    url(../img/cta-pozadi-1200.jpg)  type('image/jpeg'));
    }

    .vyzva__podnadpis { font-size: 18px; }
}

@media (max-width: 767px) {

    /* Na mobilu se lišta skládá pod sebe a tlačítka jsou přes celou šířku. */
    .souhlas__vnitrek {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 20px;
    }

    .souhlas__tlacitka { flex-wrap: wrap; }

    .souhlas__tlacitka .souhlas__tlacitko { flex: 1 1 auto; }

    .souhlas__odkaz { flex: 1 0 100%; text-align: center; }
    :root { --sekce-y: 20px; --sekce-x: 5px; }

    .realizace { padding-inline: 15px; }

    .galerie { padding-bottom: 50px; }

    .hlavicka__logo { width: 46.038%; min-width: 0; }

    .hlavicka .tlacitko { display: none; }

    .uvod { padding: 0 5px 20px; }

    .uvod__vnitrek { padding: 30px 10px 20px; }

    .uvod .stitek { font-size: 20px; line-height: 2em; }

    .uvod__nadpis { font-size: 28px; }

    .uvod__text { font-size: 16px; }

    /* Na mobilu je fotka přes celou šířku a nadpis se sekcí na střed. */
    .o-nas__foto { padding: 0; }

    .o-nas__text { padding: 0 10px; }

    .o-nas .stitek { align-self: center; }

    .o-nas .nadpis-zvyrazneny { text-align: center; max-width: 100%; }

    .o-nas__popis { max-width: 100%; padding-inline: 5px; }

    .o-nas .seznam-odrazky { padding-bottom: 20px; }

    .karusel { grid-auto-columns: 100%; }

    .kontakt__udaje { padding: 0 10px 20px; }

    .kontakt__formular { padding: 20px; }

    .krok { flex: 0 0 100%; padding: 0; }

    .krok__cislo { font-size: 60px; }

    .galerie__mrizka { gap: 20px; }

    .paticka__sloupec { flex: 1 1 100%; }

    /* max-width by nepřebilo width: 66% ze základního pravidla. */
    .vyzva__nadpis,
    .vyzva__podnadpis { width: 100%; }

    .vyzva__nadpis { font-size: 35px; }

    .vyzva__podnadpis { font-size: 16px; }

    .lightbox { padding: 56px 12px 40px; }

    .lightbox__sipka--zpet  { left: 4px; }
    .lightbox__sipka--vpred { right: 4px; }
}

/* Pozor na pořadí: tenhle blok musí být až za definicemi .uvod__vnitrek
   a .sluzby__vnitrek, jinak jejich margin:auto posun přebije.

   Tyhle boxy nejsou na originále přesně na střed — Elementor je posouvá
   o 10 px doprava. Hlavička a služby tak mají i na tabletu, hero jen na
   desktopu (na tabletu mu Elementor okraje ruší), na mobilu nikdo. */
@media (min-width: 768px) {
    .hlavicka__vnitrek,
    .sluzby__vnitrek {
        width: 100%;
        margin-left: max(10px, calc((100% - var(--sirka-obsahu)) / 2 + 10px));
        margin-right: 0;
    }
}

@media (min-width: 1025px) {
    .uvod__vnitrek {
        width: 100%;
        margin-left: max(10px, calc((100% - var(--sirka-obsahu)) / 2 + 10px));
        margin-right: 0;
    }
}