/* ==========================================================================
   PartyNow — SEO Homepage (artboard A · Editoriale)
   Token estratti 1:1 dal codice Flutter (app/Partynow2026):
   - Palette categorie ............ lib/utils/app_colors.dart
   - Card radius 24, overlay gradient stops [0, .35, .6] ... featured_event_card.dart
   - Date-pill (radius 20, w900 .5ls) ..................... horizontal_event_card.dart
   - Heart cerchio bianco (shadow .1/blur8/offset0,2) ..... like_button.dart
   - TagChip caps w800 ls1 ................................ tag_chip.dart
   - Filtro: anello arcobaleno 7s, 5 colori ............... main_header.dart (_RainbowBorderPainter)
   Classi prefissate `pn-` per non collidere con css/style.css (eventi/event-detail).
   ========================================================================== */

:root {
    /* Palette categorie — esatta da app_colors.dart */
    --pn-red: #F24B3F;
    --pn-yellow: #FECD3F;
    --pn-green: #5CCC6B;
    --pn-blue: #4A91F2;
    --pn-purple: #A44CCF;
    --pn-accent: var(--pn-red);
    --pn-accent-rgb: 242, 75, 63;

    /* Neutri */
    --pn-bg: #FFFFFF;
    --pn-bg-soft: #F9FAFB;
    --pn-ink: #0E0F13;
    --pn-ink-2: #5A6072;
    --pn-ink-3: #9AA0AE;
    --pn-line: #ECEDF1;
    --pn-dark: #14161C;

    /* Mappa categorie canoniche Firestore. */
    --pn-cat-club: var(--pn-red);
    --pn-cat-concerti: var(--pn-blue);
    --pn-cat-aperitivi: var(--pn-green);
    --pn-cat-arte: var(--pn-purple);
    --pn-cat-social: var(--pn-yellow);

    /* Glow dietro l'hero (transizione 0.8s sul colore, come da brief) */
    --pn-glow: var(--pn-accent);

    --pn-radius: 24px;
    --pn-maxw: 1240px;

    --pn-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pn-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: auto;
    scroll-padding-top: 84px;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow: visible;
    font-family: var(--pn-font);
    font-weight: 500;
    color: var(--pn-ink);
    background: var(--pn-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

.pn-container {
    width: 100%;
    max-width: var(--pn-maxw);
    margin: 0 auto;
    padding: 0 32px;
}

/* ---- Display headings: Barlow Condensed 900 uppercase, ls negativo ---- */
.pn-hero-title,
.pn-section-title {
    font-family: var(--pn-display);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.0;
    margin: 0;
}

/* ---- Buttons ---- */
.pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pn-font);
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    padding: 11px 20px;
    white-space: nowrap;
    transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.pn-btn:active { transform: translateY(1px); }
.pn-btn-primary {
    background: var(--pn-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--pn-accent-rgb), .28);
}
.pn-btn-primary:hover { box-shadow: 0 8px 22px rgba(var(--pn-accent-rgb), .38); }

/* ==========================================================================
   Header
   ========================================================================== */
.pn-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--pn-line);
}
.pn-header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px;
}
.pn-logo img { height: 26px; width: auto; object-fit: contain; object-position: left center; }
.pn-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: 8px;
}
.pn-nav-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--pn-ink);
    opacity: .82;
    transition: opacity .15s ease;
}
.pn-nav-link:hover { opacity: 1; }
.pn-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}
.pn-header .pn-btn-primary {
    background: var(--pn-ink);
    color: #fff;
    box-shadow: 0 14px 34px rgba(14, 15, 19, .18);
}
.pn-header .pn-btn-primary:hover {
    filter: none;
    box-shadow: 0 18px 42px rgba(14, 15, 19, .24);
}

/* City picker */
.pn-city-picker { position: relative; }
.pn-city-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    font-size: 14px;
    color: var(--pn-ink);
    transition: border-color .15s ease;
}
.pn-city-btn:hover { border-color: #d7d9e0; }
.pn-city-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pn-accent);
    box-shadow: 0 0 0 3px rgba(var(--pn-accent-rgb), .18);
}
.pn-city-label { color: var(--pn-ink-3); font-weight: 600; }
.pn-city-value { font-weight: 800; }
.pn-city-caret { color: var(--pn-ink-3); transition: transform .2s ease; }


/* ==========================================================================
   Hero
   ========================================================================== */
.pn-hero {
    position: relative;
    z-index: 5;
    padding: 56px 0 22px;
    overflow: visible;
}
/* Macchie soffuse di colore che driftano e compaiono qua e là nella parte alta
   dell'hero. Molto flebili (whitish), nessun bordo: sfumano a zero prima del
   fondo sezione, che è già bianco. Esperienziale e leggero. */
.pn-hero-glow {
    display: none;
}
.pn-blob {
    position: absolute;
    width: 48%;
    height: 72%;
    border-radius: 50%;
    filter: blur(80px) saturate(1.15);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.pn-blob-1 { background: var(--pn-red);    top: -10%; left: 2%;  animation: pn-blob-a 19s ease-in-out infinite; }
.pn-blob-2 { background: var(--pn-green);  top: -16%; left: 40%; animation: pn-blob-b 24s ease-in-out infinite -7s; }
.pn-blob-3 { background: var(--pn-blue);   top: -8%;  left: 58%; animation: pn-blob-c 28s ease-in-out infinite -13s; }
.pn-blob-4 { background: var(--pn-purple); top: -18%; left: 22%; animation: pn-blob-d 22s ease-in-out infinite -4s; }

@keyframes pn-blob-a {
    0%, 100% { transform: translate(0, 0) scale(1);        opacity: 0; }
    25%      { opacity: .20; }
    50%      { transform: translate(26%, 14%) scale(1.25); opacity: .26; }
    75%      { opacity: .08; }
}
@keyframes pn-blob-b {
    0%, 100% { transform: translate(0, 0) scale(1.1);      opacity: 0; }
    30%      { opacity: .16; }
    55%      { transform: translate(-22%, 10%) scale(1);   opacity: .24; }
    80%      { opacity: .06; }
}
@keyframes pn-blob-c {
    0%, 100% { transform: translate(0, 0) scale(1);        opacity: 0; }
    20%      { opacity: .14; }
    50%      { transform: translate(-18%, 16%) scale(1.2); opacity: .22; }
    78%      { opacity: .07; }
}
@keyframes pn-blob-d {
    0%, 100% { transform: translate(0, 0) scale(1.15);     opacity: 0; }
    35%      { opacity: .15; }
    60%      { transform: translate(24%, 8%) scale(1);     opacity: .22; }
    85%      { opacity: .05; }
}
/* Mood → colori delle macchie (come il bordo rainbow dell'app) */
body.mood-party .pn-blob-1 { background: var(--pn-red); }
body.mood-party .pn-blob-2 { background: var(--pn-yellow); }
body.mood-party .pn-blob-3 { background: var(--pn-green); }
body.mood-party .pn-blob-4 { background: var(--pn-red); }
body.mood-chill .pn-blob-1 { background: var(--pn-green); }
body.mood-chill .pn-blob-2 { background: var(--pn-blue); }
body.mood-chill .pn-blob-3 { background: var(--pn-purple); }
body.mood-chill .pn-blob-4 { background: var(--pn-blue); }
.pn-hero-inner {
    position: relative;
    z-index: 1;
}
.pn-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pn-ink-2);
    box-shadow: 0 2px 10px rgba(15, 18, 30, .05);
}
.pn-badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pn-green);
    box-shadow: 0 0 0 3px rgba(92, 204, 107, .22);
    animation: pn-pulse 2.4s ease-in-out infinite;
}
@keyframes pn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.pn-hero-title {
    font-size: clamp(46px, 5.6vw, 78px);
    margin: 18px 0 0;
    text-transform: none;
}
/* Il «quando» del titolo (js/home-seo.js) cambia col periodo: entra e esce come un rullo. */
.pn-hero-quando { display: inline-block; }
/* Con «Sempre» la parola non c'è: lo span sparisce e i due spazi attorno diventano uno. */
.pn-hero-quando:empty { display: none; }
/* Finché il client non ha scelto il periodo il titolo resta trasparente (niente testo che
   si riordina sotto gli occhi); se lo script non arriva, compare comunque dopo 4 s. */
.pn-home .pn-hero-title.pn-attesa { opacity: 0; animation: pn-titolo-pronto 0s linear 4s forwards; }
@keyframes pn-titolo-pronto { to { opacity: 1; } }
/* La città nel titolo segue il mood (22/10, Riccardo): con Tutto è nera come il resto del
   titolo, con Party rosso → magenta → viola, con Chill verde → acqua. Una striscia sola larga
   il triplo che scorre (background-position): il cambio di mood è una transizione morbida.
   Senza classe di mood (pre-render) vale Tutto: nera. */
