/**
 * Lexar Single Product Cards — global single-product long-description layout.
 * All selectors are scoped under .lexa-gpc-* (description cards). The tab
 * BAR (Description | Reviews) is owned by ShopBuilder/theme — this plugin
 * contains no tab-bar rules. Nothing here can leak to home, shop, archives,
 * search, header, footer or other content.
 *
 * Approved design (GPT reference screenshots, 2026-09-25):
 *   ONE white rounded card per product;
 *   TEXT on the LEFT, IMAGES on the RIGHT — never alternating;
 *   1 image  -> one large image filling the media column;
 *   2 images -> vertical stack, both filling the media column width;
 *   3+ images -> two-column grid; an odd trailing image spans the full
 *                media width below (the RW300 reference arrangement);
 *   0 images -> full-width text, no reserved media column.
 *
 * v1.3.0 additions (reviewer report 2026-09-28):
 *   - pair row: 2 images beside a SHORT text block render side by side
 *     instead of stacking (2 stacked ~452px images next to a ~200px text
 *     block left a tall empty area at the left of the second image).
 *     Applied by the parser via .lexa-gpc-media--pair; stacked below on
 *     mobile;
 *   - never enlarge past real pixels: images whose largest available file
 *     is smaller than their slot carry a per-figure --lexa-gpc-maxw cap so
 *     they render at their natural width, centred — never blurred;
 *   - responsive candidates (srcset + sizes) are rebuilt by the parser
 *     from the media library because ShopBuilder disables WordPress's
 *     srcset generation on product pages; the browser now always picks a
 *     file at least as large as the rendered slot.
 *
 * Design tokens matched from the LIVE site (verified over HTTP):
 *   body  : Roboto 16px/28px, text #111111
 *   cards : #FFFFFF, border-radius 15px (reference design units)
 *   accent: #111111 (site black button system)
 *   page  : #F4F5F7 behind white cards
 */

/* ------------------------------------------------------------------ */
/* Description area (the_content output on product pages only)         */
/* ------------------------------------------------------------------ */
.lexa-gpc-desc {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The card: white, rounded, border-free. Text column + media column,
   media top-aligned with the text block (as in the screenshots).      */
.lexa-gpc-card {
	display: grid;
	gap: 20px 28px;
	align-items: start;
	width: 100%;
	background: #FFFFFF;
	border-radius: 15px;
	padding: 24px;
	box-sizing: border-box;
}

/* Text-only descriptions use the full card width — no empty columns.  */
.lexa-gpc-card--text-only {
	grid-template-columns: 1fr;
}

/* The approved split: TEXT LEFT / IMAGES RIGHT — for every product,
   never alternating. fr units (not % + gap) can never overflow the
   card: tracks absorb the column gap.                                 */
.lexa-gpc-card--text-first {
	grid-template-columns: 6fr 4fr;
}

/* Standalone image group: compact card that hugs its image — no empty
   text column, no minimum height, no wide blank areas.                */
.lexa-gpc-card--media-only {
	grid-template-columns: 1fr;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 18px;
}

/* --- Media column -------------------------------------------------- */

.lexa-gpc-media {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	min-width: 0;
}

.lexa-gpc-card--media-only .lexa-gpc-media {
	justify-content: center;
}

/* 1 image — one large image using the available right-column area.    */
.lexa-gpc-card--text-first .lexa-gpc-media--count-1 .lexa-gpc-figure {
	flex: 1 1 100%;
}

/* 2 images — vertical stack; both images fill the media column width
   (the JumpDrive S80 reference arrangement).                          */
.lexa-gpc-card--text-first .lexa-gpc-media--count-2 {
	flex-direction: column;
	flex-wrap: nowrap;
}

.lexa-gpc-card--text-first .lexa-gpc-media--count-2 .lexa-gpc-figure {
	width: 100%;
	flex: 0 0 auto;
}

/* 2 images + SHORT copy — pair row: side by side so the media column
   matches the text height instead of towering over it (v1.3.0).      */
.lexa-gpc-card--text-first .lexa-gpc-media--pair {
	flex-direction: row;
	flex-wrap: nowrap;
}

.lexa-gpc-card--text-first .lexa-gpc-media--pair .lexa-gpc-figure {
	width: calc(50% - 6px);
	flex: 0 0 calc(50% - 6px);
	min-width: 0;
}

/* 3+ images — two-column grid; the odd trailing image spans the full
   media width below the pairs (the RW300 reference arrangement:
   images 1+2 side by side, image 3 large and full-width below).       */
.lexa-gpc-card--text-first .lexa-gpc-media--multi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}

