:root {

    --green: #17372d;
    --green-dark: #071e18;
    --green-mid: #24483d;

    --cream: #f3eee4;
    --cream-soft: #ebe2d4;

    --gold: #aa8a63;
    --gold-soft: #d3bd9d;

    --black: #151814;
    --text: #666b64;

    --white: #ffffff;

    --serif: Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --container: 1260px;

}


/* =========================================
RESET
========================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: var(--sans);

    color: var(--black);

    background: var(--cream);

    line-height: 1.65;

    overflow-x: hidden;

}


body.menu-open,
body.gallery-open {

    overflow: hidden;

}


::selection {

    color: white;

    background: var(--green);

}


img {

    width: 100%;

    display: block;

}


button,
input {

    font: inherit;

}


button {

    border: 0;

    background: none;

}


a {

    color: inherit;

    text-decoration: none;

}


.container {

    width: min(
        calc(100% - 64px),
        var(--container)
    );

    margin: auto;

}


.section {

    padding: 140px 0;

}


/* =========================================
TYPOGRAPHY
========================================= */

h1,
h2,
h3 {

    font-family: var(--serif);

    font-weight: 500;

    line-height: 1.05;

}


h1 {

    font-size:
        clamp(4rem, 7.3vw, 8rem);

    letter-spacing: -.05em;

}


h2 {

    font-size:
        clamp(2.8rem, 4.8vw, 5.3rem);

    letter-spacing: -.04em;

}


h3 {

    font-size:
        clamp(1.7rem, 2.5vw, 2.5rem);

}


h1 span,
h2 em {

    font-style: italic;

    font-weight: 500;

}


.eyebrow {

    margin-bottom: 25px;

    color: var(--gold);

    font-size: .65rem;

    font-weight: 700;

    letter-spacing: .24em;

}


.eyebrow.light {

    color: rgba(255,255,255,.64);

}


/* =========================================
SCROLL PROGRESS
========================================= */

.scroll-progress {

    position: fixed;

    z-index: 10000;

    top: 0;
    left: 0;

    height: 2px;
    width: 0;

    background:
        linear-gradient(
            90deg,
            #c5a779,
            #f0dfc2
        );

}


/* =========================================
NAVBAR
========================================= */

.navbar {

    position: fixed;

    z-index: 3000;

    top: 0;
    left: 0;

    width: 100%;

    padding: 18px 28px;

    transition:
        padding .4s ease;

}


.navbar.scrolled {

    padding-top: 10px;

}


.nav-shell {

    width:
        min(100%, 1420px);

    height: 68px;

    margin: auto;

    padding: 7px 8px 7px 18px;

    display: flex;

    align-items: center;

    border:
        1px solid rgba(255,255,255,.17);

    border-radius: 18px;

    color: white;

    background:
        rgba(13,34,27,.19);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:

        height .4s ease,
        color .4s ease,
        background .4s ease,
        border .4s ease,
        box-shadow .4s ease;

}


.navbar.scrolled
.nav-shell {

    height: 62px;

    color: var(--green);

    background:
        rgba(246,241,232,.92);

    border:
        1px solid rgba(23,55,45,.08);

    box-shadow:
        0 15px 50px rgba(17,30,25,.09);

}


.logo {

    margin-right: auto;

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo-symbol {

    width: 37px;
    height: 37px;

    border:
        1px solid rgba(255,255,255,.34);

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-family: var(--serif);

    font-style: italic;

    font-size: 1.1rem;

    transition:
        border .4s ease;

}


.navbar.scrolled
.logo-symbol {

    border-color:
        rgba(23,55,45,.22);

}


.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-small {

    margin-bottom: 4px;

    font-size: .48rem;

    font-weight: 700;

    letter-spacing: .23em;

}


.logo-name {

    font-family: var(--serif);

    font-size: 1.22rem;

}


.desktop-nav {

    padding: 5px;

    display: flex;

    align-items: center;

    gap: 2px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 13px;

    background:
        rgba(255,255,255,.05);

    transition:
        background .4s ease,
        border .4s ease;

}


.navbar.scrolled
.desktop-nav {

    border-color:
        rgba(23,55,45,.08);

    background:
        rgba(23,55,45,.035);

}


.desktop-nav a {

    position: relative;

    padding: 9px 13px;

    border-radius: 9px;

    font-size: .69rem;

    font-weight: 600;

    transition:

        background .3s ease,
        color .3s ease;

}


.desktop-nav a:hover {

    background:
        rgba(255,255,255,.1);

}


.navbar.scrolled
.desktop-nav a:hover {

    background:
        rgba(23,55,45,.07);

}


.desktop-nav a.active {

    color: var(--green);

    background:
        var(--cream);

}


.navbar.scrolled
.desktop-nav a.active {

    color: white;

    background:
        var(--green);

}


.nav-booking {

    height: 46px;

    margin-left: 10px;

    padding:
        0 5px
        0 18px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--green);

    background: var(--cream);

    font-size: .68rem;

    font-weight: 700;

    transition:
        transform .3s ease,
        background .3s ease;

}


.nav-booking:hover {

    transform:
        translateY(-2px);

}


.navbar.scrolled
.nav-booking {

    color: white;

    background: var(--green);

}


.nav-booking-arrow {

    width: 35px;
    height: 35px;

    border-radius: 9px;

    display: grid;

    place-items: center;

    color: white;

    background: var(--green);

    transition:
        transform .3s ease;

}


.navbar.scrolled
.nav-booking-arrow {

    color: var(--green);

    background: var(--cream);

}


.nav-booking:hover
.nav-booking-arrow {

    transform:
        rotate(45deg);

}


.menu-toggle {

    display: none;

    width: 40px;
    height: 40px;

    color: currentColor;

    cursor: pointer;

}


.menu-toggle span {

    width: 24px;
    height: 1px;

    margin: 6px auto;

    display: block;

    background: currentColor;

}


/* =========================================
MOBILE MENU
========================================= */

.mobile-menu {

    position: fixed;

    z-index: 5000;

    inset: 0;

    padding: 30px;

    color: white;

    background:
        var(--green-dark);

    display: flex;

    flex-direction: column;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-15px);

    transition:

        opacity .35s ease,
        visibility .35s ease,
        transform .45s ease;

}


.mobile-menu.open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


.mobile-menu-noise {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .15;

    background:

        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.1),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 80%,
            rgba(172,140,99,.2),
            transparent 35%
        );

}


.mobile-menu-head {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: start;

    justify-content: space-between;

}


.mobile-menu-logo {

    display: flex;

    flex-direction: column;

    font-family: var(--serif);

    font-size: 1.7rem;

}


.mobile-menu-logo span {

    font-family: var(--sans);

    font-size: .52rem;

    font-weight: 700;

    letter-spacing: .24em;

}


.mobile-menu-head button {

    color: white;

    font-size: 2.8rem;

    cursor: pointer;

}


.mobile-menu-content {

    position: relative;

    z-index: 2;

    margin: auto 0;

}


.mobile-menu-label {

    display: block;

    margin-bottom: 30px;

    color:
        rgba(255,255,255,.4);

    font-size: .58rem;

    letter-spacing: .2em;

}


.mobile-menu-content nav {

    display: flex;

    flex-direction: column;

}


.mobile-menu-content nav a {

    padding: 10px 0;

    display: flex;

    align-items: center;

    gap: 25px;

    font-family: var(--serif);

    font-size:
        clamp(2.5rem, 10vw, 4rem);

    line-height: 1.05;

    border-bottom:
        1px solid rgba(255,255,255,.1);

    transition:
        color .25s ease,
        padding .25s ease;

}


.mobile-menu-content nav a:hover {

    padding-left: 12px;

    color: var(--gold-soft);

}


.mobile-menu-content nav a span {

    min-width: 25px;

    color: var(--gold);

    font-family: var(--sans);

    font-size: .55rem;

}


.mobile-menu-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

}


.mobile-menu-bottom > div {

    display: flex;

    flex-direction: column;

}


.mobile-menu-bottom > div span {

    color:
        rgba(255,255,255,.38);

    font-size: .55rem;

    letter-spacing: .17em;

}


.mobile-menu-bottom > div strong {

    margin-top: 5px;

    font-family: var(--serif);

    font-weight: 500;

}


.mobile-menu-bottom > a {

    padding: 14px 17px;

    display: flex;

    gap: 20px;

    color: var(--green);

    background: var(--cream);

    font-size: .68rem;

    font-weight: 700;

}


/* =========================================
PREMIUM BUTTONS
========================================= */

.premium-button {

    min-height: 58px;

    padding:
        6px 7px 6px 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    border-radius: 14px;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .04em;

    transition:

        transform .3s ease,
        background .3s ease,
        border .3s ease;

}


.premium-button:hover {

    transform:
        translateY(-3px);

}


.premium-button-light {

    color: var(--green);

    background: var(--cream);

}


.premium-button-glass {

    padding-right: 24px;

    color: white;

    border:
        1px solid rgba(255,255,255,.28);

    background:
        rgba(255,255,255,.045);

    backdrop-filter:
        blur(8px);

}


.premium-button-outline {

    width: fit-content;

    color: white;

    border:
        1px solid rgba(255,255,255,.25);

}


.button-circle {

    width: 43px;
    height: 43px;

    border-radius: 11px;

    display: grid;

    place-items: center;

    color: white;

    background: var(--green);

    transition:
        transform .35s ease;

}


.premium-button:hover
.button-circle {

    transform:
        rotate(45deg);

}


/* =========================================
HERO
========================================= */

.hero {

    position: relative;

    height:
        max(760px, 100vh);

    color: white;

    overflow: hidden;

}


.hero-background {

    position: absolute;

    inset: -6%;

    background:

        url("images/nove-fotky/02-exterier-chalupka.jpg")
        center 50% / cover
        no-repeat;

    transform:
        scale(1.06);

    will-change:
        transform;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(4,20,15,.9) 0%,
            rgba(6,28,21,.68) 38%,
            rgba(6,27,20,.18) 75%
        );

}


.hero-vignette {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            rgba(4,18,14,.76),
            transparent 48%
        );

}


.hero-grain {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .13;

    background-image:

        repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            rgba(255,255,255,.05) 1px,
            transparent 2px
        );

    background-size:
        8px 8px;

    mix-blend-mode:
        soft-light;

}


.hero-content-wrap {

    position: relative;

    z-index: 5;

    width:
        min(calc(100% - 100px), 1320px);

    height: 100%;

    margin: auto;

    padding-top: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

}


.hero-left {

    max-width: 880px;

}


.hero-location {

    width: fit-content;

    margin-bottom: 32px;

    padding:
        8px 12px;

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 50px;

    display: flex;

    align-items: center;

    gap: 9px;

    background:
        rgba(255,255,255,.05);

    backdrop-filter:
        blur(8px);

    font-size: .6rem;

    font-weight: 600;

    letter-spacing: .18em;

    text-transform: uppercase;

}


.location-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #d8bd91;

    box-shadow:
        0 0 0 4px
        rgba(216,189,145,.13);

}


.hero h1 {

    max-width: 980px;

}


.hero h1 span {

    display: block;

    color:
        #e7d7bf;

}


.hero-description {

    max-width: 520px;

    margin-top: 31px;

    color:
        rgba(255,255,255,.7);

    font-size: 1rem;

    line-height: 1.85;

}


.hero-actions {

    margin-top: 37px;

    display: flex;

    gap: 12px;

}


.hero-review {

    min-width: 250px;

    padding: 27px;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 18px;

    display: flex;

    align-items: center;

    gap: 20px;

    background:
        rgba(10,36,28,.31);

    backdrop-filter:
        blur(14px);

}


