/*
Theme Name: Solo Society
Author: Eduardas
Version: 1.0
Description: Hand-coded custom theme for Solo Society — Hybrid Hotel Vilnius.
*/

/* ---------- Objectivity (self-hosted, the brand typeface from Figma) ---------- */
/* URLs are relative to this stylesheet (theme root), so they resolve under the
   active theme regardless of the install path. font-display: swap keeps text
   visible while the woff2 loads. */
@font-face {
    font-family: 'Objectivity';
    src: url('assets/fonts/Objectivity-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Objectivity';
    src: url('assets/fonts/Objectivity-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Objectivity';
    src: url('assets/fonts/Objectivity-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Objectivity';
    src: url('assets/fonts/Objectivity-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Objectivity';
    src: url('assets/fonts/Objectivity-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Objectivity';
    src: url('assets/fonts/Objectivity-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --pink: #ffacbf;
    --purple: #7c4dff;
    --ink: #111;
    --muted: #808080;
    --glass: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.22);
    --chip-bg: rgba(0, 0, 0, 0.05);
    --radius-pill: 100px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body { height: 100%; }

body {
    font-family: 'Objectivity', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #fff;
    background: #111;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Landing layout ---------- */
.landing {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.landing__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #000;
}
.landing__bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.landing__bg video { z-index: 1; }
.landing__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
    pointer-events: none;
}

/* ---------- Top bar ---------- */
.topbar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
}

.topbar__menu {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topbar__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.topbar__logo img {
    display: block;
    width: auto;
    height: 60px;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- Pills & buttons ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 35px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: #fff;
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.3px;
    cursor: pointer;
    transition: background 0.2s;
}
.pill:hover { background: rgba(255, 255, 255, 0.18); }
.pill--ghost { color: #fff; }
.pill--circle {
    width: 35px;
    padding: 0;
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.3px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: transform 0.15s, background 0.2s;
}
.btn--solid {
    background: #000;
    color: #fff;
    height: 35px;
    padding: 0 22px;
    font-size: 14px;
}
.btn--solid:hover { background: #222; transform: translateY(-1px); }

/* ---------- Booking widget ---------- */
.booking {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    width: min(878px, calc(100% - 48px));
}

.booking__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border-radius: 1000px;
    padding: 5px;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4);
}

/* Segmented Short/Long stay toggle */
.stay-toggle {
    display: flex;
    align-items: center;
    height: 49px;
    padding: 0;
    background: #f2f2f2;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
}
.stay-toggle__btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.5px;
    height: 49px;
    padding: 0 24px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.stay-toggle__btn.is-active {
    background: var(--pink);
    color: #000;
}

.field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 49px;
    padding: 0 18px;
    background: var(--chip-bg);
    border-radius: var(--radius-pill);
    color: var(--muted);
}
.field--dates { flex: 1.2; }
.field--guests { flex: 1; }
.field svg { flex-shrink: 0; }
.field input {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: -0.5px;
    color: #000;
    width: 100%;
    min-width: 0;
    outline: none;
    font-weight: 500;
    cursor: pointer;
}
.field input::placeholder { color: var(--muted); }

.field__group {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.field__divider {
    width: 1px;
    height: 27px;
    background: #dfdfdf;
    flex-shrink: 0;
}

.btn--rooms {
    height: 49px;
    padding: 0 32px;
    font-size: 16px;
    letter-spacing: -0.7px;
    flex-shrink: 0;
}

/* ---------- Stays grid ---------- */
.stays {
    background: #fff;
    padding: 80px 40px;
}
.stays__grid {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.stay-card {
    position: relative;
    display: block;
    aspect-ratio: 641 / 620;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    isolation: isolate;
}
.stay-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0) 50%);
    pointer-events: none;
}

/* Per-card image slider */
.stay-swiper {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.stay-swiper,
.stay-swiper .swiper-wrapper,
.stay-card__slide {
    height: 100%;
}
/* Smooth easing for the auto image transition (Swiper sets the duration inline). */
.stay-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}
.stay-card__slide { position: relative; }
/* Inner media layer: Swiper transforms the slide (fade), GSAP parallaxes this. */
.stay-card__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Whole-card link sits above the slider but below the dots */
.stay-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Caption/arrow are decorative overlays — let clicks fall through to the link */
.stay-card__body,
.stay-card__arrow { pointer-events: none; }

.stay-card__arrow {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 130px;
    background: rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.25s, transform 0.25s;
}
.stay-card:hover .stay-card__arrow {
    background: rgba(0, 0, 0, 0.45);
    transform: rotate(45deg);
}

.stay-card__body {
    position: absolute;
    left: 40px;
    bottom: 38px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stay-card__title {
    font-size: clamp(34px, 4.2vw, 50px);
    font-weight: 700;
    letter-spacing: -2.3px;
    line-height: 1;
}
.stay-card__subtitle {
    font-size: 18px;
    letter-spacing: -0.5px;
    opacity: 0.7;
}
/* Per-line clip mask (built by JS): letters slide up from behind this edge so
   they appear naturally instead of floating in. padding-bottom + matching
   negative margin leaves room for descenders (the "y") without shifting layout. */
.stay-card__title .split-mask,
.stay-card__subtitle .split-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
}
.stay-card__title .char,
.stay-card__subtitle .char {
    display: inline-block;
}

/* .stays scope raises specificity to (0,2,0) so it beats Swiper's
   .swiper-pagination-bullets.swiper-pagination-horizontal (left:0; width:100%). */
.stays .stay-card__dots {
    position: absolute;
    right: 40px;
    bottom: 40px;
    left: auto;       /* override Swiper's left:0 / width:100% */
    width: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.stay-card__dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.6);
}
.stay-card__dots .dot.is-active { background: #fff; }

/* ---------- Our rooms ---------- */
.rooms {
    background: #fff;
    color: #000;
    padding: 40px 40px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    overflow: hidden;
}
.rooms__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.rooms__title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1;
}
.rooms__lead {
    max-width: 548px;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
    color: #000;
}

.rooms__carousel {
    position: relative;
    width: 100%;
    height: min(1004px, 43vw);
    overflow: hidden;
}
.rooms__stage {
    position: absolute;
    inset: 0;
}

.room-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(1440px, 72vw);
    aspect-ratio: 1046 / 625;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    /* Default (leaving) transition: card glides to its spot and fades OUT. */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.room-card.is-active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
    cursor: default;
    /* Incoming snaps to full opacity (no cheap fade-in) while it glides in. */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}
.room-card.is-prev {
    transform: translate(calc(-50% - 16%), -50%) scale(0.86);
    opacity: 0.4;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
.room-card.is-next {
    transform: translate(calc(-50% + 16%), -50%) scale(0.86);
    opacity: 0.4;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
/* Per-room image slider — sits behind the gradient/overlay/link/dots
   (all z-index >= 1), so the existing dots stay exactly as they are. */
.room-swiper {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.room-swiper,
.room-swiper .swiper-wrapper,
.room-card__slide {
    height: 100%;
}
.room-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}
.room-card__slide { position: relative; }
/* Inner media layer: Swiper transforms the slide (fade), GSAP parallaxes this. */
.room-card__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.room-card__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.room-card:not(.is-active) .room-card__link { pointer-events: none; }
.room-card:not(.is-active) .room-card__overlay,
.room-card:not(.is-active) .room-card__dots { opacity: 0; pointer-events: none; }
.room-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 28%, rgba(0,0,0,0) 45%);
    pointer-events: none;
}

.room-card__overlay {
    position: absolute;
    left: 44px;
    bottom: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #fff;
}
.room-card__title {
    font-size: clamp(28px, 3.2vw, 43px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
}
.room-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
    white-space: nowrap;
}
.chip svg { flex-shrink: 0; }
.chip__sep {
    width: 4px;
    height: 4px;
    border-radius: 100px;
    background: #fff;
    flex-shrink: 0;
}

/* Room slider pagination dots (inside active card). The .rooms scope raises
   specificity to (0,2,0) so it beats Swiper's
   .swiper-pagination-bullets.swiper-pagination-horizontal (left:0; width:100%).
   z-index 4 keeps them clickable above the full-card link (z-index 3). */
.rooms .room-card__dots {
    position: absolute;
    right: 40px;
    bottom: 40px;
    left: auto;       /* override Swiper's left:0 / width:100% */
    width: auto;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.room-card__dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}
.room-card__dots .dot.is-active { background: #fff; }

/* Outer rooms pagination — sits in the .rooms flex column right under the
   carousel. Hidden by default (peek cards already signal more on desktop);
   only the mobile rules below switch it on, where the side cards are hidden
   and the dots become the wayfinding. Markup: `<div data-coverflow-dots>`,
   bullets built by initCoverflow() in main.js. */
.rooms__pagination {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.coverflow-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.coverflow-dot.is-active { background: #000; }

/* Swiper glass pagination pill (spaces + short-rooms + friends).
   Short-rooms sits on a white section, so its dot/border tones get a darker
   override below — the base pill geometry is shared. */
.spaces-swiper .swiper-pagination,
.short-rooms-swiper .swiper-pagination,
.friends-swiper .swiper-pagination {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.spaces-swiper .swiper-pagination-bullet,
.short-rooms-swiper .swiper-pagination-bullet,
.friends-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
}
.spaces-swiper .swiper-pagination-bullet-active,
.short-rooms-swiper .swiper-pagination-bullet-active,
.friends-swiper .swiper-pagination-bullet-active { background: #fff; }

/* Short-rooms section is white; recolour the glass pill so it reads on light. */
.short-rooms-swiper .swiper-pagination {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}
.short-rooms-swiper .swiper-pagination-bullet { background: rgba(0, 0, 0, 0.3); }
.short-rooms-swiper .swiper-pagination-bullet-active { background: #000; }

/* Pagination only meaningful when the slider drops to one-card-per-view —
   keep it hidden on desktop where the peek + magnetic arrows are the affordance. */
.spaces-swiper .swiper-pagination,
.short-rooms-swiper .swiper-pagination,
.friends-swiper .swiper-pagination { display: none; }
@media (max-width: 600px) {
    /* Reserve space at the bottom of each swiper for the pagination pill so it
       sits *under* the card rather than floating on top of the title overlay. */
    .spaces-swiper,
    .short-rooms-swiper,
    .friends-swiper { padding-bottom: 40px; }
    .spaces-swiper .swiper-pagination,
    .short-rooms-swiper .swiper-pagination,
    .friends-swiper .swiper-pagination {
        display: inline-flex;
        bottom: 0;
    }
}

/* Carousel arrows (shared rooms + spaces) */
.rooms__nav,
.spaces__nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.25s;   /* transform is owned by GSAP (magnetic) — keep it off the transition */
}
.rooms__carousel:hover .rooms__nav,
.spaces__carousel:hover .spaces__nav { opacity: 1; }
.rooms__nav:hover,
.spaces__nav:hover { transform: translate(-50%, -50%) scale(1.06); }
.rooms__nav.swiper-button-disabled,
.spaces__nav.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }

/* Arrows centred on the active card's left and right edges (half-width = min(1440px, 72vw) / 2). */
.rooms__nav--prev {
    left: calc(50% - min(840px, 36vw));
    transform: translate(-50%, -50%);
}
.rooms__nav--next {
    left: calc(50% + min(840px, 36vw));
    transform: translate(-50%, -50%);
}
.spaces__nav--prev, .friends__nav--prev { left: 8px; transform: translate(-50%, -50%); }
.spaces__nav--next, .friends__nav--next { right: 8px; left: auto; transform: translate(50%, -50%); }
.spaces__nav--next:hover, .friends__nav--next:hover { transform: translate(50%, -50%) scale(1.06); }

/* Curved fill: the pill shell stays put while a black fill with a domed top
   edge rolls up from below to cover the pink face, then rolls back down on
   exit. Two stacked labels (black-on-pink, white-on-black) swap with the fill.
   The faces are injected by JS. */
.btn-pill {
    position: relative;
    display: inline-block;
    height: 60px;
    border-radius: 48px;
    overflow: hidden;               /* clips the rising fill to the pill shape */
    border: 0;
    padding: 0;
    background: var(--pink);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease-out;
}
.btn-pill:active { transform: scale(0.97); }
.btn-pill__face {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.5px;
    white-space: nowrap;
}
.btn-pill__face--front {            /* in flow → gives the pill its width + height */
    position: relative;
    height: 100%;
    background: var(--pink);
    color: #000;
    transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1);
}
.btn-pill__face--back {             /* black fill that rolls up; curved top only while moving */
    bottom: 0;
    height: 100%;                                   /* same height as the pill — no extra */
    background: #000;
    color: #fff;
    border-radius: 50% 50% 0 0 / 22px 22px 0 0;     /* convex top edge, seen as it rolls in */
    transform: translateY(100%);                    /* parked just below the pill */
    transition: transform 0.5s cubic-bezier(0.6, 0, 0.2, 1),
                border-radius 1s cubic-bezier(0.6, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
    .btn-pill:hover .btn-pill__face--front { transform: translateY(-100%); }   /* dark text rolls up and out */
    .btn-pill:hover .btn-pill__face--back {
        transform: translateY(0);
        border-radius: 0;                           /* flattens to fill completely — no overshoot */
    }
}
@media (prefers-reduced-motion: reduce) {
    .btn-pill__face--front,
    .btn-pill__face--back { transition: none; }
    .btn-pill:hover .btn-pill__face--front,
    .btn-pill:hover .btn-pill__face--back { transform: none; }
}

/* ---------- Our spaces ---------- */
.spaces {
    background: #fff;
    color: #000;
    padding: 40px 40px 100px;
}
.spaces__head {
    max-width: 1440px;
    margin: 0 auto 64px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.spaces__intro {
    max-width: 571px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.spaces__title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1;
}
.spaces__lead {
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
}

.spaces__carousel {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}
.spaces-swiper { overflow: hidden; }

.space-card {
    position: relative;
    display: block;
    aspect-ratio: 548 / 530;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    isolation: isolate;
    height: auto;
}
/* Inner image layer (spaces slider) so GSAP can parallax-drift it inside the
   card's clipped frame, like the stay/room cards. */
.space-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}
.space-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 28%, rgba(0,0,0,0) 45%);
    pointer-events: none;
}
.space-card__body {
    position: absolute;
    left: 40px;
    bottom: 36px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.space-card__title {
    font-size: clamp(28px, 2.6vw, 43px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
}
.space-card__subtitle {
    font-size: 16px;
    letter-spacing: -0.5px;
    opacity: 0.7;
}

/* ---------- Events and conferences ---------- */
.events {
    position: relative;
    width: 100%;
}
.events-swiper { overflow: hidden; }

.event-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.event-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%),
                linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 35%);
    pointer-events: none;
}
.event-slide__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* image stays full-bleed (inset:0); the text aligns to the 1440px container
       edge on wide screens, keeping a 64px gutter on narrower ones */
    padding: 80px max(64px, calc((100% - 1440px) / 2)) 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.event-slide__title {
    max-width: 571px;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1.02;
}
.event-slide__subtitle {
    max-width: 402px;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* CTA + arrows live above the slider so they persist across slides */
.events__cta {
    position: absolute;
    left: max(64px, calc((100% - 1440px) / 2));   /* align to the container edge */
    bottom: 80px;
    z-index: 5;
}
.events__nav {
    position: absolute;
    right: max(64px, calc((100% - 1440px) / 2));   /* align to the container edge */
    bottom: 80px;
    z-index: 5;
    display: flex;
    gap: 16px;
}
.events__arrow {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 100px;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: filter 0.2s;   /* transform is owned by GSAP (magnetic) */
}
.events__arrow:hover { filter: brightness(0.95); }

/* ---------- Tiny bits of our life ---------- */
/* Scroll-driven sticky slider: the inner grid is pinned for the section's
   duration (see main.js) and the stacked frame images crossfade as you scroll. */
.tiny {
    background: #fff;
    color: #000;
    padding: 0 64px 106px;
}
.tiny__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 368px 1fr;
    gap: 98px;
    align-items: start;
    padding: 80px 0 0;
}
.tiny__intro {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.tiny__title {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1;
}
.tiny__lead {
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* The two cards stack here. No overflow clip — the rising card stays fully
   visible as it travels up the page (see main.js). */
.tiny__gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 80vh;
}
.gallery-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    will-change: transform;
}
.gallery-card__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.gallery-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0) 50%);
    pointer-events: none;
}
.gallery-card__arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 130px;
    background: rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.25s, transform 0.25s;
}
.gallery-card:hover .gallery-card__arrow { background: rgba(0,0,0,0.4); transform: rotate(45deg); }
.gallery-card__body {
    position: absolute;
    left: 40px;
    bottom: 36px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gallery-card__title {
    font-size: clamp(28px, 2.6vw, 43px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
}
.gallery-card__count { font-size: 16px; opacity: 0.7; letter-spacing: -0.5px; }

/* Reduced motion: the slider isn't built (see main.js) — show both cards stacked. */
@media (prefers-reduced-motion: reduce) {
    .tiny__inner { min-height: 0; }
    .tiny__gallery { aspect-ratio: auto; max-height: none; }
    .gallery-card { position: relative; inset: auto; aspect-ratio: 4 / 3; }
    .gallery-card + .gallery-card { margin-top: 16px; }
}

/* ---------- "Why choose us" sticky stack (short-stay page) ----------
   Reuses the homepage .tiny sticky carousel (data-tiny-slider) and the
   .gallery-card stacking cards — modifiers below only patch what differs:
   the intro adds a pink CTA pill, and each card overlays a top-left title
   plus a strip of amenity chips along the bottom. No rounded corners. */
.tiny--why .tiny__intro--why { gap: 32px; }
/* Cap the title at the Figma 52px (vs the homepage's 64px) so "rinktis mus?"
   fits on a single line inside the 368px intro column. */
.tiny--why .tiny__title { font-size: clamp(36px, 3.6vw, 52px); }
/* Left-align the .btn-pill in the flex column (it's inline-block by default). */
.tiny__intro-cta { align-self: flex-start; }

/* Square corners; the gradient already on .gallery-card::after keeps the
   bottom chips legible. Push it a touch deeper so chips read on any photo. */
.gallery-card--why { border-radius: 0; }
.gallery-card--why::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
}
.gallery-card--why .why-card__title {
    position: absolute;
    top: 60px;
    left: 64px;
    right: 64px;
    z-index: 2;
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3vw, 43px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.05;
    max-width: 520px;
}
.gallery-card--why .why-card__chips {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 40px;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.why-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1;
    white-space: nowrap;
}
.why-chip svg { flex-shrink: 0; width: 18px; height: 18px; opacity: 0.92; }
.why-chip--extra { padding: 10px 12px; }

/* ---------- Friends & neighbors (top pills on space-card) ---------- */
.space-card__pills {
    position: absolute;
    left: 43px;
    top: 45px;
    z-index: 2;
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}
.pill-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
    white-space: nowrap;
}
.pill-chip svg { flex-shrink: 0; }

