/*
 * Home – All in one (Figma 1828:12849, 1600×1519.04).
 * 104px top/bottom padding, content 1280: section head (left-aligned divider + H2, 48px below) then a 3-column bento grid
 * (20px gaps) of 7 cards, radius 25, the border coming out of the 32px padding. Card colour and type follow the
 * WooCommerce showcase cards (on request, 2026-10-03; Figma had a mint gradient, 20px titles and 13px text):
 * purple-10 fill, 1px purple-30 border, heading-4 title, 8px gap, 16px text-secondary description.
 * Mockups inside the cards are static illustrations (core/html, role="img"); card titles and
 * descriptions are Heading/Paragraph blocks; the two image fills are Image blocks.
 */

.rs-home-all-in-one {
	--rs-aio-muted: #6e6980;
}

/* ---- Section head: left-aligned section divider + H2, no lead, like the Overview section below it (on request,
   2026-10-09; Figma had a centred eyebrow, title and lead). ---- */
.rs-aio__head > * {
	margin: 0;
}

.rs-aio__head > .rs-eyebrow {
	font-weight: 600;
}

/* ---- Bento grid. ---- */
.rs-home-all-in-one .rs-aio__grid {
	align-items: stretch;
}

.rs-aio-card {
	box-sizing: border-box;
	min-width: 0;
	padding: 31px;
	border: 1px solid var(--wp--preset--color--purple-30);
	border-radius: var(--wp--preset--border-radius--25, 25px);
	background: var(--wp--preset--color--purple-10);
}

.rs-aio-card > *,
.rs-aio-card__text > * {
	min-width: 0;
	margin: 0;
}

/* "Every review in one place": copy column grows, chips pinned to the bottom. */
.rs-aio-card.is-ecosystem > .rs-aio-card__text {
	flex: 1 0 auto;
}

/* ---- Image fills. ---- */
.rs-aio-card__media {
	margin: 0;
}

.rs-aio-card__media img {
	display: block;
	max-width: none;
}

/* Smart form: on a white panel like the other mockups (on request, 2026-10-09; Figma let it bleed
   past the card padding). The panel fills the rest of the card and centres the form. */
.rs-aio-card__media.is-form {
	box-sizing: border-box;
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 230px;
	padding: 16px 14px;
	border-radius: var(--wp--preset--border-radius--16, 16px);
	background: var(--wp--preset--color--white);
}

.rs-aio-card__media.is-form img {
	width: 100%;
	max-width: 480px;
	height: auto;
}

/* Review emails: white 230-tall panel, image 330.8×165.4 at (11.6, 32.78). */
.rs-aio-card__media.is-email {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 230px;
	padding: 32.78px 6.93px 31.82px 11.6px;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--16, 16px);
	background: var(--wp--preset--color--white);
}

.rs-aio-card__media.is-email img {
	width: 100%;
	max-width: 420px;
	height: auto;
	margin-inline: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Every mockup panel casts the WooCommerce showcase cards' soft shadow (on request, 2026-10-09). */
.rs-home-all-in-one :is(.rs-aio-queue, .rs-aio-card__media.is-form, .rs-aio-card__media.is-email, .rs-aio-chart, .rs-aio-ai, .rs-aio-serp) {
	box-shadow: var(--wp--preset--shadow--soft);
}

/* ---- Shared mockup type (Plus Jakarta Sans, Figma "normal" line heights as px). ---- */
.rs-home-all-in-one :is(.rs-aio-queue, .rs-aio-chart, .rs-aio-ai, .rs-aio-serp) {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 10px;
	font-weight: 400;
	line-height: 13px;
	letter-spacing: 0;
	color: var(--rs-aio-muted);
}

.rs-home-all-in-one :is(.rs-aio-queue, .rs-aio-chart, .rs-aio-ai, .rs-aio-serp) :is(p, b, span, i) {
	margin: 0;
}

/* Star rows: SVG stars (the ★/☆ glyphs render differently per OS). Figma: 49×13 at 10px, 53×14 at 11px. */
.rs-aio-stars {
	display: flex;
	flex: none;
	align-items: center;
	gap: 1.8px;
	box-sizing: content-box;
	width: 49px;
	height: 13px;
	padding-bottom: 2px;
}

.rs-aio-stars i {
	flex: none;
	width: 8px;
	height: 7.61px;
	background: url("../../images/home/all-in-one/star.svg") center / contain no-repeat;
}

.rs-aio-stars i.is-empty {
	background-image: url("../../images/home/all-in-one/star-empty.svg");
}

/* ---- Moderation queue (white 260-tall panel, rows 770.67 wide). ---- */
.rs-aio-queue {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 260px;
	padding: 8px 4px 8px 8px; /* Figma rows are 770.67 wide at x 8 of 782.67 */
	border-radius: var(--wp--preset--border-radius--16, 16px);
	background: var(--wp--preset--color--white);
}

.rs-aio-queue__row {
	box-sizing: border-box;
	display: flex;
	flex: none;
	align-items: center;
	gap: 14px;
	height: 50px;
	padding: 10px 14px;
	border-radius: 9px;
}

/* Figma row tops: 8, 60, 112, 162. */
.rs-aio-queue__row:nth-child(2),
.rs-aio-queue__row:nth-child(3) {
	margin-top: 2px;
}

.rs-aio-queue__row.is-highlighted {
	background: #fbfaf4;
}

.rs-aio-queue__avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	font-size: 9px;
	font-weight: 800;
	line-height: 11px;
}