.hero-review-score {

    font-family: var(--serif);

    font-size: 4rem;

    line-height: 1;

}


.hero-review > div:last-child {

    display: flex;

    flex-direction: column;

}


.hero-review-stars {

    color:
        #e0c18e;

    font-size: .67rem;

    letter-spacing: .1em;

}


.hero-review strong {

    margin-top: 5px;

    font-size: .8rem;

}


.hero-review p,
.hero-review small {

    color:
        rgba(255,255,255,.46);

    font-size: .62rem;

}


.hero-bottom-bar {

    position: absolute;

    z-index: 6;

    left: 50%;
    bottom: 28px;

    width:
        min(calc(100% - 100px), 1320px);

    transform:
        translateX(-50%);

    display: flex;

    align-items: end;

    justify-content: space-between;

}


.hero-bottom-stats {

    padding: 7px;

    display: flex;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius: 15px;

    background:
        rgba(8,27,21,.36);

    backdrop-filter:
        blur(12px);

}


.hero-bottom-stats > div {

    min-width: 115px;

    padding: 10px 16px;

}


.hero-bottom-stats > div + div {

    border-left:
        1px solid rgba(255,255,255,.12);

}


.hero-bottom-stats strong {

    display: block;

    font-family: var(--serif);

    font-size: 1.3rem;

    font-weight: 500;

}


.hero-bottom-stats > div > span {

    display: block;

    margin-top: 2px;

    color:
        rgba(255,255,255,.45);

    font-size: .52rem;

    letter-spacing: .15em;

    text-transform: uppercase;

}


.scroll-indicator {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 11px;

    color:
        rgba(255,255,255,.55);

    font-size: .55rem;

    letter-spacing: .17em;

    text-transform: uppercase;

}


.scroll-indicator-line {

    width: 1px;
    height: 50px;

    background:

        linear-gradient(
            to bottom,
            white,
            transparent
        );

    animation:
        scrollPulse 1.8s
        ease-in-out infinite;

}


@keyframes scrollPulse {

    0%,
    100% {

        opacity: .25;

        transform:
            scaleY(.7);

        transform-origin:
            top;

    }

    50% {

        opacity: 1;

        transform:
            scaleY(1);

    }

}


/* =========================================
TRUST STRIP
========================================= */

.trust-strip {

    overflow: hidden;

    border-bottom:
        1px solid rgba(0,0,0,.08);

    background:
        #ece3d5;

}


.trust-track {

    min-height: 75px;

    width: max-content;

    padding: 0 40px;

    display: flex;

    align-items: center;

    gap: 40px;

    color:
        #817464;

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .2em;

}


.trust-track i {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--gold);

}


/* =========================================
INTRO
========================================= */

.intro-layout {

    display: grid;

    grid-template-columns:
        60px 1.35fr .85fr;

    gap: 70px;

}


.section-number {

    color: var(--gold);

    font-family: var(--serif);

}


.intro-title h2 {

    max-width: 720px;

}


.intro-title h2 em {

    display: block;

}


.intro-copy {

    padding-top: 52px;

}


.intro-copy p {

    max-width: 450px;

    color: var(--text);

}


.intro-copy-main {

    margin-bottom: 20px;

    color: var(--black) !important;

    font-size: 1.06rem;

}


/* =========================================
STORY
========================================= */

.story {

    min-height: 830px;

    display: grid;

    grid-template-columns:
        1.07fr .93fr;

}


.story-image {

    position: relative;

    min-height: 780px;

    overflow: hidden;

}


.story-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s
        cubic-bezier(.2,.7,.2,1);

}


.story-image:hover img {

    transform:
        scale(1.035);

}


.story-image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            rgba(4,25,18,.44),
            transparent 50%
        );

}


.story-image-caption {

    position: absolute;

    left: 40px;
    bottom: 40px;

    color: white;

    display: flex;

    flex-direction: column;

}


.story-image-caption span {

    color:
        rgba(255,255,255,.6);

    font-size: .57rem;

    letter-spacing: .18em;

}


.story-image-caption strong {

    margin-top: 4px;

    font-family: var(--serif);

    font-size: 1.7rem;

    font-weight: 500;

}


.story-content {

    padding:
        110px
        clamp(70px, 8vw, 140px);

    display: flex;

    align-items: center;

    background:
        var(--cream-soft);

}


.story-lead {

    max-width: 570px;

    margin-top: 32px;

    font-size: 1.08rem;

}


.story-text {

    max-width: 580px;

    margin-top: 19px;

    color: var(--text);

}


.story-list {

    margin-top: 46px;

}


.story-list article {

    padding: 22px 0;

    display: grid;

    grid-template-columns:
        40px 1fr;

    gap: 20px;

    border-top:
        1px solid rgba(0,0,0,.11);

}


.story-list article:last-child {

    border-bottom:
        1px solid rgba(0,0,0,.11);

}


.story-list article > span {

    color: var(--gold);

    font-family: var(--serif);

}


.story-list strong {

    font-size: .86rem;

}


.story-list p {

    margin-top: 4px;

    color: var(--text);

    font-size: .75rem;

}


/* =========================================
STATEMENT
========================================= */

.statement {

    position: relative;

    min-height: 690px;

    display: grid;

    place-items: center;

    color: white;

    overflow: hidden;

}


.statement-background {

    position: absolute;

    inset: 0;

    background:

        url("images/02.jpg")
        center / cover
        no-repeat;

    transform:
        scale(1.03);

}


.statement-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(6,29,22,.62);

}


.statement-content {

    position: relative;

    z-index: 2;

    width:
        min(calc(100% - 50px), 950px);

    text-align: center;

}


.statement-small {

    display: block;

    margin-bottom: 27px;

    color:
        rgba(255,255,255,.55);

    font-size: .59rem;

    letter-spacing: .22em;

}


.statement-content h2 {

    font-size:
        clamp(3rem, 5vw, 5.4rem);

}


.statement-content h2 em {

    display: block;

    color:
        #e4d4bb;

}


/* =========================================
SECTION HEADING
========================================= */

.section-heading {

    margin-bottom: 65px;

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 80px;

}


.section-heading-side {

    max-width: 390px;

}


.section-heading-side p {

    color: var(--text);

}


.gallery-all {

    margin-top: 25px;

    padding-bottom: 7px;

    display: inline-flex;

    align-items: center;

    gap: 22px;

    border-bottom:
        1px solid var(--green);

    color: var(--green);

    cursor: pointer;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .07em;

}


/* =========================================
GALLERY
========================================= */

.gallery-grid {

    height: 660px;

    display: grid;

    grid-template-columns:
        1.35fr .75fr .75fr;

    grid-template-rows:
        1fr 1fr;

    gap: 10px;

}


.gallery-item {

    position: relative;

    overflow: hidden;

    cursor: pointer;

    background:
        #d8d0c3;

}


.gallery-item-main {

    grid-row:
        1 / 3;

}


.gallery-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .85s
        cubic-bezier(.2,.7,.2,1),
        filter .5s ease;

}


.gallery-item:hover img {

    transform:
        scale(1.055);

    filter:
        saturate(.9);

}


.gallery-item-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            rgba(4,24,18,.63),
            transparent 52%
        );

    transition:
        background .4s ease;

}


.gallery-item:hover
.gallery-item-overlay {

    background:

        linear-gradient(
            to top,
            rgba(4,24,18,.78),
            transparent 65%
        );

}


.gallery-dark {

    background:
        rgba(5,25,18,.54);

}


.gallery-item-text {

    position: absolute;

    z-index: 2;

    left: 22px;
    bottom: 20px;

    color: white;

    display: flex;

    flex-direction: column;

}


.gallery-item-text span {

    color:
        rgba(255,255,255,.48);

    font-size: .53rem;

    letter-spacing: .16em;

}


.gallery-item-text strong {

    margin-top: 3px;

    font-family: var(--serif);

    font-size: 1.22rem;

    font-weight: 500;

}


.gallery-more-circle {

    position: absolute;

    z-index: 3;

    top: 50%;
    left: 50%;

    width: 90px;
    height: 90px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: var(--green);

    background:
        rgba(244,239,229,.95);

    transition:
        transform .4s ease;

}


.gallery-item-more:hover
.gallery-more-circle {

    transform:
        translate(-50%, -50%)
        scale(1.08);

}


.gallery-more-circle strong {

    font-family: var(--serif);

    font-size: 1.6rem;

    font-weight: 500;

}


.gallery-more-circle span {

    font-size: .48rem;

    letter-spacing: .15em;

}


/* =========================================
ACCOMMODATION
========================================= */

.accommodation {

    background:
        #e9dfd1;

}


.center-heading {

    max-width: 780px;

    margin:
        0 auto 70px;

    text-align: center;

}


.center-heading p:last-child {

    max-width: 550px;

    margin:
        27px auto 0;

    color: var(--text);

}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid rgba(0,0,0,.12);

    border-bottom:
        1px solid rgba(0,0,0,.12);

}


.stat-card {

    position: relative;

    padding: 54px 25px;

    text-align: center;

}


.stat-card + .stat-card {

    border-left:
        1px solid rgba(0,0,0,.12);

}


.stat-card > span {

    position: absolute;

    top: 14px;
    left: 17px;

    color: var(--gold);

    font-size: .53rem;

    letter-spacing: .16em;

}


.stat-card strong {

    display: block;

    color: var(--green);

    font-family: var(--serif);

    font-size: 4.4rem;

    font-weight: 500;

    line-height: 1;

}


.stat-card p {

    margin-top: 8px;

    color: var(--text);

    font-size: .62rem;

    letter-spacing: .12em;

    text-transform: uppercase;

}


/* =========================================
ROOMS
========================================= */

.rooms {

    display: grid;

    grid-template-columns:
        1fr 1fr;

}


.room {

    position: relative;

    min-height: 720px;

    overflow: hidden;

}


.room + .room {

    border-left:
        1px solid rgba(255,255,255,.4);

}


.room-image {

    position: absolute;

    inset: 0;

}


.room-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s ease;

}


.room:hover
.room-image img {

    transform:
        scale(1.04);

}


.room-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            to top,
            rgba(4,24,18,.84),
            transparent 58%
        );

}


.room-content {

    position: absolute;

    z-index: 2;

    left: 45px;
    right: 45px;
    bottom: 44px;

    color: white;

    display: flex;

    align-items: end;

    gap: 35px;

}


.room-number {

    color:
        rgba(255,255,255,.43);

    font-family: var(--serif);

}


.room-label {

    font-size: .53rem;

    letter-spacing: .18em;

    color:
        rgba(255,255,255,.55);

}


.room-content h3 {

    max-width: 450px;

    margin-top: 9px;

}


.room-content p {

    margin-top: 10px;

    color:
        rgba(255,255,255,.62);

    font-size: .78rem;

}


/* =========================================
EQUIPMENT
========================================= */

.equipment {

    color: white;

    background:
        var(--green-dark);

}


.equipment-layout {

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 100px;

}


.equipment-sticky {

    position: sticky;

    top: 115px;

}


.equipment-intro h2 {

    max-width: 550px;

}


.equipment-intro > div > p:last-of-type {

    max-width: 450px;

    margin-top: 28px;

    color:
        rgba(255,255,255,.5);

}


.equipment-photo {

    height: 250px;

    margin-top: 42px;

    overflow: hidden;

    border-radius: 3px;

}


.equipment-photo img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.equipment-item {

    position: relative;

    min-height: 120px;

    padding:
        28px 45px 28px 0;

    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 20px;

    border-top:
        1px solid rgba(255,255,255,.12);

    transition:
        padding .3s ease,
        background .3s ease;

}


