/* Pagine per segmento (hotel-agriturismi, locali-botteghe, aziende-agenzie).
   Si carica DOPO /css/sito.css: <link rel="stylesheet" href="/css/segmento.css">.
   Qui solo quello che alla home non serve: inquadratura delle foto, pulsanti a due righe, benefici, chiusura. */

/* inquadratura: --pos si imposta sull'immagine, con style="--pos:50% 40%" */
.hero img,.frame{object-position:var(--pos,50% 50%)}
.frame{width:100%;aspect-ratio:4/3;object-fit:cover}

/* due pulsanti per le pagine con due tipi di attività: titolo del pulsante e, sotto, il tipo */
.btn--2l{flex-direction:column;gap:2px;line-height:1.2;padding-top:10px;padding-bottom:10px}
.btn--2l small{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.92}
@media(max-width:599px){.hero .cta,.chiusura .cta{flex-direction:column;align-items:stretch}}

/* tre benefici */
.bene{list-style:none;display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
@media(min-width:900px){.bene{grid-template-columns:repeat(3,1fr)}}
.bene li{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--red);padding:var(--sp-3)}
.bene h3{margin-bottom:10px}
.bene p{font-size:16px;color:var(--ink-70)}

/* chiusura: la domanda e il pulsante */
.chiusura{background:var(--ink);color:#fff;text-align:center;border-top:1px solid rgba(224,168,92,.35);border-bottom:1px solid rgba(224,168,92,.35)}
.chiusura h2{max-width:20ch;margin:0 auto;text-wrap:balance;line-height:1}
.chiusura p{max-width:52ch;margin:var(--sp-3) auto 0;color:#EFE6DA}
.chiusura .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--sp-4)}
.chiusura .btn--ghost{color:#fff;border-color:#fff}
.chiusura .btn--ghost:hover{background:#fff;color:var(--ink)}

/* barra mobile senza la riga dei posti: più bassa, quindi anche il banner dei cookie scende */
@media(max-width:899px){body{padding-bottom:84px}.cookie{bottom:84px}}