/* Light-photo card (e.g. middle ISM) — dark text/border pills */
.friends-swiper .swiper-slide:nth-child(2) .pill-chip {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.22);
    color: #000;
}

/* ---------- Send a virtual post card ---------- */
.postcard {
    background: #fff;
    color: #000;
    padding: 40px 40px 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    overflow: hidden;
}
.postcard__carousel {
    position: relative;
    width: 100%;
    height: min(1004px, 43vw);
    overflow: hidden;
}
.postcard__stage { position: absolute; inset: 0; }

.postcard-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(1440px, 72vw);
    aspect-ratio: 1046 / 625;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    /* Default (leaving) transition: card glides to its spot and fades OUT. */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.postcard-card.is-active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 3;
    pointer-events: auto;
    /* Incoming snaps to full opacity (no cheap fade-in) while it glides in. */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}
.postcard-card.is-prev {
    transform: translate(calc(-50% - 16%), -50%) scale(0.86);
    opacity: 0.4;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
.postcard-card.is-next {
    transform: translate(calc(-50% + 16%), -50%) scale(0.86);
    opacity: 0.4;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
.postcard-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}

.postcard-form {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: min(354px, 38%);
    display: flex;
    flex-direction: column;
    gap: 22px;
    transition: opacity 0.4s;
}
.postcard-card:not(.is-active) .postcard-form { opacity: 0; }
.postcard-form__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 6px;
    transition: border-color 0.25s ease;
}
/* While typing in a field, its label + underline brighten to full white. */
.postcard-form__row:focus-within { border-bottom-color: #fff; }
.postcard-form__row span {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -1px;
    transition: color 0.25s ease;
}
.postcard-form__row:focus-within span { color: #fff; }
.postcard-form__row input {
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    padding: 2px 0;
}

/* postcard arrows reuse .rooms__nav visual; sit centred on the active card's
   left and right edges (card half-width = min(1440px, 72vw) / 2). */
.postcard__carousel:hover .rooms__nav { opacity: 1; }
.postcard__nav--prev {
    left: calc(50% - min(840px, 36vw));
    transform: translate(-50%, -50%);
}
.postcard__nav--next {
    left: calc(50% + min(840px, 36vw));
    transform: translate(-50%, -50%);
}

.postcard-send {
    display: inline-flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 100px;
    padding: 8px;
    width: min(508px, 92vw);
}
.postcard-send__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0 22px;
    font-family: inherit;
    font-size: 16px;
    letter-spacing: -0.5px;
    color: #000;
}
.postcard-send__input::placeholder { color: rgba(0, 0, 0, 0.4); }
.postcard-send__btn {
    flex-shrink: 0;
    height: 58px;
    padding: 0 29px;
    border: 0;
    border-radius: 100px;
    background: var(--pink);
    color: #000;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.5px;
    cursor: pointer;
    transition: filter 0.2s;
}
.postcard-send__btn:hover { filter: brightness(0.97); }

/* ---------- Contact / Book ---------- */
.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #0082e7;
    min-height: 760px;
}
.contact__left {
    padding: 80px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
}
.contact__title {
    color: #000;
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 700;
    letter-spacing: -5px;
    line-height: 1;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 592px;
}
.contact-form__row { display: flex; gap: 10px; }
.contact-form__row input { flex: 1; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: transparent;
    border-radius: 6px;
    padding: 15px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    outline: none;
    resize: none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.54); }