.equipment-item:last-child {

    border-bottom:
        1px solid rgba(255,255,255,.12);

}


.equipment-item:hover {

    padding-left: 16px;

    background:
        rgba(255,255,255,.025);

}


.equipment-index {

    color:
        #af9169;

    font-family: var(--serif);

}


.equipment-item strong {

    font-size: .9rem;

}


.equipment-item p {

    max-width: 520px;

    margin-top: 4px;

    color:
        rgba(255,255,255,.44);

    font-size: .76rem;

}


.equipment-arrow {

    position: absolute;

    right: 5px;
    top: 32px;

    color:
        rgba(255,255,255,.25);

    transition:
        transform .3s ease,
        color .3s ease;

}


.equipment-item:hover
.equipment-arrow {

    color:
        var(--gold-soft);

    transform:
        rotate(45deg);

}


/* =========================================
ATMOSPHERE
========================================= */

.atmosphere {

    min-height: 750px;

    display: grid;

    grid-template-columns:
        .72fr 1.28fr;

}


.atmosphere-copy {

    padding:
        100px
        clamp(50px, 7vw, 110px);

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.atmosphere-copy p:not(.eyebrow) {

    max-width: 430px;

    margin-top: 25px;

    color: var(--text);

}


.text-link {

    width: fit-content;

    margin-top: 35px;

    padding-bottom: 7px;

    border-bottom:
        1px solid var(--green);

    display: flex;

    gap: 20px;

    color: var(--green);

    cursor: pointer;

    font-size: .68rem;

    font-weight: 700;

}


.atmosphere-image {

    overflow: hidden;

}


.atmosphere-image img {

    width: 100%;
    height: 100%;

    min-height: 750px;

    object-fit: cover;

    transition:
        transform 1.2s ease;

}


.atmosphere-image:hover img {

    transform:
        scale(1.035);

}


/* =========================================
SURROUNDINGS
========================================= */

.places-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    border-top:
        1px solid rgba(0,0,0,.11);

}


.place-card {

    position: relative;

    min-height: 230px;

    padding:
        38px 60px 38px 0;

    display: grid;

    grid-template-columns:
        45px 1fr;

    gap: 20px;

    border-bottom:
        1px solid rgba(0,0,0,.11);

    transition:
        padding .3s ease;

}


.place-card:nth-child(odd) {

    padding-right: 55px;

    border-right:
        1px solid rgba(0,0,0,.11);

}


.place-card:nth-child(even) {

    padding-left: 55px;

}


.place-card:hover {

    padding-top: 32px;

}


.place-number {

    color: var(--gold);

    font-family: var(--serif);

}


.place-distance {

    color: var(--gold);

    font-size: .54rem;

    letter-spacing: .18em;

}


.place-card h3 {

    margin-top: 8px;

    font-size: 1.9rem;

}


.place-card p {

    max-width: 400px;

    margin-top: 10px;

    color: var(--text);

    font-size: .78rem;

}


.place-arrow {

    position: absolute;

    right: 20px;
    top: 40px;

    color:
        rgba(0,0,0,.22);

    transition:
        transform .3s ease,
        color .3s ease;

}


.place-card:hover
.place-arrow {

    color: var(--gold);

    transform:
        rotate(45deg);

}


/* =========================================
REVIEWS
========================================= */

.reviews {

    background:
        #e9dfd0;

}


.reviews-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 70px;

}


.reviews-score {

    display: flex;

    align-items: center;

    gap: 22px;

}


.reviews-score > strong {

    color: var(--green);

    font-family: var(--serif);

    font-size: 5.2rem;

    font-weight: 500;

    line-height: 1;

}


.reviews-score > div {

    display: flex;

    flex-direction: column;

}


.reviews-score div span {

    color: var(--gold);

    font-size: .65rem;

    letter-spacing: .1em;

}


.reviews-score b {

    margin-top: 4px;

    font-size: .8rem;

}


.reviews-score small {

    color: var(--text);

    font-size: .6rem;

}


.review-metrics {

    margin-top: 58px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid rgba(0,0,0,.11);

    border-bottom:
        1px solid rgba(0,0,0,.11);

}


.review-metrics > div {

    padding: 22px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.review-metrics > div + div {

    border-left:
        1px solid rgba(0,0,0,.11);

}


.review-metrics span {

    color: var(--text);

    font-size: .55rem;

    letter-spacing: .13em;

}


.review-metrics strong {

    color: var(--green);

    font-family: var(--serif);

    font-size: 1.25rem;

}


.reviews-grid {

    margin-top: 40px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

}


.review-card {

    min-height: 365px;

    padding: 30px;

    border:
        1px solid rgba(0,0,0,.06);

    background:
        rgba(255,255,255,.32);

    display: flex;

    flex-direction: column;

    transition:

        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}


.review-card:hover {

    transform:
        translateY(-7px);

    background:
        rgba(255,255,255,.55);

    box-shadow:
        0 20px 50px
        rgba(52,43,33,.08);

}


.review-card-top {

    display: flex;

    align-items: center;

    gap: 13px;

}


.review-avatar {

    width: 44px;
    height: 44px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: white;

    background: var(--green);

    font-family: var(--serif);

}


.review-card-top > div:last-child {

    display: flex;

    flex-direction: column;

}


.review-card-top strong {

    font-size: .76rem;

}


.review-card-top span {

    color: var(--text);

    font-size: .58rem;

}


.review-stars {

    margin-top: 26px;

    color: var(--gold);

    font-size: .62rem;

    letter-spacing: .1em;

}


.review-card blockquote {

    margin-top: 16px;

    font-family: var(--serif);

    font-size: 1.12rem;

    font-style: italic;

    line-height: 1.65;

}


.review-card-bottom {

    margin-top: auto;

    padding-top: 25px;

    border-top:
        1px solid rgba(0,0,0,.08);

    display: flex;

    justify-content: space-between;

}


.review-card-bottom span {

    color: var(--text);

    font-size: .5rem;

    letter-spacing: .13em;

}


.review-card-bottom strong {

    color: var(--gold);

    font-size: .65rem;

}


/* =========================================
LOCATION
========================================= */

.location {

    min-height: 670px;

    display: grid;

    grid-template-columns:
        .72fr 1.28fr;

}


.location-content {

    padding:
        90px
        clamp(45px, 7vw, 100px);

    color: white;

    background:
        var(--green);

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.location-text {

    max-width: 430px;

    margin-top: 27px;

    color:
        rgba(255,255,255,.52);

}


.location-address {

    margin:
        35px 0;

    padding-top: 25px;

    border-top:
        1px solid rgba(255,255,255,.15);

}


.location-address span {

    display: block;

    color:
        rgba(255,255,255,.4);

    font-size: .53rem;

    letter-spacing: .18em;

}


.location-address strong {

    display: block;

    margin-top: 6px;

    font-family: var(--serif);

    font-size: 1.3rem;

    font-weight: 500;

}


.map iframe {

    width: 100%;
    height: 100%;

    min-height: 670px;

    border: 0;

    filter:
        grayscale(.15)
        saturate(.7)
        contrast(.95);

}


/* =========================================
FINAL CTA
========================================= */

.final-cta {

    position: relative;

    min-height: 760px;

    display: grid;

    place-items: center;

    color: white;

    text-align: center;

    overflow: hidden;

}


.final-cta-background {

    position: absolute;

    inset: 0;

    background:

        url("images/23.jpg")
        center / cover
        no-repeat;

    transform:
        scale(1.03);

}


.final-cta-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(5,27,20,.68);

}


.final-cta-grain {

    position: absolute;

    inset: 0;

    opacity: .15;

    background-image:

        repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            rgba(255,255,255,.05) 1px,
            transparent 2px
        );

    background-size:
        8px 8px;

}


.final-cta-content {

    position: relative;

    z-index: 2;

    width:
        min(calc(100% - 40px), 880px);

}


.final-cta-content h2 {

    font-size:
        clamp(3.1rem, 5.7vw, 6rem);

}


.final-cta-content h2 em {

    display: block;

    color:
        #e7d6bc;

}


.final-cta-content > p:not(.eyebrow) {

    margin:
        28px auto 38px;

    color:
        rgba(255,255,255,.68);

}


/* =========================================
FOOTER
========================================= */

footer {

    padding:
        85px 0 30px;

    color: white;

    background:
        #071a15;

}


.footer-main {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap: 60px;

}


.footer-logo {

    display: flex;

    flex-direction: column;

    width: fit-content;

    font-family: var(--serif);

    font-size: 1.8rem;

}


.footer-logo span {

    font-family: var(--sans);

    font-size: .5rem;

    font-weight: 700;

    letter-spacing: .25em;

}


