/* ==========================================================================
   duoton.cz – design / interiéry / projekty a realizace staveb
   Vzhled podle návrhu webdesignéra (work6.mediasolution.cz/duoton.cz, 2026):
   šedá monochromatická paleta, písmo Maven Pro, vycentrované nadpisy verzálkami,
   projekty jako střídající se řádky fotka / text, tmavá patička s výzvou.
   ========================================================================== */

:root {
    --ink: #424242;             /* text */
    --ink-dark: #4d4d4f;        /* firemní šedá z loga – nadpisy, patička, tlačítka */
    --ink-soft: #6a6a6e;
    --ink-faint: #8e8e92;
    --line: #d9d9d9;
    --bg: #ffffff;
    --bg-soft: #f4f4f4;
    --header-h: 120px;          /* výška hlavičky nahoře na stránce */
    --header-h-compact: 65px;   /* výška po odrolování (jako v návrhu) */
    --maxw: 1140px;
    --maxw-wide: 1300px;
    --gutter: 24px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Maven Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: .04em;
    -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; transition: color .18s ease, border-color .18s ease; }

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .01em;
    color: var(--ink-dark);
}

h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.wrap--wide { max-width: var(--maxw-wide); }

.center { text-align: center; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* podtržený textový odkaz – v návrhu jediná podoba výzvy k akci („Napište nám!") */
.link {
    display: inline-block;
    color: var(--ink-dark);
    border-bottom: 1px solid currentColor;
    line-height: 1.4;
}

.link:hover { border-bottom-color: transparent; }

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

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .95);
    transition: box-shadow .35s ease;
}

/* hlavička je fixní, obsah pod ní drží místo na plnou výšku – zúžení hlavičky
   pak nehýbe obsahem (u sticky by stránka při zúžení poskočila) */
body { padding-top: var(--header-h); }

/* po odrolování se hlavička zúží; proměnnou dědí i mobilní menu (top panelu) */
.site-header.is-compact {
    --header-h: var(--header-h-compact);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: var(--header-h);
    transition: height .35s ease;
}

.brand { display: inline-block; line-height: 0; }

/* SVG má kolem kruhu vlastní okraj (viewBox 85, kruh 62) – proto vyšší výška */
.brand__logo {
    width: auto;
    height: 84px;
    margin-left: -11px;
    transition: height .35s ease, margin .35s ease;
}

.site-header.is-compact .brand__logo { height: 64px; margin-left: -8px; }

/* --- hlavní navigace --------------------------------------------------- */

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

.nav__list {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__item { position: relative; }

.nav__link {
    display: inline-block;
    padding: 4px 0 2px;
    font-size: .84rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid transparent;
}

.nav__link:hover,
.nav__item.is-active > .nav__link { color: var(--ink-dark); border-bottom-color: var(--ink-dark); }

/* rozbalovací podmenu (druhá a třetí úroveň) */
.nav__sub {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 230px;
    margin: 0;
    padding: 12px 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub,
.nav__sub-item:hover > .nav__sub,
.nav__sub-item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }

/* třetí úroveň vyjíždí doleva – navigace sedí u pravého okraje okna */
.nav__sub .nav__sub {
    top: -12px;
    left: auto;
    right: 100%;
    transform: translateX(6px);
}

.nav__sub-item:hover > .nav__sub,
.nav__sub-item:focus-within > .nav__sub { transform: translateX(0); }

.nav__sub-item { position: relative; }

.nav__sub-link {
    display: block;
    padding: 6px 20px;
    font-size: .8rem;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.nav__sub-link:hover { color: var(--ink-dark); background: var(--bg-soft); }

/* šipka ukazuje směr, kterým podmenu vyjede (doleva) */
.nav__sub-item.has-children > .nav__sub-link::after {
    content: "‹";
    float: left;
    margin-right: 6px;
    color: var(--ink-faint);
}

/* mobilní přepínač – dvě linky jako v návrhu */
.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before {
    display: block;
    width: 26px; height: 1px;
    margin: 0 auto;
    background: var(--ink-dark);
    content: "";
    transition: transform .2s ease;
}

.nav-toggle span { transform: translateY(-4px); }
.nav-toggle span::before { transform: translateY(8px); }
.nav-toggle[aria-expanded="true"] span { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(-90deg); }

/* --- úvod stránky ------------------------------------------------------ */

.page-head {
    max-width: 920px;
    margin: 0 auto;
    padding: 70px 0 80px;
    text-align: center;
}

.page-head__title {
    margin: 0;
    text-transform: uppercase;
    line-height: 1.3;
}

.page-head__subtitle {
    margin: 18px 0 0;
    color: var(--ink-faint);
}

/* drobečky: „ÚVOD / KONTAKT" s linkou pod sebou */
.breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 8px;
    margin: 22px 0 0;
    padding: 0 12px 4px;
    list-style: none;
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink-dark);
}