.contact-form__check {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 6px 0;
}
.contact-form__check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    position: relative;
    top: 2px;
}
.contact-form__check input[type="checkbox"]:checked { background: #000; border-color: #000; }
.contact-form__check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.contact-form__check span {
    color: #fff;
    opacity: 0.65;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
}
.contact-form__check a { color: #fff; text-decoration: underline; }
.contact-form__submit {
    border: 0;
    background: #000;
    color: #f5f5f5;
    border-radius: 30px;
    height: 48px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.6px;
    cursor: pointer;
    transition: background 0.2s;
}
.contact-form__submit:hover { background: #1a1a1a; }

.contact__right {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 420px;
}
.contact__book {
    position: absolute;
    right: 48px;
    bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
    text-align: right;
}
.contact__book-title {
    color: #fff;
    font-size: clamp(40px, 5vw, 88px);
    font-weight: 700;
    letter-spacing: -6px;
    line-height: 0.95;
    max-width: 596px;
}
.contact__book-actions { display: flex; gap: 8px; }

/* ---------- Footer ---------- */
.site-footer {
    background: #000;
    color: #fff;
    padding: 64px 0 48px;
}
.site-footer__inner {
    padding: 0 64px;
}
.site-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__lead {
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 700;
    letter-spacing: -1.8px;
    line-height: 1.1;
}
.site-footer__book {
    flex-shrink: 0;
    background: #444;
    color: #fff;
    text-decoration: none;
    padding: 15px 24px;
    border-radius: 100px;
    font-size: 16px;
    transition: background 0.2s;
}
.site-footer__book:hover { background: #555; }

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 60px;
    padding: 56px 0;
}
.footer-label {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.footer-label--gap { margin-top: 40px; }

.site-footer__news-title {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 24px;
    max-width: 626px;
}
.footer-subscribe {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(245, 245, 245, 0.18);
    border-radius: 50px;
    padding: 4px;
    max-width: 500px;
}
.footer-subscribe input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0 24px;
    height: 56px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
}
.footer-subscribe input::placeholder { color: rgba(255, 255, 255, 0.54); }
.footer-subscribe button {
    flex-shrink: 0;
    border: 0;
    background: #000;
    color: #f5f5f5;
    border-radius: 30px;
    height: 48px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}
.site-footer__disclaimer {
    margin-top: 14px;
    font-size: 14px;
    opacity: 0.65;
}

.site-footer__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 60px;
}
.footer-col--pages { grid-column: 1 / -1; }
.footer-nav {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 4px 87px;
    justify-content: start;
}
.footer-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.7px;
    padding: 2px 0;
}
.footer-nav a:hover { opacity: 0.7; }
.footer-line {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.7px;
    margin-bottom: 4px;
}
a.footer-line:hover { opacity: 0.7; }
.footer-social { display: flex; gap: 6px; }
.footer-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.footer-social a:hover { background: #333; }

.site-footer__copy {
    font-size: 14px;
    opacity: 0.43;
    letter-spacing: -0.7px;
}

/* ---------- Stay hero (page-short-stays.php / page-long-stays.php) ----------
   Both stay-landing heroes share the same Figma layout (feature chips, big
   heading, lead paragraph, glass booking panel on the right), so the rules
   are aliased here rather than duplicated. The two pages diverge below the
   hero — those sections keep their own scoped selectors. */
.short-hero,
.long-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.short-hero__bg,
.long-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.short-hero__bg img,
.long-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Darken the left (text) side and the top (topbar) for white-on-photo contrast,
   echoing the frosted overlay in the design. */
.short-hero__bg::after,
.long-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 50%, rgba(0,0,0,0.05) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 28%);
    pointer-events: none;
}

