/* =============================================================================
   Blocco «Cerca camere» (page builder, hotel_cerca, dalla 1.3.118).
   Partial: views/partials/_hotel_cerca.twig. Colori del tema (--color-primary,
   --color-accent) o --htc-accento dal pannello; larghezza --container-max-width.
   Classi htc- (hc- è del Calendario dell'hotel nel pannello). Dalla 1.3.123
   campi in fila con l'etichetta piccola sopra, riquadro degli ospiti e, con
   «Calendario sotto i campi», il calendario grande col riepilogo; i
   calendari e il riquadro sono in hotel-calendario.css.
   ============================================================================= */
.htc {
    --htc-primario: var(--color-primary, #1b2a57);
    --htc-acc: var(--htc-accento, var(--color-accent, #a88532));
    --htc-testo: #1f2937;
    --htc-tenue: #6b7280;
    --htc-riga: #e7e2da;
    --hcal-acc: var(--htc-accento, var(--color-primary, #1b2a57));
    position: relative;
    padding: 24px 0;
}
/* Sale sul fondo del blocco sopra (per esempio l'hero): poco, di più, molto */
.htc--sopra { z-index: 2; padding-top: 0; }
.htc--sopra-1 { margin-top: clamp(-56px, -3.5vw, -28px); }
.htc--sopra-2 { margin-top: clamp(-88px, -6vw, -40px); }
.htc--sopra-3 { margin-top: clamp(-120px, -8vw, -48px); }
.htc-dentro { max-width: var(--container-max-width, 1280px); margin: 0 auto; padding: 0 16px; }
.htc-testa { margin-bottom: 16px; }
.htc .htc-titolo { margin: 0; color: var(--htc-primario); font-size: clamp(1.6rem, 1.4vw + 1rem, 2.4rem); font-weight: 600; line-height: 1.15; }
.htc .htc-sotto { margin: 6px 0 0; color: var(--htc-tenue); font-size: 1.05rem; }
.htc-scheda .htc-testa { padding: 22px 24px 0; margin-bottom: 4px; }

.htc-scheda {
    border: 1px solid var(--htc-riga); border-radius: 4px; background: #fff; color: var(--htc-testo);
    box-shadow: 0 18px 40px rgba(31, 27, 20, .10);
}

/* ── I campi in fila ──────────────────────────────────────────────────── */
.htc-campi {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto;
    align-items: stretch; gap: 0; padding: 12px;
}
.htc-campo { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; margin: 0; padding: 10px 22px; }
.htc-campo + .htc-campo { border-left: 1px solid var(--htc-riga); }
.htc .htc-etichetta { color: var(--htc-tenue); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.htc-valore { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 30px; color: var(--htc-testo); font-size: 1.05rem; font-weight: 500; }
.htc-icona { flex: 0 0 auto; color: var(--htc-tenue); }
.htc-valore input[type="date"] { width: 100%; min-width: 0; height: 40px; padding: 0 8px; border: 1px solid #d6d0c6; border-radius: 4px; background: #fff; color: var(--htc-testo); font: inherit; }
.htc-ospiti-vista {
    width: 100%; margin: 0; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit;
}
.htc-ospiti-vista span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htc-ospiti-vista::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg); opacity: .55;
}
.htc-ospiti-vista[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.htc-ospiti-vista:focus-visible { outline: 2px solid var(--hcal-acc); outline-offset: 4px; border-radius: 2px; }

.htc button.htc-cerca {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 64px; margin-left: 8px; padding: 0 30px; border: 0; border-radius: 2px;
    background: var(--htc-acc); color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; cursor: pointer;
}
.htc button.htc-cerca:hover, .htc button.htc-vedi:hover { filter: brightness(1.1); }
.htc button.htc-cerca:focus-visible, .htc button.htc-vedi:focus-visible { outline: 3px solid var(--htc-primario); outline-offset: 2px; }
.htc .htc-nota { margin: 0; padding: 0 24px 16px; color: var(--htc-tenue); font-size: .9rem; }
/* Col calendario grande la nota sta nel riepilogo, che senza JavaScript non c'è */
.htc.hcal--js .htc-nota--senza-js { display: none; }

/* ── Il calendario grande e il riepilogo (Calendario sotto i campi) ─── */
.htc-sotto-campi { display: none; }
.htc.hcal--js .htc-sotto-campi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 28px; align-items: start; margin-top: 28px; }
.htc-grande { padding: 30px 34px 22px; border: 1px solid var(--htc-riga); border-radius: 4px; background: #fff; box-shadow: 0 18px 40px rgba(31, 27, 20, .06); }
.htc-grande-testa { margin-bottom: 20px; }
.htc .htc-grande-titolo { margin: 0; color: var(--htc-primario); font-family: var(--font-heading, inherit); font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.2rem); font-weight: 500; line-height: 1.1; }
.htc .htc-grande-sotto { margin: 4px 0 0; color: var(--htc-tenue); }
.htc-grande-piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--htc-riga); }
.htc-cancella { padding: 4px 0; border: 0; background: transparent; color: var(--htc-primario); font: inherit; font-size: .92rem; cursor: pointer; }
.htc-cancella:hover { text-decoration: underline; }
.htc-intervallo { color: var(--htc-testo); font-size: .92rem; }

.htc-riepilogo { padding: 30px 30px 26px; border-radius: 4px; background: var(--hcal-tinta, #eef2f0); color: var(--htc-testo); }
.htc .htc-occhiello { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--htc-primario); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.htc .htc-occhiello::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--color-accent, #b0804a); }
.htc .htc-viaggio { margin: 0 0 18px; color: var(--htc-primario); font-family: var(--font-heading, inherit); font-size: clamp(1.7rem, 1.2vw + 1.2rem, 2.3rem); font-weight: 500; line-height: 1.1; }
.htc-righe { margin: 0 0 18px; }
.htc-righe div { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(31, 27, 20, .10); }
.htc-righe dt { color: var(--htc-tenue); }
.htc-righe dd { margin: 0; font-weight: 700; text-align: right; }
.htc .htc-da { margin: 0 0 16px; color: var(--htc-testo); }
.htc button.htc-vedi {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; border: 0; border-radius: 2px;
    background: var(--htc-acc); color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.htc-riepilogo .htc-nota { padding: 14px 0 0; }

/* ── Senza JavaScript: i campi del browser, gli ospiti in vista ──────── */
.htc:not(.hcal--js) .htc-ospiti .hcal-ospiti { margin-top: 4px; }

/* ── Telefono e tablet ────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .htc-campi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .htc-campo { padding: 12px 14px; }
    .htc-campo + .htc-campo { border-left: 0; }
    .htc-campi > .htc-campo:nth-child(2) { border-left: 1px solid var(--htc-riga); }
    .htc-ospiti { grid-column: 1 / -1; border-top: 1px solid var(--htc-riga); }
    .htc button.htc-cerca { grid-column: 1 / -1; width: 100%; margin: 8px 0 0; min-height: 56px; }
    .htc.hcal--js .htc-sotto-campi { grid-template-columns: minmax(0, 1fr); }
    .htc-grande { padding: 22px 18px 16px; }
    .htc-ospiti .hcal-ospiti.is-riquadro { left: 0; right: auto; }
}
@media (max-width: 480px) {
    .htc-campi { grid-template-columns: minmax(0, 1fr); padding: 8px; }
    .htc-campi > .htc-campo:nth-child(2) { border-left: 0; border-top: 1px solid var(--htc-riga); }
    .htc-grande-piede { flex-direction: column; align-items: flex-start; }
}