/*
 * Collect & Showcase – Essential controls (Figma 1270:17050, 1280×1251, 120px after it).
 * Head 226 (Section Divider 24 · 16 · H2 92 · 16 · lead 78) · 56 · bento 969 = row 525 + row 444.
 *
 * Bento (1270:17061): 1px #efefef frame, radius 25, clipped. Cards are a 3-column grid (the embed card
 * spans 2); Figma draws 0.5px rgba(0,0,0,.1) lines on the right of each cell and on top of row 2. Every
 * card draws its right + top line as inset shadows (they take no space, like Figma strokes); lines on
 * the outer edge sit under the frame, so the grid can reflow without per-card rules.
 *
 * Card illustrations are Image blocks (SVG composed from the Figma vector groups). Their shadows and
 * the fade under the branding card are here, so a replaced image keeps them.
 */

.rs-cs-controls {
	--rs-csc-frame: #efefef;
	--rs-csc-line: rgba(0, 0, 0, 0.1);
	--rs-csc-fade: 248, 248, 248; /* #f8f8f8 */
	--rs-csc-card-pad: 40px;
}

/* ---- Head (1270:17051) ---- */
.rs-cs-controls__head > * {
	margin: 0;
}

/* Figma rule (1025 long from x 255): dashes 10.04 every 20.078px, starting with a 5.02px dash. */
.rs-cs-controls .rs-eyebrow.has-rule::after {
	background-position: -4.52px 0;
	background-size: 20.078px 1px;
}

.rs-cs-controls__head > .rs-cs-controls__title {
	max-width: 507px;
}

.rs-cs-controls__head > .rs-cs-controls__lead {
	max-width: 660px;
}

/* ---- Bento (1270:17062) ---- */
.rs-cs-controls .rs-cs-controls__bento {
	position: relative;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--25, 25px);
}

.rs-cs-controls .rs-cs-controls__bento::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 1px solid var(--rs-csc-frame);
	border-radius: inherit;
	pointer-events: none;
}

.rs-cs-controls .rs-cs-controls__card {
	position: relative;
	min-width: 0;
	padding: var(--rs-csc-card-pad);
	box-shadow: inset -0.5px 0 0 var(--rs-csc-line), inset 0 0.5px 0 var(--rs-csc-line);
}

.rs-cs-controls__card > .rs-cs-controls__mock {
	align-self: center;
	width: fit-content;
	max-width: 100%;
	margin: 0;
}

.rs-cs-controls__mock img {
	display: block;
	width: var(--rs-csc-mock-w, auto);
	max-width: 100%;
	height: auto;
}

/* Illustration sizes (Figma px). */
.rs-cs-controls__card.is-filters { --rs-csc-mock-w: 320px; }
.rs-cs-controls__card.is-embed { --rs-csc-mock-w: 432px; }
.rs-cs-controls__card.is-content { --rs-csc-mock-w: 300px; }
.rs-cs-controls__card.is-sources { --rs-csc-mock-w: 302px; }
.rs-cs-controls__card.is-branding { --rs-csc-mock-w: 300px; }

/* Row 2 illustrations sit in a 220px slot, centred (Figma "Frame 98"/"Frame 102"). */
.rs-cs-controls__card:is(.is-content, .is-sources, .is-branding) > .rs-cs-controls__mock {
	display: flex;
	align-items: center;
	min-height: 220px;
}

/*
 * 1270:17065: the Figma render shows a soft shadow under the panel stack that code.tsx doesn't list
 * (fitted to Figma's 1× render of the node).
 */
.rs-cs-controls__card.is-filters .rs-cs-controls__mock img {
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.06));
}

/* 1270:17305 sits at calc(50% + 0.5px) of a card that starts at x 427 (grid: 426.67): land on x 638. */
@media (min-width: 1280px) {
	.rs-cs-controls__card.is-embed > .rs-cs-controls__mock {
		position: relative;
		left: 0.67px;
	}
}

/* 1270:17365: drop-shadow 0 5 10 rgba(0,0,0,.08). */
.rs-cs-controls__card.is-content .rs-cs-controls__mock img {
	filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.08));
}

