/* ==========================================================================
   OBSAH
   --------------------------------------------------------------------------
   01. Proměnné (barvy, písma, rozměry)
   02. Reset a základ
   03. Rozvržení (kontejnery, sekce, nadpisy sekcí)
   04. Tlačítka
   05. Hlavička a navigace
   06. Hero
   07. Statistiky
   08. Karty – SPOLEČNÝ styl pro Služby i Realizace
   09. Služby (.service-card)
   10. Realizace – galerie (.gallery)
   11. Řemeslo (craftsmanship) a Poptávka (inquiry)
   12. Patička
   13. Stránka Kontakt a formulář (kontakt.html)
   14. Responzivita (tablet, mobil)
   15. Přístupnost (focus, omezený pohyb)
   ========================================================================== */


/* ==========================================================================
   01. PROMĚNNÉ
   Změnou hodnoty zde se změní vzhled na celém webu.
   ========================================================================== */
:root {
    /* Barvy */
    --paper: #f8f5ef;          /* hlavní pozadí */
    --paper-light: #fdfcf7;    /* světlejší pozadí sekcí Služby / Realizace */
    --paper-deep: #eee7dc;     /* tmavší pozadí (poptávka) */
    --ink: #211d1a;            /* hlavní text */
    --muted: #6b625b;          /* vedlejší text */
    --wood: #81512f;           /* hlavní akcent */
    --wood-dark: #63391f;      /* akcent při najetí myší */
    --line: #dfd8cf;           /* jemné oddělovací čáry */

    /* Písma */
    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: Arial, Helvetica, sans-serif;

    /* Rozměry rozvržení */
    --container: 1440px;
    --text-width: 65ch;
    --gutter: clamp(24px, 4vw, 80px); /* odsazení na každé straně */
    --space-xs: .5rem;
    --space-sm: clamp(12px, 1vw, 16px);
    --space-md: clamp(20px, 2vw, 32px);
    --space-lg: clamp(32px, 3vw, 48px);
    --section-space: clamp(42px, 4.25vw, 60px);
    --title-size: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
    --section-title-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
    --subsection-title-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem);
    --eyebrow-size: clamp(.75rem, .7rem + .15vw, .875rem);
    --body-size: clamp(1rem, .97rem + .1vw, 1.0625rem);
    --lead-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
    --body-leading: 1.65;
    --anchor-offset: 24px;
    --control-height: 48px;
    --site-header-height: 81px;
    --section-min-height: calc(100vh - var(--site-header-height));

    /* Karty (jednotné pro Služby i Realizace) */
    --card-radius: 7px;
    --card-border: rgba(129, 81, 47, .2);
    --card-bg: #f8f5ef;
    --card-shadow: 0 4px 12px rgba(49, 29, 17, .06);
    --card-shadow-hover: 0 12px 24px rgba(49, 29, 17, .1);
    --card-media-ratio: 3 / 2; /* poměr stran obrázku v kartě */
    --card-gap: var(--space-md);
    --card-padding: var(--space-md);

    /* Dřevěná textura – zástupný obrázek, dokud chybí fotka */
    --wood-placeholder:
            linear-gradient(135deg, rgba(90, 52, 30, .13), rgba(255, 255, 255, .06)),
            repeating-linear-gradient(102deg, #c09b72 0, #c09b72 2px, #d6b78d 3px, #c8a57c 9px, #b9875c 13px);
}

@supports (height: 100dvh) {
    :root {
        --section-min-height: calc(100dvh - var(--site-header-height));
    }
}


/* ==========================================================================
   02. RESET A ZÁKLAD
   ========================================================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

[id], a, button, input, select, textarea {
    scroll-margin-top: var(--anchor-offset);
}

button, input, select, textarea { font-family: inherit; }
main, section, .footer-col { min-width: 0; }

body {
    min-width: 320px;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--sans);
    font-size: var(--body-size);
    line-height: var(--body-leading);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}


/* ==========================================================================
   03. ROZVRŽENÍ
   ========================================================================== */

/* --- Kontejnery: vystředěný obsah s bočními okraji --- */
.site-header__inner,
.hero__inner,
.stats__inner,
.section__inner,
.site-footer__inner {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
}

/* Sekce s kartami sdílejí vnější hrany obsahu. */
.services__inner,
.projects .section__inner {
    position: relative;
    z-index: 1;
}

/* --- Sekce: jednotné odsazení a oddělovací čára --- */
.services,
.projects,
.craftsmanship,
.inquiry {
    padding: var(--section-space) 0;
    border-top: 1px solid var(--line);
}

/* Služby a Realizace mají stejné světlejší pozadí a jsou "ozdobené" stejně */
.services--featured,
.projects {
    position: relative;
    overflow: hidden;
    background: var(--paper-light);
}

/* Dřevěné hobliny v rohu sekce Realizace */
.projects::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 280px;
    background: url("../images/hero/wood_shavings_right.png") right top / contain no-repeat;
    content: "";
    pointer-events: none;
}

/* --- Nadpis sekce (eyebrow + h2 + popisek), stejný pro Služby i Realizace --- */
.services__heading,
.projects .section__header {
    max-width: 640px;
    margin: 0 auto var(--space-lg);
    text-align: center;
}