.footer-brand p {

    max-width: 300px;

    margin-top: 18px;

    color:
        rgba(255,255,255,.38);

    font-size: .75rem;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.footer-heading {

    margin-bottom: 10px;

    color:
        rgba(255,255,255,.35);

    font-size: .53rem;

    letter-spacing: .17em;

}


.footer-column a {

    color:
        rgba(255,255,255,.52);

    font-size: .7rem;

    transition:
        color .25s ease,
        transform .25s ease;

}


.footer-column a:hover {

    color: white;

    transform:
        translateX(4px);

}


.footer-bottom {

    margin-top: 65px;

    padding-top: 24px;

    border-top:
        1px solid rgba(255,255,255,.08);

    display: flex;

    justify-content: space-between;

    color:
        rgba(255,255,255,.25);

    font-size: .57rem;

    letter-spacing: .08em;

}


/* =========================================
BACK TO TOP
========================================= */

.back-to-top {

    position: fixed;

    z-index: 2500;

    right: 24px;
    bottom: 24px;

    width: 46px;
    height: 46px;

    border:
        1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: white;

    background:
        rgba(10,35,27,.72);

    backdrop-filter:
        blur(10px);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;

}


.back-to-top.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


/* =========================================
MOBILE BOOKING BAR
========================================= */

.mobile-booking-bar {

    display: none;

}


/* =========================================
GALLERY MODAL
========================================= */

.gallery-modal {

    position: fixed;

    z-index: 10000;

    inset: 0;

    color: white;

    background:
        #051611;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.gallery-modal.open {

    opacity: 1;

    visibility: visible;

}


.gallery-modal-header {

    position: absolute;

    z-index: 3;

    top: 0;
    left: 0;

    width: 100%;
    height: 86px;

    padding: 0 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.gallery-modal-header > div {

    display: flex;

    flex-direction: column;

}


.gallery-modal-header strong {

    font-family: var(--serif);

    font-weight: 500;

}


.gallery-modal-header span {

    color:
        rgba(255,255,255,.4);

    font-size: .56rem;

    letter-spacing: .14em;

}


.gallery-modal-header button {

    color: white;

    font-size: 2.8rem;

    cursor: pointer;

}


.gallery-modal-image {

    width: 100%;
    height: 100%;

    padding:
        95px 100px 75px;

    display: grid;

    place-items: center;

}


.gallery-modal-image img {

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    opacity: 1;

    transform:
        scale(1);

    transition:
        opacity .2s ease,
        transform .2s ease;

}


.gallery-modal-image img.changing {

    opacity: .1;

    transform:
        scale(.985);

}


.gallery-nav {

    position: absolute;

    z-index: 4;

    top: 50%;

    width: 50px;
    height: 50px;

    transform:
        translateY(-50%);

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: white;

    background:
        rgba(255,255,255,.05);

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    transition:
        background .25s ease,
        transform .25s ease;

}


.gallery-nav:hover {

    background:
        rgba(255,255,255,.12);

}


.gallery-prev {

    left: 25px;

}


.gallery-next {

    right: 25px;

}


.gallery-modal-bottom {

    position: absolute;

    bottom: 22px;
    left: 0;

    width: 100%;

    text-align: center;

    color:
        rgba(255,255,255,.4);

    font-size: .56rem;

    letter-spacing: .15em;

    text-transform: uppercase;

}


/* =========================================
REVEALS
========================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(32px);

    transition:

        opacity .85s ease,
        transform .85s
        cubic-bezier(.2,.7,.2,1);

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}


.reveal-scale {

    opacity: 0;

    transform:
        scale(.975);

    transition:

        opacity 1s ease,
        transform 1s
        cubic-bezier(.2,.7,.2,1);

}


.reveal-scale.visible {

    opacity: 1;

    transform:
        scale(1);

}


/* =========================================
TABLET
========================================= */

@media (max-width: 1100px) {

    .desktop-nav,
    .nav-booking {

        display: none;

    }


    .menu-toggle {

        display: block;

    }


    .hero-content-wrap {

        width:
            calc(100% - 60px);

    }


    .hero-review {

        display: none;

    }


    .hero-bottom-bar {

        width:
            calc(100% - 60px);

    }


    .intro-layout {

        grid-template-columns:
            50px 1fr;

        gap: 40px;

    }


    .intro-copy {

        grid-column: 2;

        padding-top: 0;

    }


    .story {

        grid-template-columns:
            1fr;

    }


    .story-image {

        min-height: 620px;

    }


    .story-content {

        padding:
            100px 60px;

    }


    .gallery-grid {

        height: 800px;

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            420px 180px 180px;

    }


    .gallery-item-main {

        grid-column:
            1 / 3;

        grid-row: auto;

    }


    .equipment-layout {

        grid-template-columns:
            1fr;

    }


    .equipment-sticky {

        position: static;

    }


    .equipment-photo {

        max-width: 600px;

    }


    .atmosphere {

        grid-template-columns:
            1fr;

    }


    .atmosphere-image img {

        min-height: 600px;

    }


    .location {

        grid-template-columns:
            1fr;

    }


    .map iframe {

        min-height: 500px;

    }

}


/* =========================================
MOBILE
========================================= */

@media (max-width: 720px) {

    .container {

        width:
            calc(100% - 36px);

    }


    .section {

        padding:
            95px 0;

    }


    h1 {

        font-size:
            clamp(3.25rem, 15vw, 5.2rem);

    }


    h2 {

        font-size:
            clamp(2.5rem, 11.5vw, 4.1rem);

    }


    .navbar {

        padding:
            12px;

    }


    .navbar.scrolled {

        padding-top:
            8px;

    }


    .nav-shell {

        height: 58px;

        padding:
            6px 8px 6px 12px;

        border-radius: 15px;

    }


    .navbar.scrolled
    .nav-shell {

        height: 56px;

    }


    .logo-symbol {

        width: 34px;
        height: 34px;

    }


    .logo-name {

        font-size: 1.1rem;

    }


    .mobile-menu {

        padding:
            24px 20px;

    }


    .mobile-menu-bottom {

        align-items: stretch;

        flex-direction: column;

    }


    .mobile-menu-bottom > a {

        justify-content:
            space-between;

    }


    .hero {

        min-height:
            100svh;

    }


    .hero-content-wrap {

        width:
            calc(100% - 38px);

        padding-top:
            70px;

        align-items:
            center;

    }


    .hero-location {

        margin-bottom:
            22px;

    }


    .hero-description {

        max-width:
            360px;

        font-size:
            .88rem;

    }


    .hero-actions {

        width: 100%;

        flex-direction:
            column;

    }


    .premium-button {

        width: 100%;

        justify-content:
            space-between;

    }


    .hero-bottom-bar {

        left: 18px;
        right: 18px;
        bottom: 15px;

        width: auto;

        transform: none;

    }


    .hero-bottom-stats {

        width: 100%;

        padding: 4px;

        overflow-x: auto;

    }


    .hero-bottom-stats > div {

        min-width: 78px;

        padding:
            8px 8px;

        text-align: center;

    }


    .hero-bottom-stats strong {

        font-size:
            1rem;

    }


    .hero-bottom-stats > div > span {

        font-size:
            .43rem;

    }


    .scroll-indicator {

        display: none;

    }


    .trust-track {

        min-height: 62px;

        gap: 25px;

        font-size: .5rem;

    }


    .intro-layout {

        display: block;

    }


    .section-number {

        display: block;

        margin-bottom: 30px;

    }


    .intro-copy {

        margin-top: 35px;

    }


    .story-image {

        min-height: 470px;

    }


    .story-image-caption {

        left: 20px;
        bottom: 20px;

    }


    .story-content {

        padding:
            80px 20px;

    }


    .statement {

        min-height:
            540px;

    }


    .section-heading {

        display: block;

    }


    .section-heading-side {

        margin-top: 25px;

    }


    .gallery-grid {

        height: auto;

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            330px 170px 170px;

    }


    .gallery-item-main {

        grid-column:
            1 / 3;

    }


    .gallery-item-text {

        left: 14px;
        bottom: 14px;

    }


    .gallery-item-text strong {

        font-size: .9rem;

    }


    .gallery-more-circle {

        width: 70px;
        height: 70px;

    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .stat-card:nth-child(3) {

        border-left: 0;

        border-top:
            1px solid rgba(0,0,0,.12);

    }


    .stat-card:nth-child(4) {

        border-top:
            1px solid rgba(0,0,0,.12);

    }


    .stat-card strong {

        font-size:
            3.5rem;

    }


    .rooms {

        grid-template-columns:
            1fr;

    }


    .room {

        min-height:
            550px;

    }


    .room + .room {

        border-left: 0;

        border-top:
            1px solid rgba(255,255,255,.4);

    }


    .room-content {

        left: 22px;
        right: 22px;
        bottom: 28px;

    }


    .equipment {

        padding-bottom:
            100px;

    }


    .equipment-photo {

        height:
            210px;

    }


    .equipment-item {

        grid-template-columns:
            35px 1fr;

    }


    .atmosphere-copy {

        padding:
            80px 20px;

    }


    .atmosphere-image img {

        min-height:
            480px;

    }


    .places-grid {

        grid-template-columns:
            1fr;

    }


    .place-card,
    .place-card:nth-child(odd),
    .place-card:nth-child(even) {

        min-height: auto;

        padding:
            35px 40px 35px 0;

        border-right: 0;

    }


    .reviews-heading {

        display: block;

    }


    .reviews-score {

        margin-top:
            40px;

    }


    .review-metrics {

        grid-template-columns:
            1fr 1fr;

    }


    .review-metrics > div:nth-child(3) {

        border-left: 0;

        border-top:
            1px solid rgba(0,0,0,.11);

    }


    .review-metrics > div:nth-child(4) {

        border-top:
            1px solid rgba(0,0,0,.11);

    }


    .reviews-grid {

        grid-template-columns:
            1fr;

    }


    .location-content {

        padding:
            85px 20px;

    }


    .map iframe {

        min-height:
            430px;

    }


    .final-cta {

        min-height:
            670px;

    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-brand {

        grid-column:
            1 / 3;

    }


    .footer-bottom {

        padding-bottom:
            75px;

        flex-direction:
            column;

        gap: 7px;

    }


    .back-to-top {

        display: none;

    }


    .mobile-booking-bar {

        position: fixed;

        z-index: 2900;

        left: 10px;
        right: 10px;
        bottom: 10px;

        min-height: 62px;

        padding:
            7px 7px 7px 15px;

        border:
            1px solid rgba(255,255,255,.18);

        border-radius: 15px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        color: white;

        background:
            rgba(8,31,24,.87);

        backdrop-filter:
            blur(16px);

        box-shadow:
            0 12px 40px
            rgba(0,0,0,.2);

        transform:
            translateY(90px);

        opacity: 0;

        transition:
            transform .4s ease,
            opacity .4s ease;

    }


    .mobile-booking-bar.show {

        opacity: 1;

        transform:
            translateY(0);

    }


    .mobile-booking-bar > div {

        display: flex;

        flex-direction: column;

    }


    .mobile-booking-bar > div span {

        color:
            rgba(255,255,255,.42);

        font-size: .45rem;

        letter-spacing: .13em;

    }


    .mobile-booking-bar > div strong {

        font-family: var(--serif);

        font-weight: 500;

    }


    .mobile-booking-bar > a {

        min-height: 46px;

        padding:
            0 15px;

        border-radius: 10px;

        display: flex;

        align-items: center;

        gap: 14px;

        color: var(--green);

        background: var(--cream);

        font-size: .64rem;

        font-weight: 700;

    }


    .gallery-modal-image {

        padding:
            90px 10px 105px;

    }


    .gallery-nav {

        top: auto;

        bottom: 27px;

        transform: none;

    }


    .gallery-prev {

        left: 22px;

    }


    .gallery-next {

        right: 22px;

    }


    .gallery-modal-bottom {

        bottom: 43px;

        padding:
            0 80px;

    }

}


/* =========================================
REDUCED MOTION
========================================= */

@media
(prefers-reduced-motion: reduce) {

    * {

        scroll-behavior:
            auto !important;

        animation:
            none !important;

        transition:
            none !important;

    }

}
/* =========================================================
   HERO FIX – LEPŠIE ROZLOŽENIE NA NOTEBOOKOCH AJ DESKTOPOCH
========================================================= */

.hero {
    position: relative;
    min-height: 100svh;
    height: auto;

    display: flex;
    align-items: center;

    color: white;
    overflow: hidden;

    padding:
        140px 0
        125px;
}


/* FOTKA */

.hero-background {
    position: absolute;
    inset: -3%;

    background-image:
        url("images/nove-fotky/02-exterier-chalupka.jpg");

    background-size: cover;
    background-position: center 52%;
    background-repeat: no-repeat;

    transform: scale(1.035);
}


/* TMAVÝ PRECHOD */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 25, 19, .90) 0%,
            rgba(6, 29, 22, .70) 40%,
            rgba(6, 28, 21, .30) 68%,
            rgba(5, 22, 17, .12) 100%
        );
}


.hero-vignette {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4, 18, 14, .72) 0%,
            rgba(4, 18, 14, .15) 45%,
            transparent 70%
        );
}


/* HLAVNÝ OBSAH */

.hero-content-wrap {
    position: relative;
    z-index: 5;

    width:
        min(
            calc(100% - 100px),
            1320px
        );

    height: auto;

    margin: 0 auto;
    padding: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 70px;
}


/* ĽAVÁ ČASŤ */

.hero-left {
    width: 100%;
    max-width: 900px;
}


/* MALÝ TEXT NAD NADPISOM */

.hero-location {
    margin-bottom: 24px;
}


/* NADPIS */

.hero h1 {
    max-width: 900px;

    font-size:
        clamp(
            4rem,
            6.1vw,
            6.9rem
        );

    line-height: .98;
    letter-spacing: -.052em;
}


.hero h1 span {
    display: block;

    color: #eadbc4;
}


/* TEXT POD NADPISOM */

.hero-description {
    max-width: 540px;

    margin-top: 28px;

    color:
        rgba(255, 255, 255, .76);

    font-size: .98rem;
    line-height: 1.8;
}


/* TLAČIDLÁ */

.hero-actions {
    margin-top: 32px;

    display: flex;
    align-items: center;

    gap: 12px;
}


/* BOOKING HODNOTENIE */

.hero-review {
    flex-shrink: 0;

    margin-bottom: 5px;
}


/* =========================================================
   SPODNÉ ŠTATISTIKY
========================================================= */

