/**
 * Imperial House Real Estate — layout
 * Struttura macro: container, header, footer, sezioni "stanza" della home.
 */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    z-index: var(--z-modal);
    background: var(--color-ink);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: top var(--duration-fast) var(--ease-default);
}

.skip-link:focus {
    top: var(--space-sm);
}

/* ---------------------------------------------------------------- */
/* Header                                                            */
/* ---------------------------------------------------------------- */

.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--z-header);
    padding-block: var(--space-md);
    background: transparent;
    transition: background-color var(--duration-base) var(--ease-default),
                padding-block var(--duration-base) var(--ease-default),
                box-shadow var(--duration-base) var(--ease-default);
}

.site-header.is-scrolled {
    background: rgba(243, 240, 234, 0.92);
    backdrop-filter: blur(10px);
    padding-block: var(--space-xs);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.site-header__logo img {
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);
    transition: filter var(--duration-base) var(--ease-default);
}

.is-scrolled .site-header__logo img {
    filter: none;
}

.site-header__nav {
    display: none;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-list__link {
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: var(--ls-wide);
    color: var(--color-white);
    padding-block: var(--space-3xs);
    position: relative;
}

.is-scrolled .nav-list__link {
    color: var(--color-ink);
}

.nav-list__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transition: right var(--duration-base) var(--ease-default);
}

.nav-list__link:hover::after,
.nav-list__link[aria-current="page"]::after {
    right: 0;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--fs-small);
    color: var(--color-white);
}

.is-scrolled .lang-switch {
    color: var(--color-ink);
}

.lang-switch__link {
    padding: var(--space-3xs);
    opacity: 0.6;
}

.lang-switch__link.is-active {
    opacity: 1;
    font-weight: 600;
    color: var(--color-metal);
}

.site-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
}

.site-header__toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--color-white);
    transition: background var(--duration-base) var(--ease-default);
}

.is-scrolled .site-header__toggle span {
    background: var(--color-ink);
}

.site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-white);
}

.site-header__phone svg {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------- */
/* Menu mobile                                                       */
/* ---------------------------------------------------------------- */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    background: var(--color-ink);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xl) var(--container-padding);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-default);
}

.mobile-menu[data-open="true"] {
    transform: translateX(0);
}

.mobile-menu__close {
    position: absolute;
    top: var(--space-md);
    right: var(--container-padding);
    width: 32px;
    height: 32px;
    color: var(--color-white);
}

.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.mobile-menu__link {
    font-family: var(--font-serif);
    font-size: 1.75rem;
}

.mobile-menu__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

.mobile-menu__footer .site-header__phone {
    color: var(--color-white);
}

.stack {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- */
/* Sezioni "stanza" — esperienza homepage                            */
/* ---------------------------------------------------------------- */

.building {
    position: relative;
}

/*
 * Modalità "palcoscenico unico": attivata via JS (building-scroll.js) solo
 * quando GSAP è disponibile e prefers-reduced-motion è disattivato. Le 6
 * stanze non sono più sezioni impilate una sotto l'altra: condividono lo
 * stesso riquadro a schermo intero, sovrapposte a un unico video
 * (.building__video, dichiarato una sola volta in index.php), e un'unica
 * sequenza di scroll pinnata ne pilota il fotogramma mentre le stanze si
 * dissolvono l'una nell'altra — un'unica ripresa continua che attraversa
 * l'edificio, non 6 blocchi separati.
 *
 * Senza JS, o con prefers-reduced-motion, la classe "is-staged" non viene
 * mai aggiunta: il video resta nascosto, e le stanze restano nel flusso
 * normale del documento, impilate come sezioni ordinarie, ciascuna con la
 * propria foto di sfondo — fallback pienamente accessibile e comunque
 * "vestito" visivamente.
 */
.building__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: var(--color-ink);
    z-index: 0;
    display: none;
}

/*
 * Un solo overlay per l'intera sequenza (non uno per stanza): le 6 .room
 * restano tutte presenti nel DOM e sovrapposte mentre è attiva la modalità
 * "palcoscenico" — se ognuna mantenesse il proprio ::before, gli overlay
 * semi-trasparenti si sommerebbero visivamente (più stanze "attraversate",
 * più diventa scuro), coprendo il video. Un solo overlay condiviso evita
 * il problema alla radice.
 */