/* Společné role podporují i stávající selektory komponent. */
.section-eyebrow,
.hero__eyebrow,
.page-intro__eyebrow,
.services__eyebrow,
.projects__eyebrow,
.craftsmanship__eyebrow,
.about__facts-heading {
    margin: 0 0 var(--space-sm);
    color: var(--wood);
    font-family: var(--sans);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.main-title,
.hero h1,
.page-intro h1,
.section-title,
.services__heading h2,
.section__header h2,
.craftsmanship h2,
.inquiry h2,
.service-detail__content h2,
.contact-form__heading,
.subsection-title,
.contact-info__heading,
.service-card h3,
.product-card__name {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.035em;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.main-title,
.hero h1,
.page-intro h1 {
    max-width: 22ch;
    font-size: var(--title-size);
    line-height: 1.08;
}

.hero h1 {
    letter-spacing: -.015em;
}

.section-title,
.services__heading h2,
.section__header h2,
.craftsmanship h2,
.inquiry h2,
.service-detail__content h2,
.contact-form__heading {
    font-size: var(--section-title-size);
    line-height: 1.15;
}

.page-intro h1 {
    font-size: var(--section-title-size);
    line-height: 1.15;
}

.subsection-title,
.contact-info__heading,
.service-card h3,
.product-card__name {
    color: var(--wood-dark);
    font-size: var(--subsection-title-size);
    line-height: 1.25;
}

.section__intro,
.projects .section__header > p:not(.projects__eyebrow):last-child {
    max-width: var(--text-width);
    margin: var(--space-sm) auto 0;
    color: var(--muted);
    font-size: var(--body-size);
    line-height: var(--body-leading);
}

/* ==========================================================================
   04. TLAČÍTKA
   ========================================================================== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    max-width: 100%;
    gap: var(--space-xs);
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-1px);
}

/* Plné tlačítko (hlavička, hero, výzvy k akci) */
.button--header,
.button--primary,
.button--projects {
    color: #fff;
    background: var(--wood);
}

.button--header:hover,
.button--header:focus-visible,
.button--primary:hover,
.button--primary:focus-visible,
.button--projects:hover,
.button--projects:focus-visible {
    background: var(--wood-dark);
}

.button--header {
    justify-self: end;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.button--primary {
    margin-top: var(--space-md);
}

/* Obrysové tlačítko */
.button--secondary,
.button--service {
    color: var(--wood-dark);
    border-color: var(--wood);
    background: transparent;
}

.button--secondary {
    margin-top: var(--space-md);
}

.button--service {
    width: fit-content;
    min-height: 44px;
    margin-top: auto;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.button--secondary:hover,
.button--secondary:focus-visible,
.button--service:hover,
.button--service:focus-visible {
    color: #fff;
    background: var(--wood);
}

/* Tlačítko pod kartami Realizací */
.button--projects {
    display: flex;
    width: fit-content;
    margin: var(--space-lg) auto 0;
}


/* ==========================================================================
   05. HLAVIČKA A NAVIGACE
   ========================================================================== */
.site-header {
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    min-height: 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: clamp(18px, 2vw, 40px);
    align-items: center;
}

.site-logo {
    width: max-content;
    display: flex;
    flex-direction: column;
    color: var(--wood);
    font-family: var(--serif);
    line-height: .78;
    letter-spacing: -.035em;
}

.site-logo__eyebrow {
    padding-left: 2px;
    font-size: 15.4px;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.site-logo__name {
    font-size: 31.9px;
}

.mobile-menu-toggle,
.mobile-menu-phone { display: none; }

.main-navigation {
    justify-self: center;
    font-size: 15px;
}

.main-navigation__list,
.site-footer__navigation {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-navigation a {
    transition: color .2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
    color: var(--wood);
}

.main-navigation a[aria-current="page"] {
    color: var(--wood-dark);
    font-weight: 700;
}


/* --- Telefon v hlavičce: tichý odkaz s ikonou, ne výrazná "pilulka" --- */
.header-phone {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 12px;
    padding-left: 18px;
    border-left: 1px solid var(--line);
    color: var(--ink);
    line-height: 1.2;
    transition: color .2s ease;
}

.header-phone:hover,
.header-phone:focus-visible,
.mobile-menu-phone:hover,
.mobile-menu-phone:focus-visible {
    color: var(--wood-dark);
}

.phone-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper-deep);
    transition: background-color .2s ease;
}

.header-phone:hover .phone-icon-wrap,
.header-phone:focus-visible .phone-icon-wrap,
.mobile-menu-phone:hover .phone-icon-wrap,
.mobile-menu-phone:focus-visible .phone-icon-wrap {
    background: var(--wood);
}

.phone-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--wood);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .2s ease;
}

.header-phone:hover .phone-icon,
.header-phone:focus-visible .phone-icon,
.mobile-menu-phone:hover .phone-icon,
.mobile-menu-phone:focus-visible .phone-icon {
    stroke: #fff;
}

.header-phone__content {
    display: flex;
    flex-direction: column;
}

.header-phone__label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.header-phone__number {
    color: var(--wood-dark);
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: -.01em;
}

/* Malá bublina s potvrzením po zkopírování čísla */
.phone-copy-toast {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 6px 12px;
    border-radius: 5px;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.header-phone.is-copied .phone-copy-toast {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   06. HERO
   Na mobilu výšku určuje obsah, na desktopu dostupný viewport.
   ========================================================================== */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.home-page .home-intro {
    display: grid;
    grid-template-rows: minmax(min-content, 1fr) auto;
    width: 100%;
    min-height: var(--section-min-height);
}

/* Dekorativní linky vlevo dole */
.hero::before {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 161.46vw;
    height: 96.876%;
    background-image: url("../images/hero/hero_linky.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 100%;
    transform: scale(0.4368);
    transform-origin: left bottom;
    -webkit-mask-image: linear-gradient(135deg, #000 70%, transparent 92%);
    mask-image: linear-gradient(135deg, #000 70%, transparent 92%);
    content: "";
    pointer-events: none;
}

/* Dřevěná textura vpravo dole */
.hero::after {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 96.876%;
    background-image: url("../images/hero/hero_seamless.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 100%;
    mix-blend-mode: multiply;
    opacity: .41;
    content: "";
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
    padding: var(--section-space) 0;
}

/* --- Hero: text --- */
.hero__content {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

@media (min-width: 731px) {
    .home-page .hero__content {
        justify-self: end;
        width: min(100%, 650px);
    }
}

/* Na desktopu vyplní hero prostor nad statusem; obsah i šipka se vážou k jeho výšce. */
@media (min-width: 731px) and (min-height: 701px) {
    .home-page .home-intro {
        grid-template-rows: minmax(0, 1fr) auto;
        height: var(--section-min-height);
        min-height: 0;
    }

    .home-page .hero {
        display: grid;
        min-height: 0;
    }

    .home-page .hero__inner {
        position: static;
        height: 100%;
        padding: clamp(42px, 7vh, 88px) 0;
        padding: clamp(42px, 7dvh, 88px) 0;
    }
}

/* Příliš nízký desktop: obsah hero určuje výšku a status následuje v toku stránky. */
@media (min-width: 731px) and (max-height: 700px),
       (min-width: 1500px) and (max-height: 720px) {
    .home-page .home-intro {
        grid-template-rows: auto auto;
        height: auto;
        min-height: 0;
    }

    .home-page .hero {
        display: block;
        min-height: 0;
        overflow: visible;
    }

    .home-page .hero__inner {
        height: auto;
        min-height: 0;
        padding: var(--section-space) 0;
    }

    .home-page .hero__scroll,
    .home-page .hero__scroll:hover,
    .home-page .hero__scroll:focus-visible {
        position: static;
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 8px;
        margin-left: 50%;
    }
}

/* Abnormálně vysoký desktop: nevyplňujeme celý viewport prázdným místem. */
@media (min-width: 731px) and (min-height: 1100px) {
    .home-page .home-intro {
        grid-template-rows: auto auto;
        height: auto;
        min-height: 0;
    }

    .home-page .hero__inner {
        height: auto;
        padding: var(--section-space) 0;
    }
}

.hero__lead {
    max-width: 52ch;
    margin: var(--space-md) 0 0;
    color: var(--muted);
    font-size: var(--lead-size);
    line-height: var(--body-leading);
}

.hero__trust {
    margin: var(--space-md) 0 0;
    color: var(--wood-dark);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.5;
}

.hero .button--primary {
    margin-top: var(--space-md);
}

/* Na mobilu zarovná začátek služeb pod sticky hlavičku. */
.home-page #services {
    scroll-margin-top: 0;
}

/* --- Hero: šipka pro posun dolů --- */
.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: .8;
    transform: translateX(-50%);
    animation: hero-scroll-float 2.1s ease-in-out infinite;
    transition: transform .2s ease, opacity .2s ease;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

.hero__scroll-icon {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(62, 53, 46, .8);
    border-bottom: 2px solid rgba(62, 53, 46, .8);
    border-radius: 1px;
    transform: rotate(45deg) translateY(-1px);
}

@keyframes hero-scroll-float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

/* --- Hero: obrázek v rámečku --- */
.hero__visual {
    position: relative;
    z-index: 2;
    width: min(100% - 12px, 680px);
    margin-right: 6px;
    justify-self: end;
}

.hero-image-wrapper {
    position: relative;
    z-index: 10;
    isolation: isolate;
    border: 1px solid rgba(193, 162, 126, .42);
    background: #f4eee3;
    padding: clamp(6px, .9vw, 10px);
    box-shadow:
            0 8px 18px rgba(49, 29, 17, .1),
            0 0 0 5px rgba(244, 238, 227, .9),
            0 0 0 6px rgba(129, 81, 47, .16);
}

/* Ozdobný rámeček se seříznutými rohy */
.hero-image-wrapper::before {
    position: absolute;
    inset: 3px;
    z-index: -2;
    border: 1.8px solid #a9825c;
    clip-path: polygon(
            0 14px,
            14px 0,
            calc(100% - 14px) 0,
            100% 14px,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            14px 100%,
            0 calc(100% - 14px)
    );
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
    content: "";
    pointer-events: none;
}

.image-placeholder {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 8px;
    background: var(--wood-placeholder);
}

.image-placeholder--hero {
    display: grid;
    place-items: center;
    aspect-ratio: 1024 / 670.18;
    background: transparent;
    border-radius: 0;
}

.hero__image {
    display: block;
    width: 100%;
    height: 120.48%;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
    box-shadow: 0 5px 14px rgba(49, 29, 17, .12);
}


/* ==========================================================================
   07. STATISTIKY (pruh pod hero)
   ========================================================================== */
.stats {
    border-top: 1px solid var(--line);
}

.home-page .stats {
    border-bottom: 1px solid var(--line);
}

/* Na úvodní stránce odděluje status bar a Služby jediná 1px čára. */
.home-page .services {
    border-top: 0;
}

.stats__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    list-style: none;
}

.home-page .stats__inner {
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.stats__item {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: var(--space-sm) 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wood-dark);
    font-size: var(--eyebrow-size);
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
    text-align: center;
}

@media (min-width: 731px) {
    .home-page .stats__item {
        padding: 8px 12px;
    }
}

/* Svislý oddělovač mezi položkami */
.stats__item:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.5px;
    height: 24px;
    background: var(--wood);
    border-radius: 999px;
    opacity: .7;
    transform: translateY(-50%);
    content: "";
}

/* ==========================================================================
   08. KARTY SLUŽEB (.service-card)
   --------------------------------------------------------------------------
   [obrázek] → [nadpis] → [popis, který se roztáhne] → [odkaz vždy dole]
   Realizace mají od sekce 10 vlastní, jednodušší styl galerie.
   ========================================================================== */

/* --- Mřížka: 4 sloupce, karty v řadě se natáhnou na stejnou výšku --- */
.services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--card-gap);
    align-items: stretch;
}

/* --- Karta --- */
.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}

/* --- Obrázek: stejný poměr stran, dřevěná textura jako záloha --- */
.service-card__media {
    position: relative;
    aspect-ratio: var(--card-media-ratio);
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--card-border);
    background: var(--wood-placeholder);
}

.service-card__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85) contrast(1.05) brightness(.95);
}

