/*
Theme Name: Konstruktion Child
Author: VamTam
Author URI: https://vamtam.com
Template: konstruktion
*/



/*

put your child theme styles here


you don't need any @import rules

*/

/* Campi stampati con lo shortcode [ak_campo] ------------------------------ */

.ak-campo-img {
	display: block;
	width: 100%;
	height: auto;
}

.ak-campo-galleria {
	/* Masonry con CSS columns: le immagini mantengono le proporzioni naturali
	 * e si impacchettano in colonne. L'ordine scorre in verticale colonna per
	 * colonna (non riga per riga). */
	columns: var(--ak-colonne, 3);
	column-gap: 10px;
}

.ak-campo-galleria a {
	display: block;
	margin-bottom: 10px;
	/* Evita che una foto venga spezzata tra due colonne. */
	break-inside: avoid;
}

.ak-campo-galleria img {
	display: block;
	width: 100%;
	height: auto;
}

.ak-campo-video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.ak-campo-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {

	.ak-campo-galleria {
		columns: 2;
	}
}

/* Campi vuoti -------------------------------------------------------------
 * Lo shortcode non stampa niente, ma Elementor lascia comunque il contenitore
 * del widget: senza queste regole resterebbero margini e sfondi a vuoto.
 * Sul contenitore di un blocco opzionale (foto, video, galleria, mappa) si
 * aggiunge la classe ak-opzionale da Avanzate > Classi CSS.
 * ------------------------------------------------------------------------- */

/* body:not(.elementor-editor-active) esclude l'editor: dentro Elementor i
 * widget vuoti devono restare visibili e selezionabili. */

body:not(.elementor-editor-active) .elementor-widget-shortcode:not(:has(.elementor-shortcode > *)):not(:has(.elementor-shortcode:not(:empty))) {
	display: none;
}

body:not(.elementor-editor-active) .elementor-widget-heading:has(.elementor-heading-title:empty) {
	display: none;
}

body:not(.elementor-editor-active) .ak-opzionale:not(:has(.elementor-shortcode > *)) {
	display: none;
}

.single-realizzazione #sub-header{
	display: none;
}

/* Sezione "due foto affiancate": Elementor mette un margine destro del 15%
 * sulla colonna (elementor-element-1305270a), che restringe le foto e le
 * sposta a sinistra. Qui azzeriamo quel margine così occupano tutta la
 * larghezza e la foto B resta allineata a destra.
 * Selettore volutamente più specifico dell'originale (.single-realizzazione
 * + .elementor-989340) per vincere sulla CSS generata da Elementor a
 * prescindere dall'ordine di caricamento. */
/* Foto A (colonna di sinistra): niente margine sinistro, un po' di spazio a
 * destra per staccarla dalla foto B. */
.single-realizzazione .elementor-989340 .elementor-element.elementor-element-1305270a > .elementor-element-populated {
	margin-inline-start: 0;
	margin-inline-end: 2.5%;
	--e-column-margin-left: 0;
	--e-column-margin-right: 2.5%;
}

/* Foto B (colonna di destra): un po' di spazio a sinistra, niente margine
 * destro così resta allineata al bordo destro. */
.single-realizzazione .elementor-989340 .elementor-element.elementor-element-75d56389 > .elementor-element-populated {
	margin-inline-start: 2.5%;
	margin-inline-end: 0;
	--e-column-margin-left: 2.5%;
	--e-column-margin-right: 0;
}