/* Gutenberg block layout system.
 *
 * Canonical width model:
 * - content: readable text width;
 * - wide: viewport-based breakout, capped by --sc-container-wide;
 * - full: true viewport width.
 *
 * This file intentionally owns Gutenberg layout corrections. theme.css keeps the
 * base visual language; this file reconciles WordPress block layout classes with
 * TP Scenico's image-led, wide-section design.
 */

.entry__content {
	--sc-content-width: min(calc(100vw - (var(--sc-gutter) * 2)), var(--sc-container-content));
	--sc-default-width: min(calc(100vw - (var(--sc-gutter) * 2)), var(--sc-container));
	--sc-wide-width: min(calc(100vw - (var(--sc-gutter) * 2)), var(--sc-container-wide));
	/* La pagina senza la barra di scorrimento: `100vw` la comprende, e i
	   blocchi a tutta pagina uscivano di quei pixel. Il numero lo misura
	   theme.js, perche' il CSS non sa esprimerlo. */
	--sc-full-width: calc(100vw - var(--sc-scrollbar, 0px));
	--sc-wide-breakout: calc(50% - (var(--sc-wide-width) / 2));
	--sc-full-breakout: calc(50% - (var(--sc-full-width) / 2));
	--sc-block-flow: clamp(1.5rem, 3vw, 2.5rem);
}

/* Base direct children. */
.entry__content > * {
	width: var(--sc-content-width);
	max-width: var(--sc-container-content);
	margin-inline: auto;
}

.entry__content > * + * {
	margin-block-start: var(--sc-block-flow, clamp(1.5rem, 3vw, 2.5rem));
}

.entry__content > :first-child {
	margin-top: 0;
}

.entry__content > p:empty {
	display: none;
}

.entry__content > :last-child {
	margin-bottom: 0;
}

/* Wide and full breakout primitives. */
.entry__content > .alignwide,
.entry__content > .wp-block-columns.alignwide,
.entry__content > .wp-block-image.alignwide,
.entry__content > .wp-block-media-text.alignwide,
.entry__content > .wp-block-quote.alignwide {
	width: var(--sc-wide-width);
	max-width: var(--sc-container-wide);
	margin-left: var(--sc-wide-breakout);
	margin-right: var(--sc-wide-breakout);
}

.entry__content > .alignfull,
.entry__content > .wp-block-columns.alignfull,
.entry__content > .wp-block-group.alignfull,
.entry__content > .wp-block-cover.alignfull {
	width: var(--sc-full-width);
	max-width: var(--sc-full-width);
	margin-left: var(--sc-full-breakout);
	margin-right: var(--sc-full-breakout);
}

.entry__content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Section-like blocks. */
.entry__content > .wp-block-group,
.entry__content > .wp-block-cover {
	padding-block: var(--sc-section-space);
}

.entry__content > .wp-block-group:not(.alignfull):not(.alignwide),
.entry__content > .wp-block-cover:not(.alignfull):not(.alignwide) {
	width: var(--sc-default-width);
	max-width: var(--sc-container);
}

.entry__content > .wp-block-group.alignwide,
.entry__content > .wp-block-cover.alignwide {
	width: var(--sc-wide-width);
	max-width: var(--sc-container-wide);
	margin-left: var(--sc-wide-breakout);
	margin-right: var(--sc-wide-breakout);
	padding-inline: 0;
}

.entry__content > .wp-block-group.alignfull,
.entry__content > .wp-block-cover.alignfull {
	padding-inline: var(--sc-gutter);
}

.entry__content > .wp-block-cover.alignfull {
	min-height: clamp(var(--sc-hero-height-min), 70vh, var(--sc-hero-height-max));
}

/* Inner layout inside wide/full sections.
 * Default inner text stays readable, visual/layout blocks can expand to wide.
 */
/*
 * Un gruppo largo e' largo davvero, contenuto compreso: chi lo ha scelto largo
 * vuole il contenuto largo, e stringerlo lo stesso gli toglierebbe il comando
 * dalle mani. Serve dirlo, perche' senza una regola qui il valore predefinito
 * dei blocchi riporta i figli alla misura di lettura — piu' stretta ancora.
 */
.entry__content > .wp-block-group.alignwide > *,
.entry__content > .wp-block-cover.alignwide > .wp-block-cover__inner-container > * {
	max-width: 100%;
}

/*
 * A tutta pagina invece il contenuto torna alla misura predefinita: una fascia
 * colorata vuole toccare i bordi, il testo che ci sta dentro no. Chi vuole il
 * contrario mette il blocco dentro `wide`, o gli da' una larghezza sua.
 */
.entry__content > .wp-block-group.alignfull > *,
.entry__content > .wp-block-cover.alignfull > .wp-block-cover__inner-container > * {
	max-width: var(--sc-container);
	margin-inline: auto;
}

/* Il contenitore largo tocca a chi lo chiede, cioe' ai blocchi marcati
   alignwide. Prima ci finivano anche colonne, immagini e media-text per il
   solo fatto di essere quel tipo di blocco: dentro una fascia a tutta
   larghezza una sezione a colonne usciva 320px piu' larga di tutte le fascie
   sorelle senza che nessuno l'avesse chiesto, e l'unico modo per riportarla
   in riga era annidarla in un gruppo. Ora alignwide vuol dire qualcosa e il
   comportamento predefinito e' coerente fra le fascie. */
.entry__content > .wp-block-group.alignwide > .alignwide,
.entry__content > .wp-block-group.alignfull > .alignwide,
.entry__content > .wp-block-cover.alignwide > .wp-block-cover__inner-container > .alignwide,
.entry__content > .wp-block-cover.alignfull > .wp-block-cover__inner-container > .alignwide {
	width: 100%;
	max-width: var(--sc-container-wide);
}

