/*
 * HaoLustra — Hero enhancement (NON-FROZEN override).
 *
 * Purpose: make the product-detail Hero main image as large as possible and
 * move the thumbnail strip BELOW the main image (instead of the side column).
 *
 * Why a separate file: templates/single-hl_product.php, template-parts/product-hero.php
 * and assets/css/product-detail.css are FROZEN (tracked in the v1.1 freeze manifest).
 * A previous "enlarge main image" edit made directly inside product-detail.css was lost
 * when that frozen CSS was restored to its manifest hash. This file is loaded AFTER
 * product-detail.css, overrides only the Hero rules by CSS cascade/specificity, and is
 * NOT part of the freeze manifest — so it keeps the freeze gate green AND survives any
 * future freeze-restore.
 *
 * Scope: ONLY the Hero module (.hero / .hero-grid / .gallery / .hero-photo / .thumbs /
 * .hero-copy). No other module, header/footer, content field, or JS behaviour is touched.
 */

/* ---------------------------------------------------------------------------
 * Desktop layout: widen the image column, narrow the copy column (~60 / 40)
 * ------------------------------------------------------------------------- */
.hl-product-detail .hero-grid {
	grid-template-columns: 60fr 40fr;
	gap: 48px;
	align-items: start;
}

/* Gallery becomes a vertical stack: big main image on top, thumbnails underneath.
 * This overrides the frozen `grid-template-columns: 88px 1fr` side-thumbnail layout. */
.hl-product-detail .gallery,
.hl-product-detail .gallery:has(.thumbs) {
	display: flex;
	flex-direction: column;
	gap: 18px;
	grid-template-columns: none;
	min-width: 0;
}

/* Neutralise the frozen grid placement so DOM order + flex order decide position. */
.hl-product-detail .gallery:has(.thumbs) .hero-photo,
.hl-product-detail .gallery:has(.thumbs) .thumbs {
	grid-column: auto;
	grid-row: auto;
}

.hl-product-detail .gallery .hero-photo {
	order: 1;
}

.hl-product-detail .gallery .thumbs {
	order: 2;
}

/* ---------------------------------------------------------------------------
 * Main image: as large as possible, stable near-square ratio, no hard crop
 * ------------------------------------------------------------------------- */
.hl-product-detail .hero-photo {
	position: relative;
	width: 100%;
	min-height: 0;                 /* drop the frozen 620px floor that centred a small box */
	aspect-ratio: 1 / 1;           /* stable square block driven by the (now wider) column */
	overflow: hidden;
	border-radius: 24px;
	background: #f4efe6;           /* cream backing when `contain` leaves margins */
	box-shadow: var(--shadow);
}

.hl-product-detail .hero-photo img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;           /* show the full product, never crop the subject */
	object-position: center;
}

/* ---------------------------------------------------------------------------
 * Thumbnails: horizontal strip under the main image, uniform size, one row
 * preferred (horizontal scroll only if there are too many to fit).
 * ------------------------------------------------------------------------- */
.hl-product-detail .thumbs {
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 12px;
	padding: 2px 2px 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.hl-product-detail .thumb {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	border-radius: 14px;
}

/* Clear active-state highlight for the currently selected thumbnail. */
.hl-product-detail .thumb.active,
.hl-product-detail .thumb:focus-visible {
	border: 2px solid var(--gold);
	box-shadow: 0 0 0 3px rgba(169, 120, 50, .25);
	outline: 0;
}

/* Keep the copy column comfortable in the narrower track. */
.hl-product-detail .hero-copy .summary {
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Responsive overrides (mirror the frozen breakpoints so this file, loaded
 * later, does not accidentally win on small screens).
 * ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.hl-product-detail .hero-grid {
		grid-template-columns: 58fr 42fr;
		gap: 40px;
	}
}

@media (max-width: 980px) {
	.hl-product-detail .hero-grid {
		grid-template-columns: 1fr;   /* stack copy under the gallery on tablet/mobile */
		gap: 32px;
	}

	.hl-product-detail .hero-photo {
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 640px) {
	.hl-product-detail .thumb {
		flex: 0 0 80px;
		width: 80px;
		height: 80px;
	}
}