.building__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none;
    background: linear-gradient(180deg, rgba(20, 19, 17, 0.28) 0%, rgba(20, 19, 17, 0.62) 100%);
}

.building.is-staged {
    height: 100vh;
    overflow: hidden;
}

.building.is-staged .building__video,
.building.is-staged .building__overlay {
    display: block;
}

.building.is-staged .room {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 2;
    background-image: none;
}

.building.is-staged .room::before {
    display: none;
}

.room {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}

.room--facade { background-image: url('/images/rooms/facade.jpg'); }
.room--lobby { background-image: url('/images/rooms/lobby.jpg'); }
.room--living { background-image: url('/images/rooms/living.jpg'); }
.room--studio { background-image: url('/images/rooms/studio.jpg'); }
.room--suite { background-image: url('/images/rooms/suite.jpg'); }
.room--terrace { background-image: url('/images/rooms/terrace.jpg'); }

.room::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(20, 19, 17, 0.2) 0%, rgba(20, 19, 17, 0.6) 100%);
}

.room--facade::before,
.room--suite::before {
    background: linear-gradient(180deg, rgba(20, 19, 17, 0.4) 0%, rgba(20, 19, 17, 0.68) 100%);
}

.room__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 var(--container-padding) var(--space-2xl);
    color: var(--color-white);
}

.room__content--center {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-3xl);
}

.room--facade .room__content--center {
    justify-content: center;
    height: 100%;
    padding-bottom: 0;
}

.room__content--left {
    max-width: 620px;
}

.room__content--right {
    max-width: 620px;
    margin-inline-start: auto;
    text-align: right;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
}

.room__content--wide {
    max-width: var(--container-max);
    margin-inline: auto;
}

.room__headline {
    font-size: var(--fs-hero);
    color: var(--color-white);
    margin-block: var(--space-sm);
}

.room--living .room__headline,
.room--studio .room__headline,
.room--suite .room__headline,
.room--terrace .room__headline {
    font-size: var(--fs-h1);
}

.room__body {
    color: rgba(255, 255, 255, 0.82);
    max-width: 46ch;
}

.room--right .room__body {
    margin-inline-start: auto;
}

.room__properties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-block: var(--space-lg);
}

.room__scroll-hint {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-white);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

.room__scroll-hint svg {
    width: 18px;
    height: 18px;
    animation: scrollHintBounce 2.2s ease-in-out infinite;
}

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

.site-footer {
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.75);
    padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.4fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__brand img {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
}

.site-footer__tagline {
    margin-top: var(--space-sm);
    max-width: 34ch;
    color: rgba(255, 255, 255, 0.65);
}

.site-footer__col-title {
    color: var(--color-white);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: var(--fs-eyebrow);
    margin-bottom: var(--space-sm);
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.site-footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.site-footer__contact-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-metal);
}

.site-footer__hours {
    margin-bottom: var(--space-sm);
    color: rgba(255, 255, 255, 0.65);
}

.site-footer__map {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--space-sm);
}

.ratio {
    position: relative;
    width: 100%;
}

.ratio--16-9 {
    aspect-ratio: 16 / 9;
}

.ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.site-footer__bottom {
    padding-top: var(--space-md);
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------- */
/* Azioni flottanti                                                   */
/* ---------------------------------------------------------------- */

.floating-actions {
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    z-index: var(--z-header);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.floating-actions__btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-ink);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-fast) var(--ease-default);
}

.floating-actions__btn:hover {
    transform: translateY(-2px);
}

.floating-actions__btn svg {
    width: 22px;
    height: 22px;
}

/* ---------------------------------------------------------------- */
/* Pagine interne — hero + sezioni con parallax leggero               */
/* ---------------------------------------------------------------- */

.page-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding-top: 140px;
    padding-bottom: var(--space-2xl);
    overflow: hidden;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 19, 17, 0.35) 0%, rgba(20, 19, 17, 0.6) 100%);
}

.page-hero__content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.page-hero__content .room__headline {
    color: var(--color-white);
}

.section {
    padding-block: var(--space-2xl);
}

.section--alt {
    background: var(--color-bg-alt);
}

.section__head {
    max-width: 640px;
    margin-bottom: var(--space-xl);
}