/* Galleria arte — struttura. L'ESTETICA si cambia in arte-stile.css.
   1.1.0 — impaginazione approvata da Marco l'1 set 2026.

   1.1.11 — sidebar filtri sempre visibile da 1200px in su (var(--ta-soglia-sidebar)
   concettuale, in realta' fissa a 1200px qui sotto: i CSS non accettano
   variabili nelle media query). Sotto i 1200px il pannello filtri e' un
   cassetto che entra da SINISTRA (non piu' dal basso), aperto dal bottone
   fisso #ta-filtro-fisso ancorato al bordo sinistro dello schermo. */

/* ---------- CORAZZA CONTRO IL TEMA ----------
   BeTheme applica sottolineature, colori link e regole immagini
   che sporcano la galleria: qui si azzerano con forza. */
.ta-galleria a,
.ta-galleria a:hover,
.ta-galleria a:focus{text-decoration:none !important;border-bottom:none !important;box-shadow:none}
.ta-galleria a,.ta-galleria a:hover{color:inherit !important}
.ta-galleria button{-webkit-appearance:none;appearance:none;text-transform:none;
                    letter-spacing:normal;line-height:1.4;box-shadow:none;margin:0;
                    font-family:inherit;cursor:pointer}
/* Il tema colora i bottoni anche su focus e tocco: senza queste forzature,
   sul telefono la pastiglia scelta restava bianca e non si capiva cosa
   fosse attivo. Sfondo e testo dei nostri bottoni li decidiamo noi. */
