/*
 * webag-custom.css — Stili front-end custom del sito giuseppedonnaloia.it
 * Caricato dopo app.css tramite templates-custom/private.php.
 * NON è output del build Webpack: aggiungere qui le regole custom del sito,
 * un blocco commentato per pagina/sezione.
 */

/* ============================================================
   Pagina "Sezionismo" (page-id-3064) — layout DESKTOP
   I blocchi Kadence testo/immagine alternati risultavano slegati su desktop:
   immagini con max-width ridotto (~280–326px) e coppie allineate in alto.
   Fix solo desktop (>=768px). Sotto i 768px (mobile/tablet stretto) nulla cambia.
   ============================================================ */
@media (min-width: 768px) {

	/* centra verticalmente la coppia testo/immagine di ogni riga */
	.page-id-3064 .entry-content .kt-row-column-wrap {
		align-items: center !important;
		column-gap: 2.5rem;
	}

	/* immagini: riempiono la loro colonna invece del max-width ridotto dei blocchi */
	.page-id-3064 .entry-content .wp-block-kadence-image figure {
		max-width: 100% !important;
		margin-left: auto;
		margin-right: auto;
	}
	.page-id-3064 .entry-content .wp-block-kadence-image img {
		max-width: 100%;
		width: auto;
		height: auto;
	}

	/* testo: interlinea più comoda + misura massima di sicurezza */
	.page-id-3064 .entry-content .kt-inside-inner-col > p {
		max-width: 62ch;
		line-height: 1.6;
	}

	/* ritmo verticale uniforme tra le sezioni */
	.page-id-3064 .entry-content > .kb-row-layout-wrap > .kt-row-column-wrap {
		padding-top: 2.25rem;
		padding-bottom: 2.25rem;
	}
}

/* ============================================================
   Pagina "Opere" (page-id-8) — griglia gallerie, layout DESKTOP
   1) Copertine uniformi: stessa proporzione (1:1) + object-fit:cover
      -> altezze identiche, ritaglio senza distorsione/schiacciamento.
   2) Titolo su 2 righe (es. "Rigenerazione naturale") rendeva le card
      di altezza diversa -> min-height per allineare tutte le card.
   Solo desktop (>=768px). Mobile invariato.
   ============================================================ */
@media (min-width: 768px) {

	.page-id-8 .entry-content .row > .col-md-6 a img.img-fluid {
		aspect-ratio: 1 / 1;
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}

	.page-id-8 .entry-content .row > .col-md-6 h5 {
		min-height: 3rem; /* ~2 righe: font 20px, interlinea 24px */
	}
}