/* 6.3 Photos keep their own shape in the carousels (LHR_Media_Fit, class lhr-fit).
   A wide or square photo gets a slot as wide as the photo itself, so nothing is cut from the sides.
   Everything here is scoped to carousels holding at least one lhr-fit photo, so carousels with only
   portraits and videos look exactly as before. Browsers without :has() keep the 6.2 portrait slot.

   One row height per carousel (--lhr-row-h): the height at which a 3:2 photo fills the carousel
   (--lhr-fit-max wide), never taller than the usual portrait slot (--lhr-fit-h). Every slot in the
   row shares it: wide photos are that tall and as wide as their shape, portraits and videos keep 9:16
   at that height. A very wide photo (2:1) that would overflow scales down, still whole. */

.rail__track:has(.lhr-fit),
.mcar__track:has(.lhr-fit) { container-type: inline-size; align-items: center; }

.rail__track:has(.lhr-fit) > .rail__item,
.mcar__track:has(.lhr-fit) > .mcar__item {
	--lhr-fit-h: calc(var(--portrait-w) * 16 / 9);
	--lhr-fit-max: 100cqw;
	--lhr-row-h: min(var(--lhr-fit-h), calc(var(--lhr-fit-max) / 1.5));
}

.rail__item:has(> .lhr-fit),
.mcar__item:has(> .lhr-fit) { flex: 0 0 auto; }

.rail__item:has(> .lhr-fit) > .lhr-fit,
.mcar__item:has(> .lhr-fit) > .lhr-fit {
	aspect-ratio: var(--lhr-fit-ar, 1.5);
	width: min(calc(var(--lhr-row-h) * var(--lhr-fit-ar, 1.5)), var(--lhr-fit-max));
	height: auto;
}

/* Portrait photos and videos sharing a row with wide photos: same 9:16 slot, at the row's height. */
.rail__track:has(.lhr-fit) > .rail__item:not(:has(> .lhr-fit)),
.mcar__track:has(.lhr-fit) > .mcar__item:not(:has(> .lhr-fit)) { flex: 0 0 calc(var(--lhr-row-h) * 9 / 16); }

/* The logo overlay keeps the size it has on a portrait (sized from the photo's height, not its width),
   so a wide photo does not get a logo twice as big sitting on the result. */
.rail__item:has(> .lhr-fit) > .lhr-fit > .lhr-media__wm,
.mcar__item:has(> .lhr-fit) > .lhr-fit > .lhr-media__wm { width: auto; height: calc(var(--lhr-wm-size, 28%) * 0.43); } /* 6.6: follows the size setting (28% → 12% of the height) */
.rail__item:has(> .lhr-fit) > .lhr-fit > .lhr-media__wm--c,
.mcar__item:has(> .lhr-fit) > .lhr-fit > .lhr-media__wm--c { left: 50%; transform: translate(-50%, -50%); }

/* Home and page heroes: a wide photo fills the carousel column, so the dark fade on the
   right edge (made for narrow portraits) would sit on the photo. It rests while photos are wide. */
.hero .rail:has(.lhr-fit)::after,
.phero .rail:has(.lhr-fit)::after { display: none; }

/* Results carousels: a lower row so two photos show side by side on desktop. */
.results__rail .rail__track:has(.lhr-fit) > .rail__item { --lhr-fit-h: calc(var(--portrait-w) * 4 / 3); --lhr-fit-max: 86cqw; }

@media (max-width: 1000px) {
	/* Phones and tablets: a wide photo spans most of the screen and the next one peeks in. */
	.hero .rail__track:has(.lhr-fit) > .rail__item,
	.phero .rail__track:has(.lhr-fit) > .rail__item,
	.results__rail .rail__track:has(.lhr-fit) > .rail__item,
	.mcar__track:has(.lhr-fit) > .mcar__item { --lhr-fit-h: calc(min(64vw, 300px) * 16 / 9); --lhr-fit-max: 90cqw; }
}