/**
 * Per-page overrides — /news-faq/ (EN). AR twin: page-news-faq-ar.css.
 *
 * Category chip accent colors for the Latest News grid. The chip carries the
 * term slug as `data-term` whether it renders as a link or — as here, with
 * `linkCategory: false` — as a display-only span, so that attribute is the
 * stable hook (matches both EN slugs and their `-ar` twins via substring).
 * Colors mirror the block-local pricing/news accent palette (no global blue
 * token — see styling-and-rtl.md).
 */

.seamlessmd-latest-posts__chip[data-term*="company-news"] {
	background: #eff4ff;
	color: #2563eb;
}

.seamlessmd-latest-posts__chip[data-term*="product-updates"] {
	background: #f3efff;
	color: #8b5cf6;
}

.seamlessmd-latest-posts__chip[data-term*="partnerships"] {
	background: #e9faf4;
	color: #067a53;
}

.seamlessmd-latest-posts__chip[data-term*="insights"] {
	background: #fef5e7;
	color: #b45309;
}

/* ---- Latest News: "View all news" pinned top-right beside the heading
 * (design placement). The block renders the view-all row after the grid;
 * explicit grid placement lifts it onto the header row — DOM untouched,
 * scoped to this page only. ---- */

.seamlessmd-latest-posts__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
}

.seamlessmd-latest-posts__header {
	grid-column: 1;
	grid-row: 1;
}

.seamlessmd-latest-posts__view-all-row {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	text-align: end;
}

