/*
 * seamlessmd/ai-feature — dark AI feature banner.
 *
 * Structure:
 *   section.seamlessmd-ai-feature
 *     div.__inner.seamlessmd-container
 *       div.__panel                 rounded dark panel, 42/58 two-column grid
 *         div.__content             eyebrow / heading / description / CTA
 *         div.__visual              three-column grid: group | artwork | group
 *           ul.__capabilities--start
 *           div.__artwork
 *           ul.__capabilities--end
 *
 * No absolute positioning anywhere and no `order` property: every item is
 * placed on explicit grid lines, and grid line numbers follow the writing
 * mode, so the whole composition mirrors under `dir="rtl"` for free. The two
 * capability groups are real lists in the DOM, so they stay reachable and
 * linearise correctly when the grid collapses.
 *
 * No fixed height — `min-block-size` applies on wide desktop only and the
 * panel grows with its content everywhere.
 *
 * Cascade: this block name is new, so `assets/css/seamlessmd-theme.css`
 * carries no `.seamlessmd-ai-feature*` rule to outrank. The section is added
 * to that file's `nth-of-type(even)` exclusion list, because the alternating
 * surface tint would otherwise paint a grey band around a panel the reference
 * shows on white, and a block stylesheet cannot outrank a (0,7,2) selector
 * without `!important`.
 */

.seamlessmd-ai-feature {
	/* Panel palette. The theme has no dark-blue scale beyond
	 * `--seamlessmd-dark-navy`, so the gradient stops and the translucent pill
	 * surfaces are block-local. */
	--seamlessmd-ai-panel-radius: 26px;
	--seamlessmd-ai-panel-from: #0f2464;
	--seamlessmd-ai-panel-to: #123a96;
	--seamlessmd-ai-glow: rgba(80, 160, 255, 0.32);
	--seamlessmd-ai-eyebrow: #8fb8ff;
	--seamlessmd-ai-body: #bfd3f5;
	--seamlessmd-ai-pill-bg: rgba(90, 150, 245, 0.2);
	--seamlessmd-ai-pill-border: rgba(150, 195, 255, 0.28);
	--seamlessmd-ai-pill-icon-bg: rgba(160, 205, 255, 0.2);
	--seamlessmd-ai-pill-icon: #bfe0ff;
	--seamlessmd-ai-cta-bg: #ffffff;
	--seamlessmd-ai-cta-text: #12358c;

	padding-block: clamp(2rem, 4vw, 3.5rem);
}

/* ---------- Panel ---------- */

.seamlessmd-ai-feature__panel {
	position: relative;
	display: grid;
	/* The reference proportions: copy 42%, visualisation 58%. */
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	/* Clips the visual glow to the rounded corners. Nothing else reaches this
	 * boundary, so no label or artwork is ever cut. */
	overflow: hidden;
	padding: clamp(1.75rem, 3.4vw, 3.25rem);
	border-radius: var(--seamlessmd-ai-panel-radius);
	background:
		linear-gradient(135deg, var(--seamlessmd-ai-panel-from) 0%, var(--seamlessmd-ai-panel-to) 100%);
}

/* A gradient is a background image, so the diagonal does not mirror on its own
 * — without this the light end would stay behind the copy while the artwork
 * moved to the other side. The radial glow on `__visual` needs no such rule:
 * it travels with the element. */
[dir="rtl"] .seamlessmd-ai-feature__panel {
	background:
		linear-gradient(225deg, var(--seamlessmd-ai-panel-from) 0%, var(--seamlessmd-ai-panel-to) 100%);
}

@media (min-width: 1200px) {
	/* Desktop only, and a minimum — never a fixed height. */
	.seamlessmd-ai-feature__panel {
		min-block-size: 26rem;
	}
}

.seamlessmd-ai-feature--no-visual .seamlessmd-ai-feature__panel {
	/* Copy takes the full panel when there is no artwork and no capability. */
	grid-template-columns: minmax(0, 1fr);
}

/* ---------- Copy column ---------- */

.seamlessmd-ai-feature__content {
	position: relative;
	z-index: 1;
	min-inline-size: 0;
}

.seamlessmd-ai-feature__eyebrow {
	margin: 0 0 var(--seamlessmd-space-4, 1rem);
	font-size: clamp(0.6875rem, 0.8vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--seamlessmd-ai-eyebrow);
	overflow-wrap: break-word;
}

