/* =============================================================================
   Blocco «Hero con le camere» (page builder, hero_camere, dalla 1.3.127).
   Partial: views/partials/_hero_camere.twig; cambio di foto: hero-camere.js.
   Colori del tema (--color-primary per titolo e fascia, --color-accent per la
   camera scelta e le *parole*, --color-text) o quelli scelti nel pannello
   (--hcm-sfondo, --hcm-scuro, --hcm-accento); titoli col carattere dei
   titoli (--font-heading); larghezza --container-max-width. Classi hcm-.
   Due aspetti: hcm--fascia (foto fino al bordo destro, fascia scura in
   basso) e hcm--arco (foto ad arco, scheda bianca della camera).
   ============================================================================= */
.hcm {
    --hcm-sfondo: transparent;
    --hcm-scuro: var(--color-primary, #2f3d2e);
    --hcm-accento: var(--color-accent, #b0804a);
    --hcm-testo: var(--color-text, #1f2937);
    --hcm-tenue: var(--color-text-light, #6b7280);
    --hcm-linea: rgba(31, 41, 55, .14);
    --hcm-linea: color-mix(in srgb, var(--hcm-testo) 16%, transparent);
    /* Il margine di sinistra (e di destra) allineato al contenuto del tema */
    --hcm-bordo: max(16px, calc((100% - var(--container-max-width, 1280px)) / 2 + 16px));
    /* Lo spazio sotto per il blocco «Cerca camere» che sale sopra (0 = niente) */
    --hcm-sotto: 0px;
    position: relative;
    overflow: hidden;
    background: var(--hcm-sfondo);
    color: var(--hcm-testo);
}
/* «A tutta larghezza» (dalla 1.3.131): margini stretti invece che allineati al
   contenuto del sito, così sugli schermi grandi non resta spazio vuoto ai lati */
/* mai più margine del tema: fino a ~1340 px il tema ha già 16 px, oltre vale 4vw (max 80 px) */
.hcm--piena { --hcm-bordo: min(max(16px, calc((100% - var(--container-max-width, 1280px)) / 2 + 16px)), clamp(16px, 4vw, 80px)); }
/* Il blocco dopo è «Cerca camere» con «sale sul blocco sopra»: gli si lascia
   lo spazio (stesse misure di hotel-cerca.css), così non copre la fascia */
/* Dopo la sezione: l'ancora del blocco seguente, i fogli di stile di «Cerca
   camere» (_hotel_cerca.twig ne mette due) e la sua sezione */
.hcm:has(+ .ancora-blocco + link + link + .htc--sopra-1), .hcm:has(+ .ancora-blocco + .htc--sopra-1), .hcm:has(+ .htc--sopra-1) { --hcm-sotto: clamp(28px, 3.5vw, 56px); }
.hcm:has(+ .ancora-blocco + link + link + .htc--sopra-2), .hcm:has(+ .ancora-blocco + .htc--sopra-2), .hcm:has(+ .htc--sopra-2) { --hcm-sotto: clamp(40px, 6vw, 88px); }
.hcm:has(+ .ancora-blocco + link + link + .htc--sopra-3), .hcm:has(+ .ancora-blocco + .htc--sopra-3), .hcm:has(+ .htc--sopra-3) { --hcm-sotto: clamp(48px, 8vw, 120px); }

.hcm [hidden] { display: none !important; }
.hcm .hcm-riga { display: block; }
.hcm .hcm-accento { color: var(--hcm-accento); }
.hcm-dentro { position: relative; display: grid; }

/* ── Scritta piccola e titolo ─────────────────────────────────────────── */
.hcm .hcm-occhiello {
    margin: 0 0 clamp(18px, 2vw, 28px); padding-bottom: clamp(16px, 1.6vw, 22px);
    color: var(--hcm-testo); font-size: .74rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) left bottom / 64px 1px no-repeat;
}
.hcm .hcm-titolo {
    margin: 0; color: var(--hcm-scuro); font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
    font-weight: 400; line-height: 1.18;
}
.hcm .hcm-titolo .hcm-accento { font-style: italic; }

/* ── L'elenco delle camere ────────────────────────────────────────────── */
.hcm-elenco { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hcm-voce { margin: 0; border-bottom: 1px solid var(--hcm-linea); }
.hcm-voce:last-child { border-bottom: 0; }
.hcm .hcm-voce-link {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 clamp(16px, 2vw, 34px);
    color: var(--hcm-testo); text-decoration: none; transition: color .25s ease;
}
.hcm a.hcm-voce-link:hover, .hcm .is-attiva .hcm-voce-link { color: var(--hcm-accento); }
.hcm a.hcm-voce-link:focus-visible { outline: 2px solid var(--hcm-accento); outline-offset: 4px; border-radius: 2px; }
.hcm-num { font-variant-numeric: tabular-nums; }
.hcm-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading, Georgia, 'Times New Roman', serif); }
.hcm-segno { display: inline-flex; align-items: center; justify-content: center; }

/* ── La foto ──────────────────────────────────────────────────────────── */
.hcm-foto { position: relative; grid-area: foto; min-width: 0; }
.hcm-cornice { position: absolute; inset: 0; overflow: hidden; background: #ded6ca; }
.hcm-img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.045); transition: opacity .8s ease, transform 6.5s ease-out;
}
.hcm-img.is-attiva { opacity: 1; transform: scale(1); }
.hcm-nota { margin: 0; font-size: .72rem; font-weight: 500; letter-spacing: .28em; line-height: 1.9; text-transform: uppercase; }

/* =============================================================================
   Aspetto «fascia»: colonna stretta a sinistra, foto fino al bordo destro
   ============================================================================= */
.hcm--fascia .hcm-dentro {
    grid-template-columns: minmax(240px, 24%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "testa foto" "colonna foto";
    column-gap: clamp(28px, 4vw, 72px);
    min-height: clamp(560px, 80vh, 880px);
    padding-left: var(--hcm-bordo);
}
.hcm--fascia .hcm-testa { grid-area: testa; padding-top: clamp(40px, 6vw, 96px); }
.hcm--fascia .hcm-colonna {
    grid-area: colonna; display: flex; flex-direction: column;
    padding: clamp(28px, 3.4vw, 52px) 0 calc(var(--hcm-sotto) + clamp(40px, 5vw, 80px));
}
.hcm--fascia .hcm-titolo { font-size: clamp(1.55rem, 1.1vw + 1.05rem, 2.3rem); }
.hcm--fascia .hcm-voce-link { padding: clamp(14px, 1.4vw, 20px) 0; }
.hcm--fascia .hcm-num { color: var(--hcm-tenue); font-size: .92rem; }
.hcm--fascia .hcm-nome { font-size: clamp(1.25rem, .6vw + 1rem, 1.6rem); }
.hcm--fascia .is-attiva .hcm-nome { color: var(--hcm-scuro); }
.hcm--fascia .hcm-segno { width: 52px; height: 2px; }
.hcm--fascia .hcm-segno::after {
    content: ""; width: 100%; height: 2px; background: var(--hcm-accento);
    transform: scaleX(0); transform-origin: right center; transition: transform .35s ease;
}
.hcm--fascia .is-attiva .hcm-segno::after { transform: scaleX(1); }
.hcm--fascia .hcm-nota--basso {
    align-self: flex-start; margin-top: auto; padding: 24px 30px 16px 0; color: var(--hcm-testo);
    background:
        linear-gradient(var(--hcm-accento), var(--hcm-accento)) right top / 1px 100% no-repeat,
        linear-gradient(var(--hcm-accento), var(--hcm-accento)) right bottom / 70px 1px no-repeat;
}

/* Le scritte sulla foto */
.hcm--fascia .hcm-nota--foto {
    position: absolute; z-index: 2; top: 44%; right: clamp(20px, 3vw, 56px); padding-bottom: 18px;
    color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
    background: linear-gradient(var(--hcm-accento), var(--hcm-accento)) left bottom / 56px 2px no-repeat;
}
.hcm-fascia {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(var(--hcm-sotto) + clamp(20px, 3vw, 44px));
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    padding: 0 clamp(24px, 4vw, 64px) clamp(14px, 1.6vw, 24px);
    background: var(--hcm-scuro); color: #fff;
}
.hcm .hcm-fascia-titolo {
    max-width: 66%; margin: -.42em 0 0; color: #fff;
    font-family: var(--font-heading, Georgia, 'Times New Roman', serif); font-size: clamp(3rem, 6.6vw, 8.4rem); font-weight: 500;
    line-height: .86; letter-spacing: -.015em; text-shadow: 0 2px 30px rgba(0, 0, 0, .18);
}
.hcm .hcm-fascia-titolo .hcm-accento { color: var(--hcm-accento); }
.hcm--fascia .hcm-nota--fascia {
    flex: 0 0 auto; align-self: center; margin: clamp(18px, 2vw, 30px) 0; padding: 4px 0 18px clamp(20px, 2.2vw, 40px);
    color: rgba(255, 255, 255, .92);
    background:
        linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) left top / 1px 100% no-repeat,
        linear-gradient(var(--hcm-accento), var(--hcm-accento)) clamp(20px, 2.2vw, 40px) bottom / 70px 2px no-repeat;
}

/* =============================================================================
   Aspetto «arco»: titolo grande a sinistra, foto ad arco con la scheda
   ============================================================================= */
.hcm--arco .hcm-dentro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "testa foto" "colonna foto";
    column-gap: clamp(28px, 3.4vw, 64px);
    min-height: clamp(600px, 84vh, 920px);
    padding: 0 var(--hcm-bordo);
}
.hcm--arco .hcm-testa { grid-area: testa; padding-top: clamp(36px, 5vw, 88px); }
.hcm--arco .hcm-colonna { grid-area: colonna; padding: clamp(20px, 2.4vw, 40px) 0 calc(var(--hcm-sotto) + clamp(32px, 4vw, 64px)); }
.hcm--arco .hcm-occhiello { letter-spacing: .42em; }
.hcm--arco .hcm-titolo {
    font-size: clamp(2.4rem, 3.3vw + .6rem, 5rem); font-weight: 600; line-height: .98; letter-spacing: -.025em;
}
.hcm--arco .hcm-titolo .hcm-accento { font-weight: 500; }
.hcm--arco .hcm-elenco { max-width: 560px; }
.hcm--arco .hcm-voce-link { padding: clamp(10px, 1vw, 16px) clamp(0px, 1vw, 12px); }
.hcm--arco .hcm-num { min-width: 2.2ch; font-family: var(--font-heading, Georgia, 'Times New Roman', serif); font-size: clamp(1.4rem, .9vw + 1rem, 2rem); }
.hcm--arco .hcm-nome { font-size: clamp(1.6rem, 1.3vw + 1rem, 2.5rem); line-height: 1.1; }
.hcm--arco .hcm-segno {
    width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 999px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hcm--arco .is-attiva .hcm-segno { border-color: var(--hcm-accento); background: var(--hcm-accento); color: #fff; }

/* La foto ad arco, il cerchio sottile dietro, «01 / ANTONIO» */
.hcm--arco .hcm-foto { margin-top: clamp(32px, 4vw, 64px); }
.hcm--arco .hcm-foto::before {
    content: ""; position: absolute; z-index: 0; top: calc(-1 * clamp(16px, 2vw, 32px)); right: 2%;
    width: 58%; aspect-ratio: 1; border: 1px solid var(--hcm-accento); border-radius: 50%; opacity: .7; pointer-events: none;
}
.hcm--arco .hcm-cornice { z-index: 1; right: 7%; border-radius: 50% 50% 0 0 / clamp(180px, 24vw, 380px) clamp(180px, 24vw, 380px) 0 0; }
.hcm--arco .hcm-etichetta {
    position: absolute; z-index: 2; top: clamp(36px, 5vw, 72px); right: 0; margin: 0; padding-bottom: 14px;
    color: var(--hcm-testo); font-size: .76rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) right bottom / 72px 1px no-repeat;
}
.hcm-scheda {
    position: absolute; z-index: 3; right: 0; bottom: calc(var(--hcm-sotto) + clamp(28px, 5vw, 64px));
    display: flex; align-items: center; gap: 20px; width: min(380px, 76%);
    padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 26px); border-radius: 4px;
    background: #fff; color: var(--hcm-testo); box-shadow: 0 22px 50px rgba(31, 27, 20, .14);
    animation: hcm-entra .45s ease both;
}
.hcm-scheda-testo { flex: 1 1 auto; min-width: 0; }
.hcm .hcm-scheda-titolo { margin: 0; color: var(--hcm-scuro); font-family: var(--font-heading, Georgia, 'Times New Roman', serif); font-size: clamp(1.4rem, .8vw + 1rem, 1.9rem); line-height: 1.1; }
.hcm .hcm-scheda-sotto { margin: 6px 0 0; color: var(--hcm-tenue); font-size: .98rem; line-height: 1.4; }
.hcm .hcm-freccia {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
    border: 1px solid currentColor; border-radius: 999px; color: var(--hcm-scuro); text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}
