/**
 * NEMRA Card Grid widget
 * ----------------------
 * Two layouts (side / stack) and three column counts (2 / 3 / 4) for cards.
 * Layout breakpoints mirror Elementor defaults: 991px (tablet), 599px (mobile).
 *
 * BEM:
 *   .nemra-card-grid                       — wrapper
 *   .nemra-card-grid__intro                — heading / body / CTA block
 *   .nemra-card-grid__eyebrow|heading|body|cta
 *   .nemra-card-grid__grid                 — the card grid container
 *   .nemra-card-grid__card                 — one card
 *   .nemra-card-grid__card-image|icon|content|title|body|link
 *
 * Modifiers:
 *   --cols-2|3|4                           — column count
 *   --layout-side                          — intro to the left of grid
 *   --layout-stack                         — intro stacked above grid
 */

/* ---------- Wrapper layouts ---------------------------------------------- */

.nemra-card-grid {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	font-family: var( --nemra-font-body, 'Poppins', system-ui, sans-serif );
	color: var( --nemra-text, #3f3f3f );
	box-sizing: border-box;
}

.nemra-card-grid *,
.nemra-card-grid *::before,
.nemra-card-grid *::after {
	box-sizing: border-box;
}

.nemra-card-grid--layout-side {
	flex-direction: row;
	align-items: stretch;
	gap: 50px;
}

.nemra-card-grid--layout-side .nemra-card-grid__intro {
	flex: 1 0 0;
	max-width: 480px;
	align-self: flex-start;
}

.nemra-card-grid--layout-side .nemra-card-grid__body {
	max-width: 411px;
}

.nemra-card-grid--layout-side .nemra-card-grid__grid {
	flex: 1 1 0;
	min-width: 0;
}

.nemra-card-grid--layout-stack {
	align-items: stretch;
}

.nemra-card-grid--layout-stack .nemra-card-grid__intro {
	max-width: 820px;
}

/* Heading stays at its natural wrap (581px) even when the intro is
 * widened to let the body description run further across the grid. */
.nemra-card-grid--layout-stack .nemra-card-grid__heading {
	max-width: 581px;
}

/* Body copy in the Why stack layout is constrained to 393px (Figma 84:893). */
.nemra-card-grid--layout-stack .nemra-card-grid__body {
	max-width: 780px;
}

/* ---------- Intro block -------------------------------------------------- */

.nemra-card-grid__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
}

.nemra-card-grid__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --nemra-muted, #6b6b6b );
	line-height: 1;
}

