/**
 * AI Page Inspector — Generated B2B Page Style (fixed industrial style, MVP).
 *
 * Covers every class emitted by plugin/templates/sections/*.html. One fixed
 * style per the project's MVP decision — no theme system, no CSS variables
 * for brand color yet (that's a clean future addition, not built here to keep
 * this pass minimal). Loaded only where generated content is rendered.
 *
 * Layout constraint system: a single spacing scale + container width, and a
 * section-hierarchy layer keyed by [data-aipi-layout] (hero/features/content/cta)
 * so every section obeys the same grid/width/rhythm rules regardless of its
 * specific content (hero, trust, products, etc.). Specific classes below still
 * own their own detail styling (colors, card shadows, etc.) — the layout layer
 * only controls width, column count, and vertical rhythm.
 */

:root {
	--aipi-space-1: 8px;
	--aipi-space-2: 16px;
	--aipi-space-3: 24px;
	--aipi-space-4: 40px;
	--aipi-space-5: 64px;
	--aipi-container-width: 1240px;
	--aipi-content-width: 720px; /* narrower, readable-width column for text-heavy sections */
}

.aipi-sec {
	padding: var(--aipi-space-5) var(--aipi-space-3);
	box-sizing: border-box;
}

.aipi-sec * {
	box-sizing: border-box;
}

.aipi-sec-inner {
	max-width: var(--aipi-container-width);
	margin: 0 auto;
}

/* ---------- Section-hierarchy layout layer ---------- */

/* Hero: full-width section background, content constrained to the container. */
[data-aipi-layout='hero'] .aipi-sec-inner,
[data-aipi-layout='hero'] .aipi-split {
	max-width: var(--aipi-container-width);
}

/* Feature blocks: 2-3 column max on desktop, never more. Existing grids
   (trust metrics, product cards, advantages) already use auto-fit/minmax;
   this rule caps them so they never sprawl past 3 columns regardless of
   how many items a future template variant might add. */
[data-aipi-layout='features'] .aipi-trust-metrics,
[data-aipi-layout='features'] .aipi-product-grid,
[data-aipi-layout='features'] .aipi-advantages-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 900px) {
	[data-aipi-layout='features'] .aipi-product-grid,
	[data-aipi-layout='features'] .aipi-advantages-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	[data-aipi-layout='features'] .aipi-trust-metrics {
		grid-template-columns: repeat(3, auto);
		display: grid;
		justify-content: center;
	}
}

/* Content sections: single, readable-width column — not the full container. */
[data-aipi-layout='content'] .aipi-split-copy,
[data-aipi-layout='content'] .aipi-proof-quote,
[data-aipi-layout='content'] .aipi-sec-intro {
	max-width: var(--aipi-content-width);
}

[data-aipi-layout='content'] .aipi-proof-quote {
	margin-left: auto;
	margin-right: auto;
}

/* CTA: centered, constrained width — never full-bleed text. */
[data-aipi-layout='cta'] .aipi-cta-inner {
	max-width: var(--aipi-content-width);
	margin: 0 auto;
	text-align: center;
}

/* Visual rhythm: every section gets consistent vertical spacing between it
   and its neighbor, on top of its own internal padding. No section is
   allowed to sit flush against the next with zero breathing room. */
.aipi-sec + .aipi-sec {
	border-top: 1px solid rgba(10, 37, 64, 0.06);
}

.aipi-btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
}

.aipi-btn-primary {
	background: #0a2540;
	color: #ffffff;
}

.aipi-btn-primary:hover {
	background: #123a63;
}

.aipi-btn-ghost {
	background: transparent;
	color: #0a2540;
	border-color: #0a2540;
}

.aipi-btn-ghost:hover {
	background: #0a2540;
	color: #ffffff;
}

/* ---------- Hero ---------- */

.aipi-sec-hero {
	background: #f4f6f8;
}

.aipi-hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
}

.aipi-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	color: #3a7bd5;
	margin: 0 0 12px;
}

.aipi-hero-headline {
	font-size: 40px;
	line-height: 1.15;
	margin: 0 0 16px;
	color: #0a2540;
}