.lexa-gpc-card--text-first .lexa-gpc-media--multi .lexa-gpc-figure {
	width: 100%;
	min-width: 0;
}

.lexa-gpc-card--text-first .lexa-gpc-media--multi .lexa-gpc-figure:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.lexa-gpc-figure {
	margin: 0;
	padding: 0;
	min-width: 0;
	flex: 1 1 0;
}

.lexa-gpc-card--media-only .lexa-gpc-figure {
	flex: 0 1 auto;
}

/* Images: responsive, aspect preserved, never stretched or distorted. */
.lexa-gpc-figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Inside the approved text+media card every image fills its slot —
   except:
   - PORTRAIT images, which are capped so they can never render taller
     than the media column is wide (the same height budget a square
     image gets; fixes JumpDrive M400, 2026-09-26). The parser sets
     --lexa-gpc-fitw (width÷height, always < 1) on portrait figure
     wrappers only; the fallback 1 makes the cap a no-op for every other
     image, so non-portrait products render exactly as before;
   - images whose LARGEST available file is smaller than their slot:
     the parser sets --lexa-gpc-maxw to their natural width (v1.3.0), so
     a small upload renders sharp at its real size, centred, instead of
     being enlarged into a blurry image.
   min() combines both caps; the plain calc() line above it is the
   fallback for engines without min() support.                          */
.lexa-gpc-card--text-first .lexa-gpc-figure img {
	width: 100%;
	max-width: calc(100% * var(--lexa-gpc-fitw, 1));
	max-width: min(100%, calc(100% * var(--lexa-gpc-fitw, 1)), var(--lexa-gpc-maxw, 100%));
	margin-left: auto;
	margin-right: auto;
}

.lexa-gpc-figure figcaption {
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	color: #555555;
}

.lexa-gpc-copy {
	min-width: 0;
	color: #111111;
	overflow-wrap: break-word;
}

/* Keep normal WordPress/WooCommerce content semantics inside cards.  */
.lexa-gpc-copy p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 28px;
}

.lexa-gpc-copy p:last-child {
	margin-bottom: 0;
}

.lexa-gpc-copy h2,
.lexa-gpc-copy h3,
.lexa-gpc-copy h4 {
	color: #111111;
	margin: 0 0 12px;
	font-weight: 600;
}

.lexa-gpc-copy h2 { font-size: 26px; line-height: 32px; }
.lexa-gpc-copy h3 { font-size: 20px; line-height: 26px; }
.lexa-gpc-copy h4 { font-size: 18px; line-height: 24px; }

.lexa-gpc-copy ul,
.lexa-gpc-copy ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.lexa-gpc-copy ul:last-child,
.lexa-gpc-copy ol:last-child {
	margin-bottom: 0;
}

.lexa-gpc-copy ul li,
.lexa-gpc-copy ol li {
	margin-bottom: 6px;
}

.lexa-gpc-copy a {
	color: #111111;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lexa-gpc-copy a:hover {
	text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ */
/* Tablet — same text-left / images-right relationship, tighter      */
/* spacing and smaller gaps.                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
	.lexa-gpc-card {
		padding: 20px;
		gap: 18px 20px;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — single column: description text, then the image area.      */
/* The pair row stacks here (two 155px cells would be too small).      */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.lexa-gpc-desc {
		gap: 16px;
	}

	.lexa-gpc-card {
		grid-template-columns: 1fr;
		padding: 18px;
		gap: 16px;
	}

	.lexa-gpc-card--text-first .lexa-gpc-media--pair {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.lexa-gpc-card--text-first .lexa-gpc-media--pair .lexa-gpc-figure {
		width: 100%;
		flex: 0 0 auto;
	}

	.lexa-gpc-figure {
		width: 100%;
	}

	.lexa-gpc-figure img {
		margin: 0 auto;
	}

	.lexa-gpc-copy p {
		font-size: 15px;
		line-height: 26px;
	}

	.lexa-gpc-copy h2 { font-size: 22px; }
	.lexa-gpc-copy h3 { font-size: 18px; }
}