/* Values measured from the original Hostinger site — see docs/design-spec.md */

/* Self-hosted Google Fonts (variable files cover all used weights) */
@font-face { font-family: 'Inter'; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-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: 'Outfit'; font-weight: 400 600; font-display: swap; src: url(../fonts/outfit-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-weight: 400 600; font-display: swap; src: url(../fonts/outfit-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: 'PT Sans Narrow'; font-weight: 700; font-display: swap; src: url(../fonts/ptsansnarrow-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'PT Sans Narrow'; font-weight: 700; font-display: swap; src: url(../fonts/ptsansnarrow-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; }

:root {
    --c-bg: #fff;
    --c-bg-alt: #e4e9f0;
    --c-text: #1d1e20;
    --c-ink: #0d141a;
    --c-muted: #56585e;
    --c-beige: #f6e7d7;
    --c-brown: #8c6f54;
    --c-brown-dark: #3e2f22;
    --c-border: #b8c0cc;
    --c-error: #d63163;
    --c-overlay: rgb(29 30 32 / .48);

    --font-head: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-price: 'PT Sans Narrow', sans-serif;

    --container: 1224px;
    --gutter: 24px;
}

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

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font: 400 16px/1.5 var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.3;
}

.main { flex: 1; }

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.container {
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section-title {
    font-size: 48px;
    text-align: center;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.button {
    display: inline-block;
    padding: 16px 40px;
    border: 0;
    border-radius: 50px;
    background: var(--c-brown);
    color: #fff;
    font: 400 16px/normal var(--font-body);
    cursor: pointer;
    transition: background-color .2s;
}

.button:hover { background: #7a5f47; }

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 18;
    background: #fff;
    transition: box-shadow .2s;
}

.header.is-scrolled { box-shadow: 0 6px 14px 0 rgb(0 0 0 / .1); }

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 30px;
}

.header__logo {
    margin-left: 16px;
}

.header__logo img {
    width: 181px;
    height: 123px;
    object-fit: contain;
}

.header__nav { margin-right: 16px; }

.menu {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu a {
    color: var(--c-ink);
    text-decoration: none;
    text-underline-offset: 7px;
}

.menu a:hover,
.menu a:focus-visible,
.menu .current-menu-item > a,
.menu .current_page_parent > a {
    text-decoration: underline;
}

.header__toggle { display: none; }

/* Home: hero */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 684px;
    padding-bottom: 76px;
    color: #fff;
    isolation: isolate;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--c-overlay);
}

.hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__content { width: 100%; }

.hero__title {
    max-width: 551px;
    font-size: 72px;
}

.hero__subtitle {
    max-width: 503px;
    margin-top: 61px;
}

/* Home: O nás */
.about {
    display: grid;
    grid-template-columns: 392fr 812fr;
    column-gap: 12px;
    align-items: start;
    padding-top: 80px;
    padding-bottom: 108px;
}

.about__text { padding-left: 8px; }

.about__title {
    margin-bottom: 32px;
    font-size: 48px;
}

.about__text p + p { margin-top: 28px; }

.about__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.about__images img {
    width: 100%;
    aspect-ratio: 400 / 464;
    border-radius: 20px;
    object-fit: cover;
}

/* Home: Jarmarky a trhy */
.markets {
    padding-top: 80px;
    padding-bottom: 111px;
    text-align: center;
}

.markets__title { font-size: 48px; }

.markets__subtitle {
    margin-top: 19px;
    color: var(--c-muted);
}

.markets__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 39px;
}

.markets__card { margin: 0; }

.markets__card-title {
    height: 80px;
    padding: 28px 16px 0;
    background: var(--c-beige);
    color: var(--c-ink);
    font: 600 18px/1.3 var(--font-head);
}

.markets__card img {
    width: 100%;
    height: 482px;
    object-fit: cover;
}

/* Nabídka */
.page-template-tpl-nabidka .main,
.page-template-tpl-fotogalerie .main {
    background: var(--c-bg-alt);
}

.offer {
    padding-top: 40px;
    padding-bottom: 64px;
}

.offer__item {
    display: grid;
    grid-template-columns: 503fr 560fr 149fr;
    column-gap: 12px;
    align-items: start;
}

.offer__item + .offer__item { margin-top: 56px; }

.offer__title {
    margin-bottom: 16px;
    font-size: 48px;
}

.offer__text p { font-size: 18px; line-height: 27px; }

.offer__images { display: grid; gap: 12px; }
.offer__images a { display: block; cursor: zoom-in; }
.offer__images img { width: 100%; height: 100%; object-fit: cover; }
.offer__images--1 img { aspect-ratio: 5 / 3; }
.offer__images--2 { grid-template-columns: 2fr 1fr; height: 237px; }
.offer__images--2 a { height: 237px; }
.offer__images--3,
.offer__images--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.offer__images--3 img,
.offer__images--4 img { aspect-ratio: 1; }

/* Fotogalerie */
.gallery {
    padding-top: 80px;
    padding-bottom: 110px;
}

.gallery__title {
    font-size: 48px;
    text-align: center;
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
    max-width: 1088px;
    margin: 18px auto 0;
}

.gallery__item {
    position: relative;
    display: block;
    cursor: zoom-in;
}

.gallery__item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.gallery__price {
    position: absolute;
    right: 8px;
    bottom: -11px;
    padding: 0 8px;
    background: var(--c-brown);
    color: #fff;
    font: 700 18px/27px var(--font-price);
    white-space: nowrap;
}

/* Lightbox */
.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(29 30 32 / .8);
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox::backdrop { background: transparent; }

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

.lightbox button {
    position: absolute;
    width: 52px;
    height: 52px;
    border: 0;
    background: none;
    color: #f2f3f6;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
}

.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 46px; }
.lightbox__next { right: 46px; }

/* Kontakt */
.contact {
    position: relative;
    padding-top: 80px;
    padding-bottom: 85px;
    color: #fff;
    text-align: center;
    isolation: isolate;
    clip-path: inset(0); /* clips the fixed background image to this section */
}

.contact::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(29 30 32 / .47);
}

