/*
 * TWMP Projects - scheda progetto.
 * Colori e misure dai token del tema: la card dei dati in breve sfuma dal
 * colore "tint" del portale, le icone stanno in un cerchio nel colore accento.
 */

/* Dati in breve: card grande con marchio e badge in alto, poi i dati. */
.twmp-project-facts {
	box-sizing: border-box;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	background-image: radial-gradient(120% 100% at 100% 0%, var(--wp--preset--color--tint-end) 0%, var(--wp--preset--color--tint-start) 40%, var(--wp--preset--color--base) 78%);
}

.twmp-project-facts p,
.twmp-project-facts ul {
	margin: 0;
}

.twmp-project-facts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-bottom: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.twmp-project-facts__head:only-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.twmp-project-facts .twmp-project-facts__logo {
	width: auto;
	max-width: 12rem;
	height: 3rem;
	object-fit: contain;
	object-position: left center;
}

.twmp-project-facts__work {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 1rem;
}

.twmp-project-facts__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.5rem;
}

.twmp-project-facts__cell {
	display: grid;
	align-content: start;
	gap: 0.25rem;
}

.twmp-project-facts__icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.twmp-project-facts__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.twmp-project-facts__label {
	font-size: 0.8125rem;
	line-height: 1.3;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, var(--wp--preset--color--base));
}

.twmp-project-facts__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
}

@media (max-width: 1179px) {
	.twmp-project-facts__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.twmp-project-facts__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

	.twmp-project-facts__cell {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: 1rem;
		align-items: center;
	}

	.twmp-project-facts__icon {
		grid-row: span 2;
		margin-bottom: 0;
	}
}

/* Immagini della scheda sempre a tutta la larghezza del contenuto. */
.twmp-case .twmp-gallery__items > .wp-block-image {
	width: 100%;
}

.twmp-case .twmp-gallery__items > .wp-block-image img {
	width: 100%;
}

.twmp-case .twmp-gallery__items > .wp-block-image:not(.twmp-figure-browser) img {
	border-radius: var(--wp--custom--radius--lg);
}

/* Nota nell'editor sopra l'anteprima. */
.twmp-project-editor__note {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--surface);
	font-size: 0.875rem;
}