/*
Theme Name: Hemma Child – Alosa
Description: alosa.fr child of Hemma. Photos are real responsive images (srcset, lazy) instead of CSS backgrounds; on phones photo blocks take the photo's own shape, on desktop portrait photos are shown whole on a blurred backdrop; per-photo focus point (Media Library field "Focus point").
Version: 1.1.2
Template: hemma
Text Domain: hemma
License: GNU General Public License v2 or later
*/

/* ------------------------------------------------------------------
   1. The photo element that replaces the theme's CSS background
   (added by alosa_responsive_backgrounds() in functions.php)
   ------------------------------------------------------------------ */
.alosa-has-bg { overflow: hidden; overflow: clip; background-image: none !important; } /* clip: crops like hidden but keeps position:sticky working */
.alosa-has-bg:not(.block-figure) { position: relative; } /* the split figure keeps the theme's own positioning */

.alosa-bg,
.alosa-bg-backdrop {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	max-width: none;
	margin: 0;
	display: block !important;
	z-index: 0;
	pointer-events: none;
}
.alosa-bg { object-fit: cover; object-position: var(--alosa-focus, 50% 50%); }
.alosa-has-bg > *:not(.alosa-bg):not(.alosa-bg-backdrop) { position: relative; z-index: 1; }
/* never let the theme's flex/min-height rules for box children apply to the photo layers */
.alosa-has-bg > .alosa-bg,
.alosa-has-bg > .alosa-bg-backdrop { flex: none !important; min-height: 0 !important; }

/* blurred copy behind a photo shown whole (desktop only) */
.alosa-bg-backdrop { object-fit: cover; filter: blur(28px) saturate(1.1) brightness(.9); transform: scale(1.15); }

/* ------------------------------------------------------------------
   2. Desktop: portrait photos in banners / full-width blocks, and every
   photo in a text + photo block, are shown whole instead of cropped
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
	.alosa-has-bg.is-portrait:not(.block-figure) > .alosa-bg { object-fit: contain; }
	/* text + photo blocks: the photo box is half the screen wide and as tall as the text, so show the whole photo
	   (any shape) on its blurred copy instead of cropping it */
	.block-figure.alosa-has-bg > .alosa-bg { object-fit: contain; }
	/* long texts make the box taller than the screen: keep the photo in view (sticky) while the text scrolls */
	.block-figure.alosa-has-bg > .alosa-bg {
		position: sticky !important;
		top: 0;
		height: min(100%, 100vh);
		object-position: 50% 50%;
	}
}

/* ------------------------------------------------------------------
   3. Phones: photo blocks follow the photo's own shape (whole photo visible)
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
	.alosa-has-bg > .alosa-bg-backdrop { display: none !important; } /* not shown, so a lazy image is never downloaded */

	/* full-width photo blocks */
	.block.alosa-has-bg.is-fullheight,
	.block.alosa-has-bg.is-halfheight,
	.block.alosa-has-bg.is-fullheight > :first-child,
	.block.alosa-has-bg.is-halfheight > :first-child { min-height: 0 !important; }
	.block.alosa-has-bg { aspect-ratio: var(--alosa-ar, 1.5); }

	/* page banner: tall enough for the title, otherwise the photo's shape */
	.hero.alosa-has-bg.is-fullheight,
	.hero.alosa-has-bg.is-fullheight > :first-child {
		min-height: min(calc(100vh - 90px), max(55vh, calc(100vw / var(--alosa-ar, 1.5)))) !important;
	}

	/* text + photo blocks: the photo above the text, at its own shape */
	.block-figure.alosa-has-bg { min-height: 0 !important; aspect-ratio: var(--alosa-ar, 1.5); }
}