/* Village Iveria: the fifteen blocks, doors, modal, lightbox, preloader. Loaded with project-motion.css. */

/* Page-level behaviour (spec F2: scrolling, scrollbar, preloader). */
html.has-project-motion {
    scrollbar-width: thin;
    scrollbar-color: var(--village-cypress) var(--village-limestone);
}
html.has-project-motion::-webkit-scrollbar { width: 6px; }
html.has-project-motion::-webkit-scrollbar-track { background: var(--village-limestone); }
html.has-project-motion::-webkit-scrollbar-thumb { background: var(--village-cypress); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.vb-modal-open { overflow: hidden; }

.vb-loader {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: center; justify-content: center;
    background: var(--village-linen); color: var(--village-cypress);
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(32px, 5vw, 56px); font-weight: 500; letter-spacing: .01em;
    opacity: 1; transition: opacity .6s ease;
}
html.vb-loading .vb-loader { display: flex; }
.vb-loader.is-done { opacity: 0; pointer-events: none; }
.vb-loader span { animation: vb-loader-in 1s ease both; }
@keyframes vb-loader-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hero additions: sound toggle and scroll-down line. */
.project-motion .project-video { position: relative; }
.vb-sound {
    position: absolute; right: max(1rem, 3vw); bottom: max(1rem, 3vw); z-index: 3;
    font: 500 12px/1 var(--font-sans, 'Alegreya Sans', sans-serif); letter-spacing: .12em; text-transform: uppercase;
    color: var(--village-cypress); background: rgba(246, 241, 232, .92); border: 1px solid var(--village-rule);
    padding: .7rem 1rem; cursor: pointer; border-radius: 0;
}
.vb-sound:hover, .vb-sound:focus-visible { color: var(--village-wine); }
.vb-scroll-line {
    position: absolute; left: 50%; bottom: 0; width: 1px; height: 56px; z-index: 3;
    background: var(--village-linen); opacity: .9; transform-origin: top;
    animation: vb-scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes vb-scroll-pulse { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
.project-motion .project-detail__intro .vb-link { margin-top: .5rem; }

/* Shared type and tokens. */
.vb {
    --vb-gutter: max(1.5rem, 6vw);
    --vb-block: clamp(4rem, 9vw, 8rem);
    --vb-ease: cubic-bezier(.22, 1, .36, 1);
    color: var(--village-cypress); background: var(--village-linen);
    font-family: var(--font-sans, 'Alegreya Sans', sans-serif); font-size: 17px; line-height: 1.55;
}
.vb h2, .vb h3 { margin: 0; font-weight: 500; text-wrap: balance; }
.vb p { margin: 0; }
.vb-eyebrow {
    font-family: var(--font-sans, 'Alegreya Sans', sans-serif); font-size: 12px; line-height: 1.3; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: var(--village-olive);
    padding-top: .75rem; border-top: 1px solid var(--village-rule); display: inline-block; min-width: 9em;
}
.vb-block__title { font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-size: clamp(32px, 4vw, 40px); line-height: 1.1; }
.vb-block__body { max-width: 62ch; }
.vb-block__body--large { font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; max-width: 34ch; }
.vb-link {
    display: inline-block; position: relative; padding-bottom: .3rem;
    font-family: var(--font-sans, 'Alegreya Sans', sans-serif); font-size: 13px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--village-cypress);
}
.vb-link::before, .vb-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; }
.vb-link::before { background: var(--village-rule); }
.vb-link::after { background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--vb-ease); }
.vb-link:hover::after, .vb-link:focus-visible::after { transform: scaleX(1); }
.vb-link:hover, .vb-link:focus-visible { color: var(--village-wine); outline: none; }
.vb-link--small { font-size: 11px; }
.vb-block__links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.vb-tbc { color: var(--village-olive); font-variant-numeric: tabular-nums; }
.vb-caption { font-size: 14px; line-height: 1.45; color: var(--village-olive); margin-top: .5rem; }
.vb-caption--on-media {
    position: absolute; right: 1rem; bottom: 1rem; margin: 0; font-size: 12px;
    background: rgba(246, 241, 232, .92); color: var(--village-cypress); padding: .25rem .5rem;
}
html.has-project-motion[lang='ka'] :is(.vb-eyebrow, .vb-link, .vb-sound, .vb-tab, .vb-event__label) { text-transform: none; letter-spacing: .02em; }
html.has-project-motion[lang='ka'] .vb { line-height: 1.65; }
html.has-project-motion[lang='ka'] .vb :is(h2, h3) { line-height: 1.2; }