.short-hero__content,
.long-hero__content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 20px 88px 80px;
}

.short-hero__text,
.long-hero__text {
    max-width: 620px;
    color: #fff;
}
/* Short-stay copy can run wider than the shared 620px cap so the three
   feature chips ("Saugoma ir stebima erdvė" + …) fit on one row on larger
   screens. The lead paragraph keeps its own 541px cap so reading width
   stays comfortable; only the chip row and title benefit from the extra
   room. The booking widget on the right is flex-shrink:0, so it isn't
   squeezed — the text just claims the slack that was previously empty. */
.short-hero__text { max-width: 820px; }
.short-hero__features,
.long-hero__features {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.4px;
    white-space: nowrap;
}
.feature-chip svg { flex-shrink: 0; }

.short-hero__title,
.long-hero__title {
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: 1.02;
}
.short-hero__lead,
.long-hero__lead {
    margin-top: 32px;
    max-width: 541px;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.92);
}
/* The long-stay heading and lead are authored as multi-line copy; preserve
   the editor's newlines (incl. blank-line paragraph breaks) without nl2br. */
.long-hero__title,
.long-hero__lead { white-space: pre-line; }

/* Long-stay chips match the Figma spec more tightly than the short-stay set
   (12px text + 5px icon gap, vs 13/6) so the three Lithuanian labels fit on
   one row beside the wide booking panel at the design viewport. Below 1100px
   the booking widget no longer competes for room, so wrap is allowed again. */
.long-hero__features .feature-chip {
    gap: 5px;
    padding: 7px 11px;
    font-size: 12px;
    letter-spacing: -0.3px;
}
.long-hero__features .feature-chip svg { width: 17px; height: 17px; }
@media (min-width: 1101px) {
    .long-hero__features { flex-wrap: nowrap; }
}

.short-hero__booking,
.long-hero__booking { flex-shrink: 0; }
.booking-widget {
    width: min(522px, 42vw);
    height: min(605px, 72vh);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    backdrop-filter: blur(33px);
    -webkit-backdrop-filter: blur(33px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 24px 80px -32px rgba(0, 0, 0, 0.45);
}
.booking-widget > * { width: 100%; height: 100%; }
.booking-widget__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

@media (max-width: 1100px) {
    .short-hero__content,
    .long-hero__content { padding-left: 40px; padding-right: 40px; gap: 32px; }
    .short-hero__title,
    .long-hero__title { letter-spacing: -2px; }
}
@media (max-width: 900px) {
    .short-hero__content,
    .long-hero__content {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 32px;
        padding: 24px 20px 60px;
    }
    .short-hero__text,
    .long-hero__text { max-width: none; }
    .short-hero__lead,
    .long-hero__lead { margin-top: 24px; }
    .short-hero__booking,
    .long-hero__booking { width: 100%; }
    .booking-widget { width: 100%; height: 420px; }
}

/* ---------- Short stay intro (Solo text + two offset photos) ---------- */
.short-intro {
    background: #fff;
    color: #000;
    padding: clamp(60px, 8vw, 120px) 64px;
}
.short-intro__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    /* minmax(0, …) so the image's intrinsic width can't blow out the columns
       once it loads — keeps the text column a stable width, so the measured
       line breaks stay valid. */
    grid-template-columns: minmax(0, 526fr) minmax(0, 625fr);
    column-gap: clamp(40px, 9vw, 161px);
    /* Vertical offsets are handled per-item (margins) to keep the staggered,
       non-aligned rhythm — so no row gap here. */
    row-gap: 0;
    align-items: start;
}
.short-intro__text {
    grid-column: 1;
    grid-row: 1;
    margin-top: clamp(24px, 4vw, 56px);   /* sits a touch below the tall photo's top */
    max-width: 487px;
    font-size: 24px;
    font-weight: 400;
    line-height: 104.02%;   /* matches Figma — tight, ~24.97px */
    letter-spacing: -1px;
    color: #000;
}
/* Per-word reveal masks (built by JS). Words stay in normal text flow so the
   paragraph always wraps naturally and never clips; each word rides up out of
   its own mask. padding/negative-margin leaves room for descenders. */
