/*
Layer di compatibilita della griglia — VisitCaprarola, fase F2a.

SCOPO
Reimplementare, in poco piu di cento righe, le sole regole di griglia di
Foundation 5 che i template usano davvero, cosi che foundation.css (oltre 5800
righe) possa essere eliminato senza toccare i 33 template che contengono 229
classi di griglia.

Caricato DOPO foundation.css: a parita di specificita vince l'ultima regola
dichiarata, quindi queste prevalgono. Finche il confronto visivo non e
approvato, Foundation resta caricato e continua a fornire pulsanti, form,
tabelle e componenti, che questo file non tocca.

PERCHE FLOAT E NON CSS GRID
Il piano prevedeva CSS Grid. Leggendo il foundation.css in produzione e emersa
questa coppia di regole:

    [class*="column"] + [class*="column"]:last-child { float: right; }
    [class*="column"] + [class*="column"].end        { float: left;  }

L'ultima colonna di ogni riga flotta a DESTRA, salvo che porti la classe .end —
e il tema la usa, per esempio in post_class('large-3 medium-6 small-12 columns
end') dentro loop-homepage.php e loop-archive-vi.php. Con CSS Grid questo
comportamento non e riproducibile: l'ultima scheda di ogni griglia si sarebbe
spostata. Il modello a float e quindi riprodotto fedelmente. La griglia moderna
arrivera quando i template verranno riscritti con classi semantiche, non prima.

METRICHE
Rilevate dal foundation.css IN PRODUZIONE, che e stato modificato a mano:
.row ha max-width 80.8rem, non i 62.5rem standard di Foundation 5 (nel file i
valori originali sono lasciati commentati).

COSA NON SERVE RIPRODURRE
Verificato con grep sui template: collapse, push-, pull-, centered, uncentered
e offset non compaiono mai. Non sono qui, e non devono esserci.
*/

/* ---------------------------------------------------------------
   Modello di scatola.
   Foundation lo imposta globalmente; lo ripetiamo perche questo file
   deve restare autosufficiente quando foundation.css sparira (F2c).
   --------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Contenitore
   --------------------------------------------------------------- */
.row {
	width: 100%;
	max-width: var(--vc-griglia-max-width, 80.8rem);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
}

.row::before,
.row::after {
	content: " ";
	display: table;
}

.row::after {
	clear: both;
}

/* Riga annidata: annulla il contenitore e recupera i gutter del genitore */
.row .row {
	width: auto;
	max-width: none;
	margin-left: calc(var(--vc-griglia-gutter, 0.9375rem) * -1);
	margin-right: calc(var(--vc-griglia-gutter, 0.9375rem) * -1);
	margin-top: 0;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Colonne — la larghezza di base e 100%, quindi mobile-first:
   senza classi di breakpoint una colonna occupa tutta la riga.
   --------------------------------------------------------------- */
.column,
.columns {
	width: 100%;
	float: left;
	padding-left: var(--vc-griglia-gutter, 0.9375rem);
	padding-right: var(--vc-griglia-gutter, 0.9375rem);
}

/*
   Le due regole che rendono indispensabile il modello a float.
   L'ultima colonna di una riga flotta a destra, cosi che gli arrotondamenti
   delle larghezze percentuali non lascino un margine visibile sul bordo
   destro; .end annulla il comportamento dove il template lo richiede.
   Sono copiate da foundation.css righe 170-174.
*/
[class*="column"] + [class*="column"]:last-child {
	float: right;
}

[class*="column"] + [class*="column"].end {
	float: left;
}

/* ---------------------------------------------------------------
   small — fino a 40em (640px). E la base, senza media query.
   Classi realmente usate: small-6, small-12.
   --------------------------------------------------------------- */
.small-6 {
	width: 50%;
}

.small-12 {
	width: 100%;
}

/* ---------------------------------------------------------------
   medium — da 40.063em (641px).
   Classi realmente usate: medium-4, medium-6, medium-8, medium-12.
   --------------------------------------------------------------- */
@media only screen and (min-width: 40.063em) {

	.medium-4 {
		width: 33.33333%;
	}

	.medium-6 {
		width: 50%;
	}

	.medium-8 {
		width: 66.66667%;
	}

	.medium-12 {
		width: 100%;
	}
}

/* ---------------------------------------------------------------
   large — da 64.063em (1025px).
   Classi realmente usate: large-3, large-4, large-5, large-6, large-8, large-12.
   --------------------------------------------------------------- */
@media only screen and (min-width: 64.063em) {

	.large-3 {
		width: 25%;
	}

	.large-4 {
		width: 33.33333%;
	}

	.large-5 {
		width: 41.66667%;
	}

	.large-6 {
		width: 50%;
	}

	.large-8 {
		width: 66.66667%;
	}

	.large-12 {
		width: 100%;
	}
}

/* ---------------------------------------------------------------
   Helper di visibilita.
   Foundation li definisce come selettori raggruppati lunghissimi, uno per
   breakpoint; qui c'e solo la meta "nascondi" delle tre classi in uso, che
   e sufficiente: quando la classe non nasconde, l'elemento conserva il
   proprio display naturale.

     .show-for-small-only    visibile fino a 640px
     .show-for-medium-up     visibile da 641px
     .hide-for-medium-down   nascosto fino a 1024px
   --------------------------------------------------------------- */
@media only screen and (min-width: 40.063em) {

	.show-for-small-only {
		display: none !important;
	}
}

@media only screen and (max-width: 40em) {

	.show-for-medium-up {
		display: none !important;
	}
}

@media only screen and (max-width: 64em) {

	.hide-for-medium-down {
		display: none !important;
	}
}