.pn-hero-city {
    position: relative;
    background: linear-gradient(90deg, var(--pn-ink) 0%, var(--pn-ink) 33.3%, #F7853F 33.4%, #F24B3F 42%, #E0479E 55%, #A44CCF 66.6%, #2FB57A 66.7%, #1FA3B8 100%);
    background-size: 300% 100%;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position .6s cubic-bezier(.34, 1.2, .55, 1);
}
body.mood-party .pn-hero-city { background-position: 50% 0; }
body.mood-chill .pn-hero-city { background-position: 100% 0; }
/* La città è il comando: «Genova?» e una piccola freccia, tutto cliccabile; apre il
   selettore città del sito. Su desktop, al passaggio, una sottolineatura leggera. */
.pn-hero-citta.pn-hero-city-wrap {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pn-ink);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    text-align: left;
}
.pn-hero-citta__freccia {
    flex: 0 0 auto;
    width: .4em;
    height: .4em;
    margin-left: .1em;
    color: var(--pn-ink-3);
    transition: transform .2s ease;
}
.pn-hero-city::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: .04em;
    height: .06em;
    border-radius: 99px;
    background: inherit;
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity .2s ease;
}
@media (hover: hover) {
    .pn-hero-citta:hover .pn-hero-city::after { opacity: .7; }
    .pn-hero-citta:hover .pn-hero-citta__freccia { transform: translateY(.04em); }
}
@media (prefers-reduced-motion: reduce) {
    .pn-hero-city { transition: none; }
}
.pn-hero-city-wrap {
    display: inline-flex;
    align-items: center;
    gap: .08em;
    white-space: nowrap;
    color: var(--pn-accent);
}
.pn-hero-sub {
    margin: 16px 0 0;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--pn-ink-2);
    font-weight: 500;
}

/* ---- Search + filters + sort ---- */
.pn-searchbar {
    width: min(100%, 720px);
    min-height: 58px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 18px;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 18, 30, .06);
    color: var(--pn-ink-3);
}
.pn-searchbar:focus-within {
    border-color: color-mix(in srgb, var(--pn-accent) 42%, var(--pn-line));
    box-shadow: 0 18px 42px rgba(15, 18, 30, .08), 0 0 0 4px rgba(var(--pn-accent-rgb, 242, 75, 63), .10);
}
.pn-searchbar svg {
    flex: 0 0 auto;
    color: var(--pn-ink-3);
}
.pn-searchbar input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--pn-ink);
    font-family: var(--pn-font);
    font-size: 16px;
    font-weight: 800;
}
.pn-searchbar input::placeholder {
    color: var(--pn-ink-3);
    opacity: .82;
}
.pn-browse-section {
    padding-top: 26px;
}
.pn-browse-controls {
    display: grid;
    gap: 18px;
}
.pn-browse-section .pn-searchbar {
    margin-top: 0;
}
.pn-browse-section .pn-filters {
    margin-top: 0;
}
.pn-browse-section > .pn-container > .pn-filter-zone {
    margin-top: 18px;
}
.pn-filter-zone {
    position: relative;
    z-index: 5;
}
.pn-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}
:root { --pn-spazio-filtri: 8px; }
.pn-time-chips { display: flex; align-items: center; gap: var(--pn-spazio-filtri); flex-wrap: wrap; }

/* Mood: Tutto / Party / Chill (come nell'app) */
.pn-mood {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    background: var(--pn-bg-soft);
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    padding: 3px;
}
.pn-mood-btn {
    flex: 1;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pn-ink-2);
    transition: background .14s ease, color .14s ease;
}
.pn-mood-btn:hover { color: var(--pn-ink); }
.pn-mood-btn.active { color: #fff; }
.pn-mood-btn.active[data-mood="tutto"] { background: var(--pn-ink); }
.pn-mood-btn.active[data-mood="party"] { background: var(--pn-red); }
.pn-mood-btn.active[data-mood="chill"] { background: var(--pn-blue); }

.pn-filter-note {
    max-width: 760px;
    margin: 12px auto 0;
    padding: 12px 16px;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    background: rgba(249, 250, 251, .92);
    color: var(--pn-ink-2);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}
.pn-filter-note strong { color: var(--pn-ink); }
.pn-sort-row {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.pn-chip {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pn-ink-2);
    transition: background .14s ease, color .14s ease;
}
.pn-chip:hover { background: var(--pn-bg-soft); color: var(--pn-ink); }
.pn-chip-active { background: var(--pn-ink); color: #fff; }
.pn-chip-active:hover { background: var(--pn-ink); color: #fff; }

/* Il pannello filtri è un DIALOG (js/pn-foglio.js, 22/10): su desktop centrato, su telefono
   sale dal basso quasi a tutto schermo con la maniglia. Testata e bottoni in fondo fissi, il
   corpo scorre. Sotto, il velo scuro (.pn-velo) e la pagina bloccata. */
.pn-filter-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 140;
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 32px));
    max-height: min(86vh, 780px);
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pn-line);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(15, 18, 30, .28);
    transform: translate(-50%, -50%);
    animation: pn-dialog-entra .22s cubic-bezier(.2, .9, .3, 1.05);
}
@keyframes pn-dialog-entra { from { opacity: 0; transform: translate(-50%, -46%) scale(.98); } }
.pn-filter-maniglia { display: none; }
.pn-filter-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 18px; }
.pn-velo {
    position: fixed;
    inset: 0;
    z-index: 139;
    background: rgba(14, 15, 19, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.pn-velo--acceso { opacity: 1; pointer-events: auto; }
.pn-filter-panel[hidden] { display: none; }
.pn-filter-panel__head {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--pn-line);
}
.pn-filter-panel__head h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    color: var(--pn-ink);
}
.pn-filter-panel__head p {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--pn-ink-3);
}
.pn-filter-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pn-bg-soft);
    color: var(--pn-ink-2);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}
.pn-filter-group {
    padding: 16px 0 2px;
}
.pn-filter-label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pn-ink-3);
}
.pn-filter-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pn-ink-3);
}
.pn-filter-label-row strong {
    letter-spacing: 0;
    text-transform: none;
    color: var(--pn-ink);
    background: var(--pn-bg-soft);
    border-radius: 9px;
    padding: 4px 9px;
}
.pn-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pn-filter-option {
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--pn-bg-soft);
    border: 1px solid var(--pn-line);
    color: var(--pn-ink-2);
    font-size: 13px;
    font-weight: 800;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.pn-filter-option:hover {
    border-color: #d7d9e0;
    color: var(--pn-ink);
}
.pn-filter-option.active {
    background: var(--pn-ink);
    border-color: var(--pn-ink);
    color: #fff;
}
.pn-filter-option span {
    margin-left: 3px;
    color: inherit;
    opacity: .62;
    font-size: 12px;
}
.pn-filter-empty {
    font-size: 13px;
    font-weight: 700;
    color: var(--pn-ink-3);
}
/* Il raggio: cursore nostro, niente aspetto nativo del browser (22/10). */
.pn-radius-slider {
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.pn-radius-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--pn-line); }
.pn-radius-slider::-moz-range-track { height: 6px; border-radius: 99px; background: var(--pn-line); }
.pn-radius-slider::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--pn-ink); }
.pn-radius-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--pn-ink);
    box-shadow: 0 2px 8px rgba(15, 18, 30, .25);
}
.pn-radius-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--pn-ink);
    box-shadow: 0 2px 8px rgba(15, 18, 30, .25);
}
.pn-radius-slider:focus-visible { outline: none; }
.pn-radius-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pn-ink); }
.pn-radius-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pn-ink-3);
}
.pn-filter-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--pn-line);
    background: #fff;
}
.pn-filter-reset,
.pn-filter-done {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 900;
}
.pn-filter-reset {
    flex: 0 0 auto;
    background: #fff;
    color: var(--pn-ink);
    box-shadow: inset 0 0 0 1.5px var(--pn-line);
}
/* «Mostra N eventi»: il bottone principale, scuro come le scelte del sito. */
.pn-filter-done {
    flex: 1 1 auto;
    background: var(--pn-ink);
    color: #fff;
}

/* ---- La sezione Città del dialog (js/pn-lista-citta.js) ---- */
.pn-cerca-comune {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: var(--pn-bg-soft);
    color: var(--pn-ink-3);
}
.pn-cerca-comune input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; color: var(--pn-ink); font: inherit; font-size: 16px; font-weight: 600; outline: none; }
.pn-cerca-comune:focus-within { border-color: var(--pn-ink); background: #fff; }
.pn-comune-lista { margin: 6px 0 0; padding: 4px; border: 1px solid var(--pn-line); border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(15, 18, 30, .1); list-style: none; }
.pn-comune-lista[hidden] { display: none; }
.pn-comune-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.pn-comune-lista li small { color: var(--pn-ink-3); font-size: 13px; font-weight: 700; }
.pn-comune-lista li:hover,
.pn-comune-lista li[aria-selected="true"] { background: var(--pn-bg-soft); }
.pn-citta-chips { display: flex; gap: 6px; margin: 10px -20px 0; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; }
.pn-citta-chips::-webkit-scrollbar { display: none; }
.pn-citta-chip { flex: 0 0 auto; gap: 6px; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--pn-line); }
.pn-citta-chip.pn-chip-active { box-shadow: none; }
.pn-citta-chip .pn-citta-icona { width: 16px; height: 16px; color: #1E9E6A; }
/* La posizione accesa è verde, col nome del comune. */
.pn-citta-chip--posizione.pn-chip-active { background: #1E9E6A; color: #fff; }
.pn-citta-chip--posizione.pn-chip-active .pn-citta-icona { color: #fff; }
.pn-citta-chip:disabled { opacity: .45; cursor: default; }
.pn-citta-avviso { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--pn-ink-3); }
.pn-citta-avviso[hidden] { display: none; }
.pn-filter-group[hidden] { display: none; }

/* Imbuto dei filtri (22/10, Riccardo): un bottone a sé, tondo e alto quanto la barra di
   ricerca, subito alla sua destra. Apre il pannello; se ci sono filtri del pannello
   attivi, un pallino rosso. Il mood ha la sua barra scorrevole sotto la ricerca (.pn-mood--scorrevole). */
.pn-cerca-riga {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 790px);
    margin-top: 28px;
}
.pn-browse-section .pn-cerca-riga { margin-top: 0; }
.pn-cerca-riga .pn-searchbar { flex: 1 1 auto; min-width: 0; width: auto; margin-top: 0; }
.pn-funnel {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pn-ink);
    box-shadow: 0 14px 34px rgba(15, 18, 30, .06);
}
.pn-funnel:hover { background: var(--pn-bg-soft); }
.pn-funnel.active { background: var(--pn-ink); color: #fff; border-color: var(--pn-ink); }
.pn-funnel-pallino {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--pn-red);
}
.pn-funnel-pallino[hidden] { display: none; }

