/* LA HOME (proposta B, tavola "B · Web · Home") — portale.html.
   In cima la domanda, grande e a sinistra, sul blu di notte; sotto la
   ricerca in una carta bianca che morde il bordo della copertina, con i tag
   pronti dentro; poi "Liberi oggi" (quattro spiagge con posto, con la loro
   copertina), la sezione "La mappa e' quella del bagnino" col disegno fatto
   degli sprite veri della mappa, e "Dove si va" come elenco.
   portale.css resta il foglio comune con /cerca (testata, carte delle
   copertine, piede): qui c'e' solo la home. Si carica prima di faro.css. */

body.po-home { background: #fff; }

/* ─── la testata: trasparente sulla copertina, velata scorrendo ─── */
body.po-home .po-testa-inner { padding-top: 18px; padding-bottom: 18px; }
body.po-home .po-nav { gap: 8px; }
body.po-home .po-nav a {
    min-height: 44px; padding: 0 16px; border-radius: 10px;
    background: rgba(12, 50, 71, .58); border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font-size: 15px; font-weight: 700;
}
body.po-home .po-nav a:hover { background: rgba(12, 50, 71, .8); }
body.po-home .po-nav-qui .bi { color: var(--f-sole); }

/* ─── la copertina ─── */
/* Niente foto di repertorio: il sito non ne usa, e una spiaggia qualunque
   in cima alla home direbbe il falso su tutte le altre. La notte di Faro,
   con una luce fredda in alto a destra e il mare che schiarisce in basso
   (la luce era gialla: sul blu faceva una macchia verdognola). */
body.po-home .po-hero {
    margin-top: -80px; padding: 190px var(--fianco) 124px;
    background:
        radial-gradient(46% 62% at 86% 0%, rgba(214, 238, 246, .12), rgba(214, 238, 246, 0) 70%),
        radial-gradient(70% 60% at 0% 100%, rgba(31, 122, 148, .42), rgba(31, 122, 148, 0) 72%),
        linear-gradient(180deg, #0c3247 0%, #0e3a53 46%, #135471 78%, #1a6886 100%);
}
body.po-home .po-hero-inner {
    max-width: calc(var(--colonna) - 2 * var(--fianco)); margin: 0 auto; text-align: left;
}
body.po-home .po-hero h1 {
    max-width: 820px; margin: 0 0 18px;
    font-family: var(--f-titoli); font-weight: 800; font-size: 72px; line-height: 1.02;
    letter-spacing: -.03em; text-shadow: 0 2px 22px rgba(12, 50, 71, .35);
}
body.po-home .po-hero h1 em { color: var(--f-sole); }
body.po-home .po-sub {
    max-width: 600px; margin: 0; font-size: 19px; line-height: 28px;
    color: rgba(255, 255, 255, .93); text-shadow: none;
}
body.po-home .po-sub strong { font-weight: 800; }

/* ─── la carta della ricerca ─── */
.po-carta-cerca {
    position: relative; z-index: 3;
    width: calc(100% - 2 * var(--fianco)); max-width: calc(var(--colonna) - 2 * var(--fianco));
    margin: -74px auto 0; padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
    background: #fff; border: 1px solid var(--f-linea); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15, 36, 51, .18);
}
/* i campi e "Cerca" sono quelli comuni ai risultati, in portale.css */

/* i tag pronti: dentro la carta, scuri sul bianco */
body.po-home .po-tag { justify-content: flex-start; gap: 8px; margin: 0; }
body.po-home .po-tagbtn {
    min-height: 36px; padding: 0 12px; gap: 7px; border-radius: 8px;
    background: #fff; border: 1px solid var(--f-linea); color: var(--f-inchiostro);
    font-size: 14px; font-weight: 700; white-space: nowrap;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.po-home .po-tagbtn .bi { color: var(--f-mare); font-size: 15px; }
body.po-home .po-tagbtn:hover { border-color: var(--f-notte); background: #fff; }

/* ─── il corpo ─── */
body.po-home .po-home-corpo { padding: 48px var(--fianco) 0; }
body.po-home .po-fascia { margin: 0 0 48px; }
body.po-home .po-fascia h2 {
    margin: 0; font-family: var(--f-titoli); font-weight: 800; font-size: 32px; line-height: 1.12;
    letter-spacing: -.02em; color: var(--f-notte);
}

/* liberi oggi */
.po-fascia-testa {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px;
    flex-wrap: wrap; margin-bottom: 20px;
}
body.po-home .po-liberi-sez h2 { font-size: 36px; }
.po-quando { margin-left: 12px; font-family: var(--f-testo); font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--f-grigio); }
.po-tutti {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 16px; font-weight: 700; color: var(--f-mare); text-decoration: none;
}
.po-tutti:hover { color: var(--f-notte); }
.po-liberi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.po-libera {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: #fff; border: 1px solid var(--f-linea); border-radius: 12px;
    color: var(--f-inchiostro); text-decoration: none;
    transition: border-color .14s, box-shadow .14s;
}
.po-libera:hover { border-color: var(--f-linea-forte); box-shadow: 0 10px 26px rgba(15, 36, 51, .1); color: var(--f-inchiostro); }
.po-libera-foto { display: block; }
.po-libera .po-foto { aspect-ratio: auto; height: 164px; min-height: 0; }
.po-libera-corpo { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; flex: 1; }
.po-libera-corpo > strong {
    font-family: var(--f-titoli); font-weight: 700; font-size: 20px; line-height: 24px; color: var(--f-notte);
}
.po-libera-dove { display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 20px; color: var(--f-grigio); }
.po-libera-dove .bi { color: var(--f-mare); font-size: 14px; }
.po-libera-piede {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--f-linea-2);
}
.po-libera-dove + .po-libera-piede, .po-libera-corpo > strong + .po-libera-piede { margin-top: 12px; }
.po-libera-posti { display: flex; align-items: center; gap: 7px; font-size: 15px; line-height: 20px; color: var(--f-grigio); white-space: nowrap; }
.po-libera-posti strong { font-weight: 800; color: var(--f-inchiostro); }
.po-libera-prezzo { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-align: right; }
.po-libera-prezzo strong { font-family: var(--f-titoli); font-weight: 800; font-size: 20px; color: var(--f-inchiostro); white-space: nowrap; }
.po-libera-prezzo span { font-size: 13px; color: var(--f-grigio); }
.po-libera-prezzo span:empty { display: none; }

/* ─── la mappa e' quella del bagnino ─── */
.po-mappa-sez { background: linear-gradient(180deg, #d9ebf2 0%, #eef5f8 100%); }
.po-mappa-inner {
    max-width: var(--colonna); margin: 0 auto; padding: 40px var(--fianco);
    display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 40px; align-items: center;
}
.po-mappa-testo { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.po-mappa-testo h2 {
    margin: 0; font-family: var(--f-titoli); font-weight: 800; font-size: 40px; line-height: 1.04;
    letter-spacing: -.02em; color: var(--f-notte);
}
.po-mappa-punti { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.po-mappa-punti li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; line-height: 25px; color: var(--f-inchiostro); }
.po-mp-bollo {
    flex: 0 0 auto; width: 36px; height: 36px; margin-top: -5px; border-radius: 10px;
    display: grid; place-items: center; background: #fff; border: 1px solid var(--f-linea);
    color: var(--f-mare); font-size: 18px;
}
.po-mp-bollo .f-forma { font-size: 16px; }
.po-mappa-vai { align-self: flex-start; min-height: 48px; gap: 8px; padding: 0 20px; font-size: 16px; }

/* il disegno: dall'alto, come la mappa vera — il mare, la schiuma, e le
   file degli ombrelloni sulla sabbia (li mette portale.js) */
.po-mappa-vista {
    --spiaggia: 180px;
    position: relative; overflow: hidden; isolation: isolate;
    height: 320px; border-radius: 16px;
    background: linear-gradient(180deg, #17607c 0%, #1f7a94 100%);
    box-shadow: 0 12px 32px rgba(15, 36, 51, .12);
}
.po-mappa-vista .po-mare { height: 120px; }
/* gli ombrelloni si piantano quando la sezione entra nello schermo, e i
   liberi poi si accendono uno dopo l'altro (portale.js) */
.po-mappa-vista:not(.in-vista) .po-sprite { animation-play-state: paused; }
.po-luce {
    position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
    background: var(--f-verde); box-shadow: 0 0 0 2px #fff; transform: scale(0);
}
.po-luce.acceso { transform: none; animation: po-accendi .32s var(--f-esce); }
@keyframes po-accendi { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: none; } }
.po-mappa-carta {
    position: absolute; left: 16px; top: 16px; z-index: 2;
    display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--f-linea); border-radius: 12px;
    box-shadow: 0 8px 22px rgba(12, 50, 71, .18);
}
.po-mappa-carta > strong { font-family: var(--f-titoli); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--f-notte); }
.po-mappa-carta > span:not(.po-mc-liberi) { margin-top: -8px; font-size: 14px; color: var(--f-grigio); }
.po-mc-liberi { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--f-grigio); }
.po-mc-liberi .f-forma { font-size: 16px; }
.po-mc-liberi strong { font-family: var(--f-titoli); font-weight: 800; font-size: 28px; line-height: 1; color: var(--f-inchiostro); }

/* ─── dove si va: un elenco, con la freccia ─── */
body.po-home #po-fascia-luoghi h2 { margin-bottom: 14px; }
body.po-home .po-luoghi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
body.po-home .po-luogo-carta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-width: 0; min-height: 64px; margin-bottom: -1px; padding: 0; border-radius: 0;
    border: 0; border-top: 1px solid var(--f-linea); border-bottom: 1px solid var(--f-linea);
    background: none; color: var(--f-inchiostro); text-decoration: none;
}
body.po-home .po-luogo-carta:hover { transform: none; box-shadow: none; border-color: var(--f-linea); }
body.po-home .po-luogo-carta:hover .po-luogo-nome { color: var(--f-mare); }
.po-luogo-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
body.po-home .po-luogo-nome {
    font-family: var(--f-titoli); font-weight: 700; font-size: 21px; color: var(--f-notte);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.po-home .po-luogo-n { font-size: 14px; color: var(--f-grigio); }
body.po-home .po-luogo-carta > .bi { color: var(--f-mare); font-size: 18px; }
body.po-home .po-luogo-tutti .po-luogo-nome { font-family: var(--f-testo); font-size: 16px; font-weight: 800; color: var(--f-mare); }

body.po-home .po-piede { margin-top: 24px; }

/* ─── fino alla scrivania stretta ─── */
@media (max-width: 1099.98px) {
    body.po-home .po-hero h1 { font-size: 60px; }
    .po-liberi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .po-mappa-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    body.po-home .po-luoghi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── il telefono ─── */
@media (max-width: 719.98px) {
    body.po-home .po-testa-inner { padding-top: 10px; padding-bottom: 10px; }
    body.po-home .po-nav a { padding: 0 12px; font-size: 14px; }
    body.po-home .po-hero { margin-top: -64px; padding: 104px var(--fianco) 76px; }
    body.po-home .po-hero h1 { font-size: 40px; margin-bottom: 12px; }
    body.po-home .po-sub { font-size: 16px; line-height: 24px; }

    .po-carta-cerca { margin-top: -44px; padding: 14px; gap: 14px; }
    body.po-home .po-cerca { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    body.po-home .po-vai { min-height: 52px; }
    /* i tag in una riga che scorre: a capo facevano quattro righe di
       pillole prima della prima spiaggia */
    body.po-home .po-tag {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0 -14px; padding: 0 14px;
    }
    body.po-home .po-tag::-webkit-scrollbar { display: none; }

    body.po-home .po-home-corpo { padding-top: 36px; }
    body.po-home .po-fascia { margin-bottom: 36px; }
    body.po-home .po-fascia h2, body.po-home .po-liberi-sez h2 { font-size: 28px; }
    .po-quando { display: block; margin: 4px 0 0; font-size: 15px; }
    .po-fascia-testa { align-items: flex-end; }
    /* le quattro carte scorrono di lato, e la successiva si intravede */
    .po-liberi {
        display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
        gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 calc(-1 * var(--fianco)); padding: 0 var(--fianco) 4px;
        scroll-padding-inline: var(--fianco);
    }
    .po-liberi::-webkit-scrollbar { display: none; }
    .po-libera { scroll-snap-align: start; }
    .po-libera .po-foto { height: 150px; }

    .po-mappa-inner { padding: 32px var(--fianco); gap: 24px; }
    .po-mappa-testo h2 { font-size: 30px; }
    .po-mappa-punti li { font-size: 16px; line-height: 23px; }
    .po-mappa-vai { align-self: stretch; justify-content: center; }
    .po-mappa-vista { height: 300px; }
    .po-mappa-carta { left: 12px; top: 12px; padding: 12px 14px; }

    body.po-home .po-luoghi { grid-template-columns: minmax(0, 1fr); }
    body.po-home .po-luogo-nome { font-size: 19px; }
}