/* --- Tělo karty: roztáhne se na zbývající výšku --- */
.service-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--card-padding);
}

/* --- Nadpis karty: rezerva na 2 řádky, aby popisy začínaly ve stejné výšce --- */
.service-card h3 {
    min-height: 2.5em;
}

/* --- Popis: roztáhne se, takže odkaz je vždy úplně dole --- */
.service-card p {
    flex: 1 1 auto;
    min-height: 4.5em;          /* rezerva na 3 řádky textu */
    margin: 8px 0 16px;
    color: var(--muted);
    font-size: var(--body-size);
    line-height: var(--body-leading);
}

/* --- Patička karty: čára + odkaz, vždy přilepená dole --- */
.service-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
    color: var(--wood-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    transition: color .2s ease;
}

.service-card__link:hover,
.service-card__link:focus-visible {
    color: var(--wood);
}

/* Šipka v odkazu se při najetí posune */
.service-card__link span {
    display: inline-block;
    margin-left: 4px;
    transition: transform .2s ease;
}

.service-card__link:hover span,
.service-card__link:focus-visible span {
    transform: translateX(3px);
}


/* ==========================================================================
   09. SLUŽBY – doplňky specifické jen pro tuto sekci
   ========================================================================== */

/* Výzva k akci pod kartami služeb */
.services__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-lg);
    text-align: center;
}

