/**
 * Flexible Content Block — Frontend Styles
 *
 * Container width behaviour (set on the <section> element):
 *
 *   full      → section bleeds full viewport width; bg fills the page.
 *               Inner content is constrained by .container on the inner div.
 *
 *   contained → section itself is a .container — bg clips to content width.
 *               Rendered as a boxed card with border-radius + side margin.
 *
 *   narrow    → same as contained but .container--narrow (760 px).
 *
 * All colours are design tokens from theme.json — zero hardcoded values.
 */

/* ── Base wrapper ─────────────────────────────────────────────── */

.nivo-flex-content {
	position: relative;
	overflow: hidden;
}

/* ── Contained / Narrow — boxed card appearance ──────────────── */

.nivo-flex-content.nivo-flex-content--cw-contained,
.nivo-flex-content.nivo-flex-content--cw-narrow {
	/* Double class = specificity 0,2,0 — beats .container { padding-inline: 20px } */
	border-radius: 24px; /* matches footer CTA standard */
	overflow: hidden; /* clip bg to the rounded corners */
}

.nivo-flex-content.nivo-flex-content--cw-contained {
	padding-inline: var( --wp--preset--spacing--24 ); /* 96px — generous for wide card */
}

.nivo-flex-content.nivo-flex-content--cw-narrow {
	padding-inline: var( --wp--preset--spacing--12 ); /* 48px — proportional for 760px card */
}

/* When contained/narrow have a non-white bg, add subtle vertical spacing
   so the boxed section breathes on the page. */
.nivo-flex-content.nivo-flex-content--cw-contained:not( .nivo-flex-content--bg-white ),
.nivo-flex-content.nivo-flex-content--cw-narrow:not( .nivo-flex-content--bg-white ) {
	margin-block: var( --wp--preset--spacing--8 );
}

/* ── Inner div ────────────────────────────────────────────────── */

.nivo-flex-content__inner {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--6 );
}

/* ── Padding sizes ────────────────────────────────────────────── */

.nivo-flex-content--pad-sm  { padding-block: var( --wp--preset--spacing--8 ); }
.nivo-flex-content--pad-md  { padding-block: var( --wp--preset--spacing--16 ); }
.nivo-flex-content--pad-lg  { padding-block: var( --wp--preset--spacing--24 ); }
.nivo-flex-content--pad-xl  { padding-block: var( --wp--preset--spacing--32 ); }

/* ── Background styles ────────────────────────────────────────── */

.nivo-flex-content--bg-white {
	background-color: var( --wp--preset--color--surface-primary );
}

.nivo-flex-content--bg-light {
	background-color: var( --wp--preset--color--neutral-50 );
}

.nivo-flex-content--bg-surface {
	background-color: var( --wp--preset--color--surface );
}

.nivo-flex-content--bg-primary-light {
	background-color: color-mix( in srgb, var( --wp--preset--color--primary-600 ) 8%, transparent );
	/* Border only applies on full-width mode (contained clips at border-radius already) */
}

.nivo-flex-content--cw-full.nivo-flex-content--bg-primary-light {
	border-block: 1px solid color-mix( in srgb, var( --wp--preset--color--primary-600 ) 15%, transparent );
}

.nivo-flex-content--bg-dark {
	background-color: var( --wp--preset--color--neutral-900 );
}

.nivo-flex-content--bg-dark .nivo-flex-content__heading,
.nivo-flex-content--bg-dark .nivo-flex-content__eyebrow {
	color: var( --wp--preset--color--text-inverse );
}

.nivo-flex-content--bg-transparent {
	background: transparent;
}

.nivo-flex-content--bg-gradient {
	background: linear-gradient(
		145deg,
		color-mix( in srgb, var( --wp--preset--color--primary-600 ) 6%, var( --wp--preset--color--neutral-50 ) ) 0%,
		var( --wp--preset--color--surface-primary ) 60%,
		color-mix( in srgb, var( --wp--preset--color--primary-300 ) 8%, var( --wp--preset--color--neutral-50 ) ) 100%
	);
}

/* ── Section header ───────────────────────────────────────────── */

.nivo-flex-content__header {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--4 );
}

.nivo-flex-content--align-center .nivo-flex-content__header {
	align-items: center;
	text-align: center;
	margin-inline: auto;
	max-width: 760px;
}

.nivo-flex-content--align-left .nivo-flex-content__header {
	align-items: flex-start;
	text-align: left;
	max-width: 760px;
}

/* ── Eyebrow pill ─────────────────────────────────────────────── */

.nivo-flex-content__eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 5px 18px;
	background-color: color-mix( in srgb, var( --wp--preset--color--primary-600 ) 10%, transparent );
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--primary-600 ) 25%, transparent );
	border-radius: var( --wp--custom--border-radius--full );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 600;
	color: var( --wp--preset--color--primary-600 );
	letter-spacing: 0.02em;
	width: fit-content;
}

/* ── Heading ──────────────────────────────────────────────────── */

.nivo-flex-content__heading {
	font-size: 44px !important;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--text-primary );
	margin: 0 !important;
}

/* ── Paragraph body copy ─────────────────────────────────────── */

.nivo-flex-content__paragraph,
.nivo-flex-content__paragraph p,
.nivo-flex-content__paragraph.nivo-prose > p:first-of-type {
	font-size: 16px;
	line-height: 1.75;
	color: var( --wp--preset--color--text-secondary );
}

.nivo-flex-content--align-center .nivo-flex-content__paragraph {
	text-align: center;
	margin-inline: auto;
	max-width: 760px;
}

.nivo-flex-content--align-left .nivo-flex-content__paragraph {
	text-align: left;
}

.nivo-flex-content--bg-dark .nivo-flex-content__paragraph {
	color: color-mix( in srgb, var( --wp--preset--color--text-inverse ) 75%, transparent );
}

/* ── Shortcode area ───────────────────────────────────────────── */

.nivo-flex-content__shortcode {
	width: 100%;
}

.nivo-flex-content--align-center .nivo-flex-content__shortcode {
	display: flex;
	justify-content: center;
}

/* ── Pills row ────────────────────────────────────────────────── */

.nivo-flex-content__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nivo-flex-content--align-center .nivo-flex-content__pills {
	justify-content: center;
}

.nivo-flex-content__pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px;
	border-radius: var( --wp--custom--border-radius--full );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 500;
	color: var( --wp--preset--color--text-primary );
	background-color: color-mix( in srgb, var( --wp--preset--color--primary-600 ) 10%, transparent );
	/* Inline style overrides bg when a custom colour is set */
}

.nivo-flex-content--bg-dark .nivo-flex-content__pill {
	color: var( --wp--preset--color--text-inverse );
}

/* ── Mobile ───────────────────────────────────────────────────── */

@media ( max-width: 767px ) {
	.nivo-flex-content--pad-lg  { padding-block: var( --wp--preset--spacing--16 ); }
	.nivo-flex-content--pad-xl  { padding-block: var( --wp--preset--spacing--20 ); }

	.nivo-flex-content__heading {
		font-size: 1.875rem !important;
		line-height: 1.2 !important;
	}

	/* Contained/narrow: full width on small screens */
	.nivo-flex-content.nivo-flex-content--cw-contained,
	.nivo-flex-content.nivo-flex-content--cw-narrow {
		border-radius: 0;
		margin-block: 0;
		padding-inline: var( --wp--preset--spacing--6 ); /* same tight padding on mobile regardless of mode */
	}

	.nivo-flex-content__pills {
		justify-content: center;
	}
}