.entry__content > .wp-block-group.alignwide > .alignfull,
.entry__content > .wp-block-group.alignfull > .alignfull,
.entry__content > .wp-block-cover.alignwide > .wp-block-cover__inner-container > .alignfull,
.entry__content > .wp-block-cover.alignfull > .wp-block-cover__inner-container > .alignfull {
	max-width: none;
}

/* Columns. */
.entry__content .wp-block-columns {
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.entry__content > .wp-block-columns.alignwide,
.entry__content > .wp-block-columns.alignfull,
.entry__content > .wp-block-group.alignwide .wp-block-columns,
.entry__content > .wp-block-group.alignfull .wp-block-columns,
.entry__content > .wp-block-cover.alignwide .wp-block-columns,
.entry__content > .wp-block-cover.alignfull .wp-block-columns {
	display: flex;
	gap: clamp(2.5rem, 6vw, 7rem);
}

.entry__content > .wp-block-columns.alignfull {
	padding-inline: var(--sc-gutter);
}

.entry__content > .wp-block-columns.alignwide,
.entry__content > .wp-block-columns.alignfull {
	padding-block: var(--sc-section-space);
}

.entry__content .wp-block-columns > .wp-block-column {
	min-width: 0;
}

.entry__content > .wp-block-columns.alignwide > .wp-block-column,
.entry__content > .wp-block-columns.alignfull > .wp-block-column,
.entry__content > .wp-block-group.alignwide .wp-block-columns > .wp-block-column,
.entry__content > .wp-block-group.alignfull .wp-block-columns > .wp-block-column,
.entry__content > .wp-block-cover.alignwide .wp-block-columns > .wp-block-column,
.entry__content > .wp-block-cover.alignfull .wp-block-columns > .wp-block-column {
	flex-basis: 0;
	flex-grow: 1;
}

.entry__content .wp-block-column > * {
	max-width: 100%;
}

.entry__content .wp-block-column > .wp-block-image,
.entry__content .wp-block-column > .wp-block-image img,
.entry__content .wp-block-column > figure,
.entry__content .wp-block-column > figure img,
.entry__content .wp-block-image img {
	width: 100%;
}

.entry__content .sc-pattern-intro .wp-block-columns {
	align-items: flex-start;
}

.entry__content .sc-pattern-intro .has-small-font-size,
.entry__content .sc-pattern-media .has-small-font-size,
.entry__content .sc-pattern-heading .has-small-font-size,
.entry__content .sc-pattern-card .has-small-font-size {
	font-family: var(--sc-font-ui);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry__content .sc-pattern-intro .has-large-font-size {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	line-height: 1.35;
}

.entry__content .sc-pattern-media {
	min-height: clamp(28rem, 55vw, 44rem);
	gap: clamp(2rem, 5vw, 6rem);
}

.entry__content .sc-pattern-media .wp-block-media-text__content {
	padding: clamp(1rem, 4vw, 4rem);
}

.entry__content .sc-pattern-media .wp-block-media-text__media {
	min-height: clamp(24rem, 55vw, 44rem);
	background-color: var(--sc-color-surface);
	background-color: color-mix(in srgb, var(--sc-color-muted) 18%, transparent);
}

.entry__content .sc-pattern-heading {
	margin-inline: 0;
	margin-bottom: clamp(2rem, 5vw, 4rem);
}

.entry__content .sc-pattern-heading > * {
	margin-inline: 0;
}

.entry__content .sc-pattern-gallery {
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.entry__content .sc-pattern-gallery .wp-block-image,
.entry__content .sc-pattern-card__image {
	min-height: clamp(15rem, 24vw, 24rem);
	aspect-ratio: 4 / 3;
	margin: 0;
	background-color: var(--sc-color-surface);
	background-color: color-mix(in srgb, var(--sc-color-muted) 18%, transparent);
	overflow: hidden;
}

.entry__content .sc-pattern-gallery .wp-block-image img,
.entry__content .sc-pattern-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry__content .sc-pattern-cards {
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	align-items: stretch;
}

.entry__content .sc-pattern-cards > .wp-block-column {
	display: flex;
}

.entry__content .sc-pattern-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	border: 1px solid var(--sc-color-border);
	overflow: hidden;
}

.entry__content .sc-pattern-card > .sc-pattern-card__image,
.entry__content .sc-pattern-card > .sc-pattern-card__content {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

.entry__content .sc-pattern-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.entry__content .sc-pattern-card__content .wp-block-buttons {
	margin-top: auto;
	padding-top: 1rem;
}

@media (max-width: 760px) {
	.entry__content > .wp-block-columns.alignwide,
	.entry__content > .wp-block-columns.alignfull,
	.entry__content > .wp-block-group.alignwide .wp-block-columns,
	.entry__content > .wp-block-group.alignfull .wp-block-columns,
	.entry__content > .wp-block-cover.alignwide .wp-block-columns,
	.entry__content > .wp-block-cover.alignfull .wp-block-columns {
		gap: clamp(1.5rem, 6vw, 2.5rem);
	}

	.entry__content .sc-pattern-media {
		min-height: 0;
	}

	.entry__content .sc-pattern-media .wp-block-media-text__media {
		min-height: min(120vw, 32rem);
	}

	.entry__content .sc-pattern-gallery {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
	}

	.entry__content .sc-pattern-gallery .wp-block-image,
	.entry__content .sc-pattern-card__image {
		width: 100% !important;
		min-height: min(75vw, 24rem);
	}
}