.services__cta p {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: -.04em;
}

.services__cta .button--primary {
    margin-top: var(--space-sm);
}


/* ==========================================================================
   10. REALIZACE – GALERIE (.gallery)
   --------------------------------------------------------------------------
   Mřížka fotek různé velikosti (masonry styl), bez popisků. Každá dlaždice
   je odkaz na detail, se štítkem typu práce v rohu. Fotka se při najetí
   mírně zvětší a ztmaví, aby byl štítek dobře čitelný.
   Přidat/ubrat sloupec: uprav .gallery__grid; širokou/vysokou dlaždici
   udělá třída .gallery__tile--wide / --tall na daném odkazu.
   ========================================================================== */

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--card-gap);
}

/* Pevná výška dlaždice (žádné řádkové "rozpětí"), aby v mřížce nikdy
   nevznikaly prázdné mezery. Šířku dělá jen sloupcové rozpětí. */
.gallery__tile {
    position: relative;
    display: block;
    height: clamp(220px, 20vw, 340px);
    overflow: hidden;
    border-radius: var(--card-radius);
    background: var(--wood-placeholder);
}

.gallery__tile--wide {
    grid-column: span 2;
}

.gallery__tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85) contrast(1.05) brightness(.95);
    transition: transform .4s ease;
}

/* Ztmavení zdola při najetí, aby štítek zůstal čitelný na světlé fotce */
.gallery__tile::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(33, 29, 26, .5), transparent 46%);
    opacity: 0;
    transition: opacity .25s ease;
    content: "";
}

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

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

/* Štítek typu práce, v rohu dlaždice */
.gallery__tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--paper-light);
    color: var(--wood-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}


/* ==========================================================================
   STRÁNKA REALIZACE.HTML – filtr + galerie
   ========================================================================== */

/* --- Filtr podle typu práce --- */
.realizace-filters {
    padding: 18px 0;
    margin-top: var(--space-md);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.realizace-filters__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
}

.chip {
    min-height: 44px;
    padding: 9px 18px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.chip:hover,
.chip:focus-visible {
    border-color: var(--wood);
    color: var(--wood-dark);
}

.chip.is-active {
    background: var(--wood);
    border-color: var(--wood);
    color: #fff;
}

/* --- Počítadlo výsledků --- */
.realizace-count {
    margin-left: auto;
    color: var(--muted);
    font-size: 13px;
}

/* --- Kontejner realizační galerie --- */
.realizace-grid {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: var(--space-md) auto var(--space-lg);
    scroll-margin-top: var(--anchor-offset);
}

/* CSS columns zachovávají přirozený poměr stran bez ořezu. */
#realizace-grid {
    column-count: 3;
    column-gap: var(--card-gap);
}

.realizace-tile {
    position: relative;
    display: inline-block;
    vertical-align: top;
    break-inside: avoid;
    width: 100%;
    height: auto;
    margin: 0 0 var(--card-gap);
    padding: 0;
    border: 0;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--wood-placeholder);
    font: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
    transition: opacity .2s ease;
}

/* Dlaždice skrytá filtrem – zabírá 0 místa, ne jen neviditelná */
.realizace-tile[hidden] {
    display: none;
}

.realizace-tile--empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--paper-deep);
    color: var(--muted);
    text-align: center;
    cursor: default;
}

