/* ==========================================================================
   Retreat Funnel — Reveal pages (pieces 1–5) — shared styles
   Inherits the site design system (main.css): --primary-color #33443c,
   --sfondo-color #efe9df, Quattrocento (headings) + Montserrat (body).
   Self-contained: reveal pages do NOT load retreat-waitlist.css.
   ========================================================================== */

/* The inherited $head hides the page via `html.js-loading { opacity: 0 }` and
   relies on a jQuery footer script to remove the class. These standalone pages
   load neither jQuery nor that footer, so force the page visible (works even
   with JS disabled). Higher specificity than the inherited `.js-loading` rule. */
html.js-loading {
    opacity: 1;
}

.retreat-reveal {
    background-color: var(--sfondo-color);
    color: var(--paragraph-color);
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
}

.retreat-reveal h1,
.retreat-reveal h2,
.retreat-reveal h3 {
    font-family: "Quattrocento", serif;
    color: var(--primary-color);
    margin: 0;
}

.retreat-reveal section {
    padding: 96px 0;
    position: relative;
}

/* Alternating band for scroll rhythm */
.rv-story,
.rv-next {
    background-color: #e6dfd1;
}

.rv-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    opacity: 0.75;
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   Progress — 5 dots, 1..N filled
   -------------------------------------------------------------------------- */
.rv-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto 1.75rem;
}

.rv-progress-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid rgba(51, 68, 60, 0.45);
    background: transparent;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.rv-progress-dot.is-filled {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   1. UNLOCK / HERO
   -------------------------------------------------------------------------- */
.rv-unlock {
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(51, 68, 60, 0.06) 0%, rgba(51, 68, 60, 0) 60%),
        var(--sfondo-color);
}

.rv-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.12;
    margin-bottom: 1.25rem;
}

.rv-hero-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
    color: var(--paragraph-color);
}

/* --------------------------------------------------------------------------
   Shared section titles / body copy
   -------------------------------------------------------------------------- */
.rv-section-title {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.rv-text {
    font-size: 1.08rem;
    line-height: 1.85;
    max-width: 660px;
    margin: 0 auto 1.35rem;
}

.rv-text:last-child {
    margin-bottom: 0;
}

.rv-lead-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: 0 18px 45px rgba(51, 68, 60, 0.16);
}

/* --------------------------------------------------------------------------
   3. VIDEO — 9:16 smartphone mockup + click-to-load facade
   -------------------------------------------------------------------------- */
.rv-video {
    text-align: center;
}

/* Air between the title and the phone. It is padding and not margin on purpose:
   `.retreat-reveal h1, h2, h3 { margin: 0 }` up at line 23 has two simple selectors
   and therefore beats `.rv-section-title` (one), so every margin-bottom written on
   a title class is dead on arrival. Padding is not in that fight. */
.rv-video .rv-section-title {
    padding-bottom: 15px;
}

.rv-phone {
    width: 280px;
    max-width: 78vw;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    padding: 10px;
    background: #171717;
    border-radius: 40px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35), inset 0 0 0 2px #2c2c2c;
    position: relative;
}

/* notch */
.rv-phone::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 22px;
    background: #171717;
    border-radius: 0 0 14px 14px;
    z-index: 3;
}

.rv-phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: #000;
}

.rv-video-facade {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.rv-video-facade .rv-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rv-video-facade iframe,
.rv-phone-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.rv-video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 0;
    background: rgba(51, 68, 60, 0.88);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.rv-video-play:hover {
    transform: scale(1.08);
    background: var(--primary-color);
}

.rv-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 19px;
    border-color: transparent transparent transparent #fff;
}

.rv-video-caption {
    margin-top: 1.5rem;
    font-style: italic;
    font-size: 0.95rem;
    color: #6b6b6b;
}

/* --------------------------------------------------------------------------
   4. GALLERY CAROUSEL — rendered only when the page has photos

   A scroll-snap track: swipe, trackpad and the native scrollbar all work with
   zero JS. The arrows and dots are progressive enhancement — retreat-reveal.js
   adds `.is-ready`, which reveals them AND hides the scrollbar. Without JS the
   scrollbar stays visible, so the track is never a dead end (same spirit as the
   js-loading fix at the top of this file: the page must work unaided).
   -------------------------------------------------------------------------- */
.rv-carousel-section {
    text-align: center;
}

