/* ============================================================
   ANEMOLIA — child overrides on top of fabhotel components.
   Adds: hero parallax slider, signature list section, refined
   colour states for the Aegean palette.
   ============================================================ */

/* ── HARD bg reset — override every parent cream surface to near-white,
       defensive !important to win over parent variable cascades. ── */
html,
body { background: #fafafa !important; }

.philosophy,
.rooms-grid-wrap,
.signatures,
.room-strip,
.room-body,
.room-amenities,
.room-gallery,
.room-others,
.section--cream,
.contact-section,
.about-section,
.gallery-section,
.policy-section,
.location-section,
.menu-panel { background: #fafafa !important; }

/* Slightly warmer near-white for nested panels / cards / feature panels. */
.signature,
.room-card,
.room-others__card,
.contact-form,
.contact-info { background: #ffffff !important; }

.philosophy__photo,
.philosophy__photo--top,
.philosophy__photo--bottom { background: transparent !important; }

/* Newsletter band — warmer-than-white whisper. */
.site-footer__newsletter { background: #f4f1ec !important; }

/* Inner-hero brand mark: tint the SVG to white via mask (the parent uses
   plain background-image which shows the SVG in its native black on dark
   photos). */
.acc-hero::before,
.room-single__hero::before {
    background-image: none !important;
    background-color: #ffffff !important;
    -webkit-mask: url(/anemolia-logo.svg) center / contain no-repeat !important;
            mask: url(/anemolia-logo.svg) center / contain no-repeat !important;
}

/* ── Brand logo via SVG mask (header / footer / hero) ── */
.brand-logo {
    display: block;
    aspect-ratio: 220.26 / 230.62;
    background-color: currentColor;
    -webkit-mask: url(/anemolia-logo.svg) center / contain no-repeat;
            mask: url(/anemolia-logo.svg) center / contain no-repeat;
}

/* Menu panel brand wordmark (when off-canvas opens) */
.menu-panel__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--c-aegean-deep);
}
.brand-logo--menu { width: 56px; }
.menu-panel__brand {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.005em;
    color: var(--c-text);
    line-height: 1;
}
.menu-panel__brand em { font-style: italic; color: var(--c-aegean-deep); }

/* Footer brand wordmark */
.site-footer__logo {
    color: var(--c-aegean-deep);
}
.site-footer__logo a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.brand-logo--footer { width: 48px; }
.site-footer__brand-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    color: var(--c-text);
    line-height: 1;
}
.site-footer__brand-name em { font-style: italic; color: var(--c-aegean-deep); }

/* ── FOOTER — near-white, subtle */
.site-footer {
    background: var(--c-cream-bg);
    color: var(--c-text);
    border-top: 1px solid var(--color-rule);
}
.site-footer__newsletter {
    background: var(--c-accent-beige);
    color: var(--c-text);
}
.site-footer__newsletter-title,
.site-footer__newsletter-sub { color: var(--c-text); }
.site-footer__newsletter-sub { color: var(--c-text-muted); }
.site-footer__brand,
.site-footer__legal,
.site-footer__address,
.site-footer__contact a,
.site-footer__copy,
.site-footer__credit { color: var(--c-text); }
.site-footer__contact a { border-bottom: 1px solid var(--color-rule); }
.site-footer__rule { border-top: 1px solid var(--color-rule); }
.site-footer__legal { color: var(--c-text-muted); }
.site-footer__socials a { color: var(--c-aegean-deep); }

/* Force inputs / buttons in newsletter form to be light-themed */
.site-footer__newsletter-form input,
.site-footer__newsletter-form input:focus {
    background: var(--c-white);
    border: 1px solid var(--color-rule);
    color: var(--c-text);
}
.site-footer__newsletter-form input::placeholder { color: var(--c-text-muted); }
.btn--ghost-on-dark {
    color: var(--c-text);
    border-color: var(--c-aegean-deep);
}
.btn--ghost-on-dark:hover {
    background: var(--c-aegean-deep);
    color: var(--c-white);
}


/* ── HERO PARALLAX SLIDER ── */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    color: var(--c-white);
    display: grid;
    place-items: center;
    background: var(--c-aegean-deep);
}
.hero__slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1600ms var(--ease-out);
    overflow: hidden;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
    width: 100%;
    height: 110%;
    object-fit: cover;
    transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.06);
    transition: transform 14s linear;
    will-change: transform;
}
.hero__slide.is-active img {
    transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.14);
}
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(10, 14, 18, 0.45) 0%,
            rgba(10, 14, 18, 0.18) 35%,
            rgba(10, 14, 18, 0.55) 100%),
        radial-gradient(ellipse at 70% 90%, rgba(31, 58, 82, 0.35) 0%, transparent 60%);
    pointer-events: none;
}
.hero__lockup {
    position: absolute;
    top: clamp(90px, 14vh, 140px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    color: var(--c-white);
    opacity: 0.95;
    margin: 0;
    display: block;
}
.hero__lockup .brand-logo {
    width: clamp(72px, 10vw, 110px);
    margin: 0 auto 12px;
    color: var(--c-white);
}
.hero__lockup-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    letter-spacing: 0.04em;
    color: var(--c-white);
    margin: 0;
    line-height: 1;
}
.hero__lockup-place {
    display: block;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    margin-top: 14px;
}
.hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 var(--section-x);
    max-width: 1100px;
    color: var(--c-white);
}
.hero__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5.25rem);
    line-height: 1.04;
    letter-spacing: -0.005em;
    color: var(--c-white);
    margin: 0;
}
.hero__title em { font-style: italic; }
.hero__subtitle {
    margin-top: 24px;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: rgba(255,255,255,0.85);
    max-width: 540px;
    margin-inline: auto;
    line-height: 1.5;
}
.hero__cta {
    margin-top: 38px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.7);
    color: var(--c-white);
    transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.hero__cta:hover {
    opacity: 1;
    background: var(--c-white);
    color: var(--c-aegean-deep);
    border-color: var(--c-white);
}
.hero__cta::after { content: '→'; font-size: 13px; }