.hcm .hcm-freccia:hover { background: var(--hcm-scuro); color: #fff; }
@keyframes hcm-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Tablet e telefono: titolo, foto, poi le camere ───────────────────── */
@media (max-width: 899px) {
    .hcm--fascia .hcm-dentro, .hcm--arco .hcm-dentro {
        grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "testa" "foto" "colonna";
        min-height: 0; padding: 0 16px;
    }
    .hcm--fascia .hcm-testa, .hcm--arco .hcm-testa { padding-top: 32px; padding-bottom: 24px; }
    .hcm--fascia .hcm-colonna, .hcm--arco .hcm-colonna { padding: 18px 0 calc(var(--hcm-sotto) + 44px); }
    .hcm-foto { height: clamp(300px, 78vw, 560px); }
    .hcm--fascia .hcm-foto { margin: 0 -16px; }
    .hcm--fascia .hcm-nota--foto, .hcm--fascia .hcm-nota--fascia { display: none; }
    .hcm-fascia { bottom: 18px; padding-right: 20px; padding-left: 20px; }
    .hcm .hcm-fascia-titolo { max-width: none; font-size: clamp(2.5rem, 11vw, 4.6rem); }
    .hcm--fascia .hcm-nota--basso { margin-top: 28px; }
    .hcm--arco .hcm-foto { margin-top: 0; height: clamp(340px, 96vw, 620px); }
    .hcm--arco .hcm-foto::before, .hcm--arco .hcm-etichetta { display: none; }
    .hcm--arco .hcm-cornice { right: 0; border-radius: 50% 50% 0 0 / clamp(140px, 40vw, 300px) clamp(140px, 40vw, 300px) 0 0; }
    .hcm-scheda { right: 12px; bottom: 14px; width: auto; max-width: calc(100% - 24px); }
    .hcm--arco .hcm-titolo { font-size: clamp(2.3rem, 9.5vw, 3.6rem); }
}
@media (max-width: 480px) {
    .hcm--arco .hcm-segno { width: 40px; height: 40px; }
    .hcm-scheda { left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hcm-img { transform: none; transition: opacity .2s linear; }
    .hcm-img.is-attiva { transform: none; }
    .hcm-scheda { animation: none; }
    .hcm--fascia .hcm-segno::after { transition: none; }
}