/*
* ============================================================================
* 1. Il carosello «Scopri i servizi» — le schede si spostavano due volte
* ============================================================================
*
* Dove: le 13 pagine che includono `synlab/include/scopriservizi.php`, cioe' la
* versione con le due linguette «Servizi al paziente / Servizi alle aziende».
*
* COSA SUCCEDEVA. Il JavaScript del tema posiziona le schede da se':
*
* $(...).eq(i).css("left", (single_event_width * i) + "px"); // 300 * i
*
* cioe' come se fossero in posizione ASSOLUTA. Il foglio del tema pero' le
* lascia nel flusso della pagina (`style.css:1027`: larghe 280, «float: left»,
* «position: relative», 15 di margine). Una scheda in posizione relativa il suo
* posto nel flusso se lo tiene, e «left» la sposta IN PIU'. I due spostamenti
* si sommavano:
*
* posto nel flusso 295 * i (280 di larghezza + 15 di margine)
* + spostamento «left» 300 * i
* = ------------------------------
* posizione vera 595 * i
*
* Da qui le due sole schede visibili, lontane, con il vuoto in mezzo. Non e' un
* guaio della migrazione: misurato, in produzione il documento dopo il
* JavaScript e' identico, schede a 0, 300, 600 ... 1800.
*
* COSA FA QUESTO RITOCCO. Azzera lo spazio che la scheda occupa nel flusso, con
* un margine destro negativo pari alla sua larghezza: 280 di larghezza meno 280
* di margine fa zero. Cosi' tutte le schede partono dallo stesso punto e a
* distanziarle resta il solo «left»: passo 300px, quattro schede affiancate nel
* contenitore pieno, e le frecce che scorrono come erano state pensate.
*
* PERCHE' COSI' E NON CON «position: absolute», che sarebbe la strada
* apparentemente giusta: togliendo le schede dal flusso, il contenitore si
* schiaccia a zero e il blocco collassa, e per rimediare bisognerebbe imporgli
* un'altezza fissa. Quell'altezza pero' farebbe danno sulle ALTRE 10 pagine —
* quelle che usano `scopriservizi-paziente.php` — dove le schede sono sette,
* vanno a capo su due file e verrebbero tagliate. Provato: la strada con il
* margine negativo lascia il contenitore alto quanto una scheda, che e' quello
* che serve, e non tocca l'altro caso.
*
* I DUE DETTAGLI CHE NON SONO ORNAMENTO:
*
* - «[style*="left"]» non e' un vezzo, e' la CONDIZIONE. Sceglie solo le
* schede che il JavaScript ha posizionato, cioe' quelle delle 13 pagine con
* le linguette. Sulle altre 10 le schede non hanno nessuno stile scritto a
* mano — verificato leggendo il documento dopo il JavaScript — quindi la
* regola non le tocca nemmeno, e restano come sono sempre state.
* - SOLO da 1024px in su. Sotto quella soglia il tema impila le schede a
* larghezza piena per il telefono (`style.css:1841`), e li' funziona bene:
* metterci mano la romperebbe.
*
* IL NUMERO -280px E' LEGATO alla larghezza che il tema da' alle schede
* (`style.css:1027`). Se un domani quella cambia, questo va cambiato con lei.
*
* IL GIORNO CHE IL TEMA VENISSE SISTEMATO alla radice — facendo scorrere il
* contenitore invece delle singole schede — questa sezione si cancella tutta.
*/
@media only screen and (min-width: 1024px) {
.scopriservizi .bloccoeventi .single[style*="left"] {
margin-right: -280px;
}
}
/*
* ============================================================================
* 2. Contatti: il segnaposto delle sedi senza foto
* ============================================================================
*
* Dove: `synlab/contatti.php`, i tre elenchi di sedi (poliambulatori, punti
* prelievo e il terzo in fondo). Il tema stampa la foto cosi':
*
* ; ?>)
*
* e quando la foto non c'e' quella funzione non scrive niente: in pagina resta
* un `![]()
`, cioe' un'immagine vuota alta zero. Otto sedi su
* ventotto — le stesse otto strutture senza foto in evidenza: Belluno Medica,
* Dolo, Marghera, Piazzola e le quattro di Padova.
*
* COSA FA QUESTO RITOCCO. Riconosce l'immagine vuota dall'indirizzo vuoto —
* `img[src=""]` — le da' la misura che avrebbe avuto la foto e ci disegna
* dentro un segno di localizzazione. Le foto vere sono 1200x858 e nelle schede
* sono larghe 280: vengono alte 200, ed e' la misura scritta qui sotto. E' la
* stessa che ha il segnaposto delle schede struttura in `gdm-viste`, cosi' i
* due si somigliano invece di essere due invenzioni diverse.
*
* PERCHE' DAL FOGLIO DI STILE e non dal PHP: `the_post_thumbnail_url()` quando
* la foto manca esce subito e non passa da nessun filtro, quindi da fuori non
* c'e' niente da intercettare. L'unico modo per non toccare il tema e'
* riconoscere l'immagine vuota una volta stampata.
*
* IL SEGNO E' DISEGNATO QUI DENTRO (una goccia e un foro), non preso dal Font
* Awesome del tema: dentro un `![]()
` un carattere non ci si puo' mettere.
*
* IL GIORNO CHE IL TEMA VENISSE SISTEMATO — stampando l'immagine solo se c'e',
* o mettendoci un'immagine di riserva — questa sezione si cancella.
*/
/*
* ============================================================================
* 3. Contatti: la griglia delle sedi che si incastrava
* ============================================================================
*
* Dove: `synlab/contatti.php`, gli stessi tre elenchi. Due difetti che si
* vedono anche in PRODUZIONE — verificati a immagine, non li abbiamo
* introdotti noi con il segnaposto:
*
* 1. una scheda non torna a sinistra e resta appesa in mezzo alla riga
* («PADOVA – VIA ALFIERI»);
* 2. una scheda perde lo stacco dalla precedente e le si appiccica
* («MARGHERA – VIALE PAOLUCCI»).
*
* SONO LO STESSO DIFETTO. Le schede «galleggiano» (float) e sono alte quanto il
* loro contenuto: indirizzi piu' lunghi, titoli su due righe e foto di
* proporzioni diverse le fanno venire disuguali. Una scheda alta lascia uno
* scalino, e quella dopo non riesce a scendere fino a sinistra: si incastra
* dov'e'. Da li' in poi le righe non sono piu' righe, e la regola del tema che
* toglie lo stacco «a ogni quarta scheda» (`nth-child(4n+4)`) — che una griglia
* perfetta la da' per scontata — lo toglie a una scheda che quarta non e' piu'.
*
* COSA FA QUESTO RITOCCO. Le stesse schede, disposte pero' come righe vere
* (flex) invece che a galleggiamento: gli stacchi li fa «gap», e le righe si
* chiudono da sole. Niente misure scritte a mano e niente conteggi: quante
* schede stanno in una riga lo decide la larghezza disponibile, quindi il
* comportamento resta quello di oggi a ogni misura di schermo — quattro sui
* monitor grandi, due sui medi, dove il tema le fa larghe 320.
*
* Sotto i 1024px non si tocca niente: li' il tema le impila a tutta larghezza,
* una sotto l'altra, e un difetto da incastro non puo' esserci.
*/
@media only screen and (min-width: 1024px) {
.strutture .sedi {
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 50px;
}
/* Gli stacchi ora li fa «gap»: i margini del tema, e la sua eccezione
«ogni quarta», qui non servono piu' e darebbero doppio spazio. */
.strutture .sedi > div,
.strutture .sedi > div:nth-child(4n+4) {
float: none;
margin: 0;
}
}
.sedi div img[src=""] {
/* Un'immagine con l'indirizzo vuoto il browser la disegna come immagine
ROTTA: mette un bordino e, in alto a sinistra, la sua iconcina di foglio
strappato. Qui le si da' da mostrare un'immagine VERA — un puntino
trasparente di un pixel — cosi' per il browser non e' piu' rotta: niente
bordino, niente iconcina. Il puntino, stirato sulla misura del riquadro,
resta invisibile e lascia vedere lo sfondo qui sotto, che e' il
segnaposto vero e proprio.
(Provato prima con «content: ""», che in Edge non basta: l'iconcina
restava.) */
content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
display: block;
width: 100%;
height: 200px;
background-color: #f8f8f8;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23007198' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z'/%3E%3Ccircle cx='12' cy='9' r='2.6' fill='%23f8f8f8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 56px 56px;
}