.aipi-hero-subhead {
	font-size: 18px;
	line-height: 1.5;
	color: #4a5a68;
	margin: 0 0 28px;
}

.aipi-hero-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.aipi-hero-media {
	display: flex;
	justify-content: center;
}

.aipi-hero-img {
	width: 100%;
	max-width: 480px;
	height: auto;
	border-radius: 8px;
	background: #dde3e8;
	object-fit: cover;
}

/* ---------- Trust ---------- */

.aipi-sec-trust {
	background: #ffffff;
	text-align: center;
}

.aipi-sec-kicker {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 700;
	color: #8a97a3;
	margin: 0 0 32px;
}

.aipi-trust-metrics {
	display: flex;
	justify-content: center;
	gap: 64px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	flex-wrap: wrap;
}

.aipi-metric {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.aipi-metric-value {
	font-size: 36px;
	font-weight: 700;
	color: #0a2540;
}

.aipi-metric-label {
	font-size: 14px;
	color: #6b7a87;
	margin-top: 4px;
}

.aipi-trust-certs {
	font-size: 14px;
	color: #8a97a3;
	letter-spacing: 0.04em;
}

/* ---------- Products ---------- */

.aipi-sec-products {
	background: #f4f6f8;
}

.aipi-sec-title {
	font-size: 30px;
	color: #0a2540;
	margin: 0 0 12px;
	text-align: center;
}

.aipi-sec-intro {
	font-size: 16px;
	color: #4a5a68;
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

.aipi-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aipi-product-card {
	background: #ffffff;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 1px 3px rgba(10, 37, 64, 0.08);
}

.aipi-product-img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 6px;
	background: #dde3e8;
	margin-bottom: 16px;
}

.aipi-product-name {
	font-size: 19px;
	color: #0a2540;
	margin: 0 0 8px;
}

.aipi-product-desc {
	font-size: 15px;
	color: #5a6b78;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Applications (split layout) ---------- */

.aipi-split {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
}

.aipi-split-media img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #dde3e8;
}

.aipi-applications-list {
	list-style: disc;
	padding-left: 20px;
	color: #4a5a68;
	font-size: 16px;
	line-height: 1.8;
}

/* ---------- Advantages ---------- */

.aipi-sec-advantages {
	background: #0a2540;
	color: #ffffff;
}

.aipi-sec-advantages .aipi-sec-title {
	color: #ffffff;
}

.aipi-advantages-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aipi-advantage-name {
	font-size: 18px;
	margin: 0 0 8px;
	color: #ffffff;
}

.aipi-advantage-desc {
	font-size: 15px;
	color: #c7d3dd;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Proof ---------- */

.aipi-sec-proof {
	background: #ffffff;
	text-align: center;
}

.aipi-proof-quote {
	max-width: 720px;
	margin: 0 auto;
	border: none;
	padding: 0;
}

.aipi-proof-text {
	font-size: 22px;
	line-height: 1.5;
	color: #0a2540;
	font-style: italic;
	margin: 0 0 20px;
}

.aipi-proof-attr {
	font-size: 14px;
	color: #6b7a87;
}

.aipi-proof-name {
	font-weight: 700;
	color: #0a2540;
}

.aipi-proof-result {
	margin-top: 24px;
	font-size: 16px;
	color: #3a7bd5;
	font-weight: 600;
}

/* ---------- CTA ---------- */

.aipi-sec-cta {
	background: #f4f6f8;
	text-align: center;
}

.aipi-cta-inner {
	max-width: 640px;
	margin: 0 auto;
}

.aipi-cta-headline {
	font-size: 32px;
	color: #0a2540;
	margin: 0 0 12px;
}

.aipi-cta-subhead {
	font-size: 17px;
	color: #4a5a68;
	margin: 0 0 28px;
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
	.aipi-hero-grid,
	.aipi-split {
		grid-template-columns: 1fr;
	}

	.aipi-hero-headline {
		font-size: 30px;
	}

	.aipi-trust-metrics {
		gap: 32px;
	}
}