.hero-bottom-bar {
    position: absolute;
    z-index: 6;

    left: 50%;
    right: auto;
    bottom: 24px;

    width:
        min(
            calc(100% - 100px),
            1320px
        );

    transform:
        translateX(-50%);

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    pointer-events: none;
}


.hero-bottom-stats {
    pointer-events: auto;

    padding: 6px;

    display: flex;

    border:
        1px solid
        rgba(255, 255, 255, .15);

    border-radius: 15px;

    background:
        rgba(7, 30, 23, .72);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 15px 45px
        rgba(0, 0, 0, .16);
}


.hero-bottom-stats > div {
    min-width: 115px;

    padding:
        8px 16px;

    text-align: left;
}


.hero-bottom-stats strong {
    display: block;

    font-size: 1.25rem;
    line-height: 1.1;
}


.hero-bottom-stats > div > span {
    margin-top: 5px;

    font-size: .49rem;
}


/* SCROLL TEXT */

.scroll-indicator {
    pointer-events: auto;
}


/* =========================================================
   MENŠÍ NOTEBOOK / NIŽŠIE OKNO
   toto rieši presne problém zo screenshotu
========================================================= */

@media (min-width: 721px) and (max-height: 800px) {

    .hero {
        min-height: 100vh;

        padding:
            112px 0
            110px;
    }


    .hero-content-wrap {
        align-items: center;
    }


    .hero-location {
        margin-bottom: 17px;
    }


    .hero h1 {
        max-width: 820px;

        font-size:
            clamp(
                3.5rem,
                5.4vw,
                5.5rem
            );

        line-height: .96;
    }


    .hero-description {
        margin-top: 21px;

        max-width: 510px;

        font-size: .9rem;
    }


    .hero-actions {
        margin-top: 24px;
    }


    .premium-button {
        min-height: 52px;
    }


    .button-circle {
        width: 39px;
        height: 39px;
    }


    .hero-review {
        transform:
            scale(.92);

        transform-origin:
            bottom right;
    }


    .hero-bottom-bar {
        bottom: 17px;
    }


    .hero-bottom-stats > div {
        min-width: 105px;

        padding:
            7px 13px;
    }

}


/* =========================================================
   VEĽMI NÍZKE OKNO
   napr. browser s veľkým zoomom / otvorenými panelmi
========================================================= */

@media (min-width: 721px) and (max-height: 650px) {

    .hero {
        min-height: 650px;

        padding:
            100px 0
            100px;
    }


    .hero h1 {
        font-size:
            clamp(
                3rem,
                4.8vw,
                4.7rem
            );
    }


    .hero-location {
        margin-bottom: 13px;
    }


    .hero-description {
        margin-top: 17px;

        font-size: .84rem;

        line-height: 1.6;
    }


    .hero-actions {
        margin-top: 19px;
    }


    .hero-review {
        display: none;
    }


    .hero-bottom-stats > div {
        min-width: 95px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero {
        padding:
            125px 0
            115px;
    }


    .hero-content-wrap {
        width:
            calc(100% - 60px);
    }


    .hero h1 {
        max-width: 800px;

        font-size:
            clamp(
                3.8rem,
                8vw,
                6rem
            );
    }


    .hero-review {
        display: none;
    }


    .hero-bottom-bar {
        width:
            calc(100% - 60px);
    }

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 720px) {

    .hero {
        min-height: 100svh;

        padding:
            115px 0
            115px;

        align-items: center;
    }


    .hero-background {
        inset: 0;

        background-position:
            58% center;

        transform: none !important;
    }


    .hero-content-wrap {
        width:
            calc(100% - 38px);

        margin: 0 auto;
        padding: 0;

        display: block;
    }


    .hero-location {
        margin-bottom: 19px;

        font-size: .51rem;
    }


    .hero h1 {
        max-width: 100%;

        font-size:
            clamp(
                3.15rem,
                14vw,
                4.8rem
            );

        line-height: .96;
    }


    .hero-description {
        max-width: 350px;

        margin-top: 23px;

        font-size: .87rem;

        line-height: 1.7;
    }


    .hero-actions {
        width: 100%;

        margin-top: 27px;

        flex-direction: column;

        gap: 9px;
    }


    .hero-actions
    .premium-button {
        width: 100%;

        min-height: 54px;

        justify-content:
            space-between;
    }


    .hero-bottom-bar {
        left: 18px;
        right: 18px;
        bottom: 14px;

        width: auto;

        transform: none;
    }


    .hero-bottom-stats {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        overflow: hidden;
    }


    .hero-bottom-stats > div {
        min-width: 0;

        padding:
            8px 4px;

        text-align: center;
    }


    .hero-bottom-stats strong {
        font-size: .98rem;
    }


    .hero-bottom-stats > div > span {
        font-size: .40rem;

        letter-spacing: .08em;
    }


    .scroll-indicator {
        display: none;
    }

}
/* =========================================================
   FULLSCREEN GALÉRIA – CELÁ FOTKA BEZ OREZANIA
========================================================= */

.gallery-modal {
    overflow: hidden;
}


.gallery-modal-image {
    position: absolute;

    top: 85px;
    right: 75px;
    bottom: 65px;
    left: 75px;

    width: auto;
    height: auto;

    padding: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.gallery-modal-image img {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: auto;

    border-radius: 2px;

    box-shadow:
        0 20px 80px
        rgba(0, 0, 0, .30);
}


@media (max-width: 720px) {

    .gallery-modal-image {
        top: 75px;
        left: 10px;
        right: 10px;
        bottom: 100px;
    }


    .gallery-modal-image img {
        width: auto !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
    }

}
/* =========================================================
   OKOLIE – PREMIUM FOTO KARTY
========================================================= */

.experience-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;
}


.experience-card {
    position: relative;

    min-height: 520px;

    padding: 0;

    overflow: hidden;

    border: 0;

    color: white;

    background: #12251f;

    text-align: left;

    cursor: pointer;
}


.experience-image {
    position: absolute;
    inset: 0;
}


.experience-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.1s
        cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}


.experience-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4, 23, 17, .91) 0%,
            rgba(5, 25, 19, .28) 52%,
            rgba(5, 25, 19, .10) 100%
        );

    transition:
        background .5s ease;
}


.experience-card:hover
.experience-image img {
    transform:
        scale(1.055);

    filter:
        saturate(.9);
}


.experience-card:hover
.experience-overlay {
    background:
        linear-gradient(
            to top,
            rgba(4, 23, 17, .94) 0%,
            rgba(5, 25, 19, .42) 58%,
            rgba(5, 25, 19, .14) 100%
        );
}


.experience-number {
    position: absolute;

    top: 25px;
    left: 27px;

    color:
        rgba(255,255,255,.55);

    font-family: var(--serif);

    font-size: .85rem;
}


.experience-content {
    position: absolute;

    z-index: 2;

    left: 30px;
    right: 120px;
    bottom: 30px;
}


.experience-distance {
    display: block;

    margin-bottom: 8px;

    color: #d8bd94;

    font-size: .55rem;

    font-weight: 700;

    letter-spacing: .18em;
}


.experience-content h3 {
    max-width: 450px;

    font-size:
        clamp(2rem, 3vw, 3rem);

    line-height: 1.05;
}


.experience-content p {
    max-width: 420px;

    margin-top: 12px;

    color:
        rgba(255,255,255,.63);

    font-size: .78rem;
}


.experience-open {
    position: absolute;

    z-index: 3;

    right: 25px;
    bottom: 28px;

    display: flex;
    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.7);

    font-size: .58rem;

    text-transform: uppercase;

    letter-spacing: .12em;
}


.experience-open i {
    width: 43px;
    height: 43px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.25);

    display: grid;
    place-items: center;

    font-style: normal;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.experience-card:hover
.experience-open i {
    transform:
        rotate(45deg);

    color: var(--green);

    background: var(--cream);
}


@media (max-width: 800px) {

    .experience-grid {
        grid-template-columns: 1fr;
    }


    .experience-card {
        min-height: 430px;
    }


    .experience-content {
        left: 20px;
        right: 75px;
        bottom: 24px;
    }


    .experience-open {
        right: 18px;
        bottom: 22px;
    }


    .experience-open span {
        display: none;
    }

}
/* =========================================================
   DETAIL ATRAKCIE
========================================================= */

.place-modal {
    position: fixed;

    z-index: 12000;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.place-modal.open {
    opacity: 1;
    visibility: visible;
}


.place-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(3, 17, 12, .88);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}


.place-modal-panel {
    position: relative;

    z-index: 2;

    width:
        min(1180px, 100%);

    max-height:
        calc(100vh - 70px);

    display: grid;

    grid-template-columns:
        1.08fr .92fr;

    overflow: hidden;

    background: var(--cream);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.35);

    transform:
        translateY(20px)
        scale(.98);

    transition:
        transform .45s
        cubic-bezier(.2,.7,.2,1);
}


.place-modal.open
.place-modal-panel {
    transform:
        translateY(0)
        scale(1);
}


.place-modal-close {
    position: absolute;

    z-index: 10;

    top: 17px;
    right: 17px;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    color: white;

    background:
        rgba(7, 28, 21, .54);

    backdrop-filter: blur(10px);

    font-size: 2rem;
    font-weight: 300;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}


.place-modal-close:hover {
    transform:
        rotate(90deg);

    background:
        var(--green);
}


/* FOTO */

.place-modal-photo {
    position: relative;

    min-height: 680px;

    overflow: hidden;
}


.place-modal-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.place-modal-photo-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4,23,17,.84),
            transparent 57%
        );
}


.place-modal-photo-heading {
    position: absolute;

    z-index: 2;

    left: 35px;
    right: 35px;
    bottom: 34px;

    color: white;
}


.place-modal-photo-heading span {
    color: #dec49a;

    font-size: .56rem;

    font-weight: 700;

    letter-spacing: .18em;
}


.place-modal-photo-heading h2 {
    margin-top: 8px;

    max-width: 550px;

    font-size:
        clamp(2.6rem, 4vw, 4.4rem);
}


/* TEXT */

.place-modal-information {
    position: relative;

    padding:
        70px 55px 45px;

    overflow-y: auto;
}


.place-modal-category {
    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(0,0,0,.1);

    display: flex;
    justify-content: space-between;
    align-items: center;
}


.place-modal-category span {
    color: var(--gold);

    font-size: .53rem;

    font-weight: 700;

    letter-spacing: .17em;
}


.place-modal-category strong {
    font-family: var(--serif);

    font-size: 1rem;
    font-weight: 500;
}


.place-modal-lead {
    margin-top: 33px;

    font-family: var(--serif);

    font-size: 1.45rem;

    line-height: 1.45;
}


.place-modal-description {
    margin-top: 20px;

    color: var(--text);

    font-size: .84rem;

    line-height: 1.8;
}


.place-modal-facts {
    margin-top: 35px;

    border-top:
        1px solid rgba(0,0,0,.1);
}


.place-fact {
    padding: 17px 0;

    display: flex;
    justify-content: space-between;
    gap: 30px;

    border-bottom:
        1px solid rgba(0,0,0,.1);
}