.rv-carousel {
    /* One source of truth for the caption block below each photo: the arrows
       subtract it so they centre on the image, not on image + caption.
       In rem, not em — the arrows and the caption have different font sizes. */
    --rv-caption-height: 2.5rem; /* two lines of caption at 0.95rem/1.3 */
    --rv-caption-gap: 1.1rem;
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}

/* No captions on this page: reclaim the strip the arrows were offset against. */
.rv-carousel.has-no-captions {
    --rv-caption-height: 0rem;
    --rv-caption-gap: 0rem;
}

.rv-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.rv-carousel.is-ready .rv-carousel-viewport {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rv-carousel.is-ready .rv-carousel-viewport::-webkit-scrollbar {
    display: none;
}

/* No JS (or a script that failed to load) means no arrows and no dots. The
   <noscript> hint in the markup is what actually tells those visitors the track
   scrolls — NOT the scrollbar: measured in Chrome, an overlay scrollbar occupies
   0px and stays invisible until mid-gesture, and no CSS talks it out of that.
   This rule only slims the bar down on platforms that do draw a classic one.
   Do NOT add `scrollbar-width` here: since Chrome 121 the standard property
   switches OFF ::-webkit-scrollbar styling entirely. */
.rv-carousel:not(.is-ready) .rv-carousel-viewport::-webkit-scrollbar {
    height: 8px;
}

.rv-carousel:not(.is-ready) .rv-carousel-viewport::-webkit-scrollbar-track {
    background: rgba(51, 68, 60, 0.12);
    border-radius: 4px;
}

.rv-carousel:not(.is-ready) .rv-carousel-viewport::-webkit-scrollbar-thumb {
    background: rgba(51, 68, 60, 0.45);
    border-radius: 4px;
}

/* The viewport is the keyboard target (tabindex=0), so the ring goes there. */
.rv-carousel-viewport:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 5px;
    border-radius: 12px;
}

.rv-carousel-track {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rv-carousel-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.rv-carousel-figure {
    margin: 0;
}

.rv-carousel-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    background-color: #e6dfd1;
    box-shadow: 0 18px 45px rgba(51, 68, 60, 0.16);
}

/* Portrait variant. Forcing a 2:3 source into the 3:2 frame keeps only 44% of its
   height — measured — which decapitates a standing figure. 4:5 keeps 83%, so a
   gallery of vertical photographs opts into this instead of being butchered. The
   frame is narrower to compensate, or a tall slide would dominate the page. */
.rv-carousel--portrait {
    max-width: 540px;
}

.rv-carousel--portrait .rv-carousel-image {
    aspect-ratio: 4 / 5;
}

.rv-carousel-caption {
    min-height: var(--rv-caption-height);
    margin: var(--rv-caption-gap) 0 0;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.3;
    color: #6b6b6b;
}

.rv-carousel-noscript {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: #6b6b6b;
}

/* Controls: hidden until JS confirms they do something. */
.rv-carousel-nav,
.rv-carousel-dots {
    display: none;
}

.rv-carousel.is-ready .rv-carousel-nav {
    display: block;
}

.rv-carousel.is-ready .rv-carousel-dots {
    display: flex;
}