.realizace-placeholder {
    font-family: var(--serif);
    font-size: 16px;
}

.realizace-tile img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(.85) contrast(1.05) brightness(.95);
}

.realizace-tile::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(20, 14, 10, .55), transparent 50%);
    opacity: 0;
    transition: opacity .25s ease;
    content: "";
}

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

.realizace-tile__tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--paper-light);
    color: var(--wood-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.realizace-tile__zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .2s ease, transform .2s ease;
}

.realizace-tile:hover .realizace-tile__zoom,
.realizace-tile:focus-visible .realizace-tile__zoom {
    opacity: 1;
    transform: scale(1);
}

.realizace-tile__photos {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(31, 25, 20, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.realizace-empty {
    column-span: all;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

/* ==========================================================================
   STRÁNKA PRODUKTY.HTML – nabídka nábytku
   ========================================================================== */
.products-grid {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: var(--space-md) auto var(--space-lg);
    scroll-margin-top: var(--anchor-offset);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--card-gap);
    align-items: stretch;
}

.product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    justify-self: center;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--paper-light);
}

.product-card__open {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--card-border);
    overflow: hidden;
    background: var(--paper);
    color: var(--wood-dark);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.product-card__open:focus-visible {
    outline: 2px solid var(--wood);
    outline-offset: -4px;
}

.product-card__placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 20px;
    border-bottom: 1px solid var(--card-border);
    background: var(--paper-deep);
    color: var(--muted);
    font-family: var(--serif);
    font-size: 16px;
    text-align: center;
}

.product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
    padding: 10px;
}

.product-card__open:hover .product-card__image,
.product-card__open:focus-visible .product-card__image {
    transform: scale(1.04);
}

.product-card__sold {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 9px;
    border: 1px solid rgba(161, 47, 38, .2);
    border-radius: 999px;
    background: var(--paper-light);
    color: #a12f26;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.product-card__body {
    flex: 1;
    padding: var(--card-padding);
}

.product-card__name {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.product-card__caption {
    margin: 0;
    color: var(--muted);
    font-size: var(--body-size);
    line-height: var(--body-leading);
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.product-card__photos {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: block;
    max-width: calc(100% - 28px);
    padding: 3px 8px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--paper-light);
    color: var(--wood-dark);
    font-size: 11px;
    font-weight: 600;
}

.products-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

/* Společný rytmus portfolia, katalogu a stránkování. */
.catalog-toolbar, .gallery-pagination {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
}
.catalog-toolbar {
    margin-top: var(--space-md);
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
}
.realizace-grid:focus, .products-grid:focus { outline: none; }
.gallery-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--section-space);
}
.gallery-pagination[hidden] { display: none; }
.realizace-grid:has(+ .gallery-pagination[hidden]),
.products-grid:has(+ .gallery-pagination[hidden]) { margin-bottom: var(--section-space); }
.gallery-pagination button {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    background: transparent;
    color: var(--wood-dark);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.gallery-pagination button:hover, .gallery-pagination button:focus-visible { border-color: var(--wood); }
.gallery-pagination button[aria-current="page"] { background: var(--wood); color: #fff; border-color: var(--wood); }
.gallery-pagination button:disabled { opacity: .4; cursor: default; }
/* --- Lightbox: zvětšená fotka přes celou obrazovku --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 14, 10, .92);
}

.lightbox[hidden] {
    display: none;
}

.lightbox__image {
    max-width: min(90vw, 1100px);
    max-height: 80vh;
    max-height: 80dvh;
    border-radius: 6px;
    object-fit: contain;
}

.lightbox__caption {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    color: #fff;
    text-align: center;
    font-size: 14px;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
    background: rgba(255, 255, 255, .24);
}

.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }


/* ==========================================================================
   11. ŘEMESLO A POPTÁVKA
   ========================================================================== */
/* Fotografie a text sdílejí obsahovou šířku ostatních sekcí. */
.craftsmanship {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
    padding: 0;
}

.craftsmanship__photo {
    background: var(--wood-placeholder);
}

.craftsmanship__content {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-space) 0 var(--section-space) var(--space-lg);
    border-left: 1px solid var(--line);
}

.craftsmanship__year {
    margin: 0;
    font: 400 96px/0.8 var(--serif);
    letter-spacing: -.03em;
    color: var(--paper-light);
    -webkit-text-stroke: 1px var(--wood);
    opacity: .55;
    position: absolute;
    top: 40px;
    right: clamp(24px, 5vw, 56px);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.craftsmanship__inner {
    position: relative;
    z-index: 1;
    max-width: 52ch;
}


.craftsmanship__inner h2 {
    margin-bottom: var(--space-md);
}

.craftsmanship__inner p:not(.craftsmanship__eyebrow):not(.section-eyebrow) {
    margin: 0 0 18px;
    font-size: var(--body-size);
    line-height: var(--body-leading);
    color: var(--ink);
}

.craftsmanship__quote {
    margin: 0 0 var(--space-md);
    padding-left: 20px;
    border-left: 3px solid var(--wood);
    font-family: var(--serif);
    font-size: 19px;
    font-style: italic;
    line-height: 1.5;
    color: var(--wood-dark);
}

.craftsmanship__divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--space-md) 0;
}

.craftsmanship__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wood-dark);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--wood-dark);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}

.craftsmanship__link:hover,
.craftsmanship__link:focus-visible {
    color: var(--wood);
    border-color: var(--wood);
}

.craftsmanship__link span {
    transition: transform .2s ease;
}