.short-intro__text .word-mask,
.rooms__title .word-mask,
.rooms__lead .word-mask,
.room-card__title .word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.2em;
    margin-bottom: -0.2em;
}
.short-intro__text .word,
.rooms__title .word,
.rooms__lead .word,
.room-card__title .word { display: inline-block; }

.short-intro__media {
    margin: 0;
    overflow: hidden;
    background: #d9d9d9;
}
.short-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Tall photo on the right — the highest element, kept at its natural ratio
   (not stretched) so the composition stays organic instead of boxed-in. */
.short-intro__media--lg {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    aspect-ratio: 625 / 680;
}
/* Smaller photo, lower-left — offset well down so its bottom drops below the
   tall photo, giving the staggered editorial rhythm from the design. */
.short-intro__media--sm {
    grid-column: 1;
    grid-row: 2;
    margin-top: clamp(64px, 16vw, 255px);
    align-self: start;
    aspect-ratio: 526 / 326;
}

@media (max-width: 900px) {
    .short-intro { padding: 48px 20px; }
    .short-intro__inner { grid-template-columns: 1fr; }
    .short-intro__text { grid-column: 1; grid-row: 1; margin-top: 0; max-width: none; }
    .short-intro__media--lg {
        grid-column: 1;
        grid-row: 2;
        margin-top: 24px;
        aspect-ratio: 625 / 680;
    }
    .short-intro__media--sm { grid-column: 1; grid-row: 3; margin-top: 24px; }
}

/* ---------- Short stay: "Everything you need" perks slider (Figma 32:153) ---------- */
.short-perks {
    position: relative;
    width: 100%;
    height: 100vh;   /* full-bleed band, same as the events slider */
    overflow: hidden;
    color: #fff;
}
.short-perks .perks-swiper,
.short-perks .swiper-wrapper { height: 100%; }
.perks-slide { position: relative; height: 100%; background: #d9d9d9; }
.perks-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark glass panel over the left side — solid black at the left edge, blurring
   the photo behind it, then fading out to the right so the image reads clean.
   The mask fades the blur on the same curve as the gradient tint. */
.short-perks__panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: min(86%, 980px);
    pointer-events: none;   /* keep the slider draggable through the panel */
    background: linear-gradient(90deg,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.66) 40%,
        rgba(0,0,0,0.30) 72%,
        rgba(0,0,0,0) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%);
}
.short-perks__inner {
    height: 100%;
    max-width: 620px;
    padding: clamp(48px, 5vw, 80px) clamp(24px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 7vw, 110px);
}
.short-perks__title {
    max-width: 544px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: normal;   /* matches Figma */
    letter-spacing: -3px;
}
.short-perks__list {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.6vw, 35px);
    max-width: 510px;
}
.short-perks__list-heading {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.2;
    letter-spacing: -1px;
}
.short-perks__list ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 17px;
}
.short-perks__list li {
    display: flex;
    align-items: flex-start;
    gap: 27px;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.2;
    letter-spacing: -1px;
}
.short-perks__dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: 0.4em;   /* nudge onto the first text line */
    border-radius: 100px;
    background: var(--pink);
}
/* Item text fills the row next to the dot (and wraps), so the .js-lines reveal
   has real lines to split. */
.short-perks__item { flex: 1; min-width: 0; }

/* Prev / next arrows — white circles bottom-right (mirrors the events slider). */
.short-perks__nav {
    position: absolute;
    right: clamp(20px, 5vw, 64px);
    bottom: clamp(24px, 5vw, 64px);
    z-index: 5;
    display: flex;
    gap: 12px;
}
.short-perks__arrow {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 100px;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, filter 0.2s;
}
.short-perks__arrow:hover { transform: translateY(-2px); filter: brightness(0.95); }
.short-perks__arrow.swiper-button-disabled { opacity: 0.45; cursor: default; transform: none; }

@media (max-width: 900px) {
    .short-perks { height: auto; min-height: 100vh; }
    .short-perks__panel {
        width: 100%;
        background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.45) 100%);
        -webkit-mask-image: none;
        mask-image: none;
    }
    .short-perks__inner { gap: 40px; }
    .short-perks__title { letter-spacing: -1.5px; }
    .short-perks__list li { gap: 16px; }
    .short-perks__arrow { width: 48px; height: 48px; }
}

/* Community variant (Figma 59:187) — same .short-perks chrome, but the panel
   pushes its title to the top and a lead paragraph to the bottom (no list),
   and the bottom-right nav row also carries a pink CTA pill before the
   white arrows. Used on the long-stays page only. */
.short-perks--community .short-perks__inner {
    justify-content: space-between;
    gap: 24px;
}
.short-perks__community-lead {
    max-width: 510px;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.2;
    letter-spacing: -1px;
    color: rgba(255, 255, 255, 0.92);
}
.short-perks--community .short-perks__nav {
    align-items: center;
    gap: clamp(16px, 2vw, 28px);
}
/* The .btn-pill is 60px tall — let it set the nav row height; the arrow
   buttons are 58px so they centre cleanly next to it. */
.short-perks--community .short-perks__cta { flex-shrink: 0; }
@media (max-width: 600px) {
    /* Stack CTA above the arrows so neither one squeezes its label. */
    .short-perks--community .short-perks__nav { flex-direction: column; align-items: flex-end; gap: 12px; }
}

/* ---------- Long stay: "Ilgalaikis gyvenimas" sticky perks (Figma 59:150) -----
   Two-column layout: the LEFT panel (heading + lead + pink CTA) is `position:
   sticky` so it pins in place once it reaches the top of the viewport, while
   the RIGHT column scrolls a vertical stack of cards past it. Each card is
   `.js-reveal`, so it fades + rises as it enters view (see main.js batcher).
   The grid is intentionally wider on the right (520fr / 820fr ≈ 39/61) so the
   cards feel like the section's focus. */
.long-perks {
    position: relative;
    width: 100%;
    background: #fff;
    color: #000;
    /* Horizontal padding only; vertical breathing room comes from the
       responsive .pt-200 / .pb-200 utilities applied on the section element. */
    padding: 0 clamp(24px, 5vw, 64px);
}
.long-perks__inner {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 520fr) minmax(0, 820fr);
    column-gap: clamp(32px, 5vw, 88px);
    align-items: start;                     /* sticky needs a non-stretching child */
}
.long-perks__panel {
    position: sticky;
    /* Vertically centres the panel inside the viewport once it pins, regardless
       of header height — feels like the design "anchors" the text while the
       cards scroll past. */
    top: max(120px, calc(50vh - 220px));
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.4vw, 32px);
    max-width: 616px;
}
.long-perks__title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -3px;
}
.long-perks__lead {
    max-width: 604px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -1px;
    color: #000;
}
/* Pink "Rezervuoti dabar" — .btn-pill already gives us the curved-fill hover
   (faces injected by JS); just left-align it in the flex column. */
.long-perks__cta {
    align-self: flex-start;
    margin-top: clamp(8px, 1.6vw, 24px);
}

/* Right-column stack: vertical list of cards. The gap is the only thing that
   meters how far apart they enter view as the user scrolls. */
.long-perks__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.2vw, 32px);
}
.long-perk-card {
    background: #f7f7f7;
    border-radius: 16px;
    padding: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 2.6vw, 32px);
    min-height: clamp(280px, 36vh, 380px);
    box-sizing: border-box;
}
.long-perk-card__icon {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    border-radius: 100px;
    background: rgba(255, 132, 160, 0.18);   /* #FF84A0 tinted disc */
    color: #FF84A0;                          /* SVG strokes via currentColor */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.long-perk-card__title {
    font-family: inherit;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -1.02px;
    max-width: 504px;
    color: #000;
}
.long-perk-card__body {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -1px;
    max-width: 504px;
    color: #000;
}