.seamlessmd-ai-feature__heading {
	margin: 0 0 var(--seamlessmd-space-4, 1rem);
	font-size: clamp(1.6rem, 2.9vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.14;
	color: #ffffff;
	overflow-wrap: break-word;
}

/* Editor-authored line breaks, without allowing markup in the attribute. */
.seamlessmd-ai-feature__heading-line {
	display: block;
}

.seamlessmd-ai-feature__description {
	margin: 0;
	max-inline-size: 34rem;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.65;
	color: var(--seamlessmd-ai-body);
	overflow-wrap: break-word;
}

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

/* Anchored to the parent class (0,2,0) so the block's fill / text / radius win
 * inside the block-editor canvas, where the editor injects
 * `.editor-styles-wrapper a { color: var(--seamlessmd-primary) }` (0,1,1) — a
 * single-class `.seamlessmd-ai-feature__cta` (0,1,0) loses to it and the button
 * renders teal + default link styling instead of the white/navy pill. See
 * .claude/blocks.md §7. No frontend change: the CTA already lives inside
 * `.seamlessmd-ai-feature`. */
.seamlessmd-ai-feature .seamlessmd-ai-feature__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: clamp(1.4rem, 2.4vw, 2rem);
	padding: 0.8rem 1.5rem;
	/* Rounded rectangle matching the home-hero CTAs (`--seamlessmd-radius-md`,
	 * 8px), not a full pill. */
	border-radius: var(--seamlessmd-radius-md, 8px);
	background: var(--seamlessmd-ai-cta-bg);
	color: var(--seamlessmd-ai-cta-text);
	font-size: clamp(0.875rem, 1vw, 0.9375rem);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.seamlessmd-ai-feature .seamlessmd-ai-feature__cta:hover,
.seamlessmd-ai-feature .seamlessmd-ai-feature__cta:focus-visible {
	color: var(--seamlessmd-ai-cta-text);
	box-shadow: 0 10px 24px rgba(3, 20, 62, 0.35);
	transform: translateY(-2px);
}

.seamlessmd-ai-feature__cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Arrow sits at the inline-end by flex source order. It is an SVG path, so it
 * does not mirror on its own — flip it explicitly under RTL. */
.seamlessmd-ai-feature__cta-arrow {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: 0 0 auto;
	display: block;
}

[dir="rtl"] .seamlessmd-ai-feature__cta-arrow {
	transform: scaleX(-1);
}

/* ---------- Visual column ---------- */

.seamlessmd-ai-feature__visual {
	position: relative;
	display: grid;
	/* group | artwork | group. Line numbers follow the writing mode, so the
	 * start group stays on the reading-start side in both directions. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(0.6rem, 1.4vw, 1.1rem);
	align-items: center;
	min-inline-size: 0;
}

/* Restrained glow behind the artwork. Living on the visual element rather than
 * the panel means it follows the artwork when the grid mirrors or collapses,
 * with no direction-specific rule. */
.seamlessmd-ai-feature__visual::before {
	content: "";
	position: absolute;
	inset: -18%;
	background: radial-gradient(circle at 50% 50%, var(--seamlessmd-ai-glow) 0%, rgba(80, 160, 255, 0) 68%);
	pointer-events: none;
}

/* Spans the whole visual row and centres itself, so the artwork and its glow
 * pass BEHIND the two pill columns exactly as the reference shows. Explicitly
 * placed grid items are allowed to share cells — this is the overlap the
 * reference needs without a single absolutely positioned element. */
.seamlessmd-ai-feature__artwork {
	position: relative;
	z-index: 0;
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 0;
}

.seamlessmd-ai-feature .seamlessmd-ai-feature__artwork-image {
	inline-size: 100%;
	max-inline-size: 30rem;
	block-size: auto;
	/* `contain` keeps the aspect ratio intact at every breakpoint. */
	object-fit: contain;
	display: block;
}

/* ---------- Capability pills ---------- */

.seamlessmd-ai-feature__capabilities {
	position: relative;
	z-index: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(0.6rem, 1.5vw, 1.15rem);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.seamlessmd-ai-feature__capabilities--start {
	grid-column: 1;
}

.seamlessmd-ai-feature__capabilities--end {
	grid-column: 3;
}

.seamlessmd-ai-feature__capability {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-inline-size: 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--seamlessmd-ai-pill-border);
	border-radius: var(--seamlessmd-radius-pill, 999px);
	background: var(--seamlessmd-ai-pill-bg);
	/* Cheap frost; degrades to the flat translucent fill where unsupported. */
	backdrop-filter: blur(2px);
}

.seamlessmd-ai-feature__capability-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.65rem;
	block-size: 1.65rem;
	border-radius: 50%;
	background: var(--seamlessmd-ai-pill-icon-bg);
	color: var(--seamlessmd-ai-pill-icon);
}

.seamlessmd-ai-feature__glyph {
	inline-size: 60%;
	block-size: 60%;
	display: block;
}

.seamlessmd-ai-feature .seamlessmd-ai-feature__icon-image {
	inline-size: 62%;
	block-size: 62%;
	max-inline-size: 62%;
	object-fit: contain;
	display: block;
}

.seamlessmd-ai-feature__capability-label {
	min-inline-size: 0;
	font-size: clamp(0.75rem, 0.92vw, 0.875rem);
	font-weight: 600;
	line-height: 1.35;
	color: #ffffff;
	/* Wrap at natural word boundaries only — never mid-word. `break-word` was
	 * chopping "AI Personalization" into "AI / Personalizatio / n" on
	 * narrow pill widths. `normal` lets long words push the container, which
	 * flex + `min-inline-size: 0` above handles cleanly, while never
	 * producing a mid-word split. */
	overflow-wrap: normal;
	word-break: normal;
}

@media (prefers-reduced-motion: reduce) {
	.seamlessmd-ai-feature__cta {
		transition: none;
	}

	.seamlessmd-ai-feature__cta:hover,
	.seamlessmd-ai-feature__cta:focus-visible {
		transform: none;
	}
}

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

@media (max-width: 991.98px) {
	/* Small tablets and phones stack the panel vertically. iPad Pro portrait
	 * (1024px) and any wider viewport keep the desktop 2-column grid — the
	 * previous 1199px cut-off was making the panel stack on iPad Pro, which
	 * gave the pills+artwork block a huge empty horizontal band and pushed
	 * the CTA into a mid-panel dead zone. Aligning this query with the
	 * 991px pill-layout query below keeps the two treatments consistent:
	 * whenever the pills form a 2x3 grid, the panel is also stacked; above
	 * that, both switch back to their desktop configuration.
	 *
	 * On this band the CTA gets promoted out of `.__content` via
	 * `display: contents` so it can be ordered AFTER the visual, matching
	 * the mobile CTA placement — design review flagged the CTA landing in
	 * the middle of the dark panel (between the description and the pills)
	 * as reading like a mid-panel interruption.
	 *
	 * DOM source order is preserved: screen readers still hear eyebrow →
	 * heading → description → CTA → pills. `.__content` has no painted
	 * styles that get lost when it stops being a box (no background, no
	 * padding, no border); its `position: relative; z-index: 1` only
	 * mattered on the desktop 2-col layout where the copy sat over the
	 * visual's glow, and here the visual is a separate row with pills
	 * carrying their own `z-index: 1`. */
	.seamlessmd-ai-feature__panel {
		display: flex;
		flex-direction: column;
		/* Override the desktop base rule's `align-items: center` — in flex
		 * column mode that would centre each item to its intrinsic width,
		 * so the visual (pill grid) would shrink to content and leave big
		 * empty margins on either side instead of spanning the panel. */
		align-items: stretch;
		grid-template-columns: none;
		gap: clamp(1.5rem, 3.5vw, 2.25rem);
	}

	.seamlessmd-ai-feature__content {
		display: contents;
	}

	/* Explicit `inline-size: 100%` — `align-self: stretch` (flex default)
	 * does not force block elements to full-width in every browser, so
	 * without this the eyebrow/heading/description would render at their
	 * intrinsic content width and read as centred. */
	.seamlessmd-ai-feature__eyebrow {
		order: 1;
		inline-size: 100%;
	}

	.seamlessmd-ai-feature__heading {
		order: 2;
		inline-size: 100%;
	}

	.seamlessmd-ai-feature__description {
		order: 3;
		inline-size: 100%;
		max-inline-size: none;
	}

	.seamlessmd-ai-feature__visual {
		order: 4;
	}

	/* CTA — moved to the bottom of the panel via `order`. Tablet keeps it
	 * at a comfortable 75% panel width, centred, so it reads as the closing
	 * action rather than a small link tucked in one corner. The mobile
	 * query below overrides this to a full-width tap target. */
	.seamlessmd-ai-feature .seamlessmd-ai-feature__cta {
		order: 5;
		margin-block-start: 0;
		align-self: center;
		inline-size: 75%;
		justify-content: center;
	}

	/* Once the panel stacks, the artwork no longer has pills beside it to give
	 * it scale, so let it take more of the width. */
	.seamlessmd-ai-feature .seamlessmd-ai-feature__artwork-image {
		max-inline-size: 34rem;
	}
}

@media (max-width: 991px) {
	/* Tablet and below: the pills form a 2×3 grid and the brain artwork sits
	 * behind them as a decoration, not as a separate section with its own row
	 * of empty space. The artwork is taken OUT of the grid flow entirely
	 * (`position: absolute`) so it contributes no height and can sit centred
	 * behind the pill area; its natural bottom edge is allowed to bleed past
	 * the pills so the "AI" hexagon peeks through under the last pill row
	 * rather than reading as an isolated illustration. `z-index: 0` on the
	 * artwork and `z-index: 1` on the pills (set on the base rule) keep the
	 * pill labels readable in front. */
	.seamlessmd-ai-feature__visual {
		position: relative;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		/* Wider gap between the two pill columns so the artwork has room to
		 * breathe in the middle without the pills crowding its silhouette. */
		gap: clamp(1.5rem, 6vw, 4.5rem);
	}

	.seamlessmd-ai-feature__capabilities--start {
		grid-column: 1;
		grid-row: 1;
	}

	.seamlessmd-ai-feature__capabilities--end {
		grid-column: 2;
		grid-row: 1;
	}

	/* Each pill fills its column so the two capability rails sit flush at
	 * the panel's inline edges with a wide gap through the middle —
	 * matching the design review reference where the artwork breathes
	 * between two full-width pill stacks instead of being sandwiched
	 * between two narrow, content-sized columns. */
	.seamlessmd-ai-feature__capability {
		inline-size: 100%;
	}

	.seamlessmd-ai-feature__artwork {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
		inline-size: 100%;
		pointer-events: none;
		opacity: 0.55;
	}

	.seamlessmd-ai-feature .seamlessmd-ai-feature__artwork-image {
		max-inline-size: 22rem;
		margin-inline: auto;
	}
}

/* Grid tracks fall inside the visual regardless of writing mode, so the RTL
 * `translate` needs a mirrored X to keep the artwork centred. */
@media (max-width: 991px) {
	[dir="rtl"] .seamlessmd-ai-feature__artwork {
		transform: translate(50%, -50%);
	}
}

@media (max-width: 575px) {
	/* Phone: pills stay two-up and tighten enough for the labels to fit. Non-
	 * interactive `<li>` labels, so their ~44px height is a legibility choice
	 * rather than a touch-target requirement.
	 *
	 * Padding + icon + gap are all trimmed here to buy the label as much
	 * inline space as possible — the longest label ("AI Personalization") is
	 * one 15-character word that needs to fit on its own line, otherwise it
	 * would either overflow the pill or (previously, with break-word) split
	 * mid-word into "Personalizatio / n". */
	.seamlessmd-ai-feature__capability {
		padding: 0.5rem 0.55rem;
		gap: 0.4rem;
	}

	.seamlessmd-ai-feature__capability-icon {
		inline-size: 1.35rem;
		block-size: 1.35rem;
	}

	.seamlessmd-ai-feature__capability-label {
		line-height: 1.25;
	}

	/* Pills on a phone go back to content-fit width — the tablet rule
	 * `inline-size: 100%` (above, in max-width: 991px) plus the wider
	 * inter-column gap makes each pill so narrow that the label breaks
	 * onto two lines. Content-fit width lets the row breathe on the
	 * narrow phone viewport. Wider inter-column gap is also dialled back
	 * here so the two rails do not disappear off the edges. */
	.seamlessmd-ai-feature__visual {
		gap: clamp(0.5rem, 2vw, 1rem);
	}

	.seamlessmd-ai-feature__capability {
		inline-size: auto;
	}

	/* Mobile-only CTA override — the tablet block (max-width: 991.98px)
	 * above already handled the stack + reorder + `align-self: center;
	 * inline-size: 75%`. On a phone the CTA becomes a full-width tap
	 * target instead, so `align-self: stretch` and reset `inline-size`. */
	.seamlessmd-ai-feature__panel {
		gap: clamp(1.5rem, 5vw, 2rem);
	}

	.seamlessmd-ai-feature .seamlessmd-ai-feature__cta {
		align-self: stretch;
		inline-size: auto;
	}

	/* The CTA is intentionally not full-width: it keeps its natural `inline-flex`
	 * width and gains height instead, so it stays a comfortable tap target
	 * without a button stretched across the panel.
	 *
	 * The extra class is load-bearing. The block's base rule is already
	 * `.seamlessmd-ai-feature .seamlessmd-ai-feature__cta { padding: 0.8rem 1.5rem }`
	 * at (0,2,0); a bare `.seamlessmd-ai-feature__cta` here would be (0,1,0) and
	 * lose, which is exactly why the previous `padding-block` at this breakpoint
	 * never applied at all. Matching (0,2,0) makes it take effect — so the value
	 * must exceed the 0.8rem base, or the button would come out SHORTER on a
	 * phone than on a desktop. */
	.seamlessmd-ai-feature .seamlessmd-ai-feature__cta {
		justify-content: center;
		padding-block: 0.95rem;
	}
}