.vb figure { margin: 0; }
.vb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vb-block__media { position: relative; }
.vb-block__media img { aspect-ratio: 4 / 3; }
.vb-parallax { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.vb-parallax img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
.vb-parallax .vb-caption { position: absolute; right: 1rem; bottom: 1rem; margin: 0; font-size: 12px; background: rgba(246, 241, 232, .92); color: var(--village-cypress); padding: .25rem .5rem; }

/* Three doors. */
.vb-doors { background: var(--village-limestone); padding: clamp(2rem, 5vw, 4rem) var(--vb-gutter); }
.vb-doors__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 4rem; }
.vb-doors__item { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--village-rule); }
.vb-doors__index { font-size: 12px; letter-spacing: .1em; color: var(--village-olive); font-variant-numeric: tabular-nums; }
.vb-doors__title { font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 28px; line-height: 1.2; font-weight: 600; }
.vb-doors__links { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: baseline; }
.vb-doors__links a { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--village-cypress); border-bottom: 1px solid var(--village-cypress); padding-bottom: 2px; }
.vb-doors__links a:hover, .vb-doors__links a:focus-visible { color: var(--village-wine); border-color: var(--village-wine); }
.vb-doors__title .vb-tbc { font-family: var(--font-sans, sans-serif); font-size: 13px; font-weight: 400; display: block; }
@media (min-width: 720px) { .vb-doors__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Block frame. */
.vb-block { padding: var(--vb-block) var(--vb-gutter); display: grid; gap: 2rem 5%; align-items: center; }
.vb-block + .vb-block { border-top: 1px solid var(--village-rule); }
/* Keep the Houses and Table sections closer together. */
.vb #vb-houses { padding-bottom: clamp(1.5rem, 3vw, 3rem); }
.vb #vb-houses + #vb-table { padding-top: clamp(1.5rem, 3vw, 3rem); }
.vb-block__text { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.vb-block__text--centred { text-align: center; justify-items: center; margin-inline: auto; max-width: 60ch; }
.vb-block__text--centred .vb-block__body { max-width: 52ch; }

/* Big text beside an image; text beside a large image. */
@media (min-width: 900px) {
    .vb-block--big-text-image, .vb-block--text-image { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
    .vb-block--text-image { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
    .vb-block--reverse .vb-block__text { order: 2; }
    .vb-block--reverse .vb-block__media { order: 1; }
    .vb-block--top { align-items: start; }
    .vb-block--top .vb-block__text { padding-top: 1rem; }
    .vb-block--big-text-image .vb-block__title { font-size: clamp(40px, 4.6vw, 56px); }
}
.vb-block__media--large img { aspect-ratio: 3 / 2; }

/* Two columns, then the pair. */
.vb-block__pair { display: grid; gap: 1.5rem; }
.vb-block__pair img { aspect-ratio: 4 / 5; }
@media (min-width: 720px) {
    .vb-block__pair { grid-template-columns: 1fr 1fr; align-items: start; }
    .vb-block__pair figure:nth-child(2) { margin-top: 3rem; }
}
@media (min-width: 900px) { .vb-block--50-50 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }

/* The four cards: a pinned sideways gallery on desktop, a swipe row elsewhere. */
.vb-cards { position: relative; padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); background: var(--village-linen); border-top: 1px solid var(--village-rule); }
.vb-cards__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vb-cards__viewport::-webkit-scrollbar { display: none; }
.vb-cards__track { list-style: none; margin: 0; padding: 0 var(--vb-gutter); display: flex; gap: clamp(1.25rem, 3vw, 3rem); width: max-content; }
.vb-card { display: grid; gap: .9rem; align-content: start; width: min(78vw, 420px); scroll-snap-align: start; }
.vb-card__media img { aspect-ratio: 4 / 3; }
.vb-card__title { font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 28px; line-height: 1.2; font-weight: 600; }
.vb-card__body { font-size: 16px; line-height: 1.5; }
.vb-cards__caption { padding: .75rem var(--vb-gutter) 0; }
/* Pinned state: the section holds and vertical scroll drives the cards sideways (desktop and phones; tablets keep the swipe row). */
.vb-cards.is-pinned { min-height: calc(100svh - var(--motion-mobile-header, 72px)); display: flex; flex-direction: column; justify-content: center; padding-block: 0; overflow: hidden; }
.vb-cards.is-pinned .vb-cards__viewport { overflow: hidden; scroll-snap-type: none; }
.vb-cards.is-pinned .vb-cards__track { will-change: transform; }
.vb-cards.is-pinned .vb-cards__caption { padding-top: 1rem; }
@media (min-width: 768px) { .vb-card { width: min(46vw, 460px); } }
@media (min-width: 1025px) {
    .vb-card { width: 34vw; }
    .vb-cards.is-pinned .vb-card:nth-child(even) { margin-top: 3rem; }
}

/* Full-bleed still with centred text; full-bleed with text bottom left; text first then media. */
.vb-block--full-media, .vb-block--full-image { padding-inline: 0; gap: 0; display: block; }
.vb-block__bleed { position: relative; }
.vb-block__bleed img { aspect-ratio: 16 / 9; min-height: 60svh; max-height: 90svh; }
.vb-block--full-media .vb-block__text--centred, .vb-block--full-image .vb-block__text--bottom-left {
    position: relative; background: var(--village-linen); padding: clamp(2rem, 4vw, 3rem); margin-top: -3rem;
}
.vb-block--full-media .vb-block__text--centred { margin-inline: auto; width: min(92%, 640px); }
.vb-block--full-image .vb-block__text--bottom-left { margin-left: var(--vb-gutter); margin-right: var(--vb-gutter); }
@media (min-width: 900px) {
    .vb-block--full-image .vb-block__text--bottom-left { width: min(50%, 560px); margin-top: -6rem; margin-right: auto; }
    .vb-block--full-media .vb-block__text--centred { margin-top: -6rem; }
}
.vb-block--text-first .vb-block__text--centred { margin: 0 auto clamp(2rem, 5vw, 4rem); padding: 0 var(--vb-gutter); }
.vb-block--text-first { padding-top: var(--vb-block); }

/* Two images in 5:7, then the long text. */
.vb-block--57 { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.vb-block__duo { display: grid; gap: 1.5rem; }
.vb-block__duo .vb-parallax { aspect-ratio: 5 / 7; }
@media (min-width: 900px) {
    .vb-block__duo { grid-template-columns: 58fr 32fr; column-gap: 10%; align-items: start; }
    .vb-block__duo figure:nth-child(2) { margin-top: 18%; }
    .vb-block__text--long { justify-self: end; max-width: 40ch; }
}

/* Text beside a video, animated; the media reveals after the lines. */
@media (min-width: 900px) { .vb-block--animated { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Gallery grid. */
.vb-grid { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vb-grid img { aspect-ratio: 1 / 1; }
.vb-grid .vb-caption { font-size: 12px; }
@media (min-width: 900px) { .vb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1rem; } }

/* Dated cards. */
.vb-block--whatson { display: grid; gap: 2.5rem; }
.vb-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2rem; grid-column: 1 / -1; }
.vb-event { display: grid; gap: .5rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--village-rule); }
.vb-event__date { font-size: 13px; letter-spacing: .04em; }
.vb-event__label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--village-olive); }
.vb-event__title { font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 24px; line-height: 1.2; font-weight: 600; }
@media (min-width: 720px) { .vb-events { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vb-belief {
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-style: italic; font-size: clamp(24px, 3vw, 32px); line-height: 1.3;
    text-align: center; padding: var(--vb-block) var(--vb-gutter); border-top: 1px solid var(--village-rule); text-wrap: balance;
}

/* Fixed "Ask us" button (the one filled button). */
.vb-tab {
    position: fixed; right: 0; top: 50%; z-index: 35;
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
    background: var(--village-cypress); color: var(--village-linen);
    padding: 1.1rem .8rem; font: 500 12px/1 var(--font-sans, 'Alegreya Sans', sans-serif);
    letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 6px 20px rgba(38, 59, 50, .18);
}
.vb-tab:hover, .vb-tab:focus-visible { background: var(--village-wine); color: var(--village-linen); outline: none; }

/* Modals: "Ask us" and the film lightbox. */
.vb-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
.vb-modal[hidden] { display: none; }
.vb-modal__backdrop { position: absolute; inset: 0; background: rgba(38, 59, 50, .6); }
.vb-modal__panel {
    position: relative; width: min(100%, 680px); max-height: calc(100svh - 2rem); overflow: auto;
    background: var(--village-linen); color: var(--village-cypress); padding: clamp(1.5rem, 4vw, 2.5rem);
    display: grid; gap: 1rem; align-content: start;
}
.vb-modal__panel--film { width: min(100%, 1200px); padding: 0; background: var(--village-cypress); overflow: visible; }
.vb-modal__close {
    position: absolute; right: .5rem; top: .5rem; width: 2.5rem; height: 2.5rem; z-index: 2;
    font: 24px/1 var(--font-sans, sans-serif); background: var(--village-linen); color: var(--village-cypress);
    border: 1px solid var(--village-rule); cursor: pointer; border-radius: 0;
}
.vb-modal__panel--film .vb-modal__close { right: 0; top: -3rem; }
.vb-modal__title { font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif); font-size: 36px; line-height: 1.1; }
.vb-modal__intro { color: var(--village-olive); }
.vb-film { aspect-ratio: 16 / 9; width: 100%; background: #000; }
.vb-film iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Form. */
.vb-form { display: grid; gap: 1rem; }
.vb-form__row { display: grid; gap: 1rem; }
@media (min-width: 600px) { .vb-form__row { grid-template-columns: 1fr 1fr; } }
.vb-form__field { display: grid; gap: .35rem; font-size: 13px; color: var(--village-olive); letter-spacing: .04em; }
.vb-form__field input, .vb-form__field select, .vb-form__field textarea {
    font: inherit; font-size: 16px; color: var(--village-cypress); background: transparent;
    border: 0; border-bottom: 1px solid var(--village-cypress); padding: .5rem 0; border-radius: 0; width: 100%;
}
.vb-form__field select { appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.vb-form__field textarea { resize: vertical; min-height: 6rem; }
.vb-form__field :is(input, select, textarea):focus-visible { outline: none; border-bottom-color: var(--village-wine); box-shadow: 0 1px 0 var(--village-wine); }
.vb-form__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: 14px; }
.vb-form__consent input { margin-top: .25rem; accent-color: var(--village-cypress); }
.vb-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vb-form__error { color: var(--village-wine); font-size: 14px; }
.vb-form__thanks { border-left: 2px solid var(--village-olive); padding: .5rem 1rem; font-size: 17px; }
.vb-button {
    justify-self: start; font: 500 13px/1 var(--font-sans, 'Alegreya Sans', sans-serif); letter-spacing: .12em; text-transform: uppercase;
    background: var(--village-cypress); color: var(--village-linen); border: 1px solid var(--village-cypress);
    padding: 1rem 1.6rem; cursor: pointer; border-radius: 0;
}
.vb-button:hover, .vb-button:focus-visible { background: var(--village-wine); border-color: var(--village-wine); outline: none; }

@media (prefers-reduced-motion: reduce) {
    .vb-link::after { transition: none; }
    .vb-scroll-line, .vb-loader span { animation: none; }
    .vb-loader { transition: none; }
}