/* Il mood come controllo scorrevole (22/10, Riccardo; dalla dashboard,
   piattaforma/components/pn/pn-modo-luogo-scorrevole.tsx): una barra unica larga quanto la
   ricerca, tre voci uguali e un indicatore che SCIVOLA con una molla morbida sotto la
   scelta. Il colore dell'indicatore segue il mood: Tutto scuro, Party caldo (rosso →
   arancio), Chill fresco (verde → acqua). Il JS mette solo data-mood sulla barra. */
.pn-mood.pn-mood--scorrevole {
    --pn-mood-i: 0;
    --pn-mood-colore: var(--pn-ink);
    --pn-mood-ombra: rgba(14, 15, 19, .22);
    --pn-mood-anello: var(--pn-ink);
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    /* Larga quanto la riga ricerca + imbuto, alta quanto le chip dei periodi (36px visibili). */
    width: min(100%, 790px);
    height: 36px;
    padding: 3px;
    background: var(--pn-bg-soft);
    border: 1px solid var(--pn-line);
    border-radius: 999px;
}
.pn-mood--scorrevole[data-mood="party"] {
    --pn-mood-i: 1;
    /* La luce di una serata: arancio → rosso → magenta → viola PartyNow. */
    --pn-mood-colore: linear-gradient(100deg, #F7853F, var(--pn-red) 32%, #E0479E 66%, var(--pn-purple));
    --pn-mood-ombra: rgba(224, 71, 158, .32);
    --pn-mood-anello: var(--pn-purple);
}
.pn-mood--scorrevole[data-mood="chill"] {
    --pn-mood-i: 2;
    --pn-mood-colore: linear-gradient(100deg, #2FB57A, #1FA3B8);
    --pn-mood-ombra: rgba(31, 163, 184, .3);
    --pn-mood-anello: #1FA3B8;
}
.pn-mood__cursore {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    border-radius: 999px;
    background: var(--pn-mood-colore);
    box-shadow: 0 6px 16px var(--pn-mood-ombra);
    transform: translateX(calc(var(--pn-mood-i) * 100%));
    transition: transform .55s cubic-bezier(.34, 1.45, .55, 1), box-shadow .3s ease;
    will-change: transform;
}
.pn-mood.pn-mood--scorrevole .pn-mood-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0 8px;
    border-radius: 999px;
    background: transparent;
    color: var(--pn-ink-2);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: color .25s ease;
}
.pn-mood.pn-mood--scorrevole .pn-mood-btn.active { color: #fff; }
/* L'anello di focus solo da tastiera, sottile e del colore del mood; mai al tocco o al clic. */
.pn-mood.pn-mood--scorrevole .pn-mood-btn:focus { outline: none; }
.pn-tastiera .pn-mood.pn-mood--scorrevole .pn-mood-btn:focus-visible { outline: 2px solid var(--pn-mood-anello); outline-offset: 1px; }
.pn-mood--scorrevole .pn-icona { width: 15px; height: 15px; transition: color .25s ease; }
/* L'area da toccare resta di 44px anche con la barra sottile. */
.pn-mood.pn-mood--scorrevole .pn-mood-btn::before { content: ''; position: absolute; inset: -6px 0; }
.pn-mood--scorrevole .pn-mood-btn:not(.active) .pn-icona--disco { color: var(--pn-purple); }
.pn-mood--scorrevole .pn-mood-btn:not(.active) .pn-icona--poltrona { color: #1E9E6A; }
/* Il piccolo gesto dell'icona quando si accende: le due metà di «Tutto» fanno un giro, la palla gira e il
   riflesso brilla, la poltroncina affonda un attimo come quando ci si siede. */
.pn-icona--tutto .pn-icona__meta { transform-box: view-box; transform-origin: 12px 12px; }
.pn-mood-btn.active .pn-icona--tutto svg { animation: pn-ic-giro-tutto .8s cubic-bezier(.34, 1.45, .55, 1); }
.pn-icona--disco .pn-icona__palla,
.pn-icona--poltrona .pn-icona__poltrona { transform-box: view-box; }
.pn-icona--disco .pn-icona__palla { transform-origin: 12px 2px; }
.pn-icona--poltrona .pn-icona__poltrona { transform-origin: 12px 20.4px; }
.pn-icona--disco .pn-icona__riflesso { transform-box: fill-box; transform-origin: center; opacity: .85; }
.pn-mood-btn.active .pn-icona--disco .pn-icona__palla { animation: pn-ic-giro .9s ease-out; }
.pn-mood-btn.active .pn-icona--disco .pn-icona__riflesso { animation: pn-ic-brilla .9s ease-out .12s; }
.pn-mood-btn.active .pn-icona--poltrona .pn-icona__poltrona { animation: pn-ic-affondo .7s cubic-bezier(.34, 1.45, .55, 1); }
@keyframes pn-ic-giro-tutto { from { transform: rotate(-180deg) scale(.7); } to { transform: none; } }
@keyframes pn-ic-giro { 0% { transform: rotate(0); } 30% { transform: rotate(-16deg); } 60% { transform: rotate(11deg); } 82% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@keyframes pn-ic-brilla { 0% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1.5) rotate(45deg); } 100% { opacity: .85; transform: scale(1) rotate(90deg); } }
@keyframes pn-ic-affondo { 0% { transform: none; } 35% { transform: translateY(1.2px) scale(1.06, .86); } 100% { transform: none; } }

.pn-filter-zone > .pn-mood--scorrevole { margin-top: 10px; }
.pn-browse-controls { row-gap: 10px; }
.pn-browse-controls .pn-filter-zone > .pn-mood--scorrevole { margin-top: 0; }
/* 10px visibili: le chip dei periodi hanno già 4px di bordo trasparente (area di tocco). */
.pn-filter-zone > .pn-mood--scorrevole + .pn-filters,
.pn-filter-zone > .pn-cerca-riga + .pn-filters { margin-top: 6px; }

/* ---- Icone del sito (js/pn-icone.js): la misura c'è già prima che arrivi l'SVG ---- */
.pn-icona { display: inline-flex; flex: 0 0 auto; width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.pn-icona svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pn-cuore { width: .74em; height: .74em; margin-left: .06em; vertical-align: -.02em; color: var(--pn-red); }

@keyframes pn-foglio-sale { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
    .pn-filter-panel, .pn-velo { animation: none; transition: none; }
    .pn-mood__cursore { transition: none; }
    .pn-mood-btn.active .pn-icona svg,
    .pn-mood-btn.active .pn-icona__palla,
    .pn-mood-btn.active .pn-icona__riflesso,
    .pn-mood-btn.active .pn-icona__poltrona { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-blob { animation: none; opacity: .1; }
}

/* ==========================================================================
   Sections (shared)
   ========================================================================== */
.pn-section { padding: 40px 0; }
.pn-search-mode-hidden { display: none !important; }
.pn-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.pn-section-title {
    font-size: clamp(28px, 3vw, 38px);
    text-transform: none;
}
.pn-section-sub {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--pn-ink-3);
    font-weight: 600;
}
.pn-see-all {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--pn-ink-2);
    transition: color .14s ease;
}
.pn-see-all:hover { color: var(--pn-accent); }

.pn-list-head {
    align-items: center;
}
.pn-sort-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 18, 30, .05);
    color: var(--pn-ink-2);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}
.pn-sort-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: var(--pn-bg-soft);
    color: var(--pn-ink);
    font: inherit;
    padding: 0 12px 0 14px;
    outline: none;
    cursor: pointer;
}
.pn-sort-btn svg {
    color: var(--pn-gray-500);
    transition: transform .16s ease;
}
.pn-sort-control.is-open .pn-sort-btn svg { transform: rotate(180deg); }
.pn-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 25;
    min-width: 220px;
    /* Padding uguale su tutti i lati e angoli concentrici: 22 del pannello - 6 = 16 (22/10). */
    padding: 6px;
    border: 1px solid rgba(16, 17, 24, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(12, 14, 24, .18);
}
.pn-sort-menu button {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--pn-ink-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    padding: 0 14px;
    white-space: nowrap;
    cursor: pointer;
}
.pn-sort-menu button:hover { background: var(--pn-bg-soft); color: var(--pn-ink); }
/* Selezionata come la città scelta (22/10): fondo grigio tenue, nero in grassetto, spunta nera a
   destra. Mai il colore d'accento del momento (di sera è giallo). */