.breadcrumb li::after { content: "/"; margin-left: 8px; }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a:hover { color: var(--ink-faint); }

/* rozcestník podkategorií: „INTERIÉRY / EXTERIÉRY" */
.crossroad {
    margin: -40px auto 70px;
    text-align: center;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    text-transform: uppercase;
    color: var(--ink-dark);
}

.crossroad a { border-bottom: 2px solid transparent; }
.crossroad a:hover { border-bottom-color: var(--ink-dark); }

/* --- obsahové bloky ---------------------------------------------------- */

.section { padding: 70px 0; }
.section--flush { padding-left: 0; padding-right: 0; }
.section--top0 { padding-top: 0; }

.section-title {
    margin-bottom: 60px;
    text-align: center;
    text-transform: uppercase;
}

.text-narrow { max-width: 720px; margin: 0 auto; }

.hero-image {
    display: block;
    overflow: hidden;
    background: var(--bg-soft);
}

.hero-image img {
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}

.hero-image:hover img { transform: scale(1.02); }

/* --- výpis projektů: střídající se řádky -------------------------------- */

.project-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
    margin-bottom: 70px;
}

.project-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.project-row__media {
    display: block;
    overflow: hidden;
    background: var(--bg-soft);
    grid-column: 2;
    grid-row: 1;
}

.project-row__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.project-row:hover .project-row__media img { transform: scale(1.03); }

.project-row__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* text u fotky: lichý řádek zarovnaný doprava ke středu stránky */
.project-row__body {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: 520px;
    padding: 0 50px;
    text-align: right;
}

.project-row:nth-child(even) .project-row__media { grid-column: 1; }

.project-row:nth-child(even) .project-row__body {
    grid-column: 2;
    justify-self: start;
    text-align: left;
}

.project-row__title {
    margin: 0 0 12px;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    text-transform: uppercase;
}

.project-row__cat {
    margin: 0 0 18px;
    font-size: .82rem;
    text-transform: uppercase;
    color: var(--ink-dark);
}

.project-row__perex { color: var(--ink-soft); }

/* --- detail projektu --------------------------------------------------- */

.project__body { margin-bottom: 70px; }
.project__body img { margin: 22px 0; }

/* první fotka přes celou šířku, ostatní ve dvousloupcové zednické mřížce */
.gallery {
    column-count: 2;
    column-gap: 30px;
}

.gallery__item {
    display: block;
    margin: 0 0 30px;
    overflow: hidden;
    background: var(--bg-soft);
    break-inside: avoid;
}

.gallery__item--lead { column-span: all; }

.gallery__item img {
    width: 100%;
    height: auto;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.gallery__item:hover img { transform: scale(1.03); }

/* lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(30, 30, 32, .95);
}

.lightbox.is-open { display: flex; }

.lightbox img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    color: #fff;
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: .72;
}

.lightbox__close:hover,
.lightbox__nav:hover { opacity: 1; }

.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav--prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 12px; top: 50%; transform: translateY(-50%); }

.lightbox__caption {
    position: absolute;
    bottom: 20px;
    left: 0; right: 0;
    text-align: center;
    font-size: .8rem;
    color: rgba(255, 255, 255, .72);
}

/* --- text stránky ------------------------------------------------------ */

.page-body { color: var(--ink); }
.page-body h2, .page-body h3 { margin-top: 1.7em; text-transform: uppercase; }
.page-body a { border-bottom: 1px solid currentColor; }
.page-body a:hover { border-bottom-color: transparent; }
.page-body img { margin: 22px 0; }

/* --- novinky ----------------------------------------------------------- */

.news-list { display: flex; flex-direction: column; max-width: 860px; margin: 0 auto 40px; }

.news-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 26px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
}