.rs-aio-queue__avatar.is-blue { background: #c9e8f3; color: #2e6e86; }
.rs-aio-queue__avatar.is-peach { background: #efc3a4; color: #8a5b33; }
.rs-aio-queue__avatar.is-lilac { background: #d9cbf7; color: #5f27c7; }

.rs-aio-queue__body {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: 2px;
	min-width: 1px;
}

.rs-aio-queue__top {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.rs-aio-queue__top b {
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 14px;
	color: var(--wp--preset--color--ink-deep);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rs-aio-queue__meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rs-aio-queue__status {
	box-sizing: border-box;
	flex: none;
	width: 70.09px;
	padding: 4px 11px;
	border-radius: 999px;
	background: #ddf6ee;
	font-weight: 700;
	color: #0e8a73;
	white-space: nowrap;
}

.rs-aio-queue__status.is-pending {
	width: 62.03px;
	background: #fbf3da;
	color: #b4682b;
}

.rs-aio-queue__more {
	flex: none;
	width: 13.47px;
	font-size: 11px;
	font-weight: 800;
	line-height: 14px;
	color: #a29bb8;
	white-space: nowrap;
}

.rs-aio-queue__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 14px 6px;
	border-top: 1px solid #f0edf7;
}

.rs-aio-queue__count {
	font-size: 10.5px;
	font-weight: 700;
}

.rs-aio-queue__actions {
	display: flex;
	gap: 8px;
	height: 23px;
}

.rs-aio-queue__actions > span {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	border-radius: 999px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* Sized by its label (a fixed width let "Move to pending" spill past the pill). */
.rs-aio-queue__actions .is-outline {
	padding: 0 12px;
	border: 1px solid #ece9f2;
	color: #524c63;
}

/* ---- White mockup panels (analytics, AI summary, Google result). ---- */
.rs-aio-chart,
.rs-aio-ai,
.rs-aio-serp {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 16px;
	border-radius: var(--wp--preset--border-radius--14, 14px);
	background: var(--wp--preset--color--white);
}

/* Analytics bar chart. */
.rs-aio-chart {
	gap: 12px;
	min-height: 230px;
}

.rs-aio-chart__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	white-space: nowrap;
}

.rs-aio-chart__label {
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
}

.rs-aio-chart__delta {
	font-size: 12px;
	font-weight: 800;
	line-height: 15px;
	color: #17c2a4;
}

.rs-aio-chart__bars {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 7px;
	height: 171px;
}

.rs-aio-chart__bars i {
	flex: 0 1 35.14px;
	min-width: 0;
	border-radius: 5px 5px 0 0;
	background: #d9cbf7;
}

.rs-aio-chart__bars i:nth-child(2) { flex-basis: 35.16px; }
.rs-aio-chart__bars i.is-2 { background: #c4adf4; }
.rs-aio-chart__bars i.is-3 { background: #a57ff0; }
.rs-aio-chart__bars i.is-4 { background: #7c3bf0; }
.rs-aio-chart__bars i.is-5 { background: #17c2a4; }

/* AI summary. */
.rs-aio-ai {
	gap: 9.2px;
	min-height: 230px;
}

.rs-aio-ai__label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 13px;
	color: #7c3bf0;
}

.rs-aio-ai__label::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 3.5px;
	background: #7c3bf0;
}

.rs-home-all-in-one .rs-aio-ai__text {
	padding-bottom: 0.785px; /* Figma: 37px text box + 0.585 */
	font-size: 11.5px;
	line-height: 18.4px;
	color: #524c63;
}

.rs-aio-ai__text b {
	font-weight: 700;
}

.rs-aio-ai__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 0.8px;
}

.rs-aio-ai__tags span {
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 700;
	white-space: nowrap;
}

.rs-aio-ai__tags .is-green { background: #ddf6ee; color: #0e8a73; }
.rs-aio-ai__tags .is-purple { background: #f2edfc; color: #5f27c7; }
.rs-aio-ai__tags .is-orange { background: #fcebdc; color: #b4682b; }

.rs-aio-ai__photos {
	display: flex;
	gap: 8px;
	padding-top: 22px;
}

.rs-aio-ai__photos img {
	display: block;
	flex: 0 1 74px;
	min-width: 0;
	height: auto;
	aspect-ratio: 1;
	border-radius: 8px;
	object-fit: cover;
}

/* Google rich result. */
.rs-aio-serp {
	gap: 4px;
}

.rs-aio-serp__url {
	font-weight: 600;
	color: #4a6b3e;
}

.rs-aio-serp__title {
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	color: #1a0dab;
}

.rs-aio-serp__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 1px 0 5px;
}

.rs-aio-serp__rating .rs-aio-stars {
	gap: 2px;
	width: 53px;
	height: 14px;
}

.rs-aio-serp__rating .rs-aio-stars i {
	width: 8.8px;
	height: 8.37px;
}

.rs-aio-serp__rating > span:last-child {
	font-size: 10.5px;
	font-weight: 600;
}

.rs-aio-serp__line {
	display: block;
	height: 4px;
	border-radius: 99px;
	background: #f0edf7;
}

.rs-aio-serp__line.is-short {
	width: 224.63px;
	max-width: 100%;
}

/* ---- Integration chips. ---- */
.rs-aio-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 779px;
}

.rs-aio-chip {
	display: flex;
	align-items: center;
	gap: 7.779px;
	padding: 8px 12px;
	border-radius: 11.337px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14.586px;
	font-weight: 500;
	line-height: 19.448px;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.rs-aio-chip.is-wide {
	padding-inline: 14px;
}

.rs-aio-chip img {
	display: block;
	flex: none;
	width: 23.337px;
	height: 23.337px;
}

.rs-aio-chip.is-icon img {
	width: 21.957px;
	height: 21.957px;
}

/* ---- Responsive. ---- */
@media (min-width: 1280px) {
	/* Figma lets the four 74px photos overhang the 317px panel by 2.7px. */
	.rs-aio-ai__photos img {
		flex-shrink: 0;
	}
}

@media (max-width: 1023px) {
	.rs-home-all-in-one .rs-aio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rs-home-all-in-one .rs-aio-card.is-ecosystem {
		grid-column: auto;
	}
}

@media (max-width: 781px) {
	.rs-home-all-in-one .rs-aio__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-home-all-in-one .rs-aio-card.is-moderation {
		grid-column: auto;
	}

	.rs-aio-card {
		padding: 23px;
	}

	.rs-aio-queue {
		height: auto;
	}

	.rs-aio-queue__row {
		gap: 10px;
		padding-inline: 10px;
	}

	.rs-aio-queue__more {
		display: none;
	}

	.rs-aio-queue__foot {
		padding-inline: 10px;
	}
}

@media (max-width: 480px) {
	.rs-aio-queue__top {
		flex-wrap: wrap;
		row-gap: 0;
	}

	.rs-aio-queue__row {
		height: auto;
		min-height: 50px;
	}

	.rs-aio-queue__status {
		width: auto;
		padding-inline: 8px;
	}
}