.hero__nav {
    position: absolute;
    bottom: clamp(28px, 5vh, 60px);
    left: 0; right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 14px;
}
.hero__dot {
    width: 32px;
    height: 1px;
    background: rgba(255,255,255,0.35);
    border: 0;
    padding: 14px 0;
    cursor: pointer;
    position: relative;
}
.hero__dot::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.35);
}
.hero__dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    height: 1px;
    width: 0;
    background: var(--c-white);
    transition: width 6s linear;
}
.hero__dot.is-active::after { width: 100%; }

.hero__scroll {
    position: absolute;
    bottom: clamp(20px, 4vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    display: none;
}

@media (max-width: 700px) {
    .hero__nav { gap: 10px; }
    .hero__dot { width: 22px; }
}

/* ── PHILOSOPHY tweaks ── */
.philosophy { background: var(--c-cream-soft); }

/* ── ROOMS GRID — 3 villa support ──
   When a 3rd card is present, lay out the first two side-by-side and
   the third spans full width on a row of its own. */
.rooms-grid--three .room-card:nth-child(3) {
    grid-column: 1 / -1;
}
.rooms-grid--three .room-card:nth-child(3) .room-card__media {
    aspect-ratio: 16 / 9;
}

@media (max-width: 800px) {
    .rooms-grid--three .room-card:nth-child(3) .room-card__media {
        aspect-ratio: 4 / 3;
    }
}

/* ── SIGNATURES SECTION ── */
.signatures {
    background: var(--c-cream-bg);
    padding: var(--section-y) 0;
}
.signatures__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 80px);
    text-align: center;
}
.signatures__head {
    max-width: 720px;
    margin: 0 auto;
}
.signatures__eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-olive-light);
    margin-bottom: 18px;
    display: block;
}
.signatures__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.08;
    color: var(--c-text);
    letter-spacing: -0.01em;
}
.signatures__title em { font-style: italic; color: var(--c-olive); }
.signatures__body {
    margin-top: 20px;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--c-text-muted);
}
.signatures__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
    text-align: left;
}
.signature {
    padding: 36px 28px;
    border-right: 1px solid var(--color-rule);
}
.signature:last-child { border-right: 0; }
.signature__num {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--c-olive-light);
    margin-bottom: 18px;
}
.signature__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.7vw, 1.5rem);
    line-height: 1.2;
    color: var(--c-text);
    margin-bottom: 12px;
}
.signature__title em { font-style: italic; color: var(--c-olive); }
.signature__body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-muted);
}
@media (max-width: 1000px) {
    .signatures__grid { grid-template-columns: repeat(2, 1fr); }
    .signature:nth-child(2n) { border-right: 0; }
    .signature:nth-child(-n+2) { border-bottom: 1px solid var(--color-rule); }
}
@media (max-width: 600px) {
    .signatures__grid { grid-template-columns: 1fr; }
    .signature { border-right: 0; }
    .signature:not(:last-child) { border-bottom: 1px solid var(--color-rule); }
}