@media (max-width: 1100px) {
    .long-perks__inner { grid-template-columns: minmax(0, 460fr) minmax(0, 700fr); }
}
@media (max-width: 900px) {
    /* Horizontal only — .pt-200/.pb-200 already taper to ~64-90px on mobile. */
    .long-perks { padding: 0 20px; }
    .long-perks__inner {
        grid-template-columns: 1fr;
        row-gap: clamp(40px, 7vw, 64px);
        align-items: stretch;
    }
    /* Sticky off on mobile — the single column would otherwise feel "stuck" with
       nothing visually scrolling beside it. */
    .long-perks__panel { position: static; top: auto; max-width: none; }
    .long-perks__title { letter-spacing: -1.5px; }
    .long-perk-card { padding: 32px 28px; min-height: 0; }
}

/* ---------- Short stay: "More than a room" spaces slider (Figma 32:254) ---------- */
/* Reuses the homepage .spaces component as-is — same container (1440px / 40px
   gutter), cards, slider, nav and pill. Only the head typography differs from
   the homepage (Figma 32:254: a 52px heading in a wider text column). */
.spaces--short .spaces__intro { max-width: 968px; }
.spaces--short .spaces__title { font-size: clamp(32px, 4vw, 52px); line-height: normal; }
.spaces--short .spaces__lead { max-width: 687px; }

/* ---------- Short stay: location map (Figma 32:280 heading + 32:377 map) ---------- */
.location {
    background: #fff;
    color: #000;
}
.location__head {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(60px, 8vw, 100px) 40px clamp(32px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}
.location__title {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -3px;
    line-height: normal;
}
.location__lead {
    max-width: 579px;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 24px;
}
/* Full-bleed map band (the Figma map spans the whole 1440px frame). */
.location__map {
    position: relative;   /* anchors the no-key fallback */
    width: 100%;
    height: 70vh;
    background: #d9d9d9;
    z-index: 0;   /* keep map panes below the sticky topbar etc. */
}

/* Marker unit (rendered into a Google Maps OverlayView). The pin tip is anchored
   on the coordinate; the card floats up-and-right and tracks pan/zoom. */
.map-marker {
    position: absolute;
    width: 31px;
    pointer-events: none;                  /* let map drag/zoom through */
    transform: translate(-50%, -100%);     /* pin tip sits on the coordinate */
    z-index: 2;                            /* main marker (with card) sits above POIs */
}
.map-marker--poi { z-index: 1; }           /* nearby-place pins render behind the main one */
.map-marker__pin {
    position: relative;
    width: 31px;
    height: 31px;
    pointer-events: auto;                  /* re-enable on the pin only, so hover/tap reaches it */
    cursor: pointer;
}
.map-pin__chip {
    width: 31px;
    height: 31px;
    border-radius: 15.5px;
    background: #d9d8d9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.map-pin__icon { width: 17.71px; height: 17.71px; display: block; }
.map-pin__tip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -1px);
    width: 11.59px;
    height: 6.39px;
    display: block;
}
.map-marker .map-card {
    position: absolute;
    left: calc(100% + 10px);
    bottom: 0;
    /* Hidden by default — only revealed when the pin is hovered/focused/tapped. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    pointer-events: none;
}
.map-marker__pin:hover ~ .map-card,
.map-marker__pin:focus-visible ~ .map-card,
.map-marker.is-open .map-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

/* No-key / pre-init fallback: just show the address card, centered. */
.map-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Glassmorphic info card (Figma 32:407). */
.map-card {
    width: 277px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #d9d8d9;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #000;
}
.map-card__row {
    display: flex;
    align-items: center;
    gap: 11px;
}
.map-card__icon { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.map-card__name {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 24px;
}
.map-card__addr {
    font-size: 14px;
    letter-spacing: -1px;
    line-height: 20px;
}

/* ---------- Short stay: room types slider (Figma 32:283) ---------- */
/* White section with a left-aligned 52px heading + lead and a pink "Rezervuoti
   kambarį" pill on the right. Peek slider beneath shows ~2.4 cards on desktop
   so the next card hints from the gutter, same feel as the homepage spaces. */
.short-rooms {
    background: #fff;
    color: #000;
    padding: clamp(60px, 8vw, 100px) 40px clamp(60px, 8vw, 100px);
}
.short-rooms__head {
    max-width: 1440px;
    margin: 0 auto 64px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.short-rooms__intro {
    max-width: 858px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Figma 32:286 — 52px / -3px / bold. */
.short-rooms__title {
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -3px;
    line-height: normal;
}
/* Figma 32:287 — 20px / -1px / 24px line-height. */
.short-rooms__lead {
    max-width: 632px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 24px;
}
.short-rooms__carousel {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}
.short-rooms-swiper { overflow: hidden; }

/* Room card — Figma 548×530. Class is namespaced (.room-stay-card) to avoid
   colliding with the homepage .stay-card. Soft gradient at the bottom over the
   photo (same treatment as the homepage stay/space cards) — keeps the title
   legible without a heavy black band. */
.room-stay-card {
    position: relative;
    aspect-ratio: 548 / 530;
    overflow: hidden;
    background: #d9d9d9;
    color: #fff;
    isolation: isolate;
    height: auto;
}
.room-stay-card__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}
/* Gradient scrim — dark at the bottom, fading clear above the title. Mirrors
   the .stay-card::after and .space-card::after pattern in the same file. */
.room-stay-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 18%,
        rgba(0, 0, 0, 0.1) 36%,
        rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
}
.room-stay-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Exact Figma 32:297 spec — do NOT clamp; the design is pixel-tuned. */
.room-stay-card__title {
    color: #fff;
    font-size: 43.136px;
    font-weight: 700;
    line-height: 35.722px;    /* 82.813% */
    letter-spacing: -2.022px;
}
/* Exact Figma 32:296 spec. Medium (500), 70% opacity. */
.room-stay-card__sub {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 20.8px;      /* 130% */
    letter-spacing: -0.5px;
    opacity: 0.7;
}
.room-stay-card__chips {
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Glass amenity pill — same surface as the hero feature chips. */
.glass-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
    white-space: nowrap;
}
.glass-chip svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Slider nav — same circular buttons as .spaces__nav, magnet hook lives in JS. */
.short-rooms__nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3);
    transition: opacity 0.25s;   /* transform owned by GSAP (magnetic) */
}
.short-rooms__carousel:hover .short-rooms__nav { opacity: 1; }
.short-rooms__nav--prev { left: 8px; transform: translate(-50%, -50%); }
.short-rooms__nav--next { right: 8px; transform: translate(50%, -50%); }
.short-rooms__nav--prev:hover { transform: translate(-50%, -50%) scale(1.06); }
.short-rooms__nav--next:hover { transform: translate(50%, -50%) scale(1.06); }
.short-rooms__nav.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }

/* ---------- Short stay: final CTA banner (Figma 32:649) ---------- */
/* Full-bleed lounge photo (1438×908). A frosted-blur + dark-tint *band* covers
   the bottom ~69% of the section (Figma mask: y=282, height=626 of 908) —
   the top 31% stays sharp. Heading + pill sit centred inside the band. */
.short-cta {
    position: relative;
    width: 100%;
    aspect-ratio: 1438 / 908;     /* hold the Figma proportions */
    max-height: 90vh;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background: #111;
}
.short-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}
/* Gradient scrim — same treatment as .room-stay-card::after. Dark only at the
   bottom where the text + button sit, fading clear above. No blur. */