.place-fact span {
    color: var(--text);

    font-size: .62rem;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.place-fact strong {
    text-align: right;

    font-size: .75rem;

    font-weight: 600;
}


.place-modal-actions {
    margin-top: 38px;

    display: flex;
    align-items: center;

    gap: 20px;
}


.place-navigation {
    min-height: 56px;

    padding:
        6px 7px 6px 22px;

    border-radius: 12px;

    display: inline-flex;
    align-items: center;

    gap: 25px;

    color: white;

    background: var(--green);

    font-size: .7rem;

    font-weight: 700;
}


.place-navigation i {
    width: 42px;
    height: 42px;

    border-radius: 9px;

    display: grid;
    place-items: center;

    color: var(--green);

    background: var(--cream);

    font-style: normal;

    transition:
        transform .3s ease;
}


.place-navigation:hover i {
    transform:
        rotate(45deg);
}


#placeModalBack {
    padding-bottom: 5px;

    border-bottom:
        1px solid rgba(0,0,0,.35);

    color: var(--text);

    cursor: pointer;

    font-size: .67rem;
}


/* MOBIL */

@media (max-width: 850px) {

    .place-modal {
        padding: 10px;
    }


    .place-modal-panel {
        max-height:
            calc(100svh - 20px);

        grid-template-columns: 1fr;

        overflow-y: auto;
    }


    .place-modal-photo {
        min-height: 360px;
    }


    .place-modal-information {
        overflow: visible;

        padding:
            45px 22px 35px;
    }


    .place-modal-photo-heading {
        left: 22px;
        right: 70px;
        bottom: 22px;
    }


    .place-modal-photo-heading h2 {
        font-size: 2.6rem;
    }


    .place-modal-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .place-navigation {
        width: 100%;

        justify-content: space-between;
    }


    #placeModalBack {
        width: fit-content;
    }

}
/* FIX NADPISU V DETAILI OKOLIA */

.place-modal-photo-heading {
    bottom: 42px !important;
    left: 35px;
    right: 80px;

    overflow: visible !important;
}

.place-modal-photo-heading h2 {
    display: block;

    margin-top: 8px;

    padding-bottom: 10px;

    font-size:
        clamp(2.4rem, 4vw, 4.2rem);

    line-height: 1.08 !important;

    overflow: visible !important;
}

.place-modal-photo {
    overflow: hidden;
}

@media (max-width: 850px) {

    .place-modal-photo-heading {
        left: 22px;
        right: 70px;
        bottom: 28px !important;
    }

    .place-modal-photo-heading h2 {
        font-size: 2.4rem;
        line-height: 1.08 !important;
        padding-bottom: 8px;
    }

}
/* ===== FIX NÁZVU ATRAKCIE V MODALE ===== */

.place-modal-photo-heading {
    bottom: 95px !important;
    left: 35px !important;
    right: 70px !important;
}

.place-modal-photo-heading h2 {
    margin-top: 8px !important;
    padding-bottom: 14px !important;

    line-height: 1.05 !important;

    overflow: visible !important;
}

/* notebook / nižšie okno */
@media (min-width: 851px) and (max-height: 850px) {

    .place-modal-photo-heading {
        bottom: 115px !important;
    }

}

/* mobil */
@media (max-width: 850px) {

    .place-modal-photo-heading {
        bottom: 55px !important;
        left: 22px !important;
        right: 65px !important;
    }

    .place-modal-photo-heading h2 {
        font-size: 2.35rem !important;
        line-height: 1.08 !important;
        padding-bottom: 10px !important;
    }

}
/* =========================================================
   FINAL PREMIUM POLISH
========================================================= */

/* -------------------------
   1. JEMNEJŠIE POZADIE WEBU
------------------------- */

body {
    background:
        linear-gradient(
            180deg,
            #f4efe6 0%,
            #f1ebdf 100%
        );
}


/* -------------------------
   2. JEMNÉ ODDIELY MEDZI SEKCIAMI
------------------------- */

.intro,
.gallery,
.surroundings,
.reviews {
    position: relative;
}

.intro::before,
.gallery::before,
.surroundings::before,
.reviews::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(calc(100% - 64px), 1260px);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(23,55,45,.12),
            transparent
        );
}


/* -------------------------
   3. LEPŠIE NADPISY
------------------------- */

h2 {
    text-wrap: balance;
}

h2 em {
    color: #94734f;
}


/* TMAVÉ SEKCIE */
.equipment h2 em,
.final-cta h2 em,
.statement h2 em {
    color: #e7d5b9;
}


/* -------------------------
   4. PREMIUM TLAČIDLÁ
------------------------- */

.premium-button {
    position: relative;

    overflow: hidden;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.08);
}

.premium-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    transform: skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    transition:
        left .65s ease;
}

.premium-button:hover::before {
    left: 140%;
}

.premium-button:hover {
    transform:
        translateY(-3px)
        scale(1.01);
}


/* -------------------------
   5. GALÉRIA – DRAHŠÍ HOVER
------------------------- */

.gallery-item {
    border-radius: 3px;
}

.gallery-item::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    border:
        1px solid rgba(255,255,255,0);

    transition:
        border .4s ease;
}

.gallery-item:hover::after {
    border:
        1px solid rgba(255,255,255,.28);
}

.gallery-item:hover img {
    transform:
        scale(1.045);

    filter:
        brightness(.93)
        saturate(.92);
}


/* -------------------------
   6. IZBY – JEMNÝ ZOOM
------------------------- */

.room {
    cursor: default;
}

.room-image img {
    transition:
        transform 1.4s
        cubic-bezier(.2,.7,.2,1);
}

.room:hover .room-image img {
    transform:
        scale(1.055);
}

.room-content {
    transition:
        transform .5s ease;
}

.room:hover .room-content {
    transform:
        translateY(-8px);
}


/* -------------------------
   7. OKOLIE – PREMIUM KARTY
------------------------- */

.experience-card {
    border-radius: 4px;

    box-shadow:
        0 10px 35px
        rgba(20,35,29,.05);

    transition:
        transform .5s
        cubic-bezier(.2,.7,.2,1),
        box-shadow .5s ease;
}

.experience-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 22px 60px
        rgba(20,35,29,.13);
}

.experience-content h3 {
    transition:
        transform .4s ease;
}

.experience-card:hover
.experience-content h3 {
    transform:
        translateX(5px);
}


/* -------------------------
   8. MODAL OKOLIA
------------------------- */

.place-modal-panel {
    border-radius: 7px;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.45);
}

.place-modal-photo::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset -25px 0 45px
        rgba(0,0,0,.08);
}

.place-modal-photo img {
    transition:
        transform 1.2s ease;
}

.place-modal-panel:hover
.place-modal-photo img {
    transform:
        scale(1.015);
}


/* NÁZOV ATRAKCIE */
.place-modal-photo-heading {
    bottom: 115px !important;
}

.place-modal-photo-heading h2 {
    max-width: 520px;

    padding-bottom: 10px !important;

    text-shadow:
        0 3px 25px
        rgba(0,0,0,.25);

    line-height: 1.06 !important;
}


/* -------------------------
   9. INFORMÁCIE V MODALE
------------------------- */

.place-modal-facts {
    margin-top: 40px;
}

.place-fact {
    transition:
        padding .25s ease,
        background .25s ease;
}

.place-fact:hover {
    padding-left: 8px;
    padding-right: 8px;

    background:
        rgba(23,55,45,.025);
}


/* -------------------------
   10. RECENZIE
------------------------- */

.review-card {
    border-radius: 3px;

    overflow: hidden;
}

.review-card::before {
    content: "“";

    position: absolute;

    top: 12px;
    right: 22px;

    color:
        rgba(168,134,95,.12);

    font-family: Georgia, serif;

    font-size: 5rem;

    line-height: 1;
}

.review-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 25px 65px
        rgba(50,40,30,.10);
}


/* -------------------------
   11. MAPA
------------------------- */

.map {
    overflow: hidden;
}

.map iframe {
    transition:
        filter .5s ease,
        transform .7s ease;
}

.map:hover iframe {
    filter:
        grayscale(0)
        saturate(.9)
        contrast(1);

    transform:
        scale(1.01);
}


/* -------------------------
   12. FINAL CTA
------------------------- */

.final-cta-background {
    transition:
        transform 8s ease;
}

.final-cta:hover
.final-cta-background {
    transform:
        scale(1.075);
}


/* -------------------------
   13. FOOTER
------------------------- */

.footer-logo {
    transition:
        opacity .3s ease;
}

.footer-logo:hover {
    opacity: .72;
}


/* -------------------------
   14. SCROLLBAR
------------------------- */

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
    background: #e7dfd3;
}

::-webkit-scrollbar-thumb {
    background: #9d8b74;

    border:
        2px solid #e7dfd3;

    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}


/* -------------------------
   MOBILE
------------------------- */

@media (max-width: 720px) {

    .experience-card:hover {
        transform: none;
    }

    .place-modal-photo-heading {
        bottom: 65px !important;
    }

    .place-modal-panel {
        border-radius: 5px;
    }

}
.place-modal-photo {
    opacity: 0;

    transform:
        translateX(-25px);

    transition:
        opacity .55s ease .08s,
        transform .65s
        cubic-bezier(.2,.7,.2,1)
        .08s;
}

.place-modal-information {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity .55s ease .18s,
        transform .65s
        cubic-bezier(.2,.7,.2,1)
        .18s;
}

.place-modal.open
.place-modal-photo {
    opacity: 1;

    transform:
        translateX(0);
}

.place-modal.open
.place-modal-information {
    opacity: 1;

    transform:
        translateY(0);
}

/* =========================================================
   ROZŠÍRENIE WEBU – OKOLIE, JEDLO, OBSADENOSŤ, KONTAKT
========================================================= */

[hidden] {
    display: none !important;
}

.premium-button-airbnb {
    color: white;
    background: #c85d38;
    border: 1px solid rgba(255,255,255,.15);
}

.premium-button-airbnb .button-circle {
    color: #c85d38;
    background: white;
}

.mobile-menu-bottom {
    flex-wrap: wrap;
}

.mobile-airbnb-link {
    margin-left: auto;
}

/* ĎALŠIE TIPY NA VÝLET */

.more-trips {
    margin-top: 75px;
    padding-top: 45px;
    border-top: 1px solid rgba(23,55,45,.13);
}

.more-trips-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 70px;
    margin-bottom: 25px;
}

.more-trips-head .eyebrow {
    margin-bottom: 12px;
}

.more-trips-head h3 {
    font-size: clamp(2rem, 3.2vw, 3.6rem);
}

.more-trips-head h3 em {
    color: #94734f;
    font-style: italic;
    font-weight: 500;
}

.more-trips-head > p {
    max-width: 410px;
    color: var(--text);
    font-size: .8rem;
}

.trip-list {
    border-top: 1px solid rgba(23,55,45,.12);
}

.trip-row {
    min-height: 92px;
    padding: 20px 8px;
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid rgba(23,55,45,.12);
    transition: padding .3s ease, background .3s ease;
}

.trip-row:hover {
    padding-left: 16px;
    padding-right: 16px;
    background: rgba(255,255,255,.28);
}

.trip-index {
    color: var(--gold);
    font-family: var(--serif);
    font-size: .8rem;
}

.trip-row strong {
    display: block;
    color: var(--green);
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
}

