/*
 * "sol" batch: the template-built platform pages (page-create-multiple-*.html,
 * main.sol-mam-page) and the template-built use-case pages (/use-scenarios/*).
 * Sections are generated by seed/lib/sol.php with the seeded pages' builders,
 * so most styling comes from landing.css, pages-mam.css (.mam-*) and, for the
 * v1 use-case layout, pages.css / pages-company.css. This file adds the few
 * .sol-* components and page-scoped fixes.
 */

/* ---------- platform pages: scaffolding ---------- */

/* Patterns sit straight in <main>; keep flow gaps out like the seeded pages. */
.sol-mam-page > * + * {
	margin-block-start: 0 !important;
}

/* cp-compare leaves its first header cell empty and relies on landing.css for the label. */
.sol-mam-page .geelark-compare-table thead th:first-child:empty::before {
	content: "Compare";
}

/* TikTok "why" cards: two by two, as on the reference. */
.sol-mam-page #why .geelark-benefits {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* ---------- boxed section heads ---------- */

.sol-boxhead {
	gap: 24px !important;
	padding: 24px 32px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 16px;
}

.sol-boxhead > .geelark-icon-box {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	background: none;
}

.sol-boxhead > .geelark-icon-box::after {
	inset: 0;
	color: var(--wp--preset--color--primary);
}

.sol-boxhead-text > * {
	margin: 0;
}

.sol-boxhead-text > * + * {
	margin-top: 0.5rem;
}

.sol-mam-page h2.sol-boxhead-title {
	font-size: var(--wp--preset--font-size--x-large);
}

.sol-mam-page .sol-subhead {
	margin-top: 3.5rem !important;
}

/* ---------- risk list, rule cards, notes ---------- */

.sol-risks {
	margin-top: 2.5rem !important;
	gap: 40px 48px !important;
}

.sol-risk {
	gap: 16px !important;
}

.sol-risk .geelark-icon-box {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
}

.sol-risk .geelark-icon-box::after {
	inset: 0;
	color: var(--wp--preset--color--ink, #1f2937);
}

.sol-risk-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted, #4b5563);
}

.sol-rules {
	margin-top: 2rem !important;
	gap: 24px !important;
}

.sol-rule {
	padding: 28px 32px;
	border-radius: 16px;
	background: #f7f8fa;
}

.sol-rule > * {
	margin: 0;
}

.sol-rule-title {
	margin-bottom: 1rem !important;
}