.news-item__date { font-size: .82rem; color: var(--ink-faint); }
.news-item__title { margin: 0 0 6px; font-size: 1.1rem; text-transform: uppercase; }
.news-item__title a:hover { color: var(--ink-faint); }
.news-item__perex { margin: 0; color: var(--ink-soft); }

/* --- mřížka (galerie) -------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.card { display: block; }

.card__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-soft);
}

.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.card:hover .card__media img { transform: scale(1.03); }

.card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.card__body { padding-top: 14px; }
.card__title { margin: 0; font-size: 1rem; text-transform: uppercase; }
.card__count { font-size: .82rem; color: var(--ink-faint); }

.lead { color: var(--ink-soft); }

/* --- kontakt a formulář ------------------------------------------------ */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-bottom: 40px;
}

.contact-grid .page-body { font-size: 1.05rem; }

.contact-form h2 { text-transform: uppercase; }

.form-field { margin-bottom: 8px; }

.form-control {
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0;
    transition: border-color .16s ease;
}

.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus { outline: none; border-color: var(--ink-dark); }

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

.btn {
    display: inline-block;
    margin-top: 26px;
    padding: 10px 30px;
    font: inherit;
    font-size: 1.05rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ink-dark);
    border: 1px solid var(--ink-dark);
    border-radius: 0;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.btn:hover { color: var(--ink-dark); background: #fff; }

/* souhlas se zpracováním osobních údajů */
.form-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: baseline;
    margin-top: 14px;
}

.form-consent__input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink-dark); transform: translateY(2px); }
.form-consent__label { font-size: .9rem; cursor: pointer; }
.form-consent .kt-form-message,
.form-consent__note { grid-column: 1 / -1; }
.form-consent__note { margin: 6px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-faint); }