.trip-row small {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: .58rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.trip-action {
    color: var(--green);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* KAM NA JEDLO */

.dining {
    background: #efe7db;
}

.dining-grid {
    margin-top: 55px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dining-card {
    position: relative;
    min-height: 330px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(23,55,45,.1);
    background: rgba(255,255,255,.32);
    overflow: hidden;
    transition: transform .4s ease, background .4s ease, box-shadow .4s ease;
}

.dining-card::after {
    content: "↗";
    position: absolute;
    top: 28px;
    right: 28px;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(23,55,45,.16);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--green);
    transition: transform .35s ease, background .35s ease, color .35s ease;
}

.dining-card:hover {
    transform: translateY(-7px);
    background: rgba(255,255,255,.55);
    box-shadow: 0 24px 60px rgba(22,40,33,.09);
}

.dining-card:hover::after {
    transform: rotate(45deg);
    color: white;
    background: var(--green);
}

.dining-number {
    color: var(--gold);
    font-family: var(--serif);
    font-size: .9rem;
}

.dining-location {
    margin-top: auto;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.dining-card h3 {
    max-width: 300px;
    font-size: 2rem;
}

.dining-card p {
    max-width: 330px;
    margin-top: 12px;
    color: var(--text);
    font-size: .78rem;
}

.dining-link {
    margin-top: 24px;
    color: var(--green);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* KALENDÁR OBSADENOSTI */

.availability {
    color: white;
    background: var(--green-dark);
}

.availability-shell {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: center;
    gap: clamp(50px, 7vw, 110px);
}

.availability-copy h2 {
    max-width: 530px;
}

.availability-copy h2 em {
    color: #e7d5b9;
}

.availability-copy > p:not(.eyebrow) {
    max-width: 520px;
    margin-top: 26px;
    color: rgba(255,255,255,.65);
    font-size: .86rem;
}

.availability-legend {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: rgba(255,255,255,.7);
    font-size: .64rem;
}

.availability-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.legend-free {
    background: #a8c8b1;
}

.legend-busy {
    background: #b77a6f;
}

.availability-actions {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.availability-calendar {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.calendar-status {
    min-height: 42px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 11px;
    color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.04);
    font-size: .63rem;
}

.calendar-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d3bd9d;
    box-shadow: 0 0 0 5px rgba(211,189,157,.1);
}

.calendar-status.connected .calendar-status-dot {
    background: #9ec2a8;
}

.calendar-months {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.calendar-month {
    padding: 20px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(4,18,14,.22);
}

.calendar-month-heading {
    margin-bottom: 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.calendar-month-heading strong {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 500;
}

.calendar-month-heading span {
    color: rgba(255,255,255,.4);
    font-size: .58rem;
}

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-weekdays {
    margin-bottom: 7px;
}

.calendar-weekdays span {
    color: rgba(255,255,255,.34);
    text-align: center;
    font-size: .48rem;
    font-weight: 700;
    text-transform: uppercase;
}

.calendar-day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.055);
    font-size: .63rem;
}

.calendar-day.pending {
    color: rgba(255,255,255,.6);
}

.calendar-day.free {
    color: #dff0e3;
    background: rgba(112,161,124,.22);
}

.calendar-day.busy {
    color: #f1d6d1;
    background: rgba(177,102,88,.3);
}

.calendar-day.past {
    opacity: .23;
}

.calendar-day-empty {
    background: transparent;
}

/* KONTAKT */

.contact-section {
    background: var(--cream);
}

.contact-layout {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: clamp(55px, 8vw, 120px);
    align-items: start;
}

.contact-copy h2 {
    max-width: 500px;
}

.contact-lead {
    max-width: 470px;
    margin-top: 25px;
    color: var(--text);
    font-size: .86rem;
}

.contact-person {
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid rgba(23,55,45,.12);
}

.contact-person span {
    display: block;
    color: var(--gold);
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.contact-person strong {
    display: block;
    margin-top: 7px;
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 500;
}

.contact-methods {
    margin-top: 26px;
    display: grid;
    gap: 9px;
}

.contact-method {
    min-height: 72px;
    padding: 15px 15px 15px 18px;
    display: grid;
    grid-template-columns: 80px 1fr 42px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(23,55,45,.11);
    border-radius: 12px;
    background: rgba(255,255,255,.3);
    transition: transform .3s ease, background .3s ease;
}

.contact-method:hover {
    transform: translateX(5px);
    background: rgba(255,255,255,.58);
}

.contact-method > span {
    color: var(--gold);
    font-size: .51rem;
    font-weight: 700;
    letter-spacing: .13em;
}

.contact-method strong {
    font-size: .92rem;
    font-weight: 600;
}

.contact-method i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    background: var(--green);
    font-style: normal;
}

.contact-form-wrap {
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(23,55,45,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.46);
    box-shadow: 0 25px 70px rgba(25,42,35,.07);
}

.contact-form-head {
    margin-bottom: 28px;
    padding-bottom: 23px;
    border-bottom: 1px solid rgba(23,55,45,.1);
}

.contact-form-head > span {
    color: var(--gold);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.contact-form-head p {
    max-width: 560px;
    margin-top: 8px;
    color: var(--text);
    font-size: .75rem;
}

.contact-form {
    display: grid;
    gap: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-form label {
    display: grid;
    gap: 8px;
}

.contact-form label > span {
    color: var(--green);
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid rgba(23,55,45,.13);
    border-radius: 10px;
    outline: 0;
    color: var(--green);
    background: rgba(255,255,255,.55);
    font-family: var(--sans);
    font-size: .78rem;
    transition: border .25s ease, box-shadow .25s ease, background .25s ease;
}

.contact-form input {
    min-height: 51px;
    padding: 0 15px;
}

.contact-form textarea {
    min-height: 145px;
    padding: 14px 15px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: rgba(23,55,45,.42);
    background: white;
    box-shadow: 0 0 0 4px rgba(23,55,45,.055);
}

.form-honeypot {
    position: absolute !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
}

.form-privacy {
    color: var(--text);
    font-size: .63rem;
    line-height: 1.6;
}

.form-submit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.contact-submit {
    min-height: 56px;
    padding: 7px 7px 7px 20px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 25px;
    color: white;
    background: var(--green);
    cursor: pointer;
    font-size: .68rem;
    font-weight: 700;
}

.contact-submit i {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--green);
    background: var(--cream);
    font-style: normal;
    transition: transform .3s ease;
}

.contact-submit:hover i {
    transform: rotate(45deg);
}

.form-status {
    color: var(--text);
    font-size: .7rem;
}

.form-status.success {
    color: var(--green);
    font-weight: 600;
}

.final-cta-actions {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* RESPONSIVE */

@media (max-width: 980px) {

    .dining-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dining-card:last-child {
        grid-column: 1 / 3;
    }

    .availability-shell,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .availability-copy {
        max-width: 650px;
    }

}

@media (max-width: 720px) {

    .more-trips {
        margin-top: 55px;
        padding-top: 35px;
    }

    .more-trips-head {
        display: block;
    }

    .more-trips-head > p {
        margin-top: 18px;
    }

    .trip-row {
        min-height: 84px;
        grid-template-columns: 34px 1fr;
        gap: 12px;
    }

    .trip-action {
        grid-column: 2;
        margin-top: -8px;
    }

    .dining-grid {
        grid-template-columns: 1fr;
    }

    .dining-card,
    .dining-card:last-child {
        min-height: 290px;
        grid-column: auto;
    }

    .availability-calendar {
        padding: 15px;
        border-radius: 14px;
    }

    .calendar-months {
        grid-template-columns: 1fr;
    }

    .availability-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .availability-actions .premium-button {
        width: 100%;
        justify-content: space-between;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-wrap {
        padding: 24px 18px;
    }

    .contact-method {
        grid-template-columns: 70px 1fr 38px;
    }

    .final-cta-actions {
        width: 100%;
        flex-direction: column;
    }

    .final-cta-actions .premium-button {
        width: 100%;
        justify-content: space-between;
    }

}


/* =========================================================
   2026 CLIENT UPDATE – OKOLIE / JEDLO / PRIVACY
========================================================= */

.experience-grid-extra { margin-top: 12px; }

.restaurant-grid {
    margin-top: 52px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.restaurant-card {
    overflow: hidden;
    border: 1px solid rgba(23,55,45,.09);
    border-radius: 10px;
    background: rgba(255,255,255,.42);
    box-shadow: 0 18px 55px rgba(24,40,34,.06);
    transition: transform .4s ease, box-shadow .4s ease;
}
.restaurant-card:hover { transform: translateY(-7px); box-shadow: 0 28px 70px rgba(24,40,34,.12); }
.restaurant-photo { position: relative; height: 280px; overflow: hidden; background: var(--green-dark); }
.restaurant-photo img { width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.restaurant-card:hover .restaurant-photo img { transform: scale(1.045); }
.restaurant-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,27,20,.24),transparent 50%); pointer-events:none; }
.restaurant-photo-note { position:absolute; z-index:2; left:14px; bottom:12px; padding:6px 9px; border-radius:20px; color:rgba(255,255,255,.82); background:rgba(4,24,18,.62); backdrop-filter:blur(10px); font-size:.48rem; letter-spacing:.08em; text-transform:uppercase; }
.restaurant-body { padding: 28px; }
.restaurant-index { color:var(--gold); font-size:.54rem; font-weight:700; letter-spacing:.17em; }
.restaurant-body h3 { margin-top:10px; font-size:2.15rem; }
.restaurant-body p { min-height:76px; margin-top:14px; color:var(--text); font-size:.78rem; line-height:1.7; }
.restaurant-meta { margin-top:22px; padding-top:18px; border-top:1px solid rgba(23,55,45,.1); display:grid; gap:5px; color:var(--text); font-size:.64rem; }
.restaurant-actions { margin-top:22px; display:flex; gap:18px; flex-wrap:wrap; }
.restaurant-actions a { padding-bottom:4px; border-bottom:1px solid rgba(23,55,45,.34); color:var(--green); font-size:.62rem; font-weight:700; }

.form-privacy-check { display:flex !important; grid-template-columns:none !important; align-items:flex-start; gap:10px !important; color:var(--text); font-size:.63rem; line-height:1.6; }
.form-privacy-check input { width:16px !important; min-height:16px !important; height:16px; margin-top:2px; flex:0 0 16px; accent-color:var(--green); }
.form-privacy-check span { color:var(--text) !important; font-size:.63rem !important; font-weight:400 !important; letter-spacing:0 !important; text-transform:none !important; }
.form-privacy-check a { color:var(--green); text-decoration:underline; text-underline-offset:2px; }

.map { position:relative; min-height:520px; background:#d9d2c5; }
.map iframe { position:relative; z-index:1; }
.map-consent { position:absolute; z-index:3; inset:0; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(135deg,#102d24,#071e18); color:white; }
.map-consent.hidden { display:none; }
.map-consent > span { color:var(--gold-soft); font-size:.55rem; font-weight:700; letter-spacing:.2em; }
.map-consent strong { margin-top:9px; font-family:var(--serif); font-size:2rem; font-weight:500; }
.map-consent p { max-width:420px; margin-top:10px; color:rgba(255,255,255,.62); font-size:.75rem; }
.map-consent button { margin-top:22px; min-height:48px; padding:0 18px; border-radius:10px; color:var(--green); background:var(--cream); cursor:pointer; font-size:.66rem; font-weight:700; }

.cookie-banner[hidden] { display:none !important; }
.cookie-banner { position:fixed; z-index:20000; left:20px; right:20px; bottom:20px; width:min(760px,calc(100% - 40px)); margin-left:auto; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid rgba(255,255,255,.14); border-radius:16px; color:white; background:rgba(7,30,24,.96); backdrop-filter:blur(18px); box-shadow:0 25px 80px rgba(0,0,0,.28); }
.cookie-copy { max-width:500px; }
.cookie-copy > span { color:var(--gold-soft); font-size:.5rem; font-weight:700; letter-spacing:.18em; }
.cookie-copy strong { display:block; margin-top:5px; font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.cookie-copy p { margin-top:5px; color:rgba(255,255,255,.62); font-size:.65rem; line-height:1.6; }
.cookie-copy a { color:white; text-decoration:underline; }
.cookie-actions { display:flex; gap:8px; flex-shrink:0; }
.cookie-actions button { min-height:44px; padding:0 14px; border-radius:9px; cursor:pointer; font-size:.61rem; font-weight:700; }
.cookie-secondary { color:white; border:1px solid rgba(255,255,255,.18); background:transparent; }
.cookie-primary { color:var(--green); background:var(--cream); }

@media (max-width: 980px) { .restaurant-grid { grid-template-columns:1fr; } .restaurant-photo { height:360px; } .restaurant-body p { min-height:auto; } }
@media (max-width: 720px) { .experience-grid-extra { margin-top:10px; } .restaurant-photo { height:240px; } .restaurant-body { padding:22px; } .cookie-banner { left:10px; right:10px; bottom:10px; width:calc(100% - 20px); flex-direction:column; align-items:stretch; } .cookie-actions { width:100%; } .cookie-actions button { flex:1; } }


/* =========================================================
   V2 – REZERVÁCIA, JEDLO, COOKIES
========================================================= */

body.reservation-open { overflow: hidden; }

/* Airbnb now uses same white style where shown next to Booking */
.premium-button-airbnb,
.availability-actions .airbnb-link {
    color: var(--green) !important;
    background: var(--cream) !important;
    border-color: transparent !important;
}
.premium-button-airbnb .button-circle,
.availability-actions .airbnb-link .button-circle {
    color: white !important;
    background: var(--green) !important;
}

/* Reservation chooser */
.reservation-modal {
    position: fixed;
    z-index: 23000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
.reservation-modal.open { opacity: 1; visibility: visible; }
.reservation-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3,18,13,.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.reservation-panel {
    position: relative;
    z-index: 2;
    width: min(620px, 100%);
    padding: 48px;
    border: 1px solid rgba(23,55,45,.08);
    border-radius: 20px;
    background: var(--cream);
    box-shadow: 0 35px 110px rgba(0,0,0,.32);
    transform: translateY(16px) scale(.98);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.reservation-modal.open .reservation-panel { transform: translateY(0) scale(1); }
.reservation-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--green);
    background: rgba(23,55,45,.07);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
}
.reservation-eyebrow {
    color: var(--gold);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .2em;
}
.reservation-panel h2 { margin-top: 13px; font-size: clamp(2.6rem,5vw,4.2rem); }
.reservation-panel h2 em { color: #94734f; }
.reservation-panel > p { max-width: 460px; margin-top: 14px; color: var(--text); font-size: .78rem; }
.reservation-options { margin-top: 34px; display: grid; gap: 10px; }
.reservation-option {
    min-height: 86px;
    padding: 14px 14px 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid rgba(23,55,45,.1);
    border-radius: 14px;
    background: rgba(255,255,255,.5);
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.reservation-option:hover { transform: translateY(-3px); background: white; box-shadow: 0 16px 40px rgba(23,55,45,.08); }
.reservation-option span { display: grid; gap: 3px; }
.reservation-option small { color: var(--gold); font-size: .48rem; font-weight: 700; letter-spacing: .16em; }
.reservation-option strong { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; }
.reservation-option i {
    width: 46px; height: 46px; border-radius: 11px;
    display: grid; place-items: center;
    color: white; background: var(--green); font-style: normal;
    transition: transform .3s ease;
}
.reservation-option:hover i { transform: rotate(45deg); }
button.premium-button { border: 0; cursor: pointer; }

/* Dining – text-only premium list */
.restaurant-list { margin-top: 54px; border-top: 1px solid rgba(23,55,45,.12); }
.restaurant-row {
    min-height: 148px;
    padding: 27px 5px;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    align-items: center;
    gap: 24px;
    border-bottom: 1px solid rgba(23,55,45,.12);
    transition: padding .3s ease, background .3s ease;
}
.restaurant-row:hover { padding-left: 14px; padding-right: 14px; background: rgba(255,255,255,.26); }
.restaurant-list-number { color: var(--gold); font-family: var(--serif); font-size: 1rem; }
.restaurant-list-place { color: var(--gold); font-size: .52rem; font-weight: 700; letter-spacing: .17em; }
.restaurant-list-main h3 { margin-top: 5px; font-size: clamp(1.8rem,2.5vw,2.5rem); }
.restaurant-list-main p { margin-top: 6px; color: var(--text); font-size: .74rem; }
.restaurant-list-links { display: flex; align-items: center; gap: 12px; }
.restaurant-list-links a {
    min-height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(23,55,45,.14);
    border-radius: 9px;
    color: var(--green);
    background: rgba(255,255,255,.32);
    font-size: .6rem;
    font-weight: 700;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.restaurant-list-links a:hover { color: white; background: var(--green); transform: translateY(-2px); }

.form-status.error { color: #9b3f34; font-weight: 600; }
.contact-submit:disabled { opacity: .65; cursor: wait; }

/* Cookie popup */
.cookie-banner {
    left: 50%; right: auto; bottom: 22px;
    width: min(720px, calc(100% - 32px));
    margin-left: 0;
    transform: translateX(-50%);
}
.cookie-primary { min-width: 105px; }

@media (max-width: 760px) {
    .reservation-panel { padding: 42px 20px 22px; }
    .restaurant-row { grid-template-columns: 35px 1fr; gap: 13px; }
    .restaurant-list-links { grid-column: 2; flex-wrap: wrap; }
    .restaurant-list-links a { flex: 1; justify-content: center; min-width: 110px; }
    .cookie-banner { left: 50%; right: auto; bottom: 10px; width: calc(100% - 20px); transform: translateX(-50%); }
}

/* =========================================================
   02-09 — NOVÉ FOTKY + KNIHA NÁVŠTEV
   Doplnok k pôvodnému dizajnu, bez prepisovania layoutu.
========================================================= */

.guestbook-reviews {
    margin-top: 84px;
    padding-top: 70px;
    border-top: 1px solid rgba(23, 55, 45, .14);
}

.guestbook-reviews-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 64px;
    align-items: end;
    margin-bottom: 34px;
}

.guestbook-reviews-head h3 {
    max-width: 760px;
    margin: 10px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 68px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.035em;
    color: var(--green-dark);
}

.guestbook-reviews-head h3 em {
    color: var(--gold);
    font-weight: 400;
}

.guestbook-reviews-head > p {
    max-width: 490px;
    margin: 0 0 6px auto;
    color: var(--text);
    line-height: 1.75;
}

.guestbook-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    grid-template-rows: 270px 270px;
    gap: 14px;
}

.guestbook-card {
    position: relative;
    border: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    cursor: zoom-in;
    background: #d9d0c1;
    box-shadow: 0 18px 46px rgba(25, 32, 28, .08);
}

.guestbook-card-large {
    grid-row: 1 / 3;
}

.guestbook-card:nth-child(4) {
    grid-column: 2 / 4;
}

.guestbook-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2,.75,.25,1), filter .35s ease;
}

.guestbook-card:hover img {
    transform: scale(1.025);
    filter: brightness(.88);
}

.guestbook-card-more::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,25,19,.76), rgba(5,25,19,.08));
}

.guestbook-card-more span {
    position: absolute;
    z-index: 2;
    left: 28px;
    bottom: 25px;
    color: white;
    font-size: 13px;
    letter-spacing: .04em;
}

.guestbook-card-more strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 4px;
}

.guestbook-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 34px 90px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.guestbook-modal.open {
    opacity: 1;
    visibility: visible;
}

.guestbook-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 17, 13, .94);
    backdrop-filter: blur(12px);
}

.guestbook-modal-content {
    position: relative;
    z-index: 2;
    margin: 0;
    width: min(920px, 82vw);
    height: min(82vh, 980px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guestbook-modal-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100% - 42px);
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0,0,0,.38);
}

.guestbook-modal-content figcaption {
    margin-top: 14px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    letter-spacing: .18em;
}

.guestbook-modal-close,
.guestbook-modal-nav {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.08);
    color: white;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 22px;
    transition: background .2s ease, transform .2s ease;
}

.guestbook-modal-close:hover,
.guestbook-modal-nav:hover {
    background: rgba(255,255,255,.16);
    transform: scale(1.04);
}

.guestbook-modal-close { top: 28px; right: 30px; }
.guestbook-modal-prev { left: 28px; top: 50%; transform: translateY(-50%); }
.guestbook-modal-next { right: 28px; top: 50%; transform: translateY(-50%); }
.guestbook-modal-prev:hover,
.guestbook-modal-next:hover { transform: translateY(-50%) scale(1.04); }

body.guestbook-open { overflow: hidden; }

@media (max-width: 900px) {
    .guestbook-reviews { margin-top: 58px; padding-top: 52px; }
    .guestbook-reviews-head { grid-template-columns: 1fr; gap: 20px; }
    .guestbook-reviews-head > p { margin-left: 0; }
    .guestbook-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px; }
    .guestbook-card-large { grid-row: auto; }
    .guestbook-card:nth-child(4) { grid-column: 1 / 3; }
    .guestbook-modal { padding: 70px 20px 30px; }
    .guestbook-modal-content { width: 92vw; height: 76vh; }
    .guestbook-modal-prev { left: 12px; }
    .guestbook-modal-next { right: 12px; }
}

@media (max-width: 620px) {
    .guestbook-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 240px 190px; gap: 8px; }
    .guestbook-card { border-radius: 16px; }
    .guestbook-card:nth-child(4) { grid-column: 1 / 3; }
    .guestbook-modal-nav { width: 44px; height: 44px; }
    .guestbook-modal-close { width: 44px; height: 44px; top: 16px; right: 16px; }
}