.pn-sort-menu button[aria-selected="true"] {
    background: var(--pn-bg-soft);
    color: var(--pn-ink);
    font-weight: 800;
}
.pn-sort-menu button[aria-selected="true"]::after {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pn-list-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.pn-list-grid .pn-card {
    aspect-ratio: 1 / 1.18;
}
.pn-list-grid .pn-card__title {
    font-size: clamp(23px, 2vw, 30px);
}
/* Intestazione gruppo-data (agenda: eventi raggruppati per giorno). Solo il testo della
   data, allineato al contenuto: niente cerchio col calendario (22/10, Riccardo). */
.pn-list-grid .pn-date-group-head {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 11px;
    margin: 20px 0 2px;
    font-family: var(--pn-display); font-weight: 900; font-size: 23px;
    text-transform: uppercase; color: var(--pn-ink);
}
.pn-list-grid .pn-date-group-head:first-child { margin-top: 0; }
.pn-list-grid .pn-date-group-count {
    margin-left: 2px; font-family: var(--pn-font); font-size: 13px; font-weight: 800;
    color: var(--pn-ink-3); text-transform: none;
}
.pn-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}
.pn-load-more {
    min-height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--pn-ink);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(15, 18, 30, .18);
}
.pn-load-more[hidden] {
    display: none;
}
.pn-web-gate {
    width: min(720px, 100%);
    margin: 34px auto 0;
    padding: 30px;
    border-radius: 30px;
    background: var(--pn-ink);
    color: #fff;
    text-align: center;
    box-shadow: 0 18px 44px rgba(15, 18, 30, .18);
}
.pn-web-gate[hidden] {
    display: none;
}
.pn-web-gate__kicker {
    display: inline-flex;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .66);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.pn-web-gate h2 {
    margin: 0;
    font-family: var(--pn-display);
    font-size: clamp(38px, 5vw, 58px);
    line-height: .9;
    letter-spacing: 0;
}
.pn-web-gate p {
    max-width: 560px;
    margin: 14px auto 0;
    color: rgba(255, 255, 255, .74);
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
}
.pn-web-gate__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
}
.pn-web-gate__btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--pn-ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 950;
}
.pn-web-gate__meta {
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    font-weight: 850;
}

/* ==========================================================================
   Event cards (1:1 Flutter FeaturedEventCard)
   ========================================================================== */
.pn-card {
    position: relative;
    display: block;
    min-width: 0;
    max-width: 100%;
    border-radius: var(--pn-radius);
    overflow: hidden;
    background: var(--pn-card-color, #2a2a2a);
    isolation: isolate;
    transition: transform .18s ease;
}
.pn-card:hover { transform: translateY(-3px); }
.pn-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Overlay app-like, ma con safe zone più alta per titoli lunghi su immagini chiare. */
.pn-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .16) 34%,
            rgba(0, 0, 0, .28) 48%,
            rgba(0, 0, 0, .10) 100%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--pn-card-color) 0%, transparent) 0%,
            color-mix(in srgb, var(--pn-card-color) 18%, transparent) 36%,
            color-mix(in srgb, var(--pn-card-color) 82%, transparent) 54%,
            var(--pn-card-color) 70%,
            var(--pn-card-color) 100%);
}
.pn-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-shadow: none;
}
/* TagChip: caps, w800, ls 1px */
.pn-card__cat {
    font-family: var(--pn-font);
    max-width: 100%;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    opacity: .92;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Titolo: display condensed 900 uppercase */
.pn-card__title {
    font-family: var(--pn-display);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.04;
    color: #fff;
    margin: 0;
    max-width: 100%;
    max-height: calc(2 * 1.04em);
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.pn-card__venue {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.18;
    color: rgba(255, 255, 255, .95);
    overflow: hidden;
}
.pn-card__venue svg { flex: 0 0 auto; }
.pn-card__venue span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pn-card__date {
    margin-top: 9px;
}

/* Date-pill: bg colore evento, radius 20, calendar + w900 caps .5ls */
.pn-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 13px;
    border-radius: 20px;
    background: var(--pn-card-color, #2a2a2a);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.pn-pill svg { width: 14px; height: 14px; }
.pn-pill span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.pn-save-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pn-save-modal.is-open { display: flex; }
/* Scheda evento: lo stesso popup, aperto togliendo `hidden` (js/event-detail.js). */
.pn-save-modal.event-save-modal:not([hidden]) { display: flex; }
.pn-save-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 16, .56);
    backdrop-filter: blur(10px);
}
.pn-save-modal__panel {
    position: relative;
    width: min(360px, 100%);
    background: #fff;
    border: 1px solid rgba(16, 17, 24, .08);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 22px 70px rgba(10, 12, 18, .24);
    text-align: left;
    animation: pn-save-in .18s ease-out;
}
/* Popup «Salva» (27/9, Riccardo): segnalibro come il bottone, «Salvati» come
   nell'app, titolo col condensato maiuscolo delle sezioni, bottone NERO (il rosso
   è per «annullato» e per gli errori), chiusura × in un cerchio sottile. */
.pn-save-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1.5px solid var(--pn-line);
    border-radius: 50%;
    background: #fff;
    color: var(--pn-ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.pn-save-modal__close:hover { border-color: #C9CBD3; background: #F7F7F9; }
.pn-save-modal__close:focus-visible { outline: 2px solid var(--pn-ink); outline-offset: 2px; }
.pn-save-modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding-right: 48px;
}
.pn-save-modal__icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--pn-ink);
    background: #F2F3F6;
}
.pn-save-modal__icon svg { width: 18px; height: 18px; }
.pn-save-modal__kicker {
    margin: 0;
    color: var(--pn-ink-3, #6B6F78);
    font-family: var(--pn-font);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
}
.pn-save-modal h2 {
    margin: 16px 0 0;
    color: var(--pn-ink);
    font-family: var(--pn-display);
    font-weight: 900;
    text-transform: uppercase;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -0.01em;
}
.pn-save-modal__copy {
    margin: 10px 0 18px;
    color: var(--pn-ink-2, #3A3D46);
    font-family: var(--pn-font);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
}
.pn-save-modal__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 999px;
    background: var(--pn-ink);
    color: #fff;
    font-family: var(--pn-font);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(14, 15, 19, .22);
}
.pn-save-modal__cta:focus-visible { outline: 2px solid var(--pn-ink); outline-offset: 3px; }
.pn-save-modal__ghost {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--pn-ink-3, #6B6F78);
    font-family: var(--pn-font);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}
.pn-save-modal-open { overflow: hidden; }
.pn-filter-panel-open { overflow: hidden; }
@keyframes pn-save-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Rails (vertical cards) ---- */
.pn-rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.pn-rail::-webkit-scrollbar { display: none; }
.pn-rail .pn-card {
    flex: 0 0 clamp(300px, 24vw, 430px);
    min-width: 0;
    scroll-snap-align: start;
    aspect-ratio: 1 / 1.12;
}
.pn-rail-3 .pn-card { flex-basis: clamp(320px, 29vw, 460px); }
.pn-rail .pn-card__body { padding: 16px; }
.pn-rail-4 .pn-card__title { font-size: clamp(18px, 1.55vw, 24px); }
.pn-rail-3 .pn-card__title { font-size: clamp(20px, 1.75vw, 27px); }

/* Schede standard: locandina intera in alto + pannello col colore evento sotto.
   Le card "In evidenza" restano overlay tramite override dedicato. */
.pn-rail .pn-card,
.pn-list-grid .pn-card {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    background: var(--pn-card-color, #2a2a2a);
}
.pn-rail .pn-card__img,
.pn-list-grid .pn-card__img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    z-index: 0;
}
.pn-rail .pn-card__overlay,
.pn-list-grid .pn-card__overlay { display: none; }
.pn-rail .pn-card__body,
.pn-list-grid .pn-card__body {
    position: relative;
    inset: auto;
    bottom: auto;
    z-index: 2;
    flex: 1;
    justify-content: flex-start;
    padding: 14px 16px 16px;
    text-shadow: none;
}
.pn-rail .pn-card__cat,
.pn-list-grid .pn-card__cat { opacity: .85; margin-bottom: 7px; }
.pn-rail .pn-card__title,
.pn-list-grid .pn-card__title { margin-bottom: 8px; }
.pn-see-all-card {
    flex: 0 0 clamp(220px, 18vw, 300px);
    min-height: 100%;
    border: 1px solid var(--pn-line);
    border-radius: calc(var(--pn-radius) - 4px);
    background: #fff;
    color: var(--pn-ink);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 22px;
    scroll-snap-align: start;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pn-see-all-card:hover {
    border-color: rgba(15, 23, 42, .18);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}
.pn-see-all-card__eyebrow {
    color: var(--pn-muted);
    font-size: 14px;
    font-weight: 850;
}
.pn-see-all-card__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.pn-see-all-card__title {
    font-family: var(--pn-display);
    font-size: clamp(28px, 3vw, 42px);
    line-height: .92;
    letter-spacing: 0;
}
.pn-see-all-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--pn-ink);
    color: #fff;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.pn-see-all-card__icon svg {
    width: 24px;
    height: 24px;
}
.pn-see-all-card__hint {
    color: var(--pn-muted);
    font-size: 13px;
    font-weight: 850;
}
.pn-search-state {
    flex: 0 0 min(520px, 100%);
    border: 1px solid var(--pn-line);
    border-radius: 28px;
    background: #fff;
    padding: 28px;
    color: var(--pn-muted);
    font-weight: 800;
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}
.pn-search-state strong {
    display: block;
    color: var(--pn-ink);
    font-family: var(--pn-display);
    font-size: clamp(28px, 3vw, 42px);
    line-height: .92;
    margin-bottom: 10px;
}

/* ==========================================================================
   Categorie
   ========================================================================== */
