/* ---------------------------------------------------------------------------
 * The Collection Wall — any number of photographs, any dimensions, no crop.
 *
 * This file holds only the DEFAULTS. Every per-tile width is computed from the
 * photographs themselves by mm-mosaic.php and emitted, per widget instance, as
 * `#mm-wall-<id> .mm-wall-item:nth-child(n)` — an id selector, so it always
 * outranks the class rules below and there is no specificity ladder to
 * maintain. That is the payoff of owning the markup: the landing wall has to
 * reach (0,4,0) purely to beat Elementor's own container variables, and none
 * of that applies here.
 *
 * The custom-property names are `--mm-gal-*` because they are the shared
 * engine's vocabulary, not a copy/paste slip. mm-mosaic.php emits them for
 * both walls.
 * ------------------------------------------------------------------------ */

.mm-wall {
	/* Ratios. Overridden per tile from the real attachment. */
	--mm-gal-ar: 3 / 2;
	--mm-gal-arn: 1.5;
	--mm-gal-tint: #e4e4e8;

	/* Widths. --flex-basis is the compositor's answer for this breakpoint;
	   --mm-gal-max-h is a ceiling that only ever binds on a tile alone on its
	   row (a portrait given a whole row once came out 1349px tall). */
	--flex-basis: 100%;
	--flex-grow: 0;
	--flex-shrink: 1;
	--mm-gal-photo-w: 100%;
	--mm-gal-max-h: 3000px;

	--mm-gal-gutter: clamp(8px, 0.9vw, 14px);
	--mm-gal-rhythm: var(--mm-gal-gutter);
	--mm-gal-radius: 3px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	/* flex-start, NOT the default stretch: a stretched flex item ignores its
	   aspect-ratio and takes the row's height — a crop by another name. */
	align-items: flex-start;

	/* center, or a lone tile (one photograph, or an odd last row) pins left
	   instead of being centred by the compositor's 45–72% share. */
	justify-content: center;

	gap: var(--mm-gal-rhythm) var(--mm-gal-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-wall-item {
	flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis);
	margin: 0;
	padding: 0;
	position: relative;

	/* A flex item's default min-width:auto refuses to shrink below its
	   content, which quietly breaks the computed row widths. */
	min-width: 0;

	/* MUST stay visible. `overflow: hidden` is the obvious way to clip the
	   radius and it CROPS any photograph wider than its tile — on the landing
	   wall it ate the left third of a wordmark. The radius goes on the
	   picture, which is the exact shape of the frame anyway. */
	overflow: visible;
}

.mm-wall-photo {
	display: block;

	/* The ceiling is applied to the WIDTH, so the frame stays the
	   photograph's own ratio rather than being squashed to fit a height. */
	width: min( var(--mm-gal-photo-w), calc( var(--mm-gal-max-h) * var(--mm-gal-arn) ) );
	max-width: 100%;
	height: auto;

	/* The frame IS the photograph's shape, so `contain` and `cover` paint
	   identically here — `contain` is what makes "never cropped" a guarantee
	   rather than a consequence. Every other image on these pages is `cover`;
	   this one deliberately is not. */
	aspect-ratio: var(--mm-gal-ar);
	object-fit: contain;

	/* Measured from the photograph itself, so the frame holds its own colour
	   while the file loads instead of flashing grey. */
	background: var(--mm-gal-tint);
	border-radius: var(--mm-gal-radius);

	/* Centres the picture when the height ceiling has made it narrower than
	   its tile. Both margins come from one `auto`, so they cannot disagree. */
	margin: 0 auto;
}

/* Tablet and phone retune only the ceiling and the rhythm. Anything that sets
   a WIDTH here would lose anyway: the compositor owns --flex-basis at every
   breakpoint, and whoever owns the specificity owns the breakpoints. */
@media (max-width: 1024px) {
	.mm-wall { --mm-gal-gutter: clamp(10px, 1.3vw, 14px); }
}
@media (max-width: 767px) {
	.mm-wall { --mm-gal-rhythm: clamp(18px, 4vw, 26px); }
}

/* The editor-only empty state. Never rendered on the front end: a collection
   with no photographs yet has no wall at all, rather than a stranded heading
   above a dashed box. */
.mm-wall-empty {
	border: 2px dashed rgba(120, 118, 110, 0.45);
	border-radius: 4px;
	padding: 38px 22px;
	text-align: center;
	font: 400 15px/1.5 Lato, Arial, sans-serif;
	color: #6a665e;
	background: rgba(255, 255, 255, 0.4);
}
.mm-wall-empty b { display: block; font-weight: 700; margin-bottom: 4px; font-size: 16px; }