/* =========================================================
   02-09 FIX — LOGO / FOOTER / POLISH
========================================================= */

.logo-symbol-image {
    overflow: hidden;
    padding: 0 !important;
    background: var(--cream-soft);
}

.logo-symbol-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.footer-brand-mark {
    width: 84px;
    height: 84px;
    margin-bottom: 18px;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    opacity: .92;
}

.footer-cookie-settings {
    width: fit-content;
    padding: 0;
    border: 0;
    color: rgba(255,255,255,.48);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .7rem;
    text-align: left;
    transition: color .25s ease, transform .25s ease;
}

.footer-cookie-settings:hover {
    color: white;
    transform: translateX(3px);
}

/* Keep reservation chooser fully hidden until JS opens it. */
.reservation-modal[aria-hidden="true"] {
    pointer-events: none;
}

.reservation-modal.open {
    pointer-events: auto;
}

@media (max-width: 720px) {
    .footer-brand-mark {
        width: 70px;
        height: 70px;
    }
}

/* =========================================================
   FINÁLNY HERO FIX — celá chalúpka bez zbytočného priblíženia
========================================================= */

.hero-background {
    inset: 0 !important;
    overflow: hidden;
    background-image: none !important;
    background-color: #0d1d18;
    transform: none !important;
}

/* Jemne rozmazaná fotografia vyplní celé pozadie bez prázdnych okrajov. */
.hero-background::before {
    content: "";
    position: absolute;
    inset: -4%;
    background-image: url("images/nove-fotky/02-exterier-chalupka.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(18px) brightness(.72);
    transform: scale(1.06);
    opacity: .92;
}

/* Hlavná fotografia je oddialená tak, aby bola viditeľná celá chalúpka. */
.hero-background::after {
    content: "";
    position: absolute;
    inset: 2.5% 3.5%;
    background-image: url("images/nove-fotky/02-exterier-chalupka.jpg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 720px) {
    .hero-background {
        inset: 0 !important;
        transform: none !important;
    }

    .hero-background::before {
        inset: -7%;
        filter: blur(14px) brightness(.68);
    }

    .hero-background::after {
        inset: 4% 2%;
        background-size: contain;
        background-position: center center;
    }
}