/**
 * Product-detail media stage. ONE adaptive system for every individual product and detail page.
 *
 * OWNER-APPROVED REFERENCE: the BOPP Roll Labels detail page. The product artwork is large, it
 * dominates the media column, it starts close to the top of the product experience, it uses almost
 * all of the available media width, and it never floats inside a big empty beige box.
 *
 * HOW THAT IS ACHIEVED, AND WHY IT IS NOT 84 SEPARATE FIXES. The frame takes its height FROM THE
 * PICTURE instead of imposing a shape on it. There is no aspect-ratio, no min-height and no
 * max-height, so there is nothing to letterbox against: a portrait graphic gets real vertical scale
 * and a landscape photograph uses the full column width, from the same two rules. The previous
 * square frame forced every one of the 84 governed product images (51 portrait, 28 landscape, 5
 * near-square) into a 1:1 box, which is exactly where the dead cream space came from.
 *
 * Aspect ratio is never altered, nothing is cropped, and the frame keeps only a hairline of padding
 * so the card edge still reads against the page.
 *
 * SCOPE: individual product and detail pages ONLY. Catalog, listing and grid card photography is
 * owner-approved and is deliberately untouched by this file; nothing here selects a card.
 *
 * CROSS-BRAND: this component is intentionally brand-neutral. It consumes only DDR-001 tokens and
 * carries no copy, so a sibling brand reuses it by changing tokens, not by rebuilding product pages.
 *
 * Approved breakpoints only: 640, 768, 1024, 1280. No em dashes.
 */

.ce-pmedia {
	display: block;
	background: var(--ce-color-bg-cream);
	border: 1.5px solid var(--ce-line-dark);
	border-radius: var(--ce-radius-card);
	padding: 6px;
	overflow: hidden;
}

.ce-pmedia img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 9px;
}

/* No approved photograph for this record. Deliberately plain, so it reads as "no photograph yet"
   rather than as a stand-in product. It keeps a modest height because there is no picture to take
   its height from. */
.ce-pmedia__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 220px;
	padding: var(--ce-space-5);
	color: rgba(28, 26, 23, 0.3);
	font-size: var(--ce-font-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: repeating-linear-gradient(135deg, var(--ce-color-bg-cream) 0 14px, rgba(28, 26, 23, 0.02) 14px 28px);
	border-radius: 9px;
}

/* Additional gallery images, where a product genuinely has them. These stay a fixed square grid on
   purpose: they are navigation thumbnails, not the product visual. */
.ce-pmedia__thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ce-space-2);
	margin-top: var(--ce-space-2);
}
.ce-pmedia__thumb {
	background: var(--ce-color-bg-cream);
	border: var(--ce-border-width) solid var(--ce-color-border);
	border-radius: var(--ce-radius-card-sm);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.ce-pmedia__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

@media (min-width: 1024px) {
	.ce-pmedia { padding: 8px; }
}