/* =========================================================================
   Site chrome — header, mobile menu, mobile CTA bar, footer, lightbox.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Sticky header
   ------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--header-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule-08);
    transition: background-color .35s ease, box-shadow .35s ease;
}

/* Past 6px of scroll the background thickens and the one shadow appears. */
.site-header.is-scrolled {
    background: var(--header-bg-scroll);
    box-shadow: var(--shadow-header);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px var(--gutter-header);
}

.wordmark {
    font: var(--t-wordmark);
    letter-spacing: var(--ls-wordmark);
    text-transform: uppercase;
    color: var(--ink);
}

.wordmark:hover {
    color: var(--ink);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 2.2vw, 30px);
    flex-wrap: wrap;
}

.site-nav__link {
    font: var(--t-nav);
    color: var(--text-body);
    white-space: nowrap;
}

.site-nav__link[aria-current="page"] {
    color: var(--terracotta-dark);
}

.site-nav__cta {
    padding: 13px 20px;
    background: var(--terracotta);
    border-radius: var(--radius);
    font: 700 12px/1 var(--font-sans);
    letter-spacing: .06em;
    color: #fff;
    white-space: nowrap;
    transition: background-color .25s ease;
}

.site-nav__cta:hover {
    background: var(--terracotta-dark);
    color: #fff;
}

/* Below 1024px the text nav and header CTA are replaced by the hamburger.
   This is the single hard breakpoint in the design. */
.site-nav__desktop {
    display: none;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--rule-14);
    border-radius: var(--radius);
}

.nav-toggle__bar {
    display: block;
    height: 1.5px;
    background: var(--ink);
}

@media (min-width: 1024px) {
    .site-nav__desktop {
        display: inline-flex;
    }

    .nav-toggle {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   Full-screen mobile menu
   ------------------------------------------------------------------------- */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: 18px clamp(20px, 6vw, 64px) 40px;
    background: var(--ink);
    color: var(--ivory);
    animation: fade-up .28s ease both;
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu__wordmark {
    font: var(--t-wordmark);
    letter-spacing: var(--ls-wordmark);
    text-transform: uppercase;
    color: var(--ivory);
}

.mobile-menu__close {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--on-dark-25);
    border-radius: var(--radius);
    color: var(--ivory);
    font-size: 20px;
    line-height: 1;
}

.mobile-menu__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block: auto;
}

.mobile-menu__link {
    font: 400 clamp(30px, 9vw, 44px)/1.5 var(--font-serif);
    color: var(--ivory);
}

.mobile-menu__link:hover {
    color: var(--terracotta-light);
}

.mobile-menu__link--accent {
    color: var(--terracotta);
}

.mobile-menu__foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--on-dark-14);
}

.mobile-menu__cta {
    display: block;
    padding: 17px;
    background: var(--terracotta);
    border-radius: var(--radius);
    font: var(--t-button-sm);
    letter-spacing: .06em;
    text-align: center;
    color: #fff;
}

.mobile-menu__cta:hover {
    background: var(--terracotta-dark);
    color: #fff;
}

.mobile-menu__meta {
    display: flex;
    gap: 22px;
    font: 500 12px/1.6 var(--font-sans);
    color: var(--on-dark-60);
}

@media (min-width: 1024px) {
    .mobile-menu {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   Fixed bottom CTA bar — mobile only.

   Below 1024px this is the only persistent call to action once the hero has
   scrolled away; the header CTA is desktop-only. Above 1024px the header
   carries it, and a fixed bar would just eat vertical space.
   ------------------------------------------------------------------------- */

.cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: flex;
    gap: 1px;
    background: var(--rule-14);
    border-top: 1px solid var(--rule-14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: bar-in .5s var(--ease) .5s both;
}

.cta-bar__btn {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 18px 10px;
    font: var(--t-button-sm);
    letter-spacing: .04em;
    text-align: center;
    transition: background-color .25s ease;
}

.cta-bar__btn--whatsapp {
    background: var(--bar-bg);
    color: var(--ink);
}

.cta-bar__btn--whatsapp:hover {
    background: var(--ivory);
    color: var(--ink);
}

.cta-bar__btn--book {
    background: var(--terracotta);
    color: #fff;
}

.cta-bar__btn--book:hover {
    background: var(--terracotta-dark);
    color: #fff;
}

@media (min-width: 1024px) {
    .cta-bar {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
    background: var(--ink);
    color: var(--on-dark-60);
    border-top: 1px solid var(--on-dark-12);
    /* Bottom padding clears the mobile CTA bar; collapses at 1024px. */
    padding: 36px var(--gutter) var(--footer-bottom);
}

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.site-footer__wordmark {
    font: var(--t-wordmark);
    letter-spacing: var(--ls-wordmark);
    text-transform: uppercase;
    color: var(--ivory);
}

.site-footer__tagline {
    margin-top: 10px;
    font: 500 12px/1.7 var(--font-sans);
}

.site-footer__social {
    display: flex;
    gap: 20px;
    font: var(--t-button-xs);
}

.site-footer__social a {
    color: var(--terracotta-light);
}

.site-footer__copyright {
    margin-top: 26px;
    font: 500 11.5px/1.6 var(--font-sans);
    color: var(--on-dark-40);
}

/* -------------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--lightbox-veil);
    animation: veil-in .2s ease both;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__panel {
    width: min(900px, 100%);
    max-height: 86vh;
    overflow: auto;
    background: var(--ivory);
    border-radius: var(--radius);
    animation: pop-in .38s var(--ease) both;
}

.lightbox__img {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    background: var(--sand);
}

.lightbox__img[hidden] {
    display: none;
}

.lightbox__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background:
        repeating-linear-gradient(135deg, rgba(23, 23, 23, .03) 0 12px, transparent 12px 26px),
        var(--sand);
}

.lightbox__preview[hidden] {
    display: none;
}

.lightbox__meta[hidden],
.lightbox__name[hidden] {
    display: none;
}

.lightbox__preview-ratio {
    font: 700 11px/1 var(--font-mono);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--terracotta-dark);
}

.lightbox__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 24px;
}

.lightbox__name {
    font: 700 12px/1.4 var(--font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}

.lightbox__meta {
    margin-top: 8px;
    font: var(--t-mono-lg);
    color: var(--terracotta-dark);
}

.lightbox__note {
    margin-top: 10px;
    max-width: 60ch;
    font: 400 14px/1.6 var(--font-sans);
    color: var(--text-body);
}

.lightbox__close {
    flex: none;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--rule-22);
    border-radius: var(--radius);
    font-size: 18px;
    line-height: 1;
    color: var(--ink);
    transition: background-color .25s ease;
}

.lightbox__close:hover {
    background: var(--sand);
}