.seamlessmd-latest-posts__grid {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Design shows a plain blue text link, not the ghost button. */
.seamlessmd-latest-posts__view-all.seamlessmd-btn--ghost {
	border: 0;
	background: transparent;
	padding: 0;
	color: #2563eb;
	font-weight: 600;
}

.seamlessmd-latest-posts__view-all.seamlessmd-btn--ghost:hover {
	background: transparent;
	text-decoration: underline;
}

/* ---- Bottom CTA band (design parity, mirrors the About Us band):
 * inset rounded navy-gradient card with dot glows and a glowing hex on
 * the trailing side; white primary button (blue text + arrow); ghost
 * secondary. Class-based selectors only — applies identically in the
 * editor canvas. ---- */

.seamlessmd-cta-band--variant-solid {
	background: transparent;
	padding-block: 1rem 3rem;
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__inner {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 3rem 3rem 3.2rem;
	text-align: start;
	background:
		radial-gradient(1.5px 1.5px at 78% 30%, rgba(96, 165, 250, 0.9), transparent 60%),
		radial-gradient(1.5px 1.5px at 84% 62%, rgba(96, 165, 250, 0.8), transparent 60%),
		radial-gradient(1.5px 1.5px at 70% 74%, rgba(96, 165, 250, 0.7), transparent 60%),
		radial-gradient(2px 2px at 90% 42%, rgba(147, 197, 253, 0.8), transparent 60%),
		radial-gradient(closest-side at 76% 50%, rgba(37, 99, 235, 0.35), transparent),
		linear-gradient(100deg, #0a1c47 0%, #0d2a66 55%, #1747a6 100%);
}

/* The CSS-drawn glowing hexagon this pseudo-element used to paint (a
 * clip-path polygon with a radial fill and a drop-shadow) is replaced by the
 * approved artwork: the connected-hex network. Same pseudo-element, same
 * placement anchors, so the decoration stays decoration — no markup, no
 * alt-text obligation. The file is transparent and carries its own glow, so
 * it needs no frame and sits straight on the navy gradient.
 *
 * `background-size: contain` keeps the 3:2 frame undistorted and uncropped;
 * `aspect-ratio` matches the file so the box never letterboxes. Scoped to
 * this page's stylesheet, so the About Us solid band keeps its hexagon. */
.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__inner::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 3%;
	transform: translateY(-50%);
	inline-size: min(42%, 24rem);
	aspect-ratio: 1536 / 1024;
	background-image: url("../../assets/images/seamlessmd/news-faq/cta-network-hex.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

@media (max-width: 991px) {
	.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__inner::after {
		display: none;
	}
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__heading {
	color: #fff;
	max-inline-size: 26rem;
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__heading-accent {
	color: #5b8bff;
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__subheading {
	color: rgba(226, 233, 246, 0.85);
	max-inline-size: 26rem;
	font-size: 0.95rem;
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary {
	background: #fff;
	border-color: #fff;
	color: #2563eb;
	border-radius: 8px;
	font-weight: 600;
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary:hover {
	background: #eef2fb;
	border-color: #eef2fb;
	color: #2563eb;
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.45rem;
}

[dir="rtl"] .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary::after {
	transform: scaleX(-1);
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
	border-radius: 8px;
}

.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--secondary:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* ---- Canvas-proof Latest News card media. WP-core editor styles inject
 * `.editor-styles-wrapper img { max-width: 100%; height: auto; }` at
 * (0,1,1) inside the iframe, which ties-and-beats the block's own
 * (0,1,1) thumb rules there and breaks the uniform 16:9 crop — cards
 * preview with natural-height images. Parent-class selectors at (0,2,x)
 * win in BOTH the canvas and the frontend; declaration values mirror
 * blocks/latest-posts/style.css exactly, so the frontend is unchanged. ---- */

.seamlessmd-latest-posts .seamlessmd-latest-posts__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.seamlessmd-latest-posts .seamlessmd-latest-posts__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}

/* ---- Canvas title-color parity. seamlessmd-editor.css paints every
 * canvas <a> teal (`.editor-styles-wrapper a`, 0,1,1), which beats the
 * block's `color: inherit` title links inside the iframe and turned the
 * card titles teal in Admin. Parent-class specificity (0,2,1) restores
 * the frontend inheritance chain in both DOMs; values mirror
 * blocks/latest-posts/style.css. ---- */

.seamlessmd-latest-posts .seamlessmd-latest-posts__title,
.seamlessmd-latest-posts .seamlessmd-latest-posts__title a {
	color: var(--seamlessmd-dark-navy);
}

/* Kill the theme's primary-button glow on the navy band's white/
 * ghost buttons (bundle rule: box-shadow rgba(37,99,235,.28)). */
.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary,
.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--secondary {
	box-shadow: none;
}

/* ---- Mobile polish (responsive audit 2026-08-12) ---- */

@media (max-width: 767px) {
	/* Bottom CTA card: phone-scale padding + full-width stacked buttons
	 * (same treatment as About Us). */
	.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__inner {
		padding: 2rem 1.5rem;
	}

	.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__ctas {
		flex-direction: column;
		inline-size: 100%;
	}

	.seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta {
		inline-size: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* ---- Section rhythm (design parity, page-local).
 *
 * The stack inherited three oversized boundaries: the inner hero pays
 * both the global 80px section pad AND its own 3rem `__inner`
 * padding-block (hero → Latest News measured 208px), while
 * Latest News → FAQ and FAQ → Stay Updated ran on 2× 80px.
 * These override only the outer section paddings — hero internals,
 * the FAQ cards, the newsletter band and the bottom CTA are untouched.
 *
 * Cascade: seamlessmd-theme.css sets `padding-top/padding-bottom:
 * var(--seamlessmd-section-pad)` at (0,1,0) on a shared selector list.
 * This file is enqueued last (priority 20), so equal-specificity
 * single-class selectors win on order — no escalation, no !important.
 * Logical longhands cascade with their physical counterparts in
 * declaration order, so `padding-block-*` beats the earlier
 * `padding-top/bottom`. Both languages are horizontal-tb, so the AR
 * twin behaves identically. ---- */

@media (min-width: 768px) {
	.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media {
		/* Reference band is ~0.29 × viewport width tall with the devices
		 * close to the top edge and meeting the bottom edge: 16px above,
		 * 0 below. Latest News' own 32px top pad carries the boundary.
		 * Gated on --has-media: the zero bottom pad only makes sense
		 * while a bottom-aligned figure is filling it. */
		padding-block: 16px 0;
	}

	/* Hero: media column carries the larger share, as in the reference
	 * (copy ≈ 1, artwork ≈ 2), and the figure is bottom-aligned so the
	 * devices meet the band edge.
	 *
	 * The artwork's own panel already carries margin around the devices,
	 * so the CSS column gap is only 1.5rem — the file supplies the rest of
	 * the separation between copy and devices. */
	.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__inner {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 1.5rem;
	}

	.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__media {
		align-self: end;
	}

	/* Cap the artwork so it doesn't drive the hero band ~530 px tall on
	 * desktop (QA row 32 — the tall media was the whitespace multiplier;
	 * copy is short and everything below it read as filler). Section
	 * padding above still owns the top rhythm.
	 *
	 * `object-position: right bottom` pins the visible devices to the
	 * inline-end of the media cell so the empty band lives BETWEEN the
	 * copy and the artwork (space-between rhythm) instead of on the far
	 * right of the section. RTL flips via the twin file. */
	.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__media-el {
		max-block-size: 340px;
		object-fit: contain;
		object-position: right bottom;
	}

	/* Copy centred vertically against the (now capped) media so the two
	 * columns read as one balanced row (QA row 32). */
	.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__content {
		align-self: center;
	}

	.seamlessmd-latest-posts {
		padding-block-start: 24px;
		padding-block-end: 24px;
	}

	.seamlessmd-faq {
		padding-block-start: 24px;
		padding-block-end: 24px;
	}

	/* Trim the tail band paddings so the newsletter + solid CTA sit
	 * close to the FAQ card above instead of hanging on generous space
	 * (QA row 32: tighten top/bottom/side rhythm, page-local). */
	.seamlessmd-cta-band--variant-newsletter {
		padding-block: 16px;
	}

	.seamlessmd-cta-band--variant-solid {
		padding-block: 12px 32px;
	}
}

/* ---- Hero — design-reference parity (page-local).
 *
 * Reference: `.ai-local/design-references/New Website - NEWS & FAQ.png`.
 * Three deltas were implemented here; all are hero-only and this stylesheet
 * loads on this page alone (stem `page-<slug>`, see functions.php).
 *
 * 1. Eyebrow: the theme paints hero eyebrows teal (--seamlessmd-primary).
 *    The reference uses the same blue as the heading accent, so the eyebrow
 *    is repainted #2563eb — matching the accent already stored on the block.
 * 2. Media frame: the block gives hero images a drop shadow, which draws a
 *    visible rectangle around a transparent device render — and this
 *    artwork already carries its own shadow. Dropped.
 * 3. Proportions: the reference gives the artwork the larger share of the
 *    row and lets the devices meet the bottom edge of the hero band. The
 *    rules below bottom-align the figure, drop the doubled `__inner`
 *    padding-block, and hand the freed height to the artwork. ---- */

.seamlessmd-hero--variant-inner .seamlessmd-hero__eyebrow {
	color: #2563eb;
}

/* The approved artwork is a fully opaque panel (no alpha), so its edges meet
 * the band as a hard rectangle. Feathering the three inner edges with a mask
 * dissolves that seam — the devices occupy roughly 19–81% horizontally and
 * 10–95% vertically, so the fades stay well clear of them. The bottom edge is
 * left square: it sits flush on the band's lower edge. */
.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__media-el {
	box-shadow: none;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0, #000 15%),
		linear-gradient(to left, transparent 0, #000 7%),
		linear-gradient(to bottom, transparent 0, #000 10%);
	mask-image:
		linear-gradient(to right, transparent 0, #000 15%),
		linear-gradient(to left, transparent 0, #000 7%),
		linear-gradient(to bottom, transparent 0, #000 10%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* RTL puts the artwork on the opposite side, so the strong feather has to
 * move to the edge that now faces the copy. */
[dir="rtl"] .seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__media-el {
	-webkit-mask-image:
		linear-gradient(to left, transparent 0, #000 15%),
		linear-gradient(to right, transparent 0, #000 7%),
		linear-gradient(to bottom, transparent 0, #000 10%);
	mask-image:
		linear-gradient(to left, transparent 0, #000 15%),
		linear-gradient(to right, transparent 0, #000 7%),
		linear-gradient(to bottom, transparent 0, #000 10%);
}

/* The block pays `__inner` a 3rem padding-block on top of the section's own
 * vertical padding at every width. One of the two is redundant — the section
 * keeps its padding, the inner row drops it. Applies below 768px too, where
 * the stacked row's 1.5rem gap still separates copy from artwork. */
.seamlessmd-hero--variant-inner.seamlessmd-hero--has-media .seamlessmd-hero__inner {
	padding-block: 0;
}

/* Band integration. The artwork's panel is a shade lighter than the band
 * (#f7f9fe vs #eef2fb), so the media side is lifted toward that tone with a
 * broad soft radial — the feathered image edge then lands on a matching
 * surface instead of a darker one. A faint lavender fall-off at the trailing
 * edge keeps the depth the reference shows. Layered as `background-image` so
 * the editor-owned `backgroundColor` inline style stays the base colour. */
.seamlessmd-hero--variant-inner {
	background-image:
		radial-gradient(58rem 34rem at 72% 58%, rgba(252, 253, 255, 0.92), rgba(252, 253, 255, 0) 68%),
		linear-gradient(100deg, rgba(238, 242, 251, 0) 40%, rgba(211, 222, 248, 0.55) 100%);
}

/* Gradients take physical positions and angles, so RTL needs the mirrored
 * set — otherwise the atmosphere lands behind the copy instead of behind the
 * devices. Same explicit-rule convention as the solid CTA band above. */
[dir="rtl"] .seamlessmd-hero--variant-inner {
	background-image:
		radial-gradient(58rem 34rem at 28% 58%, rgba(252, 253, 255, 0.92), rgba(252, 253, 255, 0) 68%),
		linear-gradient(-100deg, rgba(238, 242, 251, 0) 40%, rgba(211, 222, 248, 0.55) 100%);
}

/* Heading treatment matched to the home hero — heavier weight (800 vs the
 * inner variant's default 700) and tighter tracking so the two-word title
 * reads with the same design presence as "Patient Experience.
 * Orchestrated." on Home. Body class kept as the scoping selector even
 * though page-news-faq.css is only loaded on this page, so the rule stays
 * safe if the loader is ever pointed elsewhere. */
body.page-slug-news-faq .seamlessmd-hero--variant-inner .seamlessmd-hero__heading {
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: clamp(2.5rem, 4vw, 3.75rem);
	line-height: 1.08;
}

/* ---- Latest News: interaction accents in NABED blue ----
 * The block paints its interactive states with the theme's teal primary
 * (--seamlessmd-primary / -dark). This page's design uses the same blue as
 * the heading accent, the chips and "View all news" above — #2563eb — so the
 * card interactions are repainted page-locally. The darker hover step is
 * derived from that one value with color-mix rather than a second hex, and
 * the theme's teal is left untouched everywhere else. ---- */

.seamlessmd-latest-posts__read-more {
	color: #2563eb;
}

.seamlessmd-latest-posts__read-more:hover {
	color: color-mix(in srgb, #2563eb 82%, #000);
}

.seamlessmd-latest-posts__title a:hover {
	color: #2563eb;
}

.seamlessmd-latest-posts__card:hover {
	border-color: color-mix(in srgb, #2563eb 30%, var(--seamlessmd-border));
}

/* ---- FAQ + "Still Need Help?" — compact treatment (design parity) ----
 * Everything here is gated on `--has-aside`, the modifier only this page's
 * FAQ instance carries (/roi/ renders the plain single-column block), and
 * this stylesheet loads only on News & FAQ. The item padding, margin and the
 * open-state chevron colour live in seamlessmd-theme.css, which loads after
 * the block's own CSS — so the overrides have to sit here to win on order.
 *
 * The two cards stay `align-items: stretch`: the section gets shorter because
 * the FAQ column itself is denser, not because the aside was allowed to
 * shrink away from it. ---- */

/* Open-state distribution. The two cards stay stretched to one height in both
 * states — that equal-height pair is the approved composition. What changes
 * when a row opens is how the aside spends the extra height: `:has()` detects
 * the open row on the grid, and the envelope's fixed 1rem block margins become
 * `auto`, so the free space is split evenly above and below it. The heading +
 * subtitle stay together in the upper third, the icon lands in the middle, and
 * "Contact Us" + its description sit together in the lower third, each group
 * still inside the card's own padding.
 *
 * Bounded to >=992px: below that the block's own rule stacks the two cards
 * into one column, where the aside is already compact. */
@media (min-width: 992px) {
	/* Four auto margins — before the heading, either side of the icon, and
	 * after the description — share the free space equally, so the three
	 * groups sit at even intervals (a space-evenly rhythm) instead of the
	 * space-between look a single auto pair produces. The pairs stay tight:
	 * only the group boundaries get an auto margin. */
	.seamlessmd-faq--has-aside .seamlessmd-faq__inner:has(.seamlessmd-faq__item[open]) .seamlessmd-faq__aside-heading {
		margin-block-start: auto;
	}

	.seamlessmd-faq--has-aside .seamlessmd-faq__inner:has(.seamlessmd-faq__item[open]) .seamlessmd-faq__aside-icon {
		margin-block: auto;
	}

	.seamlessmd-faq--has-aside .seamlessmd-faq__inner:has(.seamlessmd-faq__item[open]) .seamlessmd-faq__aside-body {
		margin-block-end: auto;
	}
}

/* Card shell: tighter internal padding, same border and radius. The
 * design (QA row 33) tints both cards a soft blue-gray so they read
 * off the surrounding surface — the frontend was rendering them white
 * on white and losing that separation. Applied to `__main` and to
 * `__aside` further below so the pair matches. */
.seamlessmd-faq--has-aside .seamlessmd-faq__main {
	padding: 1.25rem;
	background: #f2f5fa;
}

/* Header: less air under the heading and above the first row. */
.seamlessmd-faq--has-aside .seamlessmd-faq__header {
	margin-block-end: 0.85rem;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__heading {
	margin-block-end: 0.35rem;
}

/* Accordion rows: denser rhythm. Row height stays ~44px, so the tap target
 * is still comfortable.
 *
 * The rows also read as ONE grouped list, as in the reference: the outer
 * border and radius live on `__list`, and each row contributes a single
 * leading divider instead of its own card border. Without this the block's
 * `border-bottom` and the theme bundle's `border-top` stack into a double
 * line between adjacent rows. */
.seamlessmd-faq--has-aside .seamlessmd-faq__list {
	border: 1px solid var(--seamlessmd-border);
	border-radius: 12px;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__item {
	padding: 0.4rem 0.8rem;
	margin-bottom: 0;
	border: 0;
	border-block-start: 1px solid var(--seamlessmd-border);
	background-color: transparent;
}

/* First row sits flush against the group's own top border. */
.seamlessmd-faq--has-aside .seamlessmd-faq__item:first-child {
	border-block-start: 0;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__summary {
	padding-block: 0.3rem;
}

/* Open row: NABED blue on the question and its chevron, overriding the
 * theme's default open colour. The `transform: none` patch that used to sit
 * below this rule was removed on 2026-09-10 together with the global wrapper
 * rotation it existed to cancel; the chevron animation now comes solely from
 * blocks/faq/style.css. */
.seamlessmd-faq--has-aside .seamlessmd-faq__item[open] .seamlessmd-faq__summary,
.seamlessmd-faq--has-aside .seamlessmd-faq__item[open] .seamlessmd-faq__icon {
	color: #2563eb;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__summary:hover {
	color: #2563eb;
}

/* The standalone block centres its subheading in a 640px measure; inside the
 * left-aligned card that reads as an indent under the heading. */
.seamlessmd-faq--has-aside .seamlessmd-faq__subheading {
	margin-inline: 0;
}

/* Answer: closer to its question, and to the video below it. */
.seamlessmd-faq--has-aside .seamlessmd-faq__answer {
	padding-block-end: 0.75rem;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__answer p {
	margin-block-end: 0.6rem;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__answer a {
	color: #2563eb;
}

/* Video: clean 16:9, capped so the open row stays compact. Native controls
 * and the source are untouched. Same cap on the oEmbed iframe slot. */
.seamlessmd-faq--has-aside .seamlessmd-faq__answer-video,
.seamlessmd-faq--has-aside .seamlessmd-faq__answer-embed {
	inline-size: min(100%, 22rem);
	aspect-ratio: 16 / 9;
	block-size: auto;
	margin-block-start: 0.75rem;
	border-radius: 12px;
}

/* Footer note: compact, with the link in NABED blue. */
.seamlessmd-faq--has-aside .seamlessmd-faq__footer-note {
	margin-block-start: 0.85rem;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__footer-note a {
	color: #2563eb;
}

/* ---- "Still Need Help?" card ---- */

.seamlessmd-faq--has-aside .seamlessmd-faq__aside {
	padding: 1.75rem 1.5rem;
	gap: 0.5rem;
	background: #f2f5fa;
}

/* Larger envelope, blue on a light-blue disc — replaces the teal icon. */
.seamlessmd-faq--has-aside .seamlessmd-faq__aside-icon {
	inline-size: 116px;
	block-size: 116px;
	margin-block: 1rem;
	background: #eff4ff;
	color: #2563eb;
	font-size: 3rem;
}

.seamlessmd-faq--has-aside .seamlessmd-faq__aside-link-title a:hover {
	color: #2563eb;
}