.sol-rule-list {
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.sol-xlist li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.sol-xlist li + li {
	margin-top: 0.4rem;
}

.sol-xlist li::before {
	content: "×";
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 1em;
	height: 1em;
	border: 1.5px solid #dc2626;
	border-radius: 50%;
	color: #dc2626;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
}

.sol-note {
	margin-top: 2.5rem !important;
	gap: 16px !important;
}

.sol-note .geelark-icon-box {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	background: none;
}

.sol-note .geelark-icon-box::after {
	inset: 0;
	color: var(--wp--preset--color--primary);
}

.sol-note-text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.sol-text-note {
	margin-top: 2rem !important;
	max-width: 880px;
}

/* ---------- numbered how-to steps ---------- */

.sol-steps {
	margin-top: 2.5rem !important;
	gap: 32px 40px !important;
	text-align: left;
}

.sol-step {
	gap: 14px !important;
}

.sol-step-num {
	flex: 0 0 auto;
	min-width: 1.25rem;
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.75rem;
	line-height: 1.1;
}

.sol-step-text > * {
	margin: 0;
}

.sol-step-text > * + * {
	margin-top: 0.5rem;
}

.sol-step-text p {
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- roles, card layouts ---------- */

.sol-roles-section .mam-split + .sol-roles,
.sol-boxhead + .sol-roles {
	margin-top: 3rem !important;
}

.sol-roles-section .mam-table-wrap {
	margin-top: 3rem !important;
}

.sol-roles-section .mam-split h2 {
	text-align: left;
}

/* 2 + 3 card rows (Reddit karma, X real-time). */
.mam-cards.sol-cards-23 {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.sol-cards-23 > * {
	grid-column: span 2;
}

.sol-cards-23 > :nth-child(-n + 2) {
	grid-column: span 3;
}

.mam-cards.sol-side-stack {
	grid-template-columns: minmax(0, 1fr) !important;
}

.sol-table-follow {
	padding-top: 0 !important;
}

.sol-explained .sol-fit {
	margin-top: 1.5rem !important;
}

.sol-explained .geelark-media + h2 {
	margin-top: 2rem;
}

/* ---------- templates ---------- */

.sol-templates .sol-templates-more {
	margin-top: 1.25rem !important;
	justify-content: center;
}

.sol-smm-template-panel h3.mam-template-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--noto);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

.mam-template-name a {
	color: inherit;
	text-decoration: none;
}

.mam-template-name a:hover,
.mam-template-name a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.sol-templates-cols h2 + .geelark-lead-muted {
	margin-top: 0.75rem;
}

.sol-templates-cols .geelark-lead-muted + .geelark-template-row {
	margin-top: 1.75rem !important;
}

.sol-templates-center {
	max-width: 400px !important;
	margin: 2rem auto 0 !important;
}

/* Core's grid sizes columns from its own gap; set the counts explicitly (as pages-mam.css does). */
.sol-rules.mam-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

:is(.sol-risks, .sol-steps).mam-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.mam-cards.sol-cards-23,
	.sol-risks.mam-cols-3,
	.sol-steps.mam-cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.sol-cards-23 > *,
	.sol-cards-23 > :nth-child(-n + 2) {
		grid-column: auto;
	}
}

@media (max-width: 600px) {
	.mam-cards.sol-cards-23,
	.sol-risks.mam-cols-3,
	.sol-steps.mam-cols-3,
	.sol-mam-page #why .geelark-benefits,
	.sol-rules.mam-cols-2 {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.sol-boxhead {
		flex-wrap: wrap !important;
		padding: 20px;
	}

	.sol-rule {
		padding: 24px 20px;
	}
}

/* ---------- use-case pages ---------- */

/* v1 layout (SEO & SERP, App tests): sections sit straight in <main.gl-main>. */
.sol-uc-page > * + * {
	margin-block-start: 0 !important;
}

/* Social media marketing: platform strip and template panel. */
.sol-smm-logos {
	margin-top: 2.5rem !important;
	gap: 12px 22px !important;
}

.sol-smm-logos .mam-logo a {
	font-size: 0.875rem;
}

.sol-smm-platforms .geelark-soft-cards,
.sol-smm-templates-section .geelark-soft-cards {
	margin-top: 2.5rem !important;
}

.sol-smm-template-panel {
	padding: 32px;
	border-radius: 16px;
	background: #f7faff;
}

.sol-smm-template-panel > * {
	margin: 0;
	max-width: 520px;
}

.sol-smm-template-panel > * + * {
	margin-top: 0.75rem;
}

.sol-smm-template-panel .geelark-template-row {
	margin-top: 1rem;
	background: #fff;
}

.sol-smm-template-panel .sol-templates-more {
	justify-content: flex-start;
}

.sol-smm-page .sol-smm-templates-section {
	padding-top: 0;
}

/* Newer use-case pages at tablet width: the reference keeps two columns down to ~600px. */
@media (min-width: 600px) and (max-width: 781px) {
	.sol-uc-new .geelark-pair,
	.sol-uc-new .geelark-pair.geelark-soft-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.sol-uc-new .geelark-hero {
		flex-wrap: nowrap !important;
		gap: 24px;
	}

	.sol-uc-new .geelark-hero > .wp-block-column {
		flex-basis: 50% !important;
	}

	.sol-uc-new .geelark-template-list.is-centered {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 16px;
		max-width: none !important;
	}

	.sol-uc-new .geelark-template-list.is-centered > .wp-block-buttons {
		grid-column: 1 / -1;
	}
}

/* Platform pages at tablet width: the reference keeps the hero, splits and role cards side by side. */
@media (min-width: 600px) and (max-width: 781px) {
	.sol-mam-page :is(.geelark-hero, .mam-split) {
		flex-wrap: nowrap !important;
		gap: 24px !important;
	}

	.sol-mam-page :is(.geelark-hero, .mam-split) > .wp-block-column {
		flex-basis: 50% !important;
	}

	.sol-mam-page .mam-cards.sol-roles.mam-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}