.contact__bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.contact__title { font-size: 48px; }

.contact__subtitle { margin-top: 18px; }

.contact__card {
    display: grid;
    justify-items: center;
    width: 606px;
    max-width: 100%;
    margin: 57px auto 0;
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    color: var(--c-ink);
}

.contact__label {
    font-size: 14px;
    line-height: 21px;
}

.contact__value {
    margin: 3px 0 20px;
    font-size: 18px;
    line-height: 27px;
    text-decoration: none;
}

.contact__value:hover { text-decoration: underline; }

.contact__card .button { margin-top: 4px; text-decoration: none; }

.contact__form {
    display: grid;
    gap: 15px;
    width: 606px;
    max-width: 100%;
    margin: 57px auto 0;
    padding: 30px;
    border-radius: 20px;
    background: #fff;
    color: var(--c-ink);
    text-align: left;
}

.contact__form label {
    display: grid;
    gap: 3px;
    font-size: 14px;
    line-height: 21px;
}

.contact__form input,
.contact__form textarea {
    width: 100%;
    height: 54px;
    padding: 16px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    color: var(--c-ink);
    font: 16px/1.5 var(--font-body);
    transition: border-color .2s;
}

.contact__form textarea {
    height: 96px;
    resize: none;
}

.contact__form input::placeholder,
.contact__form textarea::placeholder {
    color: var(--c-ink);
    opacity: .5;
}

.contact__form input:hover,
.contact__form input:focus,
.contact__form textarea:hover,
.contact__form textarea:focus {
    border-color: var(--c-ink);
    outline: none;
}

.contact__form .button { justify-self: center; }

.contact__hp {
    position: absolute;
    left: -9999px;
}

