/* ==========================================================================
   IL PORTALE PUBBLICO (Fase 37 — OV-04, PT-01, PT-02).

   E' la faccia del prodotto: la prima cosa che vede un turista di Udine che
   cerca una spiaggia a Rimini. Eredita i colori della vetrina — chi clicca su
   uno stabilimento deve sentirsi nello stesso posto — ma qui puo' respirare.

   Mobile FIRST: chi cerca una spiaggia lo fa dal telefono, spesso in viaggio.
   Le due colonne arrivano a 1000px, e i filtri fino a li' sono una striscia
   che scorre invece di un muro sopra i risultati.
   ========================================================================== */
:root {
    --po-notte: #0c3247;
    --po-blu: #14415e;
    --po-mare: #1f7a94;
    --po-cielo: #8fd3e8;
    --po-sole: #f2913f;
    --po-arancio: #e8621e;
    --po-sabbia: #f7f1e4;
    --po-oro: #f2c17d;
}

body { background: #fff; }

/* LA PAGINA DEI RISULTATI NON E' BIANCA.
   Schede bianche e filtri bianchi su un fondo bianco: niente si staccava da
   niente, e l'unica cosa che teneva insieme le cose era un bordo grigio da un
   pixel. Ora il fondo e' SPIAGGIA e le schede sono bianche — la stessa dose
   di bianco, sabbia, mare e cielo della home.
   Il fondo vero e proprio — grana, luce, sfumatura — lo mette spiaggia.css
   nella stessa regola della vetrina: qui una riga `background: var(--sabbia)`
   sembrerebbe innocua e invece, essendo una scorciatoia, cancellerebbe le
   immagini di fondo di quella regola. */

/* LA RIVA — fra la testata blu e la sabbia c'era un taglio netto, e su una
   pagina che si guarda per venti minuti quel bordo era la riga piu' vista del
   sito. Qui il mare schiarisce, l'onda rompe la linea e comincia la spiaggia:
   sono gli stessi tre elementi della copertina della home, disegnati e non
   scaricati.
   Un elemento vero e non lo sfondo del <body>: la testata e' appiccicosa e
   alta 140px, e un gradiente sul body ci finirebbe SOTTO — invisibile.
   Alta 64px e non 120: qui sotto ci sono i risultati, ed e' per quelli che
   uno e' venuto. */
/* La riva la disegna .riva in spiaggia.css, che e' la stessa per tutte le
   pagine pubbliche: qui si dice solo dove comincia il mare — sotto il fondo
   della testata, che finisce in #10425e — e non si ridisegna niente. */

/* ─── la testa ─────────────────────────────────────────────────────────── */
.po-testa {
    position: sticky; top: 0; z-index: 40;
    background: transparent; transition: background .25s, box-shadow .25s;
}
.po-testa.compatta {
    background: var(--testata-velo);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 18px rgba(12, 50, 71, .25);
}
.po-testa-inner {
    max-width: var(--colonna); margin: 0 auto; padding: .9rem var(--fianco);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.po-nav { display: flex; align-items: center; gap: .3rem; }
.po-nav a {
    display: inline-flex; align-items: center; gap: .4rem;
    color: rgba(255, 255, 255, .92); text-decoration: none;
    font-size: .88rem; font-weight: 600;
    padding: .45rem .8rem; border-radius: 999px;
}
.po-nav a:hover { background: rgba(255, 255, 255, .14); }
/* Il contorno dice che e' un'azione e non una voce di menu: prima era
   su "Sei un gestore?", ora sulla porta unica. */
.po-nav-entra { border: 1px solid rgba(255, 255, 255, .4); }

/* ─── LA COPERTINA ──────────────────────────────────────────────────────
   Niente foto di repertorio: mare, sabbia e gli SPRITE VERI della mappa —
   gli stessi ombrelloni che il bagnino dispone e che il cliente clicca per
   prenotare. E' l'unica cosa che un portale-vetrina non puo' copiare. */
/* Le bande in PIXEL, non in percentuale: la spiaggia e' una striscia alta
   quanto serve agli ombrelloni, e sopra c'e' il mare. A percentuali si
   muovevano con l'altezza della copertina — il mare spariva e gli ombrelloni
   finivano tagliati dal bordo. */
.po-hero {
    --spiaggia: 132px;
    position: relative; overflow: hidden;
    margin-top: -68px; padding: 8.5rem 1.1rem calc(var(--spiaggia) + 1.4rem);
    background: linear-gradient(180deg, var(--testata) 0%, #10425e 34%, #1a6d88 66%, #2f97b0 100%);
    isolation: isolate;
}
.po-mare {
    position: absolute; left: 0; right: 0; bottom: var(--spiaggia); height: 190px;
    background:
        radial-gradient(120% 70% at 22% 0%, rgba(255, 255, 255, .14), transparent 62%),
        linear-gradient(180deg, rgba(42, 144, 171, 0) 0%, #2f9bb4 38%, #63c0d1 100%);
    z-index: -3;
}
/* l'onda: archi bianchi disegnati, non un'immagine da scaricare */
.po-onda {
    position: absolute; left: -5%; right: -5%; bottom: calc(var(--spiaggia) - 12px);
    height: 46px; z-index: -2;
    background:
        radial-gradient(58% 100% at 50% 100%, rgba(255, 255, 255, .92) 46%, transparent 47%) 0 0/190px 46px repeat-x,
        radial-gradient(58% 100% at 50% 100%, rgba(255, 255, 255, .5) 46%, transparent 47%) 52px 9px/230px 40px repeat-x;
    --onda-passo: 190px 0, 282px 9px;
    animation: f-onda 16s linear infinite;      /* faro.css */
}
.po-sabbia {
    position: absolute; inset: auto 0 0 0; height: var(--spiaggia); z-index: -2;
    background: linear-gradient(180deg, #f7ecd4 0%, #ecd7ab 100%);
}
.po-scena { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.po-sprite {
    position: absolute; width: auto;
    transform: translateX(-50%) scale(.82);
    opacity: 0; filter: drop-shadow(0 6px 10px rgba(12, 50, 71, .3));
    animation: po-spunta var(--f-viaggio-lungo) var(--f-esce) forwards;
}
@keyframes po-spunta {
    to { opacity: var(--op, 1); transform: translateX(-50%) scale(1); }
}

/* Il testo sta SOPRA la scena e ha il suo alone: un titolo che finisce
   dietro a un ombrellone non e' un'illustrazione, e' un difetto. */
.po-hero-inner {
    position: relative; z-index: 2;
    max-width: 880px; margin: 0 auto; text-align: center;
}
.po-hero h1 {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700; color: #fff;
    font-size: clamp(1.9rem, 6.2vw, 3.3rem); line-height: 1.1;
    margin: 0 0 .7rem; text-shadow: 0 2px 24px rgba(8, 34, 49, .45);
}
.po-hero h1 em { font-style: normal; color: var(--po-oro); }
.po-sub {
    color: rgba(255, 255, 255, .94); font-size: clamp(.95rem, 2.6vw, 1.1rem);
    line-height: 1.55; margin: 0 auto 1.6rem; max-width: 46rem;
    text-shadow: 0 1px 12px rgba(8, 34, 49, .4);
}
.po-sub strong { color: #fff; }

/* LA RICERCA (proposta B): un campo grande e due di contorno, ognuno con
   l'etichetta sopra ("Cosa cerchi", "Dove", "Giorno"), bordati su bianco, e
   "Cerca" in arancio. La stessa nella carta della home e sopra i risultati:
   erano due barre diverse, a pillole sul blu. Il telefono la mette in
   colonna, ognuna a modo suo (home.css, risultati.css). */
.po-cerca { display: flex; gap: 12px; margin: 0; text-align: left; }
.po-campo {
    display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px;
    padding: 0 16px; cursor: text;
    background: #fff; border: 1.5px solid var(--f-linea-forte); border-radius: 10px;
}
.po-campo-q { flex: 1.5; }
.po-campo-dove { flex: 1; }
.po-campo-data { flex: .8; }
.po-campo > i { flex: 0 0 auto; color: var(--f-mare); font-size: 19px; }
.po-campo:focus-within { border-color: var(--f-mare); box-shadow: 0 0 0 3px rgba(31, 122, 148, .2); }
.po-campo-testo { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.po-eti { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--f-grigio); }
.po-campo input {
    width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent;
    font: inherit; font-size: 16px; font-weight: 600; color: var(--f-inchiostro);
}
.po-campo input::placeholder { color: var(--f-grigio-2); font-weight: 500; }
.po-campo input[type="date"] { font-family: var(--f-mono); }
.po-vai {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 0 0 156px; min-height: 56px; padding: 0 20px;
    border: 0; border-radius: 10px; cursor: pointer;
    background: var(--f-arancio); color: #fff;
    font: inherit; font-size: 17px; font-weight: 700;
    transition: background .15s;
}
.po-vai:hover { background: var(--f-arancio-2); }
.po-vai:active { transform: translateY(1px); }
@media (max-width: 1099.98px) {
    .po-cerca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .po-campo-q { grid-column: 1 / -1; }
}

/* PT-02: i tag pronti */
.po-tag {
    display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center;
    margin-top: 1.1rem; position: relative; z-index: 3;
}
.po-tagbtn {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
    background: rgba(255, 255, 255, .14); color: #fff;
    font: inherit; font-size: .84rem; font-weight: 600; padding: .4rem .85rem;
    backdrop-filter: blur(4px);
    transition: background .15s, border-color .15s, transform .1s;
}
.po-tagbtn:hover { background: rgba(255, 255, 255, .26); }
.po-tagbtn.acceso {
    background: #fff; color: var(--po-blu); border-color: #fff;
    box-shadow: 0 4px 14px rgba(8, 34, 49, .28);
}
.po-tagbtn.acceso .bi { color: var(--po-arancio); }

/* ─── il corpo ─────────────────────────────────────────────────────────── */
.po-corpo { max-width: var(--colonna); margin: 0 auto; padding: 1.6rem var(--fianco) 3rem; }
.po-griglia { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }

/* i filtri: da telefono una striscia che scorre, non un muro sopra i
   risultati — chi apre da telefono vuole vedere le spiagge, non le caselle */
.po-filtri { min-width: 0; }
.po-filtri-testa {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .8rem; margin-bottom: .6rem;
}
.po-filtri-testa h2 {
    font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .09em; color: var(--muto);
    margin: 0;
}
.po-pulisci {
    border: 0; background: none; cursor: pointer; padding: 0;
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--po-arancio);
}
/* Impilati, sempre. La striscia orizzontale serviva quando i filtri stavano
   in linea sotto la copertina; ora da telefono sono un pannello e da schermo
   largo una colonna — in tutti e due i casi si scorre in verticale. */
#po-gruppi { display: grid; gap: .6rem; min-width: 0; }
.po-gruppo {
    border: 1px solid rgba(20, 65, 94, .1); border-radius: 14px;
    padding: .7rem .85rem; background: #fff; min-width: 0;
    box-shadow: 0 1px 4px rgba(20, 65, 94, .05);
}
.po-gruppo h3 {
    display: flex; align-items: center; gap: .4rem;
    font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--muto);
    margin: 0 0 .45rem; white-space: nowrap;
}
.po-gruppo h3 .bi { color: var(--po-mare); font-size: .9rem; }
.po-voce {
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: .22rem 0; font-size: .87rem; white-space: nowrap;
}
.po-voce input { width: 1rem; height: 1rem; accent-color: var(--po-arancio); flex: 0 0 auto; }
.po-voce > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.po-voce:hover span { color: var(--po-blu); }

/* IL NUMERO che dice quanti stabilimenti darebbe quella casella. In coda alla
   riga e in cifre tabulari, cosi' le unita' restano incolonnate fra una riga
   e l'altra: sono numeri da confrontare a colpo d'occhio, non da leggere. */
.po-n {
    margin-left: auto; flex: 0 0 auto;
    font-size: .78rem; font-weight: 600; color: var(--muto);
    font-variant-numeric: tabular-nums;
}
/* Zero: si vede ma non si clicca. Nasconderla farebbe credere di non aver
   cercato bene; lasciarla viva sarebbe un vicolo cieco garantito. */
.po-voce.spento { cursor: default; opacity: .42; }
.po-voce.spento:hover span { color: inherit; }

/* I GRUPPI LUNGHI si chiudono a cinque voci. Quello acceso resta fuori in
   ogni caso (.forza): sparirebbe proprio quello che si vuole togliere. */
.po-gruppo.ridotto .po-voce.oltre:not(.forza) { display: none; }
.po-altri {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 0; background: none; cursor: pointer; padding: .3rem 0 0;
    font: inherit; font-size: .78rem; font-weight: 600; color: var(--po-mare);
}
.po-altri .bi { font-size: .7rem; transition: transform .18s ease; }
.po-gruppo:not(.ridotto) .po-altri .bi { transform: rotate(180deg); }
.po-gruppo:not(.ridotto) .po-altri span::after { content: ' in meno'; }

/* Il gruppo in cui NIENTE e' disponibile si chiude su se stesso: il titolo
   dice gia' tutto, e sei caselle grigie sotto sono sei righe di pagina che
   non aggiungono nulla. Torna intero da solo appena si allarga la ricerca. */
.po-niente {
    display: none; margin: .1rem 0 0;
    font-size: .78rem; color: var(--muto); font-style: italic;
}
.po-gruppo.morto { opacity: .6; }
.po-gruppo.morto .po-voce,
.po-gruppo.morto .po-altri { display: none; }
.po-gruppo.morto h3 { margin-bottom: 0; }
.po-gruppo.morto .po-niente { display: block; }

/* ─── i servizi chiesti, sopra i risultati ─────────────────────────────── */
.po-attivi { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.po-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--po-blu); border-radius: 999px;
    background: var(--po-blu); color: #fff; cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 600; padding: .3rem .5rem .3rem .75rem;
    transition: background .15s, border-color .15s;
}
.po-chip .bi { font-size: .68rem; opacity: .8; }
.po-chip:hover { background: #1d5c83; }
/* "Togli tutti" non e' un filtro: e' il contrario, e non deve sembrarlo. */
.po-chip.vuota {
    background: none; color: var(--po-arancio); border-color: transparent;
    padding-inline: .5rem;
}
.po-chip.vuota:hover { background: rgba(232, 98, 30, .1); }

.po-centro { min-width: 0; }
.po-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem;
}
.po-conteggio { font-size: .95rem; color: var(--testo); }
.po-conteggio strong { font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-size: 1.15rem; color: var(--po-blu); }
.po-conteggio span { color: var(--muto); font-size: .85rem; }
.po-ordina { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--muto); }
.po-ordina select {
    font: inherit; font-size: .86rem; font-weight: 600; color: var(--po-blu);
    border: 1px solid var(--bordo); border-radius: 10px; padding: .4rem .6rem;
    background: #fff; cursor: pointer;
}

/* ─── le schede ────────────────────────────────────────────────────────── */
.po-risultati { display: grid; gap: 1rem; transition: opacity .15s; }
.po-risultati.in-corso { opacity: .45; pointer-events: none; }

.po-scheda {
    display: grid; grid-template-columns: minmax(0, 1fr);
    background: #fff; border: 1px solid rgba(20, 65, 94, .1); border-radius: 18px;
    box-shadow: 0 2px 10px rgba(20, 65, 94, .07);
    overflow: hidden; opacity: 0;
    animation: po-entra var(--f-viaggio-lungo) var(--f-esce) forwards;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
@keyframes po-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.po-scheda:hover {
    box-shadow: 0 14px 34px rgba(12, 50, 71, .13);
    border-color: #cfe3ea; transform: translateY(-2px);
}

.po-scheda-foto { position: relative; display: block; text-decoration: none; }
/* il cuoricino (G5, CL-17), sopra la foto */
.po-scheda { position: relative; }
.po-cuore {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .92); color: var(--testo);
    display: grid; place-items: center; font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.po-cuore:hover { background: #fff; }
.po-cuore.si { color: #c0392b; }
.po-foto {
    aspect-ratio: 16 / 9; background-size: cover; background-position: center;
    background-color: var(--po-sabbia);
}
/* Quando la copertina manca non si mette un rettangolo grigio: si disegna la
   spiaggia con gli sprite VERI della mappa. Piu' onesto di una foto finta —
   e capita spesso, sei stabilimenti su quattordici non ne hanno una.
   Era un ombrellone solo, centrato su una sfumatura pallida: accanto alle
   copertine vere sembrava il segnaposto di un'immagine che non ha caricato.
   Ora e' una spiaggia in miniatura, con le stesse quattro bande della riva
   del resto del sito: cielo, mare, schiuma, sabbia. */
.po-foto-disegnata {
    position: relative; overflow: hidden;
    --cielo-a: #cfeaf4; --cielo-b: #a6dbec;
    /* UN GRADIENTE SOLO, con gli stop netti in percentuale del riquadro.
       Con tre strati sovrapposti le bande finivano dove non dovevano: le
       percentuali di background-position si misurano sullo SPAZIO LIBERO
       (altezza del riquadro meno quella dello strato), non sul riquadro, e il
       mare veniva la meta' di quanto chiesto. Qui invece 34 e' 34. */
    background: linear-gradient(180deg,
        var(--cielo-a) 0%, var(--cielo-b) 34%,
        #6fbdd8 34%, #55aecd 47%, #6ac3d3 58%,
        #f5e9d0 58%, #e9d6ae 100%);
}
.po-foto-disegnata.tinta-1 { --cielo-a: #d9f0f8; --cielo-b: #8fd0e6; }
.po-foto-disegnata.tinta-2 { --cielo-a: #c6e4f1; --cielo-b: #aadeee; }
/* la schiuma sulla battigia, come in grande sulle altre pagine */
.po-foto-disegnata::after {
    content: ''; position: absolute; left: -4%; right: -4%; bottom: 40%; height: 13px;
    background:
        radial-gradient(64% 100% at 50% 100%, rgba(255, 255, 255, .85) 46%, transparent 47%)
            0 0 / 124px 13px repeat-x;
}
/* Tre file in prospettiva: la piu' lontana e' piccola e sbiadita, quella
   davanti intera. E' la stessa regola della scena delle porte d'ingresso. */
.po-foto-disegnata .po-sp {
    position: absolute; width: auto; transform: translateX(-50%);
    filter: drop-shadow(0 5px 8px rgba(12, 50, 71, .26));
}
.po-sp.lontano { left: 24%; bottom: 29%; height: 24%; opacity: .72; }
.po-sp.grande  { left: 55%; bottom: 7%;  height: 45%; }
.po-sp.vicino  { left: 84%; bottom: 15%; height: 33%; opacity: .92; }

.po-luogo {
    position: absolute; left: .8rem; bottom: .8rem;
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(12, 50, 71, .82); color: #fff; backdrop-filter: blur(4px);
    font-size: .78rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px;
}

.po-scheda-corpo { padding: .95rem 1.05rem 1.05rem; display: grid; gap: .7rem; align-content: start; }
.po-scheda-testa h3 { font-size: 1.15rem; margin: 0; line-height: 1.25; }
.po-scheda-testa h3 a { color: var(--po-blu); text-decoration: none; }
.po-scheda-testa h3 a:hover { text-decoration: underline; }
.po-claim { font-size: .88rem; color: var(--muto); margin: .2rem 0 0; line-height: 1.45; }

.po-servizi { display: flex; flex-wrap: wrap; gap: .35rem; }
.po-serv {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; font-weight: 500; color: var(--testo);
    background: var(--po-sabbia); border-radius: 8px; padding: .2rem .5rem;
}
.po-serv .bi { color: var(--po-mare); font-size: .82rem; }
/* Cio' che era stato chiesto si vede subito: e' la risposta alla domanda. */
.po-serv.cercato {
    background: #e6f4ea; color: #14663c; font-weight: 600;
    box-shadow: inset 0 0 0 1px #bfe3cd;
}
.po-serv.cercato .bi { color: #1e8449; }
.po-serv.altri { color: var(--muto); background: transparent; box-shadow: inset 0 0 0 1px var(--bordo); }

.po-scheda-piede {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    border-top: 1px solid var(--bordo); padding-top: .8rem;
}
/* Il numero che spiagge.it non puo' dare: la disponibilita' vera. */
.po-posti { display: grid; line-height: 1.15; }
.po-posti-n {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem;
    color: #1e8449; font-variant-numeric: tabular-nums;
}
.po-posti-l { font-size: .74rem; color: var(--muto); }
.po-posti.pochi .po-posti-n { color: var(--po-arancio); }
.po-posti.pieno .po-posti-n { color: var(--muto); }

.po-prezzo { display: flex; align-items: baseline; gap: .3rem; margin-left: auto; }
.po-da { font-size: .76rem; color: var(--muto); }
.po-eur { font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--po-blu); }
.po-al { font-size: .74rem; color: var(--muto); }

.po-prenota {
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
    background: var(--po-arancio); color: #fff; border-radius: 999px;
    font-weight: 700; font-size: .92rem; padding: .55rem 1.1rem;
    box-shadow: 0 5px 14px rgba(232, 98, 30, .3);
    transition: transform .1s, box-shadow .15s;
}
.po-prenota:hover { box-shadow: 0 7px 20px rgba(232, 98, 30, .42); }
.po-prenota:active { transform: translateY(1px); }

/* il vuoto dice cosa togliere, non "nessun risultato" */
.po-vuoto {
    border: 1px dashed var(--bordo); border-radius: 18px; background: #fff;
    padding: 3rem 1.4rem; text-align: center; color: var(--muto);
}
.po-vuoto .bi { font-size: 2.4rem; opacity: .45; }
.po-vuoto strong { display: block; color: var(--testo); font-size: 1.05rem; margin: .7rem 0 .3rem; }
.po-vuoto p { margin: 0 auto; max-width: 34rem; font-size: .9rem; line-height: 1.55; }
.po-vuoto-btn {
    margin-top: 1rem; border: 1px solid var(--bordo); background: #fff;
    border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer;
    font: inherit; font-weight: 600; font-size: .88rem; color: var(--po-blu);
}
.po-vuoto-btn:hover { border-color: var(--po-arancio); color: var(--po-arancio); }

/* ─── il piede ─────────────────────────────────────────────────────────── */
.po-piede { background: var(--po-notte); color: rgba(255, 255, 255, .8); }
.po-piede-inner {
    max-width: var(--colonna); margin: 0 auto; padding: 2rem var(--fianco);
    display: grid; gap: 1.4rem;
}
.po-piede-chi p { font-size: .86rem; line-height: 1.6; margin: .6rem 0 0; max-width: 38rem; }
.po-piede-link { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.po-piede-link a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .88rem; }
.po-piede-link a:hover { color: #fff; text-decoration: underline; }

/* ─── da tablet in su ──────────────────────────────────────────────────── */
@media (min-width: 720px) {
    .po-hero { --spiaggia: 148px; padding: 9.5rem 1.4rem calc(var(--spiaggia) + 2rem); }
    .po-scheda { grid-template-columns: 300px minmax(0, 1fr); }
    .po-foto { aspect-ratio: auto; height: 100%; min-height: 190px; }
    .po-piede-inner { grid-template-columns: 1fr auto; align-items: start; }
    .po-piede-link { flex-direction: column; gap: .5rem; }
}

@media (min-width: 1000px) {
    .po-griglia { grid-template-columns: 244px minmax(0, 1fr); }
    .po-filtri { position: sticky; top: 84px; align-self: start; }
    .po-scheda { grid-template-columns: 330px minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   DUE PAGINE, NON UNA
   La home fa una domanda sola; i filtri stanno in /cerca, dove c'e'
   qualcosa da restringere. Quello che segue e' cio' che le distingue.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── la home: la copertina si prende tutto ─────────────────────────────
   Senza i risultati sotto, la copertina non e' piu' un cappello: e' la
   pagina. Quindi respira di piu' e la scritta cresce. */
.po-hero-grande { padding-top: 10.5rem; }
.po-hero-grande h1 { font-size: clamp(2rem, 6.4vw, 3.4rem); }

.po-home-corpo { max-width: var(--colonna); margin: 0 auto; padding: 2.4rem var(--fianco) 1rem; }
.po-fascia { margin-bottom: 2.6rem; }
.po-fascia h2 {
    font-size: 1.15rem; margin: 0 0 1rem;
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
}

/* le localita': vengono dal database, non da un elenco scritto a mano */
/* A griglia, con due sole localita', restavano due tessere in un campo
   vuoto. In riga si adattano al proprio nome: due o venti, la fascia ha
   sempre l'aria giusta. */
.po-luoghi { display: flex; flex-wrap: wrap; gap: .7rem; }
.po-luogo-carta {
    display: grid; gap: .1rem; text-decoration: none; color: var(--testo);
    border: 1px solid var(--bordo); border-radius: 14px;
    padding: .8rem 1.3rem .85rem .95rem; background: #fff; min-width: 150px;
    transition: border-color .14s, transform .14s, box-shadow .14s;
}
.po-luogo-carta:hover {
    border-color: var(--po-blu-chiaro, var(--blu-chiaro));
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(18, 60, 84, .1);
}
.po-luogo-carta > .bi { color: var(--po-arancio); font-size: 1.05rem; }
.po-luogo-nome {
    font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; font-weight: 600; font-size: 1rem;
}
.po-luogo-n { font-size: .8rem; color: var(--muto); }

/* ─── i risultati: la testa porta la ricerca con se' ────────────────────
   Chi e' qui ha gia' chiesto qualcosa, e la prima cosa che vorra' fare e'
   correggerla. Mandarlo alla home per cambiare una data lo farebbe
   ricominciare. */
/* La testa bianca e i suoi spazi stanno in risultati.css (proposta B).
   Lo spazio prima della barra di ricerca lo toglie LEI, non la testata:
   accorciando la testata il marchio si alzava rispetto alle altre pagine. */
.po-barra-cerca { max-width: var(--colonna); margin: 0 auto; padding: 0 var(--fianco) 1rem; }

/* ─── i filtri da telefono: un pannello, non un muro ────────────────────
   La striscia orizzontale funzionava con pochi gruppi; con otto diventa una
   fila da scorrere alla cieca. Meglio un bottone che dice quanti filtri sono
   accesi, e un pannello che si apre. */
.po-filtri-apri {
    display: inline-flex; align-items: center; gap: .45rem;
    align-self: start; margin-bottom: .2rem;
    border: 1px solid var(--bordo); background: #fff; border-radius: 999px;
    padding: .5rem 1rem; font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--testo); cursor: pointer;
}
.po-filtri-apri:hover { border-color: var(--blu-chiaro); }
.po-filtri-n {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px;
    border-radius: 999px; background: var(--po-arancio); color: #fff;
    font-size: .74rem; font-weight: 700; padding: 0 .3rem;
}
.po-filtri-chiudi {
    border: 0; background: none; font-size: 1.6rem; line-height: 1;
    color: var(--muto); cursor: pointer; padding: 0 .2rem;
}
.po-filtri-fondo { margin-top: 1rem; }
.po-filtri-fondo .po-vai { width: 100%; justify-content: center; }

/* chiuso: il pannello sta fuori schermo, non "display:none", cosi' entra
   scivolando invece di apparire di colpo */
.po-filtri {
    position: fixed; inset: 0 0 0 auto; z-index: 60;
    width: min(88vw, 340px); background: #fff;
    padding: 1.1rem 1.1rem 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .22s ease;
    box-shadow: -12px 0 40px rgba(12, 50, 71, .2);
}
.po-filtri-aperti .po-filtri { transform: translateX(0); }
/* il velo: chiude toccando fuori, che e' il gesto che tutti provano */
.po-filtri-aperti::before {
    content: ''; position: fixed; inset: 0; z-index: 55;
    background: rgba(12, 50, 71, .45);
}
.po-filtri-aperti { overflow: hidden; }

@media (min-width: 1000px) {
    /* da qui in su i filtri sono una colonna, sempre li': niente bottone,
       niente pannello, niente velo */
    .po-filtri-apri, .po-filtri-chiudi, .po-filtri-fondo { display: none; }
    .po-filtri {
        position: sticky; inset: auto; width: auto; z-index: 1;
        transform: none; box-shadow: none; padding: 0;
        background: transparent; overflow: visible;
    }
    .po-filtri-aperti::before { content: none; }
    .po-filtri-aperti { overflow: auto; }
}

/* "Sono in spiaggia" e' un'AZIONE, non una voce di menu: chi la tocca e' gia'
   sulla sabbia e vuole arrivare al proprio ombrellone, non navigare. Per
   questo ha un fondo pieno, mentre "sei un gestore?" ha solo il contorno.
   Da telefono resta l'icona: e' la voce che serve proprio li', e la frase
   intera mangerebbe la riga al marchio. */
.po-nav-qui {
    background: rgba(242, 145, 63, .22);
    border: 1px solid rgba(242, 145, 63, .55);
}
.po-nav-qui:hover { background: rgba(242, 145, 63, .34) !important; }
.po-nav-qui .bi { color: #f2913f; }
@media (max-width: 620px) {
    .po-nav-qui span { display: none; }
    .po-nav-qui { padding: .45rem .6rem; }
}