.pn-cats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.pn-cat {
    position: relative;
    border-radius: var(--pn-radius);
    padding: 22px;
    min-height: 168px;
    color: #fff;
    background: var(--pn-cat-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .2s ease;
}
.pn-cat:hover { transform: translateY(-3px); box-shadow: 0 16px 34px color-mix(in srgb, var(--pn-cat-color) 40%, transparent); }
.pn-cat__icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pn-cat__icon svg { width: 26px; height: 26px; }
.pn-cat__name {
    font-family: var(--pn-display);
    font-weight: 800;
    font-size: 24px;
    text-transform: none;
    line-height: 1.04;
}
.pn-cat__count {
    font-size: 13px;
    font-weight: 600;
    opacity: .9;
    margin-top: 4px;
}

/* ==========================================================================
   Weekend section bg
   ========================================================================== */
.pn-weekend-section {
    background: var(--pn-bg-soft);
    border-top: 1px solid var(--pn-line);
    border-bottom: 1px solid var(--pn-line);
}

/* ==========================================================================
   Cities
   ========================================================================== */
.pn-cities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.pn-city {
    position: relative;
    border: 1px solid var(--pn-line);
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.pn-city:hover { transform: translateY(-2px); border-color: #dfe1e8; box-shadow: 0 12px 26px rgba(15, 18, 30, .07); }
.pn-city__dot { width: 9px; height: 9px; border-radius: 50%; }
.pn-city__name { font-weight: 800; font-size: 16px; margin-top: 14px; }
.pn-city__count { font-size: 13px; font-weight: 600; color: var(--pn-ink-3); margin-top: 2px; }
.pn-city__live {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--pn-red);
    background: rgba(242, 75, 63, .1);
    padding: 3px 7px;
    border-radius: 6px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pn-footer {
    background: #0B0C10;
    color: #fff;
    padding: 56px 0 28px;
}
.pn-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 32px;
}
.pn-footer-logo { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 14px; }
.pn-footer-desc { color: rgba(255, 255, 255, .55); font-size: 14px; line-height: 1.5; max-width: 280px; }
.pn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    margin-top: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transition: background .15s ease;
}
.pn-social:hover { background: var(--pn-red); }
.pn-footer-col h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .9);
}
.pn-footer-col li { margin-bottom: 9px; }
.pn-footer-col a { color: rgba(255, 255, 255, .55); font-size: 14px; transition: color .14s ease; }
.pn-footer-col a:hover { color: #fff; }
.pn-footer-bottom {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
}

.pn-footer-titolare {
    margin-top: 4px;
    font-size: 11px;
    opacity: .75;
}

/* ==========================================================================
   Responsive — desktop-first (min 1200px). Sotto: rail scrollabili.
   ========================================================================== */
@media (max-width: 1080px) {
    .pn-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
    .pn-cities { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .pn-container { padding: 0 20px; }
    .pn-nav { display: none; }
    .pn-header-inner { gap: 14px; }
    .pn-featured-section { padding-bottom: 16px; }
    .pn-featured-section + .pn-browse-section { padding-top: 22px; }

    /* Rail orizzontali scrollabili (Popolari / Weekend) */
    .pn-rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 20px;
        gap: 14px;
        margin-inline: -20px;
        padding: 0 20px 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pn-rail::-webkit-scrollbar { display: none; }
    .pn-rail .pn-card {
        flex: 0 0 72%;
        max-width: 320px;
        scroll-snap-align: start;
        aspect-ratio: auto;
    }
    .pn-see-all-card {
        flex: 0 0 58%;
        max-width: 240px;
        border-radius: 24px;
        padding: 18px;
    }
    .pn-see-all-card__title {
        font-size: 30px;
    }
    .pn-see-all-card__icon {
        width: 46px;
        height: 46px;
    }
    .pn-web-gate {
        margin-top: 24px;
        padding: 24px 20px;
        border-radius: 26px;
    }
    .pn-web-gate p {
        font-size: 15px;
    }
    .pn-web-gate__actions {
        align-items: stretch;
        flex-direction: column;
    }
    .pn-web-gate__btn {
        width: 100%;
    }

    .pn-rail .pn-card__body {
        padding: 15px;
    }

    .pn-rail .pn-card__title {
        font-size: clamp(19px, 6vw, 25px);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .pn-rail .pn-card__venue {
        font-size: 12.5px;
    }

    .pn-cats {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        scrollbar-width: none;
    }
    .pn-cats::-webkit-scrollbar { display: none; }
    .pn-cat { flex: 0 0 60%; max-width: 240px; }

    .pn-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .pn-cities { grid-template-columns: repeat(2, 1fr); }
    .pn-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .pn-header-actions .pn-nav-link { display: none; }
    .pn-header-actions .pn-city-picker { display: none; }
    .pn-searchbar {
        min-height: 54px;
        margin-top: 22px;
        padding: 0 15px;
    }
    .pn-searchbar input {
        font-size: 15px;
    }
    .pn-filters {
        gap: 12px 10px;
        align-items: center;
    }
    .pn-time-chips { display: contents; }
    /* Telefono: il dialog sale dal basso quasi a tutto schermo, con la maniglia. */
    .pn-filter-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 92vh;
        max-height: 92vh;
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
        transform: none;
        animation: pn-foglio-sale .3s cubic-bezier(.2, .9, .3, 1);
        transition: transform .25s ease;
    }
    .pn-filter-maniglia { display: block; flex: 0 0 auto; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 99px; background: var(--pn-line); touch-action: none; }
    .pn-filter-panel__head { padding-top: 10px; }
    .pn-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pn-list-head {
        align-items: stretch;
    }
    .pn-sort-control {
        width: 100%;
        justify-content: space-between;
        box-shadow: none;
    }
    .pn-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .pn-list-grid .pn-card {
        border-radius: 18px;
    }
    .pn-list-grid .pn-card__body {
        padding: 10px 11px 12px;
    }
    .pn-list-grid .pn-card__cat {
        font-size: 8px;
        letter-spacing: .55px;
        margin-bottom: 5px;
    }
    .pn-list-grid .pn-card__title {
        font-size: clamp(16px, 4.6vw, 20px);
        line-height: 1.02;
        margin-bottom: 7px;
    }
    .pn-list-grid .pn-card__venue {
        gap: 4px;
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.1;
    }
    .pn-list-grid .pn-card__venue svg {
        width: 13px;
        height: 13px;
    }
    .pn-rail .pn-card { flex-basis: 80%; }
    .pn-see-all-card { flex-basis: 68%; }
    .pn-save-modal { padding: 16px; }
    .pn-save-modal__panel {
        border-radius: 22px;
        padding: 22px;
    }
    .pn-save-modal h2 { font-size: 32px; }
}

@media (max-width: 360px) {
    .pn-list-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   STATO-MONDO SULLA CARD (4 set 2026)
   Un evento annullato o rimandato deve dirlo dove l'utente lo incontra: nella
   lista, non solo aprendo la scheda. Palette del sito: rosso PartyNow per
   «Annullato» (è una negazione), giallo per «Rimandato» (l'evento c'è ancora).
   Nasce nascosto: si mostra solo quando lifecycleStatus lo dice.
   ========================================================================== */
.pn-card__stato {
    align-self: flex-start;
    display: inline-block;
    font-family: var(--pn-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    margin-bottom: 7px;
    color: #fff;
    background: var(--pn-red);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}
.pn-card__stato[data-stato="postponed"] {
    background: var(--pn-yellow);
    color: var(--pn-ink);
}

/* ==========================================================================
   INTERFACCIA 27/9 — liste e home da telefono (sito/NOTE-SITO.md)
   Chi apre da telefono deve vedere le prime schede già nella prima schermata
   (375×812): testata più bassa, filtri su UNA riga che scorre in orizzontale,
   ordinamento compatto.
   ========================================================================== */
.pn-section[hidden] { display: none !important; }
/* La griglia dei controlli della home non si allarga sulla riga dei filtri che scorre. */
.pn-browse-controls { grid-template-columns: minmax(0, 1fr); }
.pn-filter-zone, .pn-filters { min-width: 0; }

@media (max-width: 560px) {
    .pn-hero { padding: 22px 0 8px; }
    .pn-badge { padding: 5px 11px; font-size: 12px; }
    .pn-hero-title { font-size: clamp(32px, 9vw, 40px); margin-top: 10px; }
    .pn-hero-sub { margin-top: 8px; font-size: 15px; line-height: 1.45; }
    .pn-searchbar { min-height: 48px; margin-top: 14px; }
    .pn-cerca-riga { margin-top: 14px; gap: var(--pn-spazio-filtri); }
    .pn-funnel { width: 48px; height: 48px; }
    .pn-mood.pn-mood--scorrevole { width: 100%; }
    .pn-browse-section { padding-top: 14px; }
    .pn-browse-section > .pn-container > .pn-filter-zone { margin-top: 12px; }

    /* I giorni su una riga sola che scorre. */
    .pn-filters {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 12px;
    }
    .pn-time-chips {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        /* Stessa distanza fra le chip e fra la ricerca e il bottone filtri (22/10). */
        gap: var(--pn-spazio-filtri);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* La prima chip parte fuori dalla sfumatura sinistra: padding della riga. */
        padding-inline: 16px;
        margin-inline: -16px;
    }
    .pn-time-chips::-webkit-scrollbar { display: none; }
    .pn-time-chips .pn-chip { flex: 0 0 auto; white-space: nowrap; padding: 8px 13px; }

    /* Home: il titolo della pagina dice già «Cosa si fa stasera a Genova»,
       il secondo titolo «Tutti gli eventi a Genova» spingeva giù le schede. */
    .pn-browse-section .pn-section-head { display: none; }
    .pn-browse-section { padding-bottom: 8px; }
    .pn-browse-section + .pn-section { padding-top: 20px; }

    /* Ordinamento: piccolo, a destra, senza l'etichetta. */
    .pn-sort-row { margin-top: 8px; justify-content: flex-end; }
    .pn-sort-control { width: auto; padding: 4px 6px 4px 10px; }
    .pn-sort-control > span:first-child { display: none; }
    .pn-hero + .pn-section { padding-top: 12px; }
}

/* Card di un evento annullato: grigia, con l'etichetta «Annullato» (27/9).
   Rinviato senza data: stesso principio, più attenuato. */
.pn-card[data-fascia="cancelled"] { --pn-card-color: #6B6F78 !important; }
.pn-card[data-fascia="cancelled"] .pn-card__img { filter: grayscale(1); }
.pn-card[data-fascia="postponed"] .pn-card__img { filter: grayscale(.6); }

/* Correzioni di Riccardo (27/9, telefono).
   Rail orizzontali («I più popolari»…): card ~12% più strette, così la seconda
   spunta di più a destra e si capisce che si scorre.
   Riga dei filtri: i giorni scorrono ACCANTO all'imbuto fermo e si fermano
   sempre su un chip intero (scroll-snap): mai più «…mani» tagliato al bordo;
   la sfumatura sta solo sul bordo che ha altro da scorrere. */
@media (max-width: 560px) {
    .pn-rail .pn-card { flex-basis: 70%; }
    .pn-see-all-card { flex-basis: 58%; }
    /* 22/10: niente scroll-snap sulla riga dei periodi. Lo snap «mandatory» rimetteva la
       chip scelta al bordo sinistro e nascondeva la metà della precedente
       (js/pn-scorrimento.js mostraScelta decide dove fermarsi). */
}

/* ==========================================================================
   Giro UX 27/9 — portato a mano dai prototipi Codex secondo le decisioni di
   Riccardo (vedi sito/NOTE-SITO.md, «Interfaccia 27/9»).
   ========================================================================== */
/* Tocchi di almeno 44 px sui controlli dei filtri. Il chip dei giorni resta
   visivamente come prima: il bordo trasparente allarga solo l'area toccabile. */
.pn-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 4px solid transparent;
    background-clip: padding-box;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pn-filter-option,
.pn-mood-btn,
.pn-filter-reset,
.pn-filter-done { min-height: 44px; }
.pn-filter-close { width: 44px; height: 44px; }
.pn-city-btn { min-height: 44px; }
/* Focus visibile da tastiera (solo tastiera: :focus-visible). */
/* Chip: anello solo da tastiera (classe pn-tastiera, js/pn-scorrimento.js), nello stile del
   sito: sottile, color inchiostro (22/10). Mai dopo un tocco, nemmeno con un focus() via script. */
.pn-chip:focus, .pn-chip:focus-visible { outline: none; }
.pn-tastiera .pn-chip:focus-visible { outline: 2px solid var(--pn-ink); outline-offset: 2px; }
/* Stessa regola per tutti i bottoni dei filtri, dell'ordinamento e dei menu (22/10): niente
   anello blu spesso, mai dopo un tocco; solo da tastiera, sottile e nero. */
.pn-funnel:focus,
.pn-filter-option:focus,
.pn-mood-btn:focus,
.pn-filter-close:focus,
.pn-filter-reset:focus,
.pn-filter-done:focus,
.pn-filter-clear:focus,
.pn-city-btn:focus,
.pn-hero-citta:focus,
.pn-sort-btn:focus,
.pn-sort-menu button:focus,
.pn-load-more:focus { outline: none; }
.pn-tastiera .pn-funnel:focus-visible,
.pn-tastiera .pn-filter-option:focus-visible,
.pn-tastiera .pn-mood-btn:focus-visible,
.pn-tastiera .pn-filter-close:focus-visible,
.pn-tastiera .pn-filter-reset:focus-visible,
.pn-tastiera .pn-filter-done:focus-visible,
.pn-tastiera .pn-filter-clear:focus-visible,
.pn-tastiera .pn-city-btn:focus-visible,
.pn-tastiera .pn-hero-citta:focus-visible,
.pn-tastiera .pn-sort-btn:focus-visible,
.pn-tastiera .pn-sort-menu button:focus-visible,
.pn-tastiera .pn-load-more:focus-visible { outline: 2px solid var(--pn-ink); outline-offset: 2px; }
.pn-tastiera .pn-searchbar:has(input:focus-visible) { outline: 2px solid var(--pn-ink); outline-offset: 2px; }
/* Riga dei giorni: lo spazio in coda che permette anche all'ultimo giorno di
   arrivare a sinistra (js: portaGiornoASinistra). */
.pn-chip-coda { flex: 0 0 auto; width: 0; height: 1px; }
@media (max-width: 560px) {
    .pn-time-chips .pn-chip { padding: 5px 11px; }
}

.pn-filter-clear {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--pn-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}
.pn-filter-note .pn-filter-clear { margin-left: 8px; vertical-align: middle; }
/* Una riga leggera, niente riquadro (22/10): «Stasera non c'è niente, guarda domani →»,
   «Nessun evento con questi filtri, togli i filtri». L'uscita è un link. */
.pn-filter-note.pn-filter-note--riga {
    max-width: none;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--pn-ink-2);
}
.pn-filter-note--riga .pn-filter-clear {
    min-height: 0;
    margin-left: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--pn-red);
    font-size: 14px;
    font-weight: 800;
    vertical-align: baseline;
}
.pn-filter-note--riga .pn-filter-clear:hover { text-decoration: underline; text-underline-offset: 3px; }
.pn-list-grid > .pn-filter-note--riga { grid-column: 1 / -1; }
.pn-search-state__azioni { display: block; margin-top: 14px; }
.pn-filter-empty--lista {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border: 1px dashed var(--pn-line);
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--pn-ink-2);
}

/* ==========================================================================
   «IN EVIDENZA» GRANDE + LE ALTRE RAIL PIÙ PICCOLE (22/10/2026, Riccardo)
   - Le schede in evidenza sono verticali, grandi come le card dei Popolari di prima
     (.pn-rail--evidenza usa le misure base di .pn-rail). Niente chip, niente «Più info».
   - Intestazione come le altre sezioni, ma più grande e più piena, con la fiamma rossa.
   - Le altre rail della home (.pn-rail--piccola: Popolari, Festival, Weekend,
     Ferragosto) hanno card piccole: su telefono se ne vedono circa 2,3, così si
     capisce che si scorre; testo più piccolo e bilanciato.
   - Ogni rail sfuma solo sul bordo che ha altro da scorrere (js/pn-scorrimento.js).
   - Sezioni della home più vicine: circa metà dello spazio di prima.
   ========================================================================== */

/* Senza locandina (pnSenzaIniziali, js/pn-featured.js): il logo rotondo dell'organizzatore,
   oppure una tessera col nome del locale; mai le iniziali.
   IL LOGO NON SI STIRA MAI (23/10, Riccardo: «piuttosto, se non c'è spazio, metti solo il
   logo rotondo»). Nello spazio della locandina il logo sta in un cerchio bianco, centrato
   sulla tessera col colore della card, con le sue proporzioni (contain, mai cover/fill).
   Markup unico per tutte le superfici: pnLogoTondo (js/pn-featured.js). La tessera porta
   anche .pn-card__img, così ha le stesse misure della locandina in ogni lista. */
.pn-card .pn-card__img.pn-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    object-fit: initial;
}
.pn-logo-tondo {
    display: block;
    flex: 0 0 auto;
    width: 56%;
    max-width: 240px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 22px rgba(0, 0, 0, .18);
}
.pn-rail--piccola .pn-logo-tondo { width: 64%; }
.pn-card .pn-card__segnaposto {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    text-align: center;
}
.pn-card .pn-card__segnaposto span {
    font-family: var(--pn-display);
    font-weight: 900;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.05;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

/* ---- «In evidenza» = solo schede EVENTO (23/10/2026, Riccardo: «vedo una cosa, clicco e
   se ne apre un'altra»). Le serate di un'organizzazione in evidenza portano la STRISCIA
   dell'organizzatore: un secondo bottone DENTRO la scheda, in fondo, sotto data e luogo
   (link a sé, mai annidato in quello della scheda: la «scheda» visibile è il contenitore
   <div class="pn-evid"> col colore della card, che contiene il link della card e la
   striscia), alta 48 px; solo in «In evidenza» (home e «Vedi tutti»).
   23/10 sera, Riccardo: «mettilo dentro la scheda in fondo… tutte le schede la stessa
   altezza… l'importante è che le immagini siano allineate, la linea che separa l'immagine e
   sotto rimanga allineata tra tutte, e al massimo alcune schede avranno lo spazio in fondo un
   pochino più lungo, vuoto». Quindi: la riga stira tutte le schede all'altezza di quella con
   la striscia, la locandina ha la stessa altezza ovunque (stessa larghezza anche su
   telefono, proporzione fissa), titolo sempre su due righe e data e luogo su una: la linea
   immagine/testo e le righe di testo sono allineate; chi non ha la striscia ha un po' di
   spazio vuoto in fondo. Markup: js/pn-featured.js pnSchedaEvidenza. ---- */
.pn-evid {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    border-radius: var(--pn-radius);
    overflow: hidden;
    background: var(--pn-card-color, #2a2a2a);
    isolation: isolate;
    transition: transform .18s ease;
}
.pn-rail .pn-evid { flex: 0 0 clamp(300px, 24vw, 430px); scroll-snap-align: start; }
.pn-rail-3 .pn-evid { flex-basis: clamp(320px, 29vw, 460px); }
.pn-evid > .pn-card,
.pn-rail .pn-evid > .pn-card,
.pn-list-grid .pn-evid > .pn-card {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
}
.pn-evid > .pn-card:hover { transform: none; }
@media (hover: hover) { .pn-evid:hover { transform: translateY(-3px); } }
.pn-rail--evidenza .pn-evid,
.pn-griglia-evidenza.pn-list-grid .pn-evid { border-radius: 22px; }
/* Righe di testo allineate fra le schede: titolo che occupa sempre due righe, data e luogo su una. */
.pn-rail--evidenza .pn-card__title,
.pn-griglia-evidenza .pn-card__title { min-height: calc(2 * 1.04em); }
.pn-rail--evidenza .pn-card__venue span,
.pn-griglia-evidenza .pn-card__venue span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-evid__org {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 0 12px 12px;
    padding: 7px 10px 7px 8px;
    border-radius: 14px;
    background: #fff;
    color: var(--pn-ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .10);
    -webkit-tap-highlight-color: transparent;
}
.pn-evid__org:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pn-evid__logo {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
}
.pn-evid__testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.pn-evid__testo strong,
.pn-evid__conta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-evid__testo strong { font-size: 14px; font-weight: 800; }
.pn-evid__sep { display: none; }
.pn-evid__conta { font-size: 12.5px; font-weight: 600; color: var(--pn-ink-2); }
.pn-evid__freccia { flex: 0 0 auto; color: var(--pn-ink-2); transition: transform .15s ease; }
.pn-evid__org:hover .pn-evid__freccia { transform: translateX(2px); color: var(--pn-ink); }
/* Data e luogo ancorati in fondo, alla stessa altezza in tutte le schede (23/10 sera, Riccardo:
   «info luogo e calendario mettili allineati in fondo, se no sembrano posizioni a caso»): lo
   spazio libero sta fra titolo e data. Le schede senza striscia tengono vuoto in fondo lo
   spazio della striscia (48 px + 12 di margine), così data e luogo stanno dove stanno nelle altre. */
.pn-rail--evidenza .pn-card__title + .pn-card__venue,
.pn-griglia-evidenza .pn-card__title + .pn-card__venue { margin-top: auto; }
.pn-rail--evidenza > .pn-card .pn-card__body { padding-bottom: calc(14px + 60px); }
.pn-griglia-evidenza.pn-list-grid > .pn-card .pn-card__body { padding-bottom: calc(18px + 60px); }
/* Schede di «In evidenza» un po' meno alte (23/10 sera): locandina 10:7 invece di 4:3. */
.pn-rail--evidenza .pn-card__img { flex: 0 0 auto; aspect-ratio: 10 / 7; }
.pn-rail--evidenza .pn-card__body { padding: 12px 16px 14px; }
.pn-rail--evidenza .pn-card__title { margin-bottom: 6px; }
@media (max-width: 900px) {
    /* Stesse misure delle card della riga su telefono (.pn-rail .pn-card: 72%, max 320). */
    .pn-rail .pn-evid { flex: 0 0 72%; max-width: 320px; }
}
@media (max-width: 560px) {
    .pn-rail .pn-evid { flex-basis: 70%; }
    .pn-rail--evidenza .pn-evid { border-radius: 20px; }
    /* Card strette (circa 235 px): «28 serate in programma» intero. */
    .pn-rail .pn-evid__org { margin: 0 10px 10px; gap: 8px; padding: 7px 8px 7px 7px; }
    .pn-rail .pn-evid__logo { flex-basis: 28px; width: 28px; height: 28px; }
    .pn-rail .pn-evid__conta { font-size: 12px; }
    .pn-rail .pn-evid__freccia { width: 16px; height: 16px; }
    .pn-rail--evidenza > .pn-card .pn-card__body { padding-bottom: calc(14px + 58px); }
}
@media (max-width: 639px) {
    .pn-griglia-evidenza.pn-list-grid .pn-evid { border-radius: 20px; }
}

/* ---- Intestazione di «In evidenza»: stesso stile dei titoli delle altre sezioni, solo
   ~12% più grande, con la fiamma rossa a sinistra alta quanto le maiuscole e appoggiata
   sulla linea del testo. Niente ombre. ---- */
.pn-evidenza .pn-evidenza__titolo { font-size: clamp(31px, 3.4vw, 43px); }
.pn-evidenza__fiamma {
    display: inline-flex;
    width: .72em;
    height: .72em;
    margin-right: .16em;
    vertical-align: -.02em;
    color: var(--pn-red);
}

/* ---- Card piccole delle altre rail ---- */
.pn-rail.pn-rail--piccola { gap: 12px; }
.pn-rail.pn-rail--piccola .pn-card { flex-basis: clamp(200px, 15.5vw, 280px); }
/* Locandina quadrata (prima 4:3 bassa), titolo su 2 righe al massimo, data e luogo una riga
   ciascuno coi puntini solo se serve (22/10). */
.pn-rail--piccola .pn-card__img,
.pn-rail--piccola .pn-card__segnaposto { aspect-ratio: 1 / 1; }
.pn-rail--piccola .pn-card__title { -webkit-line-clamp: 2; line-clamp: 2; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.pn-rail--piccola .pn-card__venue span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-rail-3.pn-rail--piccola .pn-card { flex-basis: clamp(220px, 19vw, 310px); }
.pn-rail--piccola .pn-card__body { padding: 10px 12px 12px; }
.pn-rail--piccola .pn-card__cat { font-size: 9.5px; letter-spacing: .06em; margin-bottom: 4px; }
.pn-rail--piccola .pn-card__title,
.pn-rail-3.pn-rail--piccola .pn-card__title { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.08; margin-bottom: 4px; }
.pn-rail--piccola .pn-card__venue { font-size: 11.5px; font-weight: 600; margin-top: 4px; opacity: .9; }
.pn-rail--piccola .pn-card__venue svg { width: 12px; height: 12px; }
.pn-rail--piccola .pn-see-all-card { flex-basis: clamp(160px, 12vw, 210px); padding: 16px; }
.pn-rail--piccola .pn-see-all-card__title { font-size: 24px; }

/* ---- Indizio di scorrimento (js/pn-scorrimento.js): sfumatura stretta SOLO sul bordo che
   ha altro da scorrere; a inizio riga niente a sinistra, in fondo niente a destra. ---- */
.pn-rail,
.pn-time-chips {
    --pn-sfuma-sx: 0px;
    --pn-sfuma-dx: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pn-sfuma-sx), #000 calc(100% - var(--pn-sfuma-dx)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--pn-sfuma-sx), #000 calc(100% - var(--pn-sfuma-dx)), transparent 100%);
}
.pn-scorre-sx { --pn-sfuma-sx: 18px; }

.pn-scorre-dx { --pn-sfuma-dx: 36px; }

/* ---- Sezioni della home più vicine; «In evidenza» è la prima, subito sotto l'header ---- */
.pn-home > .pn-section:not(.pn-browse-section):not(.pn-featured-section) { padding: 20px 0; }
.pn-home > .pn-featured-section { padding-top: 30px; padding-bottom: 8px; }
/* Sotto «In evidenza» il blocco «Cosa si fa…» arriva presto (22/10: circa metà di prima). */
.pn-home > .pn-featured-section + .pn-hero { padding-top: 24px; }

/* ---- Raggio delle card proporzionato alla grandezza (22/10): le grandi di «In evidenza»
   un po' più tonde delle piccole. La locandina sta a filo dentro la card (overflow
   nascosto), quindi segue lo stesso raggio. ---- */
.pn-rail--evidenza .pn-card { border-radius: 22px; }
.pn-rail--piccola .pn-card,
.pn-rail--piccola .pn-see-all-card { border-radius: 18px; }

@media (max-width: 900px) {
    .pn-rail.pn-rail--piccola .pn-card { flex-basis: 30%; max-width: 220px; }
    .pn-rail--piccola .pn-card__title,
    .pn-rail-3.pn-rail--piccola .pn-card__title { font-size: clamp(14px, 4vw, 16px); }
    .pn-rail--piccola .pn-card__venue { font-size: 11px; }
    .pn-rail--piccola .pn-card__cat { font-size: 9px; }
    .pn-rail--piccola .pn-see-all-card { flex-basis: 30%; max-width: 170px; }
    .pn-rail--piccola .pn-see-all-card__title { font-size: 22px; }
}
@media (max-width: 560px) {
    /* Respiro fra la barra speciale e il titolo con la fiamma (26px), poco sotto le schede. */
    .pn-home > .pn-featured-section { padding-top: 26px; padding-bottom: 0; }
    .pn-home > .pn-featured-section + .pn-hero { padding-top: 14px; }
    .pn-rail--evidenza .pn-card { border-radius: 20px; }
    .pn-rail--piccola .pn-card,
    .pn-rail--piccola .pn-see-all-card { border-radius: 16px; }
    /* ~2,3 card visibili: la terza spunta al bordo destro. */
    .pn-rail.pn-rail--piccola { gap: 10px; }
    .pn-rail.pn-rail--piccola .pn-card { flex-basis: 42%; }
    .pn-rail--piccola .pn-see-all-card { flex-basis: 42%; }
    .pn-scorre-dx { --pn-sfuma-dx: 28px; }
}

/* ==========================================================================
   CALENDARIO del sito (js/pn-calendario.js, 22/10/2026): mai quello nativo.
   Desktop: pannello sotto la riga dei periodi. Telefono: foglio dal basso.
   ========================================================================== */
.pn-cal { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.pn-cal--aperto { pointer-events: auto; }
.pn-cal__foglio {
    position: fixed;
    top: var(--pn-cal-top, 140px);
    left: var(--pn-cal-left, 16px);
    width: 340px;
    padding: 14px 14px 16px;
    border: 1px solid var(--pn-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(15, 18, 30, .18);
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity .18s ease, transform .24s cubic-bezier(.2, .9, .3, 1.1);
}
.pn-cal--aperto .pn-cal__foglio { opacity: 1; transform: none; }
.pn-cal__maniglia { display: none; }
.pn-cal__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pn-cal__mese { font-family: var(--pn-display); font-size: 20px; font-weight: 900; letter-spacing: .01em; }
.pn-cal__freccia {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--pn-bg-soft);
    color: var(--pn-ink);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.pn-cal__freccia:disabled { opacity: .35; cursor: default; }
.pn-cal__settimana,
.pn-cal__griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pn-cal__settimana span { padding: 6px 0; text-align: center; font-size: 12px; font-weight: 800; color: var(--pn-ink-3); }
.pn-cal__griglia { row-gap: 2px; }
.pn-cal__giorno {
    position: relative;
    display: grid;
    place-items: center;
    height: 42px;
    padding: 0;
    background: none;
    color: var(--pn-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.pn-cal__giorno span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
.pn-cal__giorno:hover:not(:disabled):not(.pn-cal__giorno--inizio):not(.pn-cal__giorno--fine) span { background: var(--pn-bg-soft); }
.pn-cal__giorno:disabled { color: var(--pn-ink-3); opacity: .45; cursor: default; }
.pn-cal__giorno--oggi span { box-shadow: inset 0 0 0 1.5px var(--pn-ink); }
/* L'intervallo è una BARRA continua (22/10): estremi pieni e scuri col testo bianco, in mezzo
   un fondo tinto senza interruzioni, arrotondata verso l'esterno e dritta verso l'interno;
   a fine settimana va a capo con gli arrotondamenti giusti (classi --lun / --dom dal JS).
   Al passaggio del mouse, prima del secondo tocco, la stessa barra più chiara (--anteprima). */
.pn-cal { --pn-cal-barra: rgba(14, 15, 19, .09); --pn-cal-barra-anteprima: rgba(14, 15, 19, .05); }
.pn-cal__giorno--dentro { background: var(--pn-cal-barra); }
.pn-cal__giorno--anteprima { background: var(--pn-cal-barra-anteprima); }
.pn-cal__giorno--inizio { background: linear-gradient(90deg, transparent 50%, var(--pn-cal-barra) 50%); }
.pn-cal__giorno--fine { background: linear-gradient(90deg, var(--pn-cal-barra) 50%, transparent 50%); }
.pn-cal__giorno--inizio.pn-cal__giorno--fine,
.pn-cal__giorno--inizio.pn-cal__giorno--dom,
.pn-cal__giorno--fine.pn-cal__giorno--lun { background: none; }
.pn-cal__giorno--anteprima-fine { background: linear-gradient(90deg, var(--pn-cal-barra-anteprima) 50%, transparent 50%); }
.pn-cal__giorno--dentro.pn-cal__giorno--lun,
.pn-cal__giorno--anteprima.pn-cal__giorno--lun { border-radius: 999px 0 0 999px; }
.pn-cal__giorno--dentro.pn-cal__giorno--dom,
.pn-cal__giorno--anteprima.pn-cal__giorno--dom { border-radius: 0 999px 999px 0; }
.pn-cal__giorno--inizio span,
.pn-cal__giorno--fine span { background: var(--pn-ink); color: #fff; box-shadow: none; }
.pn-cal__giorno--anteprima-fine span { box-shadow: inset 0 0 0 1.5px var(--pn-ink); }
.pn-cal__puntino {
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 99px;
    background: var(--pn-red);
}
.pn-cal__giorno--inizio .pn-cal__puntino,
.pn-cal__giorno--fine .pn-cal__puntino { background: #fff; bottom: 6px; }
.pn-cal__giorno:focus-visible { outline: none; }
.pn-cal__giorno:focus-visible span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pn-ink); }
.pn-cal__scelta { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--pn-ink-2); }
.pn-cal__azioni { display: flex; gap: 10px; margin-top: 12px; }
.pn-cal__azioni button {
    flex: 1 1 0;
    min-height: 44px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.pn-cal__annulla { background: #fff; color: var(--pn-ink); box-shadow: inset 0 0 0 1.5px var(--pn-line); }
.pn-cal__applica { background: var(--pn-ink); color: #fff; }
.pn-cal__applica:disabled { opacity: .4; cursor: default; }
@media (max-width: 560px) {
    .pn-cal::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(14, 15, 19, .38);
        opacity: 0;
        transition: opacity .2s ease;
    }
    .pn-cal--aperto::before { opacity: 1; }
    .pn-cal__foglio {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
        opacity: 1;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.2, .9, .3, 1);
    }
    .pn-cal--aperto .pn-cal__foglio { transform: none; }
    .pn-cal__maniglia { display: block; width: 40px; height: 5px; margin: 4px auto 10px; border-radius: 99px; background: var(--pn-line); }
    .pn-cal__giorno { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .pn-cal__foglio, .pn-cal::before, .pn-cal__giorno span { transition: none; }
}

/* ==========================================================================
   Tocco (22/10/2026, Riccardo): niente evidenziazione azzurra né testo
   selezionato quando si toccano righe, chip e bottoni; l'anello di fuoco
   solo da tastiera (:focus-visible), mai al tocco o al clic.
   ========================================================================== */
a, button, [role="option"], [role="button"], .pn-chip, .pn-card, .pn-mood-btn, .pn-filter-option, .pn-hero-citta, .pn-barra-speciale {
    -webkit-tap-highlight-color: transparent;
}
button, [role="option"], [role="button"], .pn-chip, .pn-mood-btn, .pn-filter-option, .pn-hero-citta, .pn-barra-speciale, .pn-cal__giorno {
    -webkit-user-select: none;
    user-select: none;
}
button:focus:not(:focus-visible),
[role="option"]:focus:not(:focus-visible) { outline: none; }

/* ---- «Eventi in evidenza» (eventi?featured=true, 22/10): «🔥 In evidenza a Genova ⌄», senza
   sottotitolo e senza la riga dei periodi; le schede tutte, dalla prossima, per data. ---- */
.pn-titolo-evidenza { display: none; }
.pn-solo-evidenza .pn-titolo-tutti { display: none; }
.pn-solo-evidenza span.pn-titolo-evidenza { display: inline; }
.pn-solo-evidenza .pn-icona.pn-titolo-evidenza { display: inline-flex; }
.pn-solo-evidenza .pn-hero-sub,
.pn-solo-evidenza #pn-filters { display: none; }

/* Griglia di «In evidenza a …»: le schede grandi del carosello della home (stessa card, stessi
   colori, raggio 20/22), una per riga sul telefono, 2 su tablet, 3 su desktop. La lista
   normale e «Mostra altri» qui non servono. */
.pn-griglia-evidenza { display: none; }
.pn-solo-evidenza .pn-list-grid.pn-griglia-evidenza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pn-solo-evidenza #pn-events-list,
.pn-solo-evidenza .pn-load-more-wrap,
.pn-solo-evidenza #pn-web-gate { display: none !important; }
.pn-griglia-evidenza.pn-list-grid .pn-card { border-radius: 22px; }
.pn-griglia-evidenza.pn-list-grid .pn-card__body { padding: 16px 18px 18px; }
.pn-griglia-evidenza.pn-list-grid .pn-card__title { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.02; }
.pn-griglia-evidenza.pn-list-grid > .pn-filter-note--riga,
.pn-griglia-evidenza.pn-list-grid > .pn-stato-vuoto { grid-column: 1 / -1; }
@media (max-width: 1023px) {
    .pn-solo-evidenza .pn-list-grid.pn-griglia-evidenza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 639px) {
    .pn-solo-evidenza .pn-list-grid.pn-griglia-evidenza { grid-template-columns: 1fr; gap: 16px; }
    .pn-griglia-evidenza.pn-list-grid .pn-card { border-radius: 20px; }
    .pn-griglia-evidenza.pn-list-grid .pn-card__body { padding: 15px 16px 17px; }
    .pn-griglia-evidenza.pn-list-grid > .pn-card .pn-card__body { padding-bottom: calc(17px + 60px); }
    .pn-griglia-evidenza.pn-list-grid .pn-card__cat { font-size: 10px; letter-spacing: .8px; margin-bottom: 7px; }
    .pn-griglia-evidenza.pn-list-grid .pn-card__title { font-size: clamp(22px, 6.6vw, 28px); margin-bottom: 9px; }
    .pn-griglia-evidenza.pn-list-grid .pn-card__venue { font-size: 13px; gap: 6px; margin-top: 6px; }
    .pn-griglia-evidenza.pn-list-grid .pn-card__venue svg { width: 15px; height: 15px; }
}

/* ---- Ordinamento: UNA pillola sola (22/10, Riccardo). Prima una pillola bianca contornata
   con dentro una seconda grigia spostata: doppia forma sbilanciata. Ora il contenitore è solo
   un allineatore (con «Ordina per» come testo semplice su desktop) e il bottone è la pillola:
   un contorno, testo e chevron centrati, padding uguale ai lati, alta come le chip (44 px). ---- */
.pn-sort-row .pn-sort-control,
.pn-sort-row .pn-sort-control.is-open {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    width: auto;
}
.pn-sort-row .pn-sort-btn {
    min-height: 44px;
    height: 44px;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    background: #fff;
    color: var(--pn-ink);
    font-size: 14px;
    font-weight: 800;
}
.pn-sort-row .pn-sort-btn:hover { border-color: #d7d9e0; }

/* ---- Pagina organizzatore con tante serate (22/10): ricerca, filtri, mood e periodi come la
   home, sopra la lista (js/pn-organizzatore.js). Stesse misure della home; solo lo spazio sotto. ---- */
.pn-org-controlli { margin: 4px 0 22px; }
.pn-org-controlli .pn-cerca-riga { margin-top: 0; }
.pn-org-controlli .pn-cerca-riga--solo-filtri { justify-content: flex-end; }
.pn-org-controlli > .pn-filter-zone:first-child { margin-top: 0; }
.pn-org-controlli .pn-filter-zone { margin-top: 12px; }
.pn-org-controlli .pn-filter-zone > .pn-mood + .pn-filters { margin-top: 12px; }
.pn-list-grid > .pn-card[hidden],
.pn-list-grid > .pn-date-group-head[hidden] { display: none; }