.short-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.35) 18%,
        rgba(0, 0, 0, 0.1)  36%,
        rgba(0, 0, 0, 0)    55%);
    pointer-events: none;
}
.short-cta__inner {
    position: absolute;
    /* Sit inside the blur band: Figma title at y=574 of 908 ≈ 63%, button at
       ≈ 87%. Centre-anchor on ~71% so both land inside the tinted area. */
    left: 50%;
    top: 71%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: min(760px, calc(100% - 80px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}
/* Figma 32:656 — 64px / bold / -3px tracking. */
.short-cta__title {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -3px;
    line-height: normal;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .topbar { padding: 20px 24px; }
    .topbar__right .pill:not(.pill--circle):first-child { display: none; }
    .booking { bottom: 30px; width: calc(100% - 32px); }
    .booking__bar { flex-direction: column; padding: 12px; gap: 10px; }
    .stay-toggle { width: 100%; }
    .stay-toggle__btn { flex: 1; }
    .field { width: 100%; }
    .btn--rooms { width: 100%; }
    .stays { padding: 40px 20px; }
    .stays__grid { grid-template-columns: 1fr; gap: 16px; }
    .rooms { padding: 24px 20px 60px; gap: 40px; }
    .rooms__carousel { height: 64vw; }
    .room-card { width: 86vw; }
    .room-card.is-prev { transform: translate(calc(-50% - 12%), -50%) scale(0.9); }
    .room-card.is-next { transform: translate(calc(-50% + 12%), -50%) scale(0.9); }
    .room-card__overlay { left: 20px; bottom: 24px; gap: 12px; }
    .room-card__chips { gap: 6px; }
    .chip { padding: 8px 10px; font-size: 13px; }
    .rooms__nav, .spaces__nav { width: 44px; height: 44px; opacity: 1; }
    .rooms__nav--prev { left: calc(50% - 86vw * 0.55); }
    .rooms__nav--next { left: calc(50% + 86vw * 0.55); }
    .short-rooms { padding: 60px 20px; }
    .short-rooms__head { flex-direction: column; gap: 24px; margin-bottom: 40px; }
    .short-rooms__title { font-size: 36px; letter-spacing: -2px; }
    .short-rooms__lead { font-size: 17px; line-height: 22px; }
    .short-rooms__nav { width: 44px; height: 44px; opacity: 1; }
    .room-stay-card__overlay { padding: 20px 24px 24px; gap: 6px; }
    .room-stay-card__title { font-size: 32px; line-height: 30px; letter-spacing: -1.5px; }
    .room-stay-card__chips { top: 20px; left: 20px; right: 20px; }
    .glass-chip { padding: 8px 10px; font-size: 13px; }
    .glass-chip svg { width: 16px; height: 16px; }
    .short-cta { aspect-ratio: auto; min-height: 520px; max-height: none; }
    .short-cta__inner { gap: 28px; }
    .short-cta__title { font-size: 36px; letter-spacing: -1.5px; }

    .spaces { padding: 24px 20px 60px; }
    .spaces__head { flex-direction: column; gap: 24px; margin-bottom: 40px; }
    .space-card__body { left: 24px; bottom: 24px; }
    .event-slide { height: 100vh; }
    .event-slide__inner { padding: 32px 20px 150px; }
    .events__cta { left: 20px; bottom: 24px; }
    .events__nav { right: 20px; bottom: 24px; gap: 10px; }
    .events__arrow { width: 48px; height: 48px; }

    /* Below the slider breakpoint the pin/slider is off (see main.js); the two
       cards become a simple stacked column that scrolls naturally. */
    .tiny { padding: 0 20px 60px; }
    .tiny__inner { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 0; }
    .tiny__gallery { aspect-ratio: auto; max-height: none; }
    .gallery-card { position: relative; inset: auto; aspect-ratio: 4 / 3; }
    .gallery-card + .gallery-card { margin-top: 16px; }
    .gallery-card__body { left: 24px; bottom: 24px; }

    /* Why-stack: rides on .tiny's column-fallback above; only tweak the
       chip overlay padding/sizing for narrow screens. */
    .gallery-card--why .why-card__title { top: 32px; left: 24px; right: 24px; }
    .gallery-card--why .why-card__chips { left: 20px; right: 20px; bottom: 20px; gap: 8px; }
    .why-chip { padding: 8px 10px; font-size: 13px; }

    .space-card__pills { left: 20px; top: 20px; }
    .pill-chip { font-size: 13px; padding: 7px 10px; }

    .postcard { padding: 24px 20px 60px; gap: 40px; }
    .postcard__carousel { height: 64vw; }
    .postcard-card { width: 86vw; }
    .postcard-card.is-prev { transform: translate(calc(-50% - 12%), -50%) scale(0.9); }
    .postcard-card.is-next { transform: translate(calc(-50% + 12%), -50%) scale(0.9); }
    .postcard-form { right: 20px; width: 45%; gap: 12px; }
    .postcard-form__row span { font-size: 14px; }
    .postcard__nav--prev { left: calc(50% - 86vw * 0.55); }
    .postcard__nav--next { left: calc(50% + 86vw * 0.55); }

    .contact { grid-template-columns: 1fr; }
    .contact__left { padding: 40px 20px; }
    .contact__right { min-height: 480px; }
    .contact__book { left: 20px; right: 20px; bottom: 32px; align-items: flex-start; text-align: left; }
    .contact__book-actions { flex-wrap: wrap; }

    .site-footer { padding: 56px 0 40px; }
    .site-footer__inner { padding: 0 20px; }
    .site-footer__top { flex-direction: column; align-items: flex-start; gap: 24px; }
    .site-footer__grid { grid-template-columns: 1fr; gap: 48px; padding: 40px 0; }
    .site-footer__cols { grid-template-columns: 1fr; }
    .footer-nav { grid-template-columns: 1fr 1fr; gap: 4px 24px; }
}

@media (max-width: 600px) {
    .topbar__logo img { height: 44px; }
    .topbar__right .pill--circle:first-of-type { display: none; }

    /* ---------- Buttons ---------- */
    /* Pink pill CTA — Figma desktop is 60px tall, too chunky on a phone. Trim
       height/padding/font; the curved-fill hover still works because the .btn-pill__face
       rules reference percentages, not the original 60px. */
    .btn-pill { height: 48px; border-radius: 40px; }
    .btn-pill__face { padding: 0 22px; font-size: 14px; letter-spacing: -0.4px; }
    /* Black "Book now" pill in the topbar — match the new pill scale. */
    .btn--solid { height: 32px; padding: 0 16px; font-size: 13px; }

    /* ---------- Peek sliders → single square card on mobile ---------- */
    /* Both .space-card and .room-stay-card are 548×530 on desktop (≈1.03:1).
       On phones the slider drops to slidesPerView: 1 (see main.js) — make the
       card a true square so it reads as a tile, not a stretched panel. */
    .space-card,
    .room-stay-card { aspect-ratio: 1 / 1; }

    /* Tighter copy on the smaller card. */
    .space-card__body { left: 20px; right: 20px; bottom: 20px; }
    .space-card__title { font-size: 26px; letter-spacing: -1.2px; }
    .space-card__subtitle { font-size: 14px; letter-spacing: -0.3px; }
    .room-stay-card__overlay { padding: 16px 20px 20px; gap: 4px; }
    .room-stay-card__title { font-size: 26px; line-height: 26px; letter-spacing: -1.2px; }
    .room-stay-card__sub { font-size: 14px; line-height: 18px; letter-spacing: -0.3px; }
    .room-stay-card__chips { top: 16px; left: 16px; right: 16px; gap: 6px; }

    /* Arrows are redundant once pagination dots show — drop them so the thumb
       has the whole card to swipe. Applies to spaces / friends / short-rooms. */
    .spaces__nav,
    .friends__nav--prev,
    .friends__nav--next,
    .short-rooms__nav { display: none; }

    /* Side gutter on the slider section so the square card has breathing room
       at the very edge of the viewport, without overflowing horizontally. */
    .spaces { padding-left: 16px; padding-right: 16px; }
    .short-rooms { padding-left: 16px; padding-right: 16px; }

    /* Section heads: stack the pink pill under the title so it never overlaps
       a long Lithuanian heading on a narrow screen. */
    .spaces__head,
    .short-rooms__head { gap: 20px; margin-bottom: 32px; }

    /* ---------- Homepage "Our rooms" coverflow → single square card ---------- */
    /* The coverflow keeps three cards stacked (prev/active/next) on every
       breakpoint; on a phone the peek cards squeeze the active one and the
       widescreen 1046/625 aspect leaves big empty bands. Hide the side cards,
       square the active card, switch the arrows for dots — same shape as the
       spaces/rooms sliders above so the page reads as one system. */
    .rooms { gap: 32px; padding: 24px 16px 60px; }
    .rooms__carousel { height: calc(100vw - 32px); }
    .room-card {
        width: calc(100vw - 32px);
        aspect-ratio: 1 / 1;
    }
    /* `display: none` would yank them from the coverflow click handler — keep
       them in flow but visually retired so only the centre card shows. */
    .room-card.is-prev,
    .room-card.is-next {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: none;
    }
    .rooms__nav { display: none; }
    .rooms__pagination { display: inline-flex; }
    /* Tighter overlay copy + chips for the smaller card. */
    .room-card__overlay { left: 20px; right: 20px; bottom: 20px; gap: 12px; }
    .room-card__title { font-size: 26px; letter-spacing: -1.2px; }
    .rooms .room-card__dots { right: 16px; bottom: 16px; }
}

/* ---------- Utilities ---------- */
/* Big top breathing room between blocks, dialed back on smaller screens. Sets
   only padding-top (each section keeps its own bottom + horizontal padding).
   Lives at the end of the file so it wins over each section's `padding`
   shorthand and the responsive overrides above. */
.pt-200 {
    padding-top: 200px;
}
@media (max-width: 1024px) {
    .pt-200 { padding-top: 130px; }
}
@media (max-width: 768px) {
    .pt-200 { padding-top: 90px; }
}
@media (max-width: 600px) {
    .pt-200 { padding-top: 64px; }
}

/* Same scale as .pt-200, but as outer spacing. Margin is transparent and
   `body` is `#111`, so this reveals a dark band above the section. Only
   reach for it when the previous section is also dark; otherwise put
   `.pb-200` on the previous (lighter) section so the gap inherits its bg. */
.mt-200 {
    margin-top: 200px;
}
@media (max-width: 1024px) {
    .mt-200 { margin-top: 130px; }
}
@media (max-width: 768px) {
    .mt-200 { margin-top: 90px; }
}
@media (max-width: 600px) {
    .mt-200 { margin-top: 64px; }
}

.pb-200 {
    padding-bottom: 200px;
}
@media (max-width: 1024px) {
    .pb-200 { padding-bottom: 130px; }
}
@media (max-width: 768px) {
    .pb-200 { padding-bottom: 90px; }
}
@media (max-width: 600px) {
    .pb-200 { padding-bottom: 64px; }
}

/* ---------- Menu overlay ---------- */
/* Full-screen menu opened from the topbar hamburger. Left half is solid black
   (grouped nav list); right half is glassmorphism over the blurred page with a
   frosted card (the booking/calendar slot). The topbar is left untouched and
   floats above the overlay while open — the hamburger morphs into an X. Each
   link rises out of its mask on open (.js-menu in main.js). Nothing scales. */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    background: rgba(0, 0, 0, 0.4);          /* full-screen frosted blur over the page */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.menu-overlay[hidden] { display: none; }

.menu-overlay__panel { height: 100%; }
.menu-overlay__panel--dark {
    position: relative;
    z-index: 1;                  /* solid black sits OVER the full-screen blur */
    flex: 1 1 52%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow-y: auto;            /* scrolls instead of clipping if the list is taller than the screen */
    padding: 120px 7vw;
    background: #050505;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08);   /* hairline seam against the blur */
}
.menu-overlay__panel--glass {       /* transparent — just shows the overlay's blur + holds the card */
    flex: 1 1 48%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 132px 48px 64px;
}

.menu-nav {
    display: flex;
    flex-direction: column;
    gap: 49px;                   /* between groups (Figma) */
    width: 100%;
    max-width: 480px;
    margin-block: auto;          /* my-auto → vertically centered in the panel */
}
.menu-nav__group { display: flex; flex-direction: column; gap: 13px; }   /* within a group (Figma) */
.menu-nav__link {
    display: block;
    width: max-content;
    max-width: 100%;
    text-decoration: none;
    transition: transform 0.45s var(--ease-out);
}
.menu-nav__mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}
.menu-nav__rise {
    display: inline-block;
    color: #fff;
    font-family: 'Objectivity', sans-serif;
    font-size: 37.367px;
    font-weight: 700;
    line-height: 46.976px;
    letter-spacing: -2.135px;
    transition: color 0.25s var(--ease-out);
    will-change: transform;
}

.menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: min(420px, 86%);
    aspect-ratio: 5 / 6;
    padding: 40px;
    text-align: center;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.menu-card__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.menu-card__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
}
.menu-card__book { margin-top: 6px; }