.contact__notice {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

.contact__notice--ok { background: #e8f3e8; color: #1e5b23; }
.contact__notice--error { background: #fbe9ef; color: var(--c-error); }

/* The note flows into the footer; stretched main must not show white between them. */
.page-template-tpl-kontakt .main { background: var(--c-brown-dark); }

.contact-note {
    padding-top: 56px;
    background: var(--c-brown-dark);
    color: #fff;
}

.contact-note .container > * { max-width: 503px; }
.contact-note p + p { margin-top: 24px; }

/* Aktuality */
.posts {
    padding-top: 80px;
    padding-bottom: 110px;
}

.posts > .section-title { margin-bottom: 48px; }

.post {
    max-width: 720px;
    margin-inline: auto;
}

.post + .post {
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid var(--c-bg-alt);
}

.post__title { font-size: 26px; }
.post__title a { text-decoration: none; }

.post__date {
    display: block;
    margin: 4px 0 16px;
    color: var(--c-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-transform: uppercase;
}

.post__content > * + * { margin-top: 16px; }

.post__content .wp-block-gallery.has-nested-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.post__content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: auto;
    margin: 0;
    cursor: zoom-in;
}

.post__content .wp-block-gallery.has-nested-images figure.wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pagination { margin-top: 64px; text-align: center; }
.pagination .page-numbers { margin: 0 8px; }

/* Footer */
.footer {
    padding-top: 70px;
    padding-bottom: 48px;
    background: var(--c-brown-dark);
    color: #fff;
}

.footer__inner {
    display: grid;
    grid-template-columns: 412fr 309fr 206fr 297fr;
    align-items: start;
}

.footer__title { font: 600 26px/1.3 var(--font-head); }

.footer__intro p:not(.footer__title) {
    margin-top: 19px;
    font-size: 14px;
    line-height: 18.2px;
}

.footer__col { padding-top: 10px; }

.footer__label {
    margin-bottom: 19px;
    font: 700 14px/21px var(--font-body);
    text-transform: uppercase;
}

.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; }
.footer__col a[href^="tel:"] { font-size: 18px; line-height: 27px; }

.footer__col--address address {
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    line-height: 29px;
    text-transform: uppercase;
}

.socials {
    display: flex;
    gap: 19px;
    margin: 41px 0 0;
    padding: 0;
    list-style: none;
}

.socials a { display: block; color: #fff; }

.footer__masaze {
    grid-column: 1 / -1;
    margin-top: 41px;
}

.footer__masaze a { text-decoration: none; }
.footer__masaze a:hover { text-decoration: underline; }

.footer__business {
    grid-column: 1 / -1;
    margin-top: 78px;
    color: rgb(255 255 255 / .6);
    font-size: 14px;
    line-height: 21px;
}

.footer__business + .footer__copy { margin-top: 0; }

.footer__copy {
    grid-column: 1 / -1;
    margin-top: 78px;
    color: rgb(255 255 255 / .6);
    font-size: 14px;
    line-height: 21px;
}

/* Entrance animation (added by JS, so content stays visible without it) */
.reveal {
    opacity: 0;
    transform: translateY(20%);
    transition: opacity .65s ease .1s, transform .65s ease .1s;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* Tablet + mobile */
@media (max-width: 920px) {
    .container {
        width: min(100% - 64px, 720px);
        padding-inline: 0;
    }

    .section-title,
    .about__title,
    .markets__title,
    .offer__title,
    .gallery__title,
    .contact__title { font-size: 32px; }

    .header__inner {
        width: 100%;
        max-width: none;
        padding: 24px 32px;
    }

    .header__logo,
    .header__nav { margin: 0; }

    .header__toggle {
        position: relative;
        display: block;
        width: 24px;
        height: 18px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .header__toggle::before,
    .header__toggle::after,
    .header__toggle span {
        content: '';
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: var(--c-ink);
        transition: transform .25s ease-in-out .1s, opacity .25s, width .25s;
    }

    .header__toggle::before { top: 0; }
    .header__toggle span { top: 8px; }
    .header__toggle::after { top: 16px; }

    .menu-open .header__toggle::before { transform: translateY(8px) rotate(45deg); }
    .menu-open .header__toggle span { width: 0; opacity: 0; }
    .menu-open .header__toggle::after { transform: translateY(-8px) rotate(-45deg); }
    .menu-open { overflow: hidden; }

    .header__nav {
        position: absolute;
        top: 171px;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        padding: 0 16px;
        background: #fff;
        box-shadow: 0 6px 14px -10px rgb(0 0 0 / .1);
        transition: max-height .3s ease-out .1s, padding .5s .1s;
    }

    .menu-open .header__nav {
        max-height: 400px;
        padding-block: 24px;
    }

    .menu {
        flex-direction: column;
        align-items: flex-end;
        gap: 20px;
    }

    .hero {
        justify-content: flex-start;
        min-height: 489px;
        padding-top: 120px;
        padding-bottom: 40px;
        text-align: center;
    }

    .hero__title {
        max-width: none;
        font-size: 40px;
    }

    .hero__subtitle {
        max-width: none;
        margin-top: 8px;
    }

    .about {
        grid-template-columns: 1fr;
        padding-top: 40px;
        padding-bottom: 0;
    }

    .about__text { padding-left: 0; }

    .about__images {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }

    .about__images img { aspect-ratio: 328 / 224; }

    .markets {
        padding-top: 40px;
        padding-bottom: 43px;
    }

    .markets__subtitle { margin-top: 22px; }

    .markets__grid {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 60px;
    }

    .markets__card-title {
        height: auto;
        padding: 20px 16px;
    }

    .markets__card img {
        height: auto;
        aspect-ratio: 328 / 240;
    }

    .offer {
        padding-top: 16px;
        padding-bottom: 40px;
    }

    .offer__item { grid-template-columns: 1fr; }
    .offer__item + .offer__item { margin-top: 40px; }
    .offer__title { margin-bottom: 0; }

    .offer__images { margin-top: 7px; gap: 16px; }
    .offer__images--1 img,
    .offer__images--2 img { aspect-ratio: 328 / 320; }
    .offer__images--2,
    .offer__images--2 a { grid-template-columns: 1fr; height: auto; }
    .offer__images--3,
    .offer__images--4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    .gallery {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .gallery__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 12px;
    }

    .contact { padding-top: 64px; padding-bottom: 62px; }
    .contact__subtitle { margin-top: 14px; }

    .contact__form {
        gap: 22px;
        margin-top: 80px;
    }

    .contact__card { margin-top: 80px; }

    .contact__form label {
        font-size: 16px;
        line-height: 24px;
    }

    .contact__form .button { padding: 14px 36px; }

    .contact-note { padding-top: 53px; }

    .posts {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .posts > .section-title { margin-bottom: 32px; }
    .post + .post { margin-top: 40px; padding-top: 40px; }
    .post__title { font-size: 20px; }

    .post__content .wp-block-gallery.has-nested-images { grid-template-columns: repeat(2, 1fr); }

    .lightbox img { max-width: 100%; }
    .lightbox__prev,
    .lightbox__next { display: none; }

    .footer { padding-top: 40px; }

    .footer__inner {
        grid-template-columns: 1fr;
        row-gap: 18px;
    }

    .footer__title { font-size: 20px; }

    .footer__intro p:not(.footer__title) {
        margin-top: 17px;
        font-size: 16px;
        line-height: 24px;
    }

    .socials { margin-top: 46px; gap: 21px; }
    .footer__col { padding-top: 14px; }
    .footer__label { margin-bottom: 11px; }
    .footer__copy { margin-top: 40px; }
    .footer__masaze { margin-top: 22px; }
    .footer__business { margin-top: 22px; }
}

@media (max-width: 600px) {
    .container { width: min(100% - 32px, 328px); }

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