/* 1270:17497: two faint upward shadows; 1270:17646: a #f8f8f8 fade over the panel that runs 34px below it. */
.rs-cs-controls__card.is-branding .rs-cs-controls__mock img {
	filter: drop-shadow(-10px -4px 4px rgba(0, 0, 0, 0.02)) drop-shadow(4px -4px 3.5px rgba(0, 0, 0, 0.03));
}

.rs-cs-controls__card.is-branding > .rs-cs-controls__mock {
	position: relative;
}

.rs-cs-controls__card.is-branding > .rs-cs-controls__mock::after {
	content: "";
	position: absolute;
	inset: 0 0 -15.4545%; /* 254 / 220 */
	background: linear-gradient(179.94deg, rgba(var(--rs-csc-fade), 0) 0%, rgba(var(--rs-csc-fade), 0) 70.572%, rgb(var(--rs-csc-fade)) 86.879%, rgb(var(--rs-csc-fade)) 100%);
	pointer-events: none;
}

.rs-cs-controls__card.is-branding > .rs-cs-controls__text {
	position: relative;
}

/*
 * Embed card (1270:17223, 853×525): warm gradient + a 902×737 grid of translucent squares (rotated 180°,
 * centred 19.5px left, 128px up), the code panel 432×413 centred 50px from the top, and a fade to
 * #fff1c5 (1270:17356) over its lower part, under the text (40px padding).
 */
.rs-cs-controls .rs-cs-controls__card.is-embed {
	padding-top: 50px;
	background:
		url("../../images/cs/controls/deco-grid.svg") calc(50% - 19.5px) -128px / 902px 737px no-repeat,
		linear-gradient(180deg, #fff8f2 0%, #ffe1c9 26.25%, #fff3c7 61.817%, #fff1c4 100%);
}

/*
 * The fade is drawn from the text's top edge (Figma: text at 397 of 525; the fade reaches 10% at 315.5,
 * 60% at 373.4, full #fef1c5 at 423.4), so the title stays on the opaque part when the card reflows.
 * The text overlaps the code panel's last 66px (panel ends at 463) = 15.28% of the panel's width.
 */
.rs-cs-controls .rs-cs-controls__card.is-embed {
	overflow: hidden;
}

.rs-cs-controls .rs-cs-controls__card.is-embed > .rs-cs-controls__text {
	position: relative;
	z-index: 1;
	margin-top: max(-66px, -15.28%);
}

.rs-cs-controls .rs-cs-controls__card.is-embed > .rs-cs-controls__text::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -400px;
	right: calc(-1 * var(--rs-csc-card-pad));
	bottom: calc(-1 * var(--rs-csc-card-pad));
	left: calc(-1 * var(--rs-csc-card-pad));
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 243, 199, 0.1) 318.54px, rgba(254, 242, 198, 0.6) 376.37px, #fef1c5 426.42px, #fff1c5 100%);
	pointer-events: none;
}

/* ---- Responsive ---- */
@media (max-width: 1279px) {
	.rs-cs-controls {
		--rs-csc-card-pad: 32px;
	}

	.rs-cs-controls .rs-cs-controls__card.is-embed {
		padding-top: 42px;
	}
}

/* Tablet: two columns. Row 1 keeps filters + embed, row 2 content + sources, branding spans the row. */
@media (max-width: 1023px) {
	.rs-cs-controls .rs-cs-controls__bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rs-cs-controls .rs-cs-controls__bento > .rs-cs-controls__card {
		grid-column: auto;
	}

	.rs-cs-controls .rs-cs-controls__bento > .rs-cs-controls__card.is-branding {
		grid-column: 1 / -1;
	}
}

/* Phone: one column, smaller padding. */
@media (max-width: 781px) {
	.rs-cs-controls {
		--rs-csc-card-pad: 24px;
	}

	.rs-cs-controls .rs-cs-controls__bento {
		grid-template-columns: minmax(0, 1fr);
		border-radius: var(--wp--preset--border-radius--20, 20px);
	}

	.rs-cs-controls .rs-cs-controls__bento > .rs-cs-controls__card.is-branding {
		grid-column: auto;
	}

	.rs-cs-controls .rs-cs-controls__card.is-embed {
		padding-top: 32px;
	}

	.rs-cs-controls__card:is(.is-content, .is-sources, .is-branding) > .rs-cs-controls__mock {
		min-height: 0;
	}
}