.ta-galleria .ta-chip{background:var(--arte-fondo-scheda) !important;color:var(--arte-testo) !important}
.ta-galleria .ta-chip.ta-on,
.ta-galleria .ta-chip.ta-on:hover,
.ta-galleria .ta-chip.ta-on:focus,
.ta-galleria .ta-chip.ta-on:active{background:var(--arte-selezione-fondo) !important;
                                   border-color:var(--arte-selezione-fondo) !important;color:#fff !important}
.ta-galleria .ta-chip.ta-on .ta-n{color:#cfcfcf !important}
.ta-galleria .ta-chip.ta-on i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.ta-galleria .ta-pill,.ta-galleria .ta-pill:hover,
.ta-galleria .ta-pill:focus,.ta-galleria .ta-pill:active{background:var(--arte-selezione-fondo) !important;color:#fff !important}
.ta-galleria .ta-filtro-fisso,.ta-galleria .ta-filtro-fisso:hover,
.ta-galleria .ta-filtro-fisso:focus,.ta-galleria .ta-filtro-fisso:active{background:var(--arte-selezione-fondo) !important;color:#fff !important}
.ta-galleria .ta-pill-azione,.ta-galleria .ta-pill-azione:hover,
.ta-galleria .ta-pill-azione:focus,.ta-galleria .ta-pill-azione:active{background:var(--arte-accento) !important;color:#fff !important}
.ta-galleria .ta-cuore{background:var(--arte-fondo-scheda) !important}
.ta-galleria .ta-cuore.ta-on{color:var(--arte-accento) !important}
.ta-galleria .ta-stanza,.ta-galleria .ta-stanza:hover,
.ta-galleria .ta-stanza:focus{background:var(--arte-fondo-scheda) !important;color:var(--arte-testo) !important}
/* niente contorno azzurro del browser al tocco, ma la tastiera deve vedersi */
.ta-galleria button:focus:not(:focus-visible){outline:none}
.ta-galleria img{border:none;border-radius:0;max-width:100%}
.ta-galleria h1,.ta-galleria h2,.ta-galleria h3{margin:0}

.ta-galleria{font-family:var(--arte-font-ui);color:var(--arte-testo);font-size:15px;line-height:1.5;
             background:var(--arte-fondo)}
.ta-galleria *{box-sizing:border-box}

/* ---------- fascia d'apertura ----------
   .ta-apertura e' solo lo sfondo (sotto i 1200px e' una carta con angoli
   arrotondati e un margine, da 1200px in su va a tutta larghezza dello
   SCHERMO — vedi il breakpoint piu' sotto). Il testo dentro sta in
   .ta-apertura-int, un contenitore separato largo al massimo 1600px e
   centrato, con GLI STESSI padding laterali usati da .ta-layout per il
   resto della pagina (20/30/40): cosi' il titolo resta allineato con la
   griglia sottostante anche quando lo sfondo sfonda la pagina. */
.ta-apertura{margin:0 0 26px;padding:38px 0 42px;
             text-align:left;border-radius:var(--arte-raggio);
             background:linear-gradient(120deg,var(--arte-cipria-1),var(--arte-cipria-2) 50%,var(--arte-cipria-3))}
.ta-apertura-int{max-width:var(--arte-larghezza);margin:0 auto;padding:0 20px}
.ta-occhiello{font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
              color:var(--arte-cipria-testo)}
.ta-apertura h1{font-family:var(--arte-font-titoli);font-size:40px;line-height:1.02;
                letter-spacing:-.03em;margin:10px 0;max-width:620px;color:var(--arte-testo)}
.ta-apertura p{font-size:14px;color:rgba(25,23,20,.62);margin:0}

/* ---------- riga ricerca + conta + filtri ---------- */
.ta-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
          max-width:var(--arte-larghezza);margin:0 auto 6px}
.ta-cerca{display:flex;align-items:center;gap:8px;flex:1 1 260px;min-width:0;
          border:1px solid rgba(25,23,20,.13);background:var(--arte-fondo-scheda);
          border-radius:999px;padding:6px 8px 6px 15px;box-shadow:var(--arte-ombra)}
.ta-lente{color:var(--arte-testo-tenue);font-size:21px;line-height:1}
/* Il tema (be.css) mette margin-bottom:20px su OGNI input[type=search] del
   sito, noi compresi: senza azzerarlo qui quei 20px fantasma finivano
   dentro .ta-cerca (flex, align-items:center) e la barra diventava alta
   quasi 80px con la scritta schiacciata in alto invece che al centro.
   Misurato dal vivo su staging: 78px -> 58px una volta tolto il margine. */
#ta-q{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;
      font:inherit;font-size:16px;padding:10px 0;margin:0;color:var(--arte-testo)}
.ta-conta{color:var(--arte-testo-tenue);font-size:13px;white-space:nowrap;
          font-variant-numeric:tabular-nums}
.ta-pill{border:0;border-radius:999px;background:var(--arte-selezione-fondo);color:#fff;
         padding:13px 18px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.ta-pill:hover{background:#000}
.ta-pill-azione{background:var(--arte-accento)}
.ta-pill-azione:hover{background:var(--arte-accento-scuro)}
#ta-badge{background:#fff;color:var(--arte-testo);border-radius:999px;
          min-width:20px;padding:1px 7px;font-size:12px;text-align:center}

/* ---------- bottone fisso "FILTRO", tablet e telefono ----------
   Ancorato al bordo sinistro dello schermo, sempre a portata di dito
   mentre si scorre la pagina. Sparisce da 1200px in su, dove i filtri
   sono gia' visibili come sidebar (vedi fondo file). */
.ta-filtro-fisso{position:fixed;left:0;top:50%;z-index:99990;transform:translateY(-50%);
                 display:flex;flex-direction:column;align-items:center;gap:8px;
                 border:0;border-radius:0 var(--arte-raggio-piccolo) var(--arte-raggio-piccolo) 0;
                 background:var(--arte-selezione-fondo);color:#fff;
                 padding:16px 9px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.ta-filtro-fisso:hover{background:#000}
.ta-filtro-fisso-tx{writing-mode:vertical-rl;transform:rotate(180deg);
                    font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ta-filtro-fisso #ta-badge{writing-mode:horizontal-tb}

/* ---------- intestazioni di sezione ---------- */
.ta-sez{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
        max-width:var(--arte-larghezza);margin:34px auto 14px}
.ta-sopra{margin:0;color:#9b604d;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.ta-sez-tit{font-family:var(--arte-font-titoli);font-size:31px;margin:3px 0 0;line-height:1.1}
#ta-togli{border:0;background:none;font:inherit;font-size:14px;text-decoration:underline;
          color:var(--arte-testo-tenue);padding:6px 2px}

/* ---------- carosello delle stanze ----------
   Scorre col dito, senza barra visibile, e si aggancia alle carte.
   .ta-carosello e' il contenitore che centra sia la striscia che le
   frecce sotto: cosi' restano allineate anche quando .ta-stanze non
   e' piu' larga quanto la pagina (dentro .ta-corpo, da 1200px). */
.ta-carosello{max-width:var(--arte-larghezza);margin:0 auto}
.ta-stanze{display:flex;gap:12px;overflow-x:auto;padding:2px 0 8px;
           width:100%;
           scrollbar-width:none;-webkit-overflow-scrolling:touch;
           scroll-snap-type:x mandatory}
.ta-stanze::-webkit-scrollbar{display:none}
/* Frecce avanti/indietro: nascoste finche' galleria.js non le mostra
   (solo quando la striscia scorre davvero — vedi aggiornaFrecce()).
   Stesso trattamento visivo dei cuoricini sulle foto: tonde, bianche,
   icona nello stesso grigio-bruno tenue. */
.ta-frecce{display:flex;gap:10px;justify-content:center;margin:6px 0 2px}
/* .ta-frecce{display:flex} da sola vince sempre su [hidden]{display:none}
   dello user agent (stessa specificita', ma la nostra regola viene dopo
   nel foglio di stile): senza questa riga esplicita l'attributo hidden
   messo da JS non nasconderebbe piu' nulla a schermo, anche se
   .hidden resta true nel DOM — bug visto negli screenshot di verifica. */
.ta-frecce[hidden]{display:none}
.ta-freccia{width:38px;height:38px;border:0;border-radius:50%;flex:0 0 auto;
            display:flex;align-items:center;justify-content:center;
            background:var(--arte-fondo-scheda);box-shadow:0 5px 18px rgba(0,0,0,.13);
            color:var(--arte-testo-tenue);font-size:22px;line-height:1}
.ta-freccia:disabled{opacity:.35}
/* display:block !important — BeTheme mette i bottoni in flex di riga e
   la foto finisce accanto al nome invece che sopra. Serve la forzatura. */
.ta-stanza{display:block !important;flex:0 0 auto;width:76%;max-width:var(--arte-luogo-larghezza);
           padding:0;overflow:hidden;text-align:left;scroll-snap-align:start;
           border:1px solid rgba(25,23,20,.13);border-radius:var(--arte-raggio);
           background:var(--arte-fondo-scheda);color:var(--arte-testo);
           transition:border-color .15s,box-shadow .15s}
.ta-stanza.ta-on{border-color:var(--arte-accento);box-shadow:0 0 0 2px rgba(219,108,67,.28)}
/* La foto della stanza e' 3:2 e la carta e' piu' bassa: qualcosa si
   taglia per forza. Si taglia il PAVIMENTO, non il quadro: senza
   object-position il ritaglio e' centrato e mangia il bordo alto
   della tela, che nelle stanze sta in alto. */
.ta-stanza img{display:block !important;width:100% !important;max-width:100% !important;
               aspect-ratio:16/8.4;object-fit:cover;object-position:center top}
.ta-stanza span{display:block !important;padding:11px 13px;width:100%}
.ta-stanza b{display:block;font-size:15px}
.ta-stanza small{display:block;margin-top:3px;color:var(--arte-testo-tenue);font-size:12.5px}

.ta-attiva{display:none;max-width:var(--arte-larghezza);margin:14px auto 0;
           background:var(--arte-accento-fondo);border-radius:var(--arte-raggio-piccolo);
           padding:13px 16px;font-size:13.5px;line-height:1.55}
.ta-attiva.ta-on{display:block}

/* ---------- griglia delle opere ---------- */
.ta-griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px;
            max-width:var(--arte-larghezza);margin:0 auto}
.ta-op{min-width:0}
.ta-foto{position:relative;overflow:hidden;border-radius:var(--arte-raggio);
         background:var(--arte-fondo-quadro)}
.ta-foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
             transition:transform .35s}
.ta-op:hover .ta-foto img{transform:scale(1.03)}
.ta-cuore{position:absolute;right:9px;top:9px;width:38px;height:38px;border:0;border-radius:50%;
          background:var(--arte-fondo-scheda);box-shadow:0 5px 18px rgba(0,0,0,.13);
          font-size:19px;line-height:1;color:var(--arte-testo-tenue)}
.ta-cuore.ta-on{color:var(--arte-accento)}
.ta-op h3{font-family:var(--arte-font-titoli);font-size:19px;margin:11px 3px 0;line-height:1.25}
.ta-autore{margin:5px 3px;color:var(--arte-testo-tenue);font-size:12.5px;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-cons{margin:5px 3px;font-size:12px;color:var(--arte-accento)}
.ta-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;
         margin:12px 3px 0;padding-top:11px;border-top:1px solid rgba(25,23,20,.12);font-size:13px}
.ta-scopri{color:#a54d31 !important;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.06em}
.ta-vuoto{grid-column:1/-1;text-align:center;color:var(--arte-testo-tenue);padding:50px 10px;line-height:1.7}

#ta-altre{display:block;margin:30px auto 0;padding:13px 26px;border:1px solid var(--arte-bordo);
          border-radius:999px;background:var(--arte-fondo-scheda);font:inherit;font-size:14px;
          color:var(--arte-testo)}
#ta-altre:hover{border-color:var(--arte-testo)}
#ta-altre[hidden]{display:none}

/* ---------- struttura a due colonne: sidebar filtri + corpo ----------
   Sotto i 1200px .ta-layout resta un blocco solo (.ta-corpo occupa
   tutta la larghezza) e #ta-pannello e' un cassetto fixed che entra da
   sinistra. Da 1200px in su .ta-layout diventa un flex a due colonne:
   sidebar filtri sempre visibile + corpo. Regole del breakpoint in
   fondo al file, insieme alle altre soglie del responsive.

   Il respiro laterale (destra/sinistra) sta QUI, non su .ta-galleria:
   cosi' la fascia rosa d'apertura (che sta fuori da .ta-layout, e' un
   fratello precedente) resta sempre a tutta larghezza, mai schiacciata
   dal margine riservato al bottone FILTRO qui sotto.
   Sinistra e' piu' larga di destra sotto i 1200px: e' la colonna vuota
   per il bottone fisso "FILTRO" — senza, il bottone (fixed, a meta'
   altezza schermo) finisce SOPRA al testo che in quel momento sta
   scorrendo li' sotto. */
.ta-layout{max-width:var(--arte-larghezza);margin:0 auto;padding:0 20px 0 44px}
.ta-corpo{min-width:0}

/* ---------- pannello dei filtri: sotto i 1200px e' un cassetto da sinistra ---------- */
.ta-velo{position:fixed;inset:0;z-index:99998;display:none;background:rgba(0,0,0,.28)}
.ta-velo.ta-aperto{display:block}
.ta-pannello{position:fixed;inset:0 auto 0 0;z-index:99999;
             width:min(340px,86vw);height:100%;max-height:none;overflow:auto;
             background:var(--arte-fondo-scheda);
             border-radius:0 var(--arte-raggio) var(--arte-raggio) 0;padding:25px 22px 0;
             box-shadow:0 20px 60px rgba(0,0,0,.22);
             transform:translateX(-100%);visibility:hidden;
             transition:transform .28s ease,visibility 0s linear .28s}
.ta-pannello.ta-aperto{transform:translateX(0);visibility:visible;
                       transition:transform .28s ease,visibility 0s linear 0s}
.ta-pannello h2{font-family:var(--arte-font-titoli);font-size:30px;margin:0 0 6px}
.ta-pannello-nota{margin:0 0 6px;color:var(--arte-testo-tenue);font-size:13.5px}
.ta-pannello h4{margin:20px 0 9px;font-size:11px;letter-spacing:.15em;
                text-transform:uppercase;color:var(--arte-testo-tenue)}
.ta-chiudi{float:right;border:0;background:none;font-size:26px;line-height:1;
           color:var(--arte-testo-tenue);padding:0 4px}
.ta-chips{display:flex;flex-wrap:wrap;gap:7px}
.ta-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(25,23,20,.13);
         border-radius:999px;background:var(--arte-fondo-scheda);padding:9px 13px;
         font:inherit;font-size:13.5px;color:var(--arte-testo)}
.ta-chip:hover{border-color:var(--arte-testo)}
.ta-chip.ta-on{background:var(--arte-selezione-fondo);border-color:var(--arte-selezione-fondo);color:#fff}
/* voce senza opere: resta al suo posto, spenta. Cosi' l'elenco non balla. */
.ta-chip.ta-spenta{opacity:.38;cursor:default}
.ta-chip.ta-spenta:hover{border-color:rgba(25,23,20,.13)}
.ta-chip.ta-on .ta-n{color:#cfcfcf}
.ta-chip i{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.ta-chip .ta-n{font-size:11.5px;color:var(--arte-testo-tenue)}
/* stesso trattamento discreto di #ta-azzera: un link, non un bottone,
   cosi' non compete visivamente con le pastiglie li' sopra. */
#ta-svuota-preferiti{display:block;border:0;background:none;font:inherit;font-size:12.5px;
                     text-decoration:underline;color:var(--arte-testo-tenue);
                     padding:7px 2px 0;margin:0}
.ta-pannello-fondo{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;
                   margin-top:22px;padding:14px 0 18px;background:var(--arte-fondo-scheda);
                   border-top:1px solid var(--arte-bordo)}
#ta-azzera{flex:0 0 auto;border:0;background:none;font:inherit;font-size:13px;
           text-decoration:underline;color:var(--arte-testo-tenue);padding:8px 2px}
#ta-applica{flex:1 1 auto;justify-content:center}

/* ---------- desktop (tablet grande incluso, sotto i 1200px) ---------- */
@media(min-width:700px){
	.ta-apertura{padding:64px 0 68px;margin-bottom:34px}
	.ta-apertura-int{padding:0 30px}
	.ta-apertura h1{font-size:60px}
	.ta-apertura p{font-size:16px}
	.ta-stanza{width:32%}
	.ta-griglia{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
	.ta-op h3{font-size:22px}
	.ta-pannello{padding:30px 26px 0}
	.ta-layout{padding-right:30px}
}

/* ---------- da qui i filtri diventano sidebar sempre visibile ----------
   Sotto questa soglia il bottone fisso "FILTRO" apre il cassetto laterale;
   da qui in su il cassetto si trasforma in colonna e il bottone sparisce. */
@media(min-width:1200px){
	/* La fascia d'apertura rompe la colonna e va a tutta larghezza dello
	   SCHERMO (non della pagina): niente piu' angoli arrotondati, non
	   avrebbe senso quando tocca i bordi. Anche piu' bassa: meno aria
	   sopra e sotto il testo. Il calc(50% - 50vw) sfonda qualsiasi
	   contenitore, a qualunque profondita' sia annidato — e il piccolo
	   sbordo che lascia (la barra di scorrimento, pochi px) resta
	   invisibile perche' il tema nasconde gia' l'overflow orizzontale
	   su <html> (misurato dal vivo su staging.telastampa.it). */
	.ta-apertura{width:100vw;max-width:100vw;
	             margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
	             border-radius:0;padding:44px 0 48px}
	.ta-apertura-int{padding:0 40px}

	/* niente piu' bottone fisso: il respiro laterale torna simmetrico */
	.ta-layout{display:flex;align-items:flex-start;gap:40px;padding:0 40px}
	.ta-corpo{flex:1 1 0}

	/* niente piu' bottone/cassetto: la sidebar e' sempre in pagina */
	.ta-filtro-fisso{display:none}
	.ta-velo{display:none !important}
	.ta-chiudi{display:none}
	/* L'header sticky del tema (#Top_bar, classe .is-sticky) e' alto 61px
	   con z-index:701 — misurato dal vivo su staging.telastampa.it. La
	   sidebar deve agganciarsi SOTTO, non sopra: da qui i due numeri. */
	.ta-pannello{position:sticky;top:73px;flex:0 0 300px;width:300px;
	             height:auto;max-height:calc(100vh - 97px);
	             transform:none !important;visibility:visible !important;
	             transition:none;box-shadow:none;
	             /* la base ha z-index:99999 perche' li' e' un cassetto
	                sopra il velo: qui e' in flusso, e con quello z-index
	                rimasto attaccato finiva sopra l'header sticky del tema
	                (z-index:701) durante lo scroll. Va riportato basso. */
	             z-index:1;
	             border:1px solid var(--arte-bordo);border-radius:var(--arte-raggio);
	             padding:24px 22px 0}

	/* i figli del corpo erano centrati coi loro max-width: dentro la
	   colonna .ta-corpo (gia' piu' stretta della pagina intera) quel
	   max-width non serve piu' e basta lasciarli larghi quanto il corpo */
	.ta-corpo .ta-barra,.ta-corpo .ta-sez,.ta-corpo .ta-carosello,
	.ta-corpo .ta-attiva,.ta-corpo .ta-griglia{max-width:none;margin-left:0;margin-right:0}

	/* col corpo ristretto dalla sidebar, 4 colonne stanno strette:
	   restano 3 fino a quando la pagina e' davvero larga (vedi sotto) */
	.ta-griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1500px){
	.ta-griglia{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- telefono ---------- */
@media(max-width:699px){
	.ta-apertura h1{font-size:33px}
	.ta-sez-tit{font-size:25px}
	/* la ricerca si prende tutta la riga: non viene mai tagliata */
	.ta-cerca{flex:1 1 100%}
	.ta-conta{flex:1 1 auto}
	.ta-pannello{padding:22px 18px 0}
	.ta-filtro-fisso{padding:13px 8px}
}

@media (prefers-reduced-motion: reduce){ .ta-galleria *{transition:none !important} }