.craftsmanship__link:hover span,
.craftsmanship__link:focus-visible span {
    transform: translateX(3px);
}

.inquiry {
    background: var(--paper-deep);
    text-align: center;
}

.inquiry__inner {
    max-width: 960px;
}

.inquiry h2 + .button {
    margin-top: var(--space-md);
}

.inquiry p {
    max-width: var(--text-width);
    margin: var(--space-md) auto 0;
    color: var(--muted);
}


/* ==========================================================================
   12. PATIČKA
   ========================================================================== */
.site-footer {
    color: rgba(255, 255, 255, .74);
    background: #2d211a;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: var(--space-lg);
    margin: 0 auto;
    padding: var(--space-lg) 0 var(--space-md);
    font-size: 14px;
}

.site-footer__inner p {
    margin: 0 0 10px;
    line-height: 1.6;
}

.footer-col a {
    color: #fff;
    transition: color .2s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--paper-deep);
}

.footer-logo {
    color: #fff;
    font-family: var(--serif);
    font-size: 22px;
    letter-spacing: -.02em;
}

.footer-col--about {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-col__heading {
    margin-bottom: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.site-footer__navigation {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    list-style: none;
}

/* Spodní řádek: copyright, IČO, odkaz na GDPR */
.site-footer__legal {
    width: min(100% - 2 * var(--gutter), var(--container));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 auto;
    padding: 14px 0 18px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
}

.site-footer__legal a {
    color: rgba(255, 255, 255, .55);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
    color: #fff;
}


/* ==========================================================================
   12b. ŠIPKA ZPĚT NA ÚVODNÍ STRÁNKU (na všech podstránkách kromě indexu)
   --------------------------------------------------------------------------
   Součástí běžného toku stránky, scroluje spolu s obsahem.
   Jasná, jednoznačná cesta zpět, nezávislá na tom, jestli si uživatel
   všimne loga v hlavičce.
   ========================================================================== */
.back-bar {
    padding: var(--space-md) 0 0;
}

.back-bar__inner {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin: 0 auto;
}

.back-to-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

.back-to-home:hover,
.back-to-home:focus-visible {
    color: var(--wood-dark);
    gap: 11px;
}

.back-to-home__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.back-to-home__label {
    line-height: 1;
}

.back-to-home:hover .back-to-home__icon,
.back-to-home:focus-visible .back-to-home__icon {
    transform: translateX(-2px);
}


/* ==========================================================================
   13. STRÁNKA KONTAKT (kontakt.html)
   --------------------------------------------------------------------------
   Krátký úvod stránky + dvousloupcové rozvržení: kontaktní údaje vlevo,
   poptávkový formulář vpravo. Barvy a odsazení vycházejí ze stejných
   proměnných jako zbytek webu.
   ========================================================================== */

/* --- Úvod stránky --- */
.page-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-space) 0;
}

.page-intro__lead {
    max-width: 60ch;
    margin: var(--space-md) 0 0;
    color: var(--muted);
    font-size: var(--lead-size);
    line-height: var(--body-leading);
}

/* --- Rozvržení: kontaktní údaje + formulář --- */
.contact {
    padding: 0 0 var(--section-space);
}

.contact__inner {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    gap: var(--space-lg);
    align-items: start;
}

/* --- Kontaktní údaje --- */
.contact-info {
    width: 100%;
    min-width: 0;
    padding: var(--space-md);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--paper-light);
}

.contact-info__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-info__list li {
    padding: 12px 0;
    border-top: 1px solid var(--card-border);
}

.contact-info__list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.contact-info__label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .03em;
}

.contact-info__value {
    display: block;
    overflow-wrap: anywhere;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.4;
}

.contact-info__value--link {
    color: var(--wood-dark);
    font-weight: 700;
    transition: color .2s ease;
}

.contact-info__value--link:hover,
.contact-info__value--link:focus-visible {
    color: var(--wood);
}

.contact-info__note {
    margin: 12px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--card-border);
    color: var(--muted);
    font-size: var(--body-size);
    line-height: var(--body-leading);
}

/* --- Formulář --- */
.contact-form__heading,
.contact-info__heading {
    margin-bottom: var(--space-md);
}

.contact-form-wrap {
    min-width: 0;
}