/* Topbar floats above the overlay while open; the hamburger morphs into an X.
   `.topbar__menu { position: relative }` is the only always-on addition (no
   visible change closed) — everything else applies only in the open state. */
.topbar__menu { position: relative; }
.topbar__menu svg { transition: opacity 0.25s var(--ease-out); }
.topbar__menu::before,
.topbar__menu::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: translate(-50%, -50%) scaleX(0);
    transition: transform 0.4s var(--ease-out);
}
/* Lift the topbar above the overlay WITHOUT moving it — no position change, so
   the logo never shifts or doubles. Scroll is held by lenis.stop() in main.js. */
body.is-menu-open .topbar { z-index: 1000; }
body.is-menu-open .topbar__menu svg { opacity: 0; }
body.is-menu-open .topbar__menu::before { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
body.is-menu-open .topbar__menu::after  { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); }

@media (hover: hover) and (pointer: fine) {
    .menu-nav__link:hover { transform: translateX(14px); }
    .menu-nav__link:hover .menu-nav__rise { color: var(--pink); }
}

@media (prefers-reduced-motion: reduce) {
    .topbar__menu::before,
    .topbar__menu::after,
    .topbar__menu svg,
    .menu-nav__link,
    .menu-nav__rise { transition: none; }
}

@media (max-width: 900px) {
    .menu-overlay { flex-direction: column; }
    .menu-overlay__panel--dark { flex: 1 1 auto; padding: 104px 24px 32px; }
    .menu-overlay__panel--glass { display: none; }
    .menu-nav { gap: 32px; max-width: none; }
    .menu-nav__group { gap: 8px; }
    /* Scale the (exact-spec) type down so it never overflows a narrow phone. */
    .menu-nav__rise { font-size: 30px; line-height: 38px; letter-spacing: -1.6px; }
}
@media (max-width: 600px) {
    .menu-nav__rise { font-size: 26px; line-height: 33px; letter-spacing: -1.3px; }
}