/**
 * =============================================================================
 * PROBAR - OGGI E' (data e ora vive) - css/ora-roma.css
 * -----------------------------------------------------------------------------
 * Sta sotto la scritta ROMA e il segnaposto, dove prima c'era la data di
 * modifica della pagina, e appena sopra il calendario degli eventi: e' il
 * punto di riferimento che rende leggibili i "fra 32 giorni" li' sotto.
 *
 * Veste "lusso quieto": una riga sola, la data in evidenza, un punto d'oro che
 * dice "vivo". Niente lampeggi, niente secondi che scorrono.
 * =============================================================================
 */

/* --------------------------------------------------------------------------
 * PRIMA DI TUTTO: USCIRE DALLA COLONNA STRETTA
 *
 * Il blocco che ci ospita sta dentro una griglia Spectra di TRE COLONNE, e la
 * riga vive nella colonna di mezzo. Era una misura tagliata su una data corta
 * ("18 Ago 2026 16:59"): 459px su desktop e **113px su telefono**. Dentro 113
 * pixel questa riga si spezzava in quattro tronconi.
 *
 * Le colonne a destra e a sinistra sono VUOTE (verificato: la griglia ha sei
 * celle, cinque senza contenuto), quindi occupare tutta la riga non copre
 * niente e non sposta niente. Misurato dopo: una riga sola su desktop, due su
 * telefono, nessuno scorrimento orizzontale in piu'.
 *
 * `:has()` e' supportato da tutti i browser attuali; dove mancasse, la riga
 * resta come prima - stretta e spezzata, ma leggibile.
 * -------------------------------------------------------------------------- */
.wp-block-spectra-container:has( > .abm-ora ),
.wp-block-group:has( > .abm-ora ),
.wp-block-columns:has( > .abm-ora ) {
	grid-column: 1 / -1;
}

.abm-ora {
	--ora-gold: #FFCE53;
	--ora-dim: #9aa2a6;

	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 9px 20px;
	border: 1px solid #2e2e2e;
	border-radius: 40px;
	background: rgba(16, 16, 16, 0.72);
	color: #e8e8e8;
	font-size: 0.88rem;
	line-height: 1.45;
	letter-spacing: 0.2px;
	max-width: 100%;
}

/* Il punto: sta acceso e basta. Il negozio online non chiude, e un pallino
   che cambia stato racconterebbe il contrario. */
.abm-ora__punto {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ora-gold);
	box-shadow: 0 0 0 3px rgba(255, 206, 83, 0.14);
}

.abm-ora__testo {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	flex-wrap: wrap;
	justify-content: center;
}

.abm-ora__oggi {
	color: #f2f2f2;
}

.abm-ora__data {
	color: var(--ora-gold);
	font-weight: 700;
}

/* Le cifre a larghezza fissa: cambiando minuto la riga non "balla". */
.abm-ora__hm {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--ora-gold);
	white-space: nowrap;
}

.abm-ora__sep {
	color: #4a4a4a;
}

.abm-ora__promessa {
	color: var(--ora-dim);
	white-space: nowrap;
}

/* Su telefono la promessa va a capo sotto la data invece di stringersi. */
@media (max-width: 620px) {
	.abm-ora {
		padding: 10px 18px;
		font-size: 0.82rem;
		gap: 9px;
	}

	.abm-ora__testo {
		flex-direction: column;
		align-items: center;
		gap: 3px;
	}

	.abm-ora__sep {
		display: none;
	}
}