.nemra-card-grid__heading {
	margin: 0;
	font-weight: 400;
	font-size: clamp( 32px, 4vw, 48px );
	line-height: 1.1;
	color: var( --nemra-text, #3f3f3f );
	word-break: break-word;
}

.nemra-card-grid__body {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
	color: var( --nemra-muted, #6b6b6b );
	max-width: 42ch;
}

.nemra-card-grid__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 25px;
	border-radius: 5px;
	background-color: var( --nemra-green, #4c7f39 );
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* All buttons hover to the same neutral-dark-88 fill sitewide (designer direction). */
.nemra-card-grid__cta:hover,
.nemra-card-grid__cta:focus {
	background-color: var( --neutral-dark-88, rgba(23, 23, 26, 0.88) );
	color: #ffffff;
	transform: translateY( -1px );
}

.nemra-card-grid__cta-arrow {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

.nemra-card-grid__cta--static {
	cursor: default;
}

/* ---------- Grid --------------------------------------------------------- */

.nemra-card-grid__grid {
	display: grid;
	gap: 10px;
	width: 100%;
}

.nemra-card-grid--cols-2 .nemra-card-grid__grid {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 50px;
}

.nemra-card-grid--cols-3 .nemra-card-grid__grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
}

.nemra-card-grid--cols-4 .nemra-card-grid__grid {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 10px;
}

/* ---------- Swipe pager -------------------------------------------------- *
 * Mobile-only. Hidden here: above 599px the grid is a real grid, so the dots
 * would have nothing to page through. Mobile comp 797:26089 puts the pager
 * BETWEEN the heading and the cards, not under them — that's the markup order.
 * -------------------------------------------------------------------------- */

.nemra-card-grid__dots {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* The button is a 24px-tall touch target (WCAG 2.5.8); the visible mark is the
   comp's 4px bar drawn in ::before, and the negative margins pull the tap
   targets back onto the comp's 8px rhythm. */
.nemra-card-grid__dot {
	position: relative;
	width: 12px;
	height: 24px;
	margin: 0 -4px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: width 0.2s ease;
}

.nemra-card-grid__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background: #d2d2d2;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.nemra-card-grid__dot:hover::before,
.nemra-card-grid__dot:focus-visible::before {
	background: #b4b4b4;
}

.nemra-card-grid__dot:focus-visible {
	outline: 2px solid var( --nemra-cardgrid-accent, var( --nemra-blue, #2173b3 ) );
	outline-offset: 2px;
	border-radius: 4px;
}

.nemra-card-grid__dot.is-active {
	width: 32px;
}

/* The comp's active mark is 24×4 in the section accent — blue here, green on
   the pages that set --style-green, which is why it reads the accent var. */
.nemra-card-grid__dot.is-active::before {
	width: 24px;
	background: var( --nemra-cardgrid-accent, var( --nemra-blue, #2173b3 ) );
}

/* ---------- Card --------------------------------------------------------- */

.nemra-card-grid__card {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	background-color: #F4F5F7;
	border-radius: 10px;
	min-height: 467px;
	padding: 0;
}

/* Card color modes — authored via the widget's "Card background" control.
 * Pick `grey` when the section bg is white; pick `white` when the section
 * bg is grey. `custom` opens an explicit color picker (handled inline by
 * the existing card_bg selector). */

.nemra-card-grid--cards-grey .nemra-card-grid__card {
	background-color: #F4F5F7;
}

.nemra-card-grid--cards-white .nemra-card-grid__card {
	background-color: #ffffff;
}

/* 2-col layout (Materials / Resources): match Figma 367×402 white card with
   "folder-tab" silhouette — a notched top-left corner. The tab is implemented
   with CSS only (no image asset) using a clip-path on the card so the inner
   content area still receives the card_bg color set in Elementor. */
.nemra-card-grid--cols-2 .nemra-card-grid__card {
	min-height: 402px;
	border-radius: 5px;
	overflow: visible;
	/* Folder-tab cutout: small notch at top, ~40% of width starts the main top edge */
	clip-path: polygon(
		0 32px,            /* top-left of tab (lowered) */
		8px 18px,          /* slight bevel into tab top */
		120px 18px,        /* end of tab top edge */
		128px 32px,        /* step-down to main card top */
		calc( 100% - 5px ) 32px,
		100% 37px,
		100% calc( 100% - 5px ),
		calc( 100% - 5px ) 100%,
		5px 100%,
		0 calc( 100% - 5px )
	);
}

/* Hide icon dot for 2-col content cards — Figma Materials cards have no icon. */
.nemra-card-grid--cols-2 .nemra-card-grid__card-icon {
	display: none;
}

/* Content cards in 2-col layout: tighten gap; content sits at the top of the
   card just under the "folder tab" decoration. */
.nemra-card-grid--cols-2 .nemra-card-grid__card--content .nemra-card-grid__card-content {
	padding: 28px;
	gap: 15px;
	padding-top: 50px;
}

/* Don't push body to the bottom in 2-col cards — keep the whole cluster
   (title + body + link) top-aligned right below the folder tab. */
.nemra-card-grid--cols-2 .nemra-card-grid__card--content .nemra-card-grid__card-body {
	margin-top: 0;
}

/* Content card: icon + title at top, body + link anchored at bottom of the
   card to match Figma's absolute-positioned bottom-cluster layout. */

.nemra-card-grid__card--content .nemra-card-grid__card-content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 25px;
	flex: 1 1 auto;
}

/* Push body away from the icon/title cluster — Figma has body anchored ~348px
   from top, so we let auto-margin shove it to the bottom of the card. */
.nemra-card-grid__card--content .nemra-card-grid__card-body {
	margin-top: auto;
}

.nemra-card-grid__card--content .nemra-card-grid__card-link {
	margin-top: 10px;
}

.nemra-card-grid__card-icon {
	display: block;
	width: 40px;
	height: 40px;
	background-color: #d9d9d9;
	border-radius: 3.636px;
	flex-shrink: 0;
}

.nemra-card-grid__card-title {
	margin: 0;
	font-weight: 400;
	font-size: 25px;
	line-height: 1.4;
	color: var( --nemra-muted, #6b6b6b );
}

.nemra-card-grid__card-body {
	margin-top: auto;
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var( --nemra-muted, #6b6b6b );
}

.nemra-card-grid__card-link {
	display: inline-block;
	font-size: 14px;
	line-height: 1.5;
	color: var( --nemra-muted, #6b6b6b );
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
	align-self: flex-start;
}

/* Image-only card: feature image fills the entire card, no text */

.nemra-card-grid__card--image {
	background-color: #eaeaea;
}

.nemra-card-grid__card-feature-image {
	position: relative;
	width: 100%;
	height: 100%;
	flex: 1 1 auto;
	overflow: hidden;
	background-color: #eaeaea;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.nemra-card-grid__card-feature-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nemra-card-grid__card-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.nemra-card-grid__card-link:hover,
.nemra-card-grid__card-link:focus {
	color: var( --nemra-blue, #2173B3 );
	border-bottom-color: currentColor;
}

.nemra-card-grid__card-link--static {
	cursor: default;
}

/* ======================================================================== */
/* V2 "Blue cards" variant (--style-blue)                                    */
/* Figma 571:21293 "Resources, Insights & More". Solid blue cards with a     */
/* white line icon + title at top and body anchored at the bottom. Heading   */
/* sits above the grid with a top divider + blue-dot eyebrow.                 */
/* ======================================================================== */

:root {
	--nemra-blue: #2173b3;
	--nemra-blue-dark: #042a48;
	--nemra-green: #4c7f39;
	--nemra-eversand: #e6e8dd;
	--nemra-dark: #17171a;
	--nemra-light: #fcfdfd;
	--nemra-blue-light: #d1e8fa;
}

/* The blue variant always reads as a stacked, header-on-top section even if
   the legacy "side" layout flag is set. */
.nemra-card-grid--style-cards {
	flex-direction: column;
	align-items: stretch;
	gap: 64px;
	/* 1312 = the comps' content column (1440 frame minus 64px gutters). At
	   1280 this centred itself inside an already-padded container and put the
	   heading at 80 where every neighbouring section sits at 64. */
	max-width: 1312px;
}

/* ----- Intro: top divider + eyebrow dot + serif heading ----- */

.nemra-card-grid--style-cards .nemra-card-grid__intro {
	gap: 24px;
	max-width: none;
	width: 100%;
}

.nemra-card-grid--style-cards .nemra-card-grid__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding-top: 24px;
	border-top: 1px solid rgba( 23, 23, 26, 0.16 );
	font-family: var( --nemra-font-body, 'Poppins', system-ui, sans-serif );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1;
	text-transform: uppercase;
	color: rgba( 23, 23, 26, 0.64 );
}

.nemra-card-grid--style-cards .nemra-card-grid__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var( --nemra-cardgrid-accent, var( --nemra-blue, #2173b3 ) );
}

/* Round-3 comp (832:8167) sets the section title in Heading/H2 —
   Poppins Medium 48/-1.5. The serif is reserved for the CARD titles below. */
.nemra-card-grid--style-cards .nemra-card-grid__heading {
	font-family: var( --nemra-font-body, 'Poppins', system-ui, sans-serif );
	font-weight: 500;
	font-size: clamp( 32px, 4vw, 48px );
	line-height: 1.2;
	letter-spacing: -1.5px;
	/* Win over the per-instance Elementor Style control (heading_color, baked
	   into post CSS at higher specificity). The V2 comp pins this to
	   --nemra-dark; the legacy control color would otherwise leak through. */
	color: var( --nemra-dark, #17171a ) !important;
	max-width: 700px;
}

/* V2 eyebrow color is fixed by the comp (neutral/dark 64%). Override the
   per-instance heading_color control, which also targets the eyebrow. */
.nemra-card-grid--style-cards .nemra-card-grid__eyebrow {
	color: rgba( 23, 23, 26, 0.64 ) !important;
}

/* ----- Grid: 16px gap, equal-height row ----- */

.nemra-card-grid--style-cards .nemra-card-grid__grid {
	gap: 16px;
	align-items: stretch;
}

.nemra-card-grid--style-cards.nemra-card-grid--cols-3 .nemra-card-grid__grid {
	gap: 16px;
}

/* ----- Card: solid blue, compact, 8px radius, 24px padding ----- */

.nemra-card-grid--style-cards .nemra-card-grid__card {
	background-color: var( --nemra-cardgrid-accent, var( --nemra-blue, #2173b3 ) );
	border-radius: 8px;
	min-height: 0;
	overflow: hidden;
	height: 100%;
}

.nemra-card-grid--style-cards .nemra-card-grid__card--content .nemra-card-grid__card-content {
	gap: 24px;
	padding: 24px;
	height: 100%;
}

.nemra-card-grid--style-cards .nemra-card-grid__card-icon {
	display: none;
}

/* White line icon, 36px. */
.nemra-card-grid--style-cards .nemra-card-grid__card-glyph {
	display: block;
	width: 36px;
	height: 36px;
	color: var( --nemra-light, #fcfdfd );
}

.nemra-card-grid--style-cards .nemra-card-grid__glyph-svg {
	display: block;
	width: 36px;
	height: 36px;
}

/* Card titles are Heading/H6 in the comp — Libre Baskerville Regular 24/28. */
.nemra-card-grid--style-cards .nemra-card-grid__card-title {
	font-family: var( --nemra-font-heading, 'Libre Baskerville', Georgia, serif );
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.5px;
	/* Card text is white in the V2 comp. The per-instance card_text_color
	   control (#6b6b6b) is baked into post CSS at higher specificity, so force
	   white here — gated to the blue variant only. */
	color: var( --nemra-light, #fcfdfd ) !important;
}

/* Body anchored at the bottom of the card (Figma space-between). */
.nemra-card-grid--style-cards .nemra-card-grid__card-body {
	margin-top: auto;
	padding-top: 25px;
	font-family: var( --nemra-font-body, 'Poppins', system-ui, sans-serif );
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	/* The V2 comp says white 88% (797:24394, Neutral/Light 88%), but on the
	   blue card that blends to #e2ecf4 and measures 4.21:1 — under the 4.5 AA
	   floor for 14px text. 0.94 is the first alpha that passes; 0.95 keeps a
	   little headroom and is visually indistinguishable from the comp.
	   Also overrides the per-instance card_text_color control baked into post
	   CSS at higher specificity. */
	color: rgba(252, 253, 253, 0.95) !important;
}

/* Icon-control glyphs (any icon, e.g. Font Awesome) in the same 36px slot. */
.nemra-card-grid--style-cards .nemra-card-grid__card-glyph {
	font-size: 30px;
}

.nemra-card-grid--style-cards .nemra-card-grid__card-glyph svg {
	width: 36px;
	height: 36px;
	fill: currentColor;
}

/* The built-in key icons (icon_svg()) and the shared icon renderer both draw
 * OUTLINES — they ship `fill="none" stroke="currentColor"`, and the blanket
 * `fill: currentColor` above (which exists for solid Font Awesome glyphs)
 * beats a presentation attribute, so it was painting the media-kit box, the
 * onboarding figure and the padlock as solid white blobs. */
.nemra-card-grid--style-cards .nemra-card-grid__card-glyph svg.nemra-icon,
.nemra-card-grid--style-cards .nemra-card-grid__card-glyph svg.nemra-card-grid__glyph-svg {
	fill: none;
	stroke: currentColor;
}

/* No "Learn More" links in the blue variant. */
.nemra-card-grid--style-cards .nemra-card-grid__card-link {
	display: none;
}

/* ----- Feature banner: full-width green card under the grid ----- */
/* Figma 571:26083 tail card ("Trusted by Industry Leaders"); designer round
 * 2026-07 moved it from navy to green. Sans H4 title, 12px body. */

/* Solid-card sections cap the heading at the AgentConnect comp's 814px
 * (571:26083). The other solid+stack instances all carry the one-line
 * "Resources, Insights & More" heading, which never reaches 581px anyway. */
.nemra-card-grid--style-cards.nemra-card-grid--layout-stack .nemra-card-grid__heading {
	max-width: 814px;
}

.nemra-card-grid__banner {
	/* The wrapper's 50px flex gap already separates grid and banner; the comp
	 * wants 24, so pull back the difference. */
	margin-top: -26px;
	padding: 32px 48px;
	border-radius: 8px;
	background: var( --nemra-green, #4c7f39 );
	color: var( --nemra-light, #fcfdfd );
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nemra-card-grid__banner-icon {
	display: inline-flex;
	align-items: center;
	width: 28px;
	height: 28px;
	font-size: 24px;
	color: var( --nemra-light, #fcfdfd );
}

.nemra-card-grid__banner-icon svg { width: 28px; height: 28px; fill: currentColor; }
.nemra-card-grid__banner-icon svg.nemra-icon { fill: none; stroke: currentColor; }

.nemra-card-grid__banner-title {
	margin: 0;
	font-family: var( --nemra-font-body, 'Poppins', system-ui, sans-serif );
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -1px;
	font-weight: 500;
	color: var( --nemra-light, #fcfdfd );
}

.nemra-card-grid__banner-body {
	margin: 0;
	max-width: 820px;
	font-size: 12px;
	line-height: 1.6;
	color: #ffffff;
}

/* The V2 "Resources" comp has no section CTA button — the green "View All
   Benefits" button comes from the legacy section_cta control and is not part
   of this layout. Hide it for the blue variant only. */
.nemra-card-grid--style-cards .nemra-card-grid__cta {
	display: none;
}

@media ( max-width: 991px ) {

	.nemra-card-grid--style-cards.nemra-card-grid--cols-3 .nemra-card-grid__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 599px ) {

	.nemra-card-grid--style-cards {
		gap: 40px;
	}

	.nemra-card-grid--style-cards.nemra-card-grid--cols-3 .nemra-card-grid__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}
}

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

@media ( max-width: 991px ) {

	/* Mobile comp 797:21487: section title on Heading/H2's mobile 36 (two
	   lines of 43.2 in the 352 column) and card titles on Heading/H6's
	   mobile 20 — the 28px line height is H6's in both modes. */
	.nemra-card-grid--style-cards .nemra-card-grid__heading {
		font-size: var(--nemra-t-h2-size, 36px);
	}

	.nemra-card-grid--style-cards .nemra-card-grid__card-title {
		font-size: var(--nemra-t-h6-size, 20px);
	}

	.nemra-card-grid--layout-side {
		flex-direction: column;
	}

	.nemra-card-grid--layout-side .nemra-card-grid__intro {
		flex: 0 0 auto;
		max-width: none;
		align-self: stretch;
	}

	.nemra-card-grid--cols-3 .nemra-card-grid__grid,
	.nemra-card-grid--cols-4 .nemra-card-grid__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.nemra-card-grid__banner {
		padding: 24px;
	}
}

@media ( max-width: 599px ) {

	.nemra-card-grid {
		gap: 32px;
	}

	.nemra-card-grid__heading {
		font-size: clamp( 28px, 8vw, 36px );
	}

	.nemra-card-grid--cols-2 .nemra-card-grid__grid,
	.nemra-card-grid--cols-3 .nemra-card-grid__grid,
	.nemra-card-grid--cols-4 .nemra-card-grid__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 16px;
	}

	.nemra-card-grid__card {
		min-height: 0;
	}

	/* The mobile comp drops the banner entirely. 797:26089 is 524 tall and
	   that is exactly header + pager + one card with no bottom padding — the
	   next section (797:26116) starts flush at 1124 — so this is a deliberate
	   omission, not a frame the designer left short. Desktop keeps it: the
	   1440 comp 797:25992 carries it as `Certification` at y=436. */
	.nemra-card-grid__banner {
		display: none;
	}
}

/* Accent colours for the solid-card variant. Everything structural lives on
 * --style-cards; these only set the one custom property the card ground and
 * the eyebrow dot read. Manufacturers (797:22303) is blue; Single Education
 * (797:24242) is green, matching that section's accent. */
.nemra-card-grid--style-blue {
	--nemra-cardgrid-accent: var( --nemra-blue, #2173b3 );
}

.nemra-card-grid--style-green {
	--nemra-cardgrid-accent: var( --nemra-green, #4c7f39 );
}

/* ---------- Mobile swipe track ------------------------------------------- *
 * Mobile comp 797:26089: one full-width card at a time, with the pager above
 * it — 40px from the heading block to the 4px bar, 40px from the bar to the
 * card. Selectors are doubled to 0,3,0 and sit last in the file so they beat
 * the `--style-cards.--cols-3` grid rules above, which match at 0,3,0 too.
 * -------------------------------------------------------------------------- */

@media ( max-width: 599px ) {

	/* The comp's two 40px seams are the wrapper's own gap; the pager box is
	   4px tall (the bar itself), so the buttons overflow it symmetrically and
	   the measured seam stays 40 rather than 40 + the touch target. */
	.nemra-card-grid.nemra-card-grid--swipe {
		gap: 40px;
	}

	.nemra-card-grid.nemra-card-grid--swipe .nemra-card-grid__dots {
		display: flex;
		height: 4px;
	}

	.nemra-card-grid.nemra-card-grid--swipe .nemra-card-grid__grid {
		display: flex;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		overscroll-behavior-x: contain;
	}

	.nemra-card-grid.nemra-card-grid--swipe .nemra-card-grid__grid::-webkit-scrollbar {
		display: none;
	}

	/* One whole slide per view — the comp's card is the full 352 content
	   column, so there is no peek of the next one. */
	.nemra-card-grid.nemra-card-grid--swipe .nemra-card-grid__card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}
}