/**
 * Promo Split — image-promo panel beside a 2×2 product grid.
 *
 * GENERATED from Figma `fleur-homepage / luxury-collection` (measured).
 * Consumes tokens only; section padding + bg live on the outer group attribute.
 *
 * @package wp-design-library/components
 */

/* Header row — margin below = section gap 40 (space.8) */
.wpdl-promo-split__header {
	margin-block-end: var(--wp--custom--space--8);
	padding-block-end: var(--wp--custom--space--6);
	border-block-end: 1px solid var(--wp--custom--semantic--color--divider--subtle);
	align-items: flex-end;
}

.wpdl-promo-split__eyebrow {
	margin: 0 0 var(--wp--custom--space--2);
	color: var(--wp--custom--semantic--color--accent--secondary);
	font-family: var(--wp--custom--typography--family--sans);
	font-size: var(--wp--custom--typography--size--sm, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wpdl-promo-split__title {
	margin: 0;
	color: var(--wp--custom--semantic--color--text--primary);
	font-family: var(--wp--custom--typography--family--serif, serif);
	font-size: var(--wp--custom--typography--size--2xl, 2rem);
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.wpdl-promo-split__view-all {
	margin: 0;
	font-size: var(--wp--custom--typography--size--sm, 0.8125rem);
	font-weight: 600;
	white-space: nowrap;
}

.wpdl-promo-split__view-all a {
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
}

.wpdl-promo-split__view-all a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Split — 50/50, gap 40 (space.8) */
.wpdl-promo-split__split {
	gap: var(--wp--custom--space--8);
	align-items: stretch;
}

.wpdl-promo-split__col-banner,
.wpdl-promo-split__col-grid {
	display: flex;
	flex-direction: column;
}

/* --- Left: promo banner ------------------------------------------------- */
.wpdl-promo-split__banner {
	flex: 1;
	min-block-size: 24rem; /* reduced ~20%; stretches to the (shorter) grid height */
	padding: var(--wp--custom--space--9); /* 48 */
	border-radius: var(--wp--custom--radius--md); /* 12 */
	/* Buyer swaps --wpdl-promo-img with a cover url(); forest scrim keeps text legible */
	background-color: var(--wp--custom--semantic--color--brand--strong);
	background-image:
		linear-gradient(180deg, rgba(31, 38, 31, 0.15) 0%, rgba(31, 38, 31, 0.75) 100%),
		var(--wpdl-promo-img, none);
	background-size: cover;
	background-position: center;
	color: var(--wp--custom--semantic--color--text--inverse);
	justify-content: space-between;
}

.wpdl-promo-split__banner > * {
	margin-block: 0 !important; /* neutralise WP flow margins inside the flex column */
}

.wpdl-promo-split__banner-kicker {
	margin: 0 0 var(--wp--custom--space--3); /* 12 */
	color: var(--wp--custom--semantic--color--accent--secondary);
	font-family: var(--wp--custom--typography--family--sans);
	font-size: var(--wp--custom--typography--size--sm, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wpdl-promo-split__banner-title {
	margin: 0;
	max-inline-size: 15rem; /* measured ~249px text column */
	color: var(--wp--custom--semantic--color--text--inverse);
	font-family: var(--wp--custom--typography--family--serif, serif);
	font-size: var(--wp--custom--typography--size--3xl, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
}

.wpdl-promo-split__banner-actions {
	margin: 0;
}

/* --- Right: 2×2 product grid -------------------------------------------- */
.wpdl-promo-split__col-grid .wpdl-promo-split__collection {
	margin: 0;
}

.wpdl-promo-split__collection .wc-block-product-template,
.wpdl-promo-split__collection ul.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--custom--space--7) var(--wp--custom--space--6); /* row 32 / col 24 */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WC gives each <li> a flex-item width that shrinks to the image in a grid;
   force it to fill the grid cell. */
.wpdl-promo-split__collection .wc-block-product-template > li,
.wpdl-promo-split__collection ul.wp-block-post-template > li {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	margin: 0 !important;
	justify-self: stretch;
}

.wpdl-promo-split__card {
	inline-size: 100%; /* fill the grid cell (was shrinking to image width) */
	gap: var(--wp--custom--space--4); /* 16 image→details */
}

.wpdl-promo-split__card > * {
	margin-block: 0 !important;
}

.wpdl-promo-split__media {
	position: relative;
	inline-size: 100%;
	border-radius: var(--wp--custom--radius--sm); /* 8 → snapped to sm */
	overflow: hidden;
	background-color: var(--wp--custom--semantic--color--surface--secondary);
}

.wpdl-promo-split__img,
.wpdl-promo-split__img.wp-block-woocommerce-product-image {
	display: block;
	inline-size: 100%;
	margin: 0;
}

.wpdl-promo-split__img img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.wpdl-promo-split__name {
	margin: 0 0 var(--wp--custom--space--1); /* details gap ~6 → space.1 */
	font-family: var(--wp--custom--typography--family--sans);
	font-size: var(--wp--custom--typography--size--base, 1rem);
	font-weight: 500;
	line-height: 1.25;
}

.wpdl-promo-split__name a {
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
}

.wpdl-promo-split__price {
	margin: 0;
	color: var(--wp--custom--semantic--color--accent--secondary); /* gold price (Figma #c0912e) */
	font-size: var(--wp--custom--typography--size--sm, 0.9375rem);
	font-weight: 600;
}

/* --- Responsive --------------------------------------------------------- */
@media (width < 48em) {
	.wpdl-promo-split__banner {
		min-block-size: 22rem;
	}
	.wpdl-promo-split__banner-title {
		font-size: var(--wp--custom--typography--size--2xl, 2rem);
	}
}