/* chybové hlášky polí – kreslí je sdílený Metronic form theme */
.kt-form-message { margin: 4px 0 6px; font-size: .84rem; line-height: 1.5; color: #b23c3c; }
.form-control.is-invalid { border-color: #b23c3c; }

.form-errors { margin: 0 0 8px; padding-left: 18px; color: #b23c3c; font-size: .88rem; }

.alert {
    padding: 14px 18px;
    margin-bottom: 26px;
    font-size: .94rem;
    border: 1px solid var(--line);
    border-left-width: 3px;
}

.alert--success { border-left-color: #3f8f5f; background: #f3f9f5; }
.alert--error { border-left-color: #b23c3c; background: #fdf4f4; }

.honeypot { position: absolute; left: -9999px; opacity: 0; }

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

.site-footer {
    margin-top: 60px;
    padding: 50px 0 30px;
    background: var(--ink-dark);
    color: #fff;
}

.site-footer a { color: #fff; }

.site-footer__claim {
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 500;
    line-height: 1.3;
}

.site-footer__email {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    border-bottom: 1px solid #fff;
}

.site-footer__email:hover { border-bottom-color: transparent; }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 200px 160px;
    gap: 40px;
    align-items: start;
    margin-top: 30px;
}

.footer-contact {
    align-self: end;
    font-style: normal;
    font-size: .88rem;
    color: rgba(255, 255, 255, .7);
}

.footer-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    text-transform: uppercase;
}

.footer-list li { margin-bottom: 6px; }
.footer-list a:hover { border-bottom: 1px solid #fff; }

.site-footer__logo img { width: 140px; height: auto; margin: -14px 0 0 auto; }

.footer-bottom {
    margin-top: 30px;
    font-size: .76rem;
    color: rgba(255, 255, 255, .5);
}

/* --- šipka zpět nahoru ------------------------------------------------ */

.to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    color: #fff;
    background: var(--ink-dark);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    cursor: pointer;
    /* skrytá, dokud uživatel neodroluje kus stránky */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s, background .18s ease;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: #2f2f31; }
.to-top:focus-visible { outline: 2px solid var(--ink-dark); outline-offset: 3px; }
.to-top svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
    .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity .22s ease, visibility .22s; transform: none; }
}

/* --- chybové stránky --------------------------------------------------- */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56vh;
    text-align: center;
}

.error-page h1 { text-transform: uppercase; }

.error-page__code {
    font-size: clamp(3.4rem, 12vw, 7rem);
    font-weight: 400;
    line-height: 1;
    color: var(--line);
}

/* --- animace při odrolování (jako WOW.js v návrhu) ---------------------
   Prvky s [data-reveal] skryje až třída .js-reveal na <html>, kterou nastaví skript –
   bez JS (nebo při chybě skriptu) zůstane obsah normálně vidět.
   data-reveal="up" vyjede zespodu, "fade" se jen objeví; zpoždění přes --reveal-delay. */

.js-reveal [data-reveal] {
    opacity: 0;
    transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.2, .7, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.js-reveal [data-reveal="up"] { transform: translate3d(0, 70px, 0); }

.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    .site-header__inner,
    .brand__logo { transition: none; }
}

@media print {
    .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* --- responzivita ------------------------------------------------------ */

@media (max-width: 960px) {
    :root { --header-h: 84px; --header-h-compact: 62px; }

    .brand__logo { height: 66px; margin-left: -9px; }
    .site-header.is-compact .brand__logo { height: 56px; margin-left: -8px; }

    .nav-toggle { display: block; }

    .nav {
        position: fixed;
        /* obsah menu bývá vyšší než panel; při align-items:center by přetekl
           nahoru mimo dosah scrollu a první položka by se schovala za hlavičku */
        align-items: flex-start;
        top: var(--header-h);
        left: 0; right: 0;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        padding: 8px var(--gutter) 28px;
        background: #fff;
        border-bottom: 1px solid var(--line);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .18s ease, transform .18s ease, visibility .18s;
    }

    .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
    .nav__item { border-bottom: 1px solid var(--line); }
    .nav__link { padding: 13px 0; border-bottom: 0; }
    .nav__item.is-active > .nav__link { text-decoration: underline; text-underline-offset: 4px; }

    /* na mobilu se podmenu rozbaluje staticky, ne na hover */
    .nav__sub,
    .nav__sub .nav__sub {
        position: static;
        min-width: 0;
        padding: 0 0 12px 14px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav__sub-link { padding: 5px 0; }
    .nav__sub-item.has-children > .nav__sub-link::after { content: none; }

    .page-head { padding: 40px 0 50px; }
    .crossroad { margin: -20px auto 50px; }
    .section { padding: 50px 0; }
    .section-title { margin-bottom: 40px; }

    /* řádky projektů pod sebou: fotka nahoře, text pod ní */
    .project-list { gap: 60px; }
    .project-row { grid-template-columns: 1fr; }
    .project-row__media,
    .project-row:nth-child(even) .project-row__media { grid-column: 1; grid-row: 1; }
    .project-row__body,
    .project-row:nth-child(even) .project-row__body {
        grid-column: 1;
        grid-row: 2;
        justify-self: stretch;
        max-width: none;
        padding: 26px var(--gutter) 0;
        text-align: left;
    }

    .gallery { column-gap: 16px; }
    .gallery__item { margin-bottom: 16px; }

    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .news-item { grid-template-columns: 1fr; gap: 6px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-contact { grid-column: 1 / -1; grid-row: 2; }
    .site-footer__logo img { width: 110px; margin-top: 0; }
}

@media (max-width: 560px) {
    :root { --gutter: 18px; }

    .page-head__title br { display: none; }
    .gallery { column-count: 1; }
    .grid { grid-template-columns: 1fr; }
}