/* =============================================================================
   Blocco «Scheda della camera» (page builder, camera_scheda, dalla 1.3.128).
   Partial: views/partials/_camera_scheda.twig; sfoglio: camera-scheda.js; la
   foto grande dei dettagli è quella della Galleria (galleria.css/.js).
   Colori del tema (--color-primary per titolo e pulsante, --color-accent per
   le *parole*, il motto e le icone, --color-text) o quelli scelti nel pannello
   (--csc-sfondo, --csc-scuro, --csc-accento); titoli col carattere dei
   titoli (--font-heading); larghezza --container-max-width. Classi csc-.
   ============================================================================= */
.csc {
    --csc-sfondo: transparent;
    --csc-scuro: var(--color-primary, #2f3d2e);
    --csc-accento: var(--color-accent, #b0804a);
    --csc-testo: var(--color-text, #1f2937);
    --csc-tenue: var(--color-text-light, #6b7280);
    --csc-linea: rgba(31, 41, 55, .16);
    --csc-linea: color-mix(in srgb, var(--csc-testo) 18%, transparent);
    --csc-serif: var(--font-heading, Georgia, 'Times New Roman', serif);
    /* Il margine di sinistra e di destra allineato al contenuto del tema */
    --csc-bordo: max(16px, calc((100% - var(--container-max-width, 1280px)) / 2 + 16px));
    position: relative;
    padding: clamp(24px, 3vw, 48px) 0 clamp(40px, 5vw, 72px);
    background: var(--csc-sfondo);
    color: var(--csc-testo);
}
.csc [hidden] { display: none !important; }
.csc .csc-riga { display: block; }
.csc .csc-accento { color: var(--csc-accento); }
.csc-dentro {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    align-items: center; gap: clamp(28px, 3.6vw, 64px); padding: 0 var(--csc-bordo);
}

/* ── La scritta in verticale a sinistra (nel margine) ─────────────────── */
.csc .csc-lato {
    position: absolute; top: 50%; left: max(2px, calc(var(--csc-bordo) - 46px)); z-index: 1;
    display: flex; align-items: center; gap: 18px; margin: 0;
    color: var(--csc-testo); font-size: .7rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
    writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
}
.csc .csc-lato::before, .csc .csc-lato::after { content: ""; inline-size: 64px; block-size: 1px; background: currentColor; opacity: .55; }

/* ── Le foto ad arco ──────────────────────────────────────────────────── */
.csc-foto { position: relative; aspect-ratio: 1.52 / 1; min-width: 0; }
.csc-cornice { position: absolute; inset: 0; overflow: hidden; border-radius: 50% 50% 0 0 / 43% 43% 0 0; background: #ded6ca; }
.csc-img {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity .7s ease;
}
.csc-img.is-attiva { opacity: 1; }
.csc-barra {
    position: absolute; left: clamp(18px, 2.6vw, 40px); bottom: clamp(16px, 2.4vw, 34px); z-index: 2;
    display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px);
    color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.csc .csc-conta { margin: 0; font-family: var(--csc-serif); font-size: clamp(1.05rem, .6vw + .8rem, 1.5rem); font-variant-numeric: tabular-nums; }
.csc-trattini { display: flex; gap: 4px; }
.csc .csc-trattino {
    width: clamp(18px, 2.2vw, 36px); height: 14px; margin: 0; padding: 0; border: 0; cursor: pointer;
    background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)) center / 100% 2px no-repeat;
}
.csc .csc-trattino.is-attivo { background-image: linear-gradient(#fff, #fff); background-size: 100% 3px; }
.csc .csc-trattino:focus-visible, .csc .csc-dopo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.csc .csc-dopo {
    position: absolute; right: clamp(16px, 2.6vw, 36px); bottom: clamp(16px, 2.4vw, 30px); z-index: 2;
    display: inline-flex; align-items: center; justify-content: center; width: clamp(48px, 4.4vw, 70px); height: clamp(48px, 4.4vw, 70px);
    margin: 0; padding: 0; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 999px; background: rgba(0, 0, 0, .12);
    color: #fff; cursor: pointer; transition: background-color .25s ease;
}
.csc .csc-dopo:hover { background: rgba(0, 0, 0, .3); }

/* ── I testi a destra ─────────────────────────────────────────────────── */
/* La colonna misura il titolo (dalla 1.3.132): «Antonio.» non va più a capo
   spezzato sugli schermi grandi, dove la colonna resta stretta */
.csc-testo { min-width: 0; container-type: inline-size; }
.csc .csc-occhiello {
    display: inline-block; margin: 0 0 clamp(18px, 2vw, 30px); padding-bottom: 14px;
    color: var(--csc-testo); font-family: var(--csc-serif); font-size: .95rem; letter-spacing: .28em; text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) left bottom / 64px 1px no-repeat;
}
.csc .csc-titolo {
    margin: 0; color: var(--csc-scuro); font-family: var(--csc-serif);
    font-size: clamp(3rem, 6.2vw, 8rem); font-weight: 500; line-height: .9; letter-spacing: -.02em;
}
.csc .csc-titolo .csc-accento { font-style: italic; font-weight: 600; }
@supports (font-size: 1cqi) {
    .csc .csc-titolo { font-size: clamp(2.6rem, 20cqi, 8rem); }
}
/* Parole lunghe («Matrimoniale», «Quadrupla»): a capo col trattino nella loro
   colonna invece di uscire a destra (tagliate dal bordo della pagina) */
.csc .csc-titolo, .csc-dotazione { overflow-wrap: break-word; hyphens: auto; }
.csc .csc-motto { margin: clamp(16px, 2vw, 28px) 0 0; color: var(--csc-accento); font-family: var(--csc-serif); font-size: clamp(1.45rem, 1.5vw + .8rem, 2.5rem); font-style: italic; line-height: 1.15; }
.csc .csc-frase { margin: clamp(12px, 1.4vw, 20px) 0 0; color: var(--csc-testo); font-family: var(--csc-serif); font-size: clamp(1.15rem, .8vw + .8rem, 1.75rem); line-height: 1.3; }
.csc-dotazioni { display: flex; margin: clamp(22px, 2.6vw, 40px) 0 0; padding: 0; list-style: none; }
.csc-dotazione {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0;
    padding: 0 12px; color: var(--csc-testo); font-family: var(--csc-serif); font-size: clamp(.98rem, .4vw + .8rem, 1.2rem); line-height: 1.2; text-align: center;
}
.csc-dotazione + .csc-dotazione { border-left: 1px solid var(--csc-linea); }
/* Quattro dotazioni (dalla 1.3.132): due per riga, così nelle colonne strette
   le parole non vanno a capo spezzate («Idromas-saggio»); con tre o meno
   resta tutto com'era */
.csc-dotazioni:has(> .csc-dotazione:nth-child(4)) { flex-wrap: wrap; row-gap: 18px; }
.csc-dotazioni:has(> .csc-dotazione:nth-child(4)) .csc-dotazione { flex: 0 0 50%; hyphens: manual; }
.csc-dotazioni:has(> .csc-dotazione:nth-child(4)) .csc-dotazione:nth-child(3) { border-left: 0; }
.csc-icona { display: inline-flex; color: var(--csc-accento); }
.csc-icona .ht-ico { width: clamp(28px, 2.4vw, 38px); height: clamp(28px, 2.4vw, 38px); stroke-width: 1.3; }
.csc .csc-pulsante {
    display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(22px, 2.6vw, 38px); padding: clamp(14px, 1.4vw, 20px) 24px;
    border-radius: 6px; background: var(--csc-scuro); color: #fff; font-family: var(--csc-serif); font-size: clamp(1.15rem, .8vw + .8rem, 1.65rem);
    text-decoration: none; transition: filter .2s ease;
}
.csc .csc-pulsante:hover { filter: brightness(1.15); }
.csc .csc-pulsante:focus-visible { outline: 2px solid var(--csc-accento); outline-offset: 3px; }

/* ── La galleria dei dettagli ─────────────────────────────────────────── */
.csc-galleria {
    display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) minmax(150px, 200px); align-items: center;
    gap: clamp(20px, 2.4vw, 40px); margin: clamp(32px, 4vw, 56px) var(--csc-bordo) 0; padding-top: clamp(16px, 1.6vw, 22px);
    border-top: 1px solid var(--csc-accento);
}
.csc .csc-galleria-titolo {
    max-width: 14ch; margin: 0; padding-bottom: 16px; color: var(--csc-testo); font-family: var(--csc-serif); font-size: .92rem; font-weight: 400;
    letter-spacing: .3em; line-height: 1.6; text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) left bottom / 60px 1px no-repeat;
}
.csc .csc-galleria-frase { margin: 16px 0 0; color: var(--csc-testo); font-family: var(--csc-serif); font-size: clamp(1.05rem, .5vw + .9rem, 1.35rem); font-style: italic; line-height: 1.3; }
.csc-galleria-testa:only-child { grid-column: 1 / -1; }
.csc-striscia {
    display: flex; gap: clamp(10px, 1.2vw, 20px); min-width: 0; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.csc-striscia::-webkit-scrollbar { display: none; }
.csc-galleria > .csc-striscia:first-child { grid-column: 1 / 3; }
.csc-miniatura { flex: 0 0 calc((100% - 2 * clamp(10px, 1.2vw, 20px)) / 3); min-width: 0; margin: 0; scroll-snap-align: start; }
.csc-miniatura-link { display: block; overflow: hidden; aspect-ratio: 2.2 / 1; border-radius: 2px; background: #e9e4dc; }
.csc-miniatura-link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.csc-miniatura-link { cursor: zoom-in; }
a.csc-miniatura-link:hover img { transform: scale(1.04); }
a.csc-miniatura-link:focus-visible { outline: 3px solid var(--csc-scuro); outline-offset: 3px; }
.csc-comandi { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.csc-frecce { display: flex; gap: 14px; }
.csc .csc-freccia {
    display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0; padding: 0;
    border: 1px solid var(--csc-accento); border-radius: 999px; background: transparent; color: var(--csc-accento); cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.csc .csc-freccia.is-piena, .csc .csc-freccia:hover { background: var(--csc-accento); color: #fff; }
.csc .csc-freccia:focus-visible { outline: 2px solid var(--csc-scuro); outline-offset: 3px; }
.csc .csc-nota {
    margin: 6px 0 0; padding-top: 14px; color: var(--csc-testo); font-size: .7rem; font-weight: 500; letter-spacing: .3em; line-height: 1.8; text-transform: uppercase;
    background: linear-gradient(var(--csc-accento), var(--csc-accento)) left top / 64px 1px no-repeat;
}

/* ── Fino al tablet: la scritta di lato non c'è ───────────────────────── */
@media (max-width: 1180px) {
    .csc .csc-lato { display: none; }
}
/* ── Tablet e telefono: foto, testi, poi la galleria ──────────────────── */
@media (max-width: 899px) {
    .csc-dentro { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
    .csc-foto { aspect-ratio: 1.1 / 1; }
    .csc-cornice { border-radius: 50% 50% 0 0 / 32% 32% 0 0; }
    .csc .csc-titolo { font-size: clamp(2.8rem, 13vw, 4.6rem); }
    .csc-dotazione { padding: 0 6px; }
    .csc-galleria { grid-template-columns: minmax(0, 1fr); margin: 36px 16px 0; }
    .csc .csc-galleria-titolo { max-width: none; }
    .csc-galleria > .csc-striscia:first-child { grid-column: auto; }
    .csc-miniatura { flex-basis: 78%; }
    .csc-comandi { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .csc .csc-nota { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .csc-img { transition: none; }
    a.csc-miniatura-link:hover img { transform: none; }
}