/**
 * Print Options Taxonomy — front-end styles
 *
 * The "How Custom Printing Works" tab on the single product page: one card
 * per print option the product offers (1 color / 2 color / Blanks …), each
 * with its title, one-line explanation and front/back artwork pair.
 *
 * Colors use letterjacket theme tokens with a hex fallback mirroring the
 * token's value, as module CSS must: it is enqueued independently of the
 * theme stylesheet and cannot assume the token layer resolved.
 *
 * @package LJE_Tools
 */

.lje-print-modalities {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin: 0;
}

.lje-print-modality {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.375rem;
	background: var(--lj-color-bg, #fff);
	border: 1px solid var(--lj-color-border, #e2e2e2);
	border-radius: 8px;
}

.lje-print-modality__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lj-color-ink, #32322c);
}

.lje-print-modality__copy {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--lj-color-text-muted, #6b6b66);
}

/* Artwork well — the pair of front/back samples sits below the copy, pushed
   to the bottom of the card so the wells line up across a row of cards with
   titles of different heights. */
.lje-print-modality__art {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.875rem;
}

/* The pair shares the well's width so both samples stay side by side in a
   narrow card; the cap keeps them from upscaling past their natural size
   when a card is wide (a product offering only one or two print options). */
.lje-print-modality__art img {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	max-width: 12rem;
	height: auto;
	border-radius: 4px;
}