.rv-carousel-nav {
    position: absolute;
    top: 0;
    bottom: calc(var(--rv-caption-height) + var(--rv-caption-gap));
    margin: auto 0;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(51, 68, 60, 0.85);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.rv-carousel-nav:hover:not(:disabled) {
    background: var(--primary-color);
    transform: scale(1.07);
}

.rv-carousel-nav:disabled {
    opacity: 0.28;
    cursor: default;
}

.rv-carousel-nav.is-prev {
    left: 14px;
}

.rv-carousel-nav.is-next {
    right: 14px;
}

/* chevron */
.rv-carousel-nav::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.rv-carousel-nav.is-next::after {
    transform: translate(-60%, -50%) rotate(45deg);
}

.rv-carousel-nav.is-prev::after {
    transform: translate(-40%, -50%) rotate(-135deg);
}

/* Bars, deliberately NOT circles: the piece-progress indicator above is five
   dots, and this gallery can also hold five photos. Different shape, so the
   two are never read as the same thing. */
.rv-carousel-dots {
    justify-content: center;
    gap: 8px;
    margin-top: 1.35rem;
}

.rv-carousel-dot {
    position: relative;
    width: 34px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.rv-carousel-dot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
    background: rgba(51, 68, 60, 0.28);
    transition: background-color 0.25s ease;
}

.rv-carousel-dot.is-active::after {
    background: var(--primary-color);
}

.rv-carousel-dot:hover::after {
    background: rgba(51, 68, 60, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .rv-carousel-viewport {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------
   Apartments — the four-card grid under the gallery (used by piece 5 only).
   Sits on the darker band so the light cards read as cards; the grid resolves
   to 2×2 on desktop and a single column on phones.
   -------------------------------------------------------------------------- */
.rv-apartments {
    background-color: #e6dfd1;
    text-align: center;
}

.rv-apartment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 860px;
    margin: 3rem auto 0;
    text-align: left;
}

/* Padding lives on .rv-apartment-body, not here: the card's carousel bleeds to
   the edges and overflow:hidden is what rounds its corners. */
.rv-apartment-card {
    background-color: var(--sfondo-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(51, 68, 60, 0.1);
}

.rv-apartment-body {
    padding: 22px 30px 28px;
}

.rv-apartment-name {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}

.rv-apartment-meta {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-color);
    opacity: 0.75;
    margin-bottom: 0.9rem;
}

.rv-apartment-text {
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 0.9rem;
}

.rv-apartment-beds {
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(51, 68, 60, 0.15);
}

.rv-apartments-outro {
    margin-top: 3rem;
}

/* Card variant of the carousel: the same component, shrunk to sit at the top of
   an apartment card. The image bleeds to the card's edges, the controls scale
   down, and there are no captions — the card body right below IS the caption.
   Pair it with .has-no-captions so the arrows centre on the image. */
.rv-carousel--card {
    max-width: none;
}

.rv-carousel--card .rv-carousel-image {
    border-radius: 0;
    box-shadow: none;
}

.rv-carousel--card .rv-carousel-viewport:focus-visible {
    outline-offset: -3px;
    border-radius: 0;
}

.rv-carousel--card .rv-carousel-nav {
    width: 34px;
    height: 34px;
}

.rv-carousel--card .rv-carousel-nav::after {
    width: 9px;
    height: 9px;
}

.rv-carousel--card .rv-carousel-nav.is-prev {
    left: 10px;
}

.rv-carousel--card .rv-carousel-nav.is-next {
    right: 10px;
}

/* Narrower bars: Pergola runs to ten photos, and ten of the default 34px bars
   would overflow the card. Ten of these fit with room to spare. */
.rv-carousel--card .rv-carousel-dots {
    gap: 4px;
    margin: 0.65rem 10px 0;
    flex-wrap: wrap;
}

.rv-carousel--card .rv-carousel-dot {
    width: 18px;
    height: 16px;
}

.rv-carousel--card .rv-carousel-noscript {
    margin: 0.6rem 14px 0;
}

/* --------------------------------------------------------------------------
   5. CLOSE / 6. NEXT
   -------------------------------------------------------------------------- */
.rv-close {
    text-align: center;
}

.rv-next {
    text-align: center;
}

.rv-next-title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    margin-bottom: 0.9rem;
}

.rv-next-text {
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
    color: var(--paragraph-color);
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.rv-footer {
    background-color: var(--primary-color);
    padding: 48px 0;
    text-align: center;
}

.rv-footer-logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 1.25rem;
}

.rv-footer-company {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 1.1rem;
}

.rv-footer-company strong {
    font-family: "Quattrocento", serif;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.rv-footer-company a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color 0.2s;
}

.rv-footer-company a:hover {
    border-bottom-color: #fff;
}

.rv-footer-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

.rv-footer-copy {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    margin: 0.9rem auto 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .retreat-reveal section {
        padding: 64px 0;
    }
    .rv-unlock {
        min-height: 88vh;
        padding: 90px 0;
    }
    .rv-text {
        font-size: 1rem;
    }
    .rv-carousel-nav {
        width: 38px;
        height: 38px;
    }
    .rv-carousel-nav.is-prev {
        left: 8px;
    }
    .rv-carousel-nav.is-next {
        right: 8px;
    }
    /* A ten-photo gallery puts ten fixed-width bars in a ~366px track: at the
       desktop width they flex-shrink until the row bleeds edge to edge and reads
       as one segmented bar. Narrower here so the row stays centred with slack.
       Longer galleries still shrink rather than overflow — that is the fallback. */
    .rv-carousel-dot {
        width: 22px;
    }
}