/**
 * Stiluri de afișare comutabile din „Portofoliu → Afișare".
 * Se încarcă doar dacă cel puțin o opțiune diferă de implicit.
 */

/* ── Masonry ──────────────────────────────────────────────────────────────
 *
 * Grila blocului Query Loop devine multi-coloană CSS. Lățimea de coloană
 * (20rem) o repetă pe cea din bloc, ca să nu sară layout-ul la comutare.
 */

.fu-layout-masonry .wp-block-post-template.is-layout-grid {
	column-gap: 3rem;
	columns: 20rem;
	display: block;
	grid-template-columns: none;
}

.fu-layout-masonry .wp-block-post-template.is-layout-grid > li {
	break-inside: avoid;
	display: block;
	margin: 0 0 3rem;
}

/*
 * Obligatoriu: `display: block` de mai sus ar învinge `display: none` implicit
 * al atributului `hidden`, iar filtrarea ar înceta să ascundă cardurile.
 */
.fu-layout-masonry .wp-block-post-template.is-layout-grid > li[hidden] {
	display: none;
}

/*
 * Decuparea 4:3 vine ca stil inline pe figură, din atributele blocului —
 * de aceea `!important`. În masonry imaginea își păstrează proporția reală.
 */
.fu-layout-masonry .wp-block-post-featured-image {
	aspect-ratio: auto !important;
}

.fu-layout-masonry .wp-block-post-featured-image img {
	height: auto !important;
	object-fit: fill;
	width: 100%;
}

/* ── Zoom la hover ────────────────────────────────────────────────────── */

.fu-hover-zoom .wp-block-post-featured-image {
	overflow: hidden;
}

.fu-hover-zoom .wp-block-post-featured-image img {
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
	will-change: transform;
}

.fu-hover-zoom .wp-block-post:hover .wp-block-post-featured-image img,
.fu-hover-zoom .wp-block-post:focus-within .wp-block-post-featured-image img {
	transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
	.fu-hover-zoom .wp-block-post-featured-image img {
		transition: none;
	}

	.fu-hover-zoom .wp-block-post:hover .wp-block-post-featured-image img,
	.fu-hover-zoom .wp-block-post:focus-within .wp-block-post-featured-image img {
		transform: none;
	}
}