.contact-page .form-field {
    min-width: 0;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row--half {
    flex-direction: row;
    gap: 20px;
}

.form-field {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.form-required {
    color: var(--wood);
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--card-border);
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
    font: 1rem/1.5 var(--sans);
    min-height: var(--control-height);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-input::placeholder {
    color: var(--muted);
}

.form-input:focus-visible {
    outline: none;
    border-color: var(--wood);
    box-shadow: 0 0 0 3px rgba(129, 81, 47, .15);
}

.form-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--wood) 50%), linear-gradient(135deg, var(--wood) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.form-textarea {
    resize: vertical;
    min-height: 130px;
}

/* Honeypot pole – skryté pro lidi, přítomné pro roboty */
.form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.form-consent {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.form-checkbox {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--wood);
}

.form-consent label {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.form-consent a {
    color: var(--wood-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 4px;
}

.form-submit {
    min-width: 200px;
    margin-top: 0;
}

.form-submit:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
}

.form-fallback {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.form-fallback a {
    color: var(--wood-dark);
    font-weight: 700;
}

/* --- Stav odeslání formuláře --- */
.form-status {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    min-height: 1.4em;
}

.form-status--success {
    color: #3f5a2d;
}

.form-status--error {
    color: #8a3b2a;
}


/* ==========================================================================
   13b. STRÁNKY O NÁS A SLUŽBY (o-nas.html, sluzby.html)
   ========================================================================== */

/* Společný levý okraj úvodu, odkazu zpět a obsahu obou podstránek. */
.about {
    padding: 12px 0 var(--section-space);
}

.about__inner {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
}

/* Jemné rámy fotografií navazují na hlavní fotografii úvodní stránky. */
.about__visual,
.service-detail__visual {
    padding: 8px;
    border: 1px solid var(--card-border);
    background: var(--paper-deep);
    overflow: hidden;
}

.about__visual {
    aspect-ratio: 1 / 1;
}

.about__visual img,
.service-detail__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prose p {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: var(--body-size);
    line-height: var(--body-leading);
}

.prose p:last-child {
    margin-bottom: 0;
}

.about__quote {
    margin: var(--space-md) 0;
    padding-left: 22px;
    border-left: 2px solid var(--wood);
    color: var(--wood-dark);
    font-family: var(--serif);
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.5;
}

.about__facts {
    margin-top: var(--space-lg);
    padding: var(--space-md) 0 0;
    border-top: 1px solid var(--line);
}

.about__facts-list {
    display: grid;
    grid-template-columns: .75fr 1fr 1.5fr 1fr;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about__facts-list li + li {
    border-left: 1px solid var(--line);
    padding-left: 28px;
}

.about__fact-label {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 12px;
}

.about__fact-value {
    display: block;
    color: var(--wood-dark);
    font-family: var(--serif);
    font-size: 23px;
    line-height: 1.3;
}

.about__facts-list li:first-child .about__fact-value {
    font-size: 36px;
    line-height: 1;
}

.services-detail {
    padding: 0 0 var(--section-space);
}

.service-detail {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
    padding: var(--section-space) 0;
    border-top: 1px solid var(--line);
    scroll-margin-top: var(--anchor-offset);
}

.service-detail:first-of-type {
    padding-top: 12px;
    border-top: 0;
}

.service-detail:last-of-type {
    padding-bottom: 0;
}

.service-detail--reverse .service-detail__visual {
    order: 2;
}

.service-detail__visual {
    aspect-ratio: 4 / 3;
}

.service-detail__content h2 { margin-bottom: var(--space-md); }

.prose,
.service-detail__content { max-width: var(--text-width); }

.service-detail__content > p {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: var(--body-size);
    line-height: var(--body-leading);
}

.service-detail__list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.service-detail__list li {
    padding: 10px 0;
    border-top: 1px solid var(--card-border);
    color: var(--ink);
    font-size: 15px;
}

.service-detail__list li:first-child {
    border-top: 0;
}

.service-detail__content .button {
    margin-top: 0;
    line-height: 1.35;
}


/* ==========================================================================
   14. RESPONZIVITA
   ========================================================================== */
@media (min-width: 1500px) {
    #realizace-grid { column-count: 4; }
}

@media (max-width: 1100px) {
    .services__grid,
    .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery__tile--wide { grid-column: auto; }
}

/* V 731 px mají sloupce ještě 313 px; při 730 px se už eyebrow zalamuje. */
/* Pod touto jedinou hranicí používá hero kompletní stacked kompozici. */
@media (max-width: 730px) {
    .home-page .home-intro {
        display: grid;
        grid-template-rows: auto;
        height: auto;
        min-height: 0;
    }
    .home-page .hero {
        display: block;
        min-height: 0;
        overflow: visible;
    }
    .home-page #services {
        scroll-margin-top: var(--site-header-height);
    }
    .home-page .hero__eyebrow {
        width: 100%;
        margin: 0 0 clamp(14px, 4vw, 20px);
        font-size: clamp(10px, 2.8vw, 12px);
        letter-spacing: .16em;
    }
    .home-page .hero__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: none;
        min-height: var(--section-min-height);
        height: auto;
        margin: 0;
        padding: 0;
    }
    .home-page .hero__content {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: min(calc(100% - var(--gutter) - var(--gutter)), 680px);
        max-width: 680px;
        margin-bottom: 0;
        text-align: center;
        justify-content: center;
    }
    .home-page .hero__visual {
        order: 1;
        display: block;
        width: 100%;
        max-width: none;
        margin: 0 0 clamp(10px, 3vw, 16px);
    }
    .home-page .hero-image-wrapper {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .home-page .hero-image-wrapper::before { display: none; }
    .home-page .image-placeholder--hero {
        height: clamp(200px, 32vh, 300px);
        height: clamp(200px, 32dvh, 300px);
        aspect-ratio: auto;
        overflow: hidden;
    }
    .home-page .hero__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 70%;
        box-shadow: none;
    }
    .home-page .hero h1 {
        width: 100%;
        max-width: 17ch;
        font-size: clamp(1.75rem, 8.2vw, 2.25rem);
        line-height: 1.1;
    }
    .home-page .hero__trust {
        display: block;
        margin-top: clamp(12px, 3.5vw, 16px);
    }
    .home-page .hero__lead {
        display: block;
        width: min(100%, 52ch);
        margin: clamp(10px, 3vw, 14px) 0 0;
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.55;
    }
    .home-page .hero .button--primary {
        position: relative;
        width: fit-content;
        max-width: 100%;
        min-height: 50px;
        margin-top: clamp(14px, 4vw, 18px);
        padding: 10px 34px 10px 22px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 5px;
    }
    .home-page .hero .button--primary::after {
        position: absolute;
        right: 16px;
        width: 9px;
        height: 9px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        content: "";
        transform: rotate(45deg);
    }
    .hero__lead br { display: none; }
    .home-page .stats { display: none; }
    .hero::before { display: none; }
    .home-page .hero__scroll {
        position: relative;
        order: 3;
        display: inline-flex;
        align-self: flex-start;
        left: 50%;
        margin-top: auto;
        flex: 0 0 44px;
        animation: hero-scroll-float 2.1s ease-in-out infinite;
        opacity: .65;
    }
    .home-page .hero__scroll:hover,
    .home-page .hero__scroll:focus-visible {
        transform: translateX(-50%) translateY(-2px);
    }
    .home-page .hero__scroll-icon {
        width: 7px;
        height: 7px;
    }
    .home-page .hero::after {
        height: 100%;
        opacity: .28;
    }
}

@media (max-width: 900px) {
    :root {
        --anchor-offset: 88px;
        --site-header-height: 69px;
    }
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--paper);
    }
    .site-header__inner {
        position: relative;
        min-height: 68px;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 var(--space-md);
        padding: 10px 0;
    }
    .site-logo { justify-self: start; }
    .site-logo__eyebrow { font-size: 14px; }
    .site-logo__name { font-size: 29px; }
    .header-phone { display: none; }
    .mobile-menu-toggle {
        display: inline-flex;
        width: 48px;
        height: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        border: 1px solid var(--card-border);
        border-radius: 5px;
        background: var(--paper-light);
        cursor: pointer;
    }
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle[aria-expanded="true"] {
        border-color: var(--wood);
        background: var(--paper-deep);
    }
    .mobile-menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--wood-dark);
        transition: transform .2s ease, opacity .2s ease;
    }
    .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
    .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: calc(-1 * var(--gutter));
        width: calc(100% + 2 * var(--gutter));
        justify-self: stretch;
        max-height: calc(100vh - var(--site-header-height));
        max-height: calc(100dvh - var(--site-header-height));
        padding: 0 var(--gutter) max(16px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 18px rgba(49, 29, 17, .08);
    }
    .main-navigation.is-open { display: block; }
    .main-navigation__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid var(--line);
    }
    .main-navigation__list li { border-bottom: 1px solid var(--line); }
    .main-navigation__list a {
        display: flex;
        align-items: center;
        min-height: var(--control-height);
        padding: 10px 4px;
    }
    .main-navigation.is-open .mobile-menu-phone {
        display: flex;
        align-items: center;
        gap: 12px;
        width: fit-content;
        min-height: var(--control-height);
        margin-top: var(--space-sm);
        padding: 6px 4px;
        line-height: 1.2;
    }

    .page-intro {
        padding: clamp(26px, 7vw, 56px) 0 clamp(18px, 5vw, 30px);
    }
    .page-intro h1 { max-width: 19ch; }
    .about__inner,
    .service-detail,
    .contact__inner,
    .craftsmanship { grid-template-columns: minmax(0, 1fr); }
    .about__visual,
    .service-detail__visual { aspect-ratio: 3 / 2; }
    .service-detail--reverse .service-detail__visual { order: 0; }
    .craftsmanship__photo { aspect-ratio: 16 / 9; }
    .craftsmanship__content {
        padding: var(--space-lg) 0 var(--section-space);
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .craftsmanship__year { display: none; }
    .craftsmanship__inner { max-width: var(--text-width); }
    .about__facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about__facts-list li:nth-child(3) { border-left: 0; padding-left: 0; }
    #realizace-grid { column-count: 2; }
    .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    :root {
        --section-space: clamp(36px, 8vw, 52px);
    }

    .services__grid,
    .gallery__grid,
    .products-grid { grid-template-columns: minmax(0, 1fr); }
    #realizace-grid { column-count: 1; }
    .service-card h3,
    .service-card p { min-height: 0; }
    .gallery__tile { height: auto; aspect-ratio: 3 / 2; }
    .stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats__item:nth-child(2)::after { display: none; }
    .realizace-count { width: 100%; margin-left: 0; }
    .realizace-filters__inner { gap: 8px; }
    .chip { padding-inline: 14px; }
    .about__facts-list { gap: var(--space-md); }
    .about__facts-list li:nth-child(even) { padding-left: var(--space-md); }
    .about__fact-value,
    .about__facts-list li:first-child .about__fact-value { font-size: var(--subsection-title-size); }
    .form-row--half { flex-direction: column; }
    .form-actions { flex-direction: column; align-items: stretch; }
    .form-submit { width: 100%; }
    .projects::after { width: 140px; height: 140px; opacity: .3; }
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
    .site-footer__legal { flex-direction: column; align-items: flex-start; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
}


/* ==========================================================================
   15. PŘÍSTUPNOST
   ========================================================================== */

/* Text viditelný jen pro čtečky obrazovky (např. rozlišení odkazů „Zjistit více") */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Odkaz „Přejít na obsah" – objeví se po stisku Tab na začátku stránky */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 12px 18px;
    border-radius: 5px;
    color: #fff;
    background: var(--wood-dark);
    font-size: 15px;
}

.skip-link:focus {
    top: 16px;
}

/* Viditelný fokus při ovládání klávesnicí */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--wood);
    outline-offset: 3px;
}

/* Uživatelé s omezeným pohybem: vypnout animace a posuny */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .button:hover,
    .button:focus-visible,
    .service-card:hover,
    .service-card:focus-within,
    .gallery__tile:hover img,
    .gallery__tile:focus-visible img,
    .product-card__open:hover .product-card__image,
    .product-card__open:focus-visible .product-card__image {
        transform: none;
    }
}

/* Nízké mobilní viewporty: hero i status zůstávají v přirozeném toku. */