/* Website-demo overrides. The captured product is a controlled demonstration,
 * not the app: controls a visitor cannot use are not shown, and the phone layout
 * presents complete cards only. The app's own Media Selector is unchanged.
 * Recorded in PROVENANCE.json (websiteOverrides). */

/* My Media: the Add tile opens an upload the demo cannot do. It is the grid's
 * first child and the only one that is just an icon. */
[data-guidance-id='app-media-grid'] > :first-child:has(> svg:only-child) {
	display: none;
}

/* Phones (?layout=portrait, which mounts the product rail): My Media shows
 * complete cards only, at most two rows of two. The selector is as tall as the
 * phone leaves below the Session Timeline (set by the portrait layout); the panel
 * inside it is as tall as its content, so the selector is the size container. */
html:has([data-portrait-rail]) [data-guidance-id='app-media-selector'] {
	container-type: size;
}

html:has([data-portrait-rail]) :has(> [data-guidance-id='app-media-grid']) {
	overflow: hidden !important;
}

/* Sizes in the selector's own layout px (420 wide at this source SHA):
 * column = (width - p-2 padding 16 - one 6px gap) / 2, card 3:2;
 * the panel header above the grid is 38px including the grid's top padding. */
html:has([data-portrait-rail]) [data-guidance-id='app-media-grid'] {
	--natural: calc((100cqw - 22px) / 3);
	--row: min(var(--natural), calc((100cqh - 52px) / 2));
	grid-template-rows: repeat(2, var(--row));
	grid-auto-rows: 0;
	align-content: start;
}

/* A card keeps its styling; when the row is shorter than 3:2 its picture is
 * cover-cropped, as the product does. Empty filler slots are not media. */
html:has([data-portrait-rail]) [data-guidance-id='app-media-grid'] > * {
	aspect-ratio: auto !important;
	height: var(--row);
	min-height: 0;
}

html:has([data-portrait-rail]) [data-guidance-id='app-media-grid'] > :not(:first-child):not(:has(img, video)),
html:has([data-portrait-rail]) [data-guidance-id='app-media-grid'] > :nth-child(n + 6) {
	display: none;
}

/* Two rows would be flatter than 2:1 (row < column / 2): one complete row of two. */
@container (height < 251px) {
	html:has([data-portrait-rail]) [data-guidance-id='app-media-grid'] {
		--row: min(var(--natural), calc(100cqh - 46px));
		grid-template-rows: var(--row);
	}

	html:has([data-portrait-rail]) [data-guidance-id='app-media-grid'] > :nth-child(n + 4) {
		display: none;
	}
}

/* Only the header fits below this size; 320x568 now has one complete row. */
@container (height < 90px) {
	html:has([data-portrait-rail]) [data-guidance-id='app-media-grid'] {
		display: none;
	}
}