/* =================================================================
   Content Cards Block

   Layouts (mutually exclusive):
     .content-cards--layout-grid        — cards in a column grid
     .content-cards--layout-alternated  — 2-col checkerboard (image + text)

   Grid-only modifiers:
     .content-cards--variant-{bordered|plain|colored}  card skin
     .content-cards--radius-{rounded|square}           corner radius
     .content-cards--media-{cover|icon|none}           media type
     .content-cards--text-{left|center}                body alignment
     .content-cards--color-{alternate|all-primary|all-light}
                                                       color pattern (colored)
     .content-cards--cols-{2|3|4}                      desktop columns
     .content-cards--align-center                      center the last row
   ================================================================= */

/* =================================================================
   Base
   ================================================================= */

.content-cards {
	position: relative;
	margin-block-start: 0 !important;
}

.content-cards--py-sm {
	padding-block: 2rem;
}
.content-cards--py-md {
	padding-block: 3rem;
}
.content-cards--py-lg {
	padding-block: 4rem;
}

.content-cards--bg-default {
	background-color: var(--wp--preset--color--bg);
}
.content-cards--bg-light {
	background-color: var(--wp--preset--color--bg-secondary);
}

/* Base list: layouts below set display (grid for alternated, flex for grid).
   Keeping the display assignment in the layout rule avoids a dual-path
   CSS where grid-template-columns and flex-basis fight each other when
   align-center is active. */
.content-cards__list {
	gap: 1rem;
	margin-top: 2.5rem;
}

.content-cards__card {
	display: grid;
	overflow: hidden;
	box-sizing: border-box;
}

.content-cards__card--linked {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.content-cards__card--linked:hover {
	text-decoration: none;
}

/* Linked-card affordance (universal): subtle image zoom and title color
   shift signal interactivity. The media wrapper already clips overflow,
   so the scaled image stays within the card boundaries. */
.content-cards__card-img {
	transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.content-cards__card--linked .content-cards__card-title {
	transition: color 0.25s ease;
}

.content-cards__card--linked:hover .content-cards__card-img,
.content-cards__card--linked:focus-visible .content-cards__card-img {
	transform: scale(1.04);
}

/* Title color shift: only where the card bg can't already be primary. */
.content-cards--variant-plain
	.content-cards__card--linked:hover
	.content-cards__card-title,
.content-cards--variant-plain
	.content-cards__card--linked:focus-visible
	.content-cards__card-title,
.content-cards--variant-bordered
	.content-cards__card--linked:hover
	.content-cards__card-title,
.content-cards--variant-bordered
	.content-cards__card--linked:focus-visible
	.content-cards__card-title {
	color: var(--wp--preset--color--primary);
}

/* Keyboard focus ring — thin and offset, matches the card's radius. */
.content-cards__card--linked:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.content-cards__card-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 1.5rem;
}

.content-cards__card-body p:last-child {
	margin-bottom: 0;
}

.content-cards__card-title {
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--20);
	color: var(--wp--preset--color--text-heading);
	line-height: 1.6;
	font-weight: 700;
	margin: 0;
}

/* .content-cards__card-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	background-color: var(--wp--preset--color--primary);
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
} */

.content-cards--text-center .content-cards__card-title {
	font-size: var(--wp--preset--font-size--20);
	font-weight: 800;
	text-transform: none;
	letter-spacing: normal;
	margin-bottom: var(--wp--preset--spacing--8);
}

.content-cards__card-desc {
	line-height: 1.6;
	margin-bottom: 0;
	color: inherit;
}

.content-cards__card-desc strong {
	font-weight: 700;
	color: var(--wp--preset--color--dark);
}

/* Visible link shown when link_style = "link" (not full-card link) */
.content-cards__card-link {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.content-cards__card:hover .content-cards__card-link {
	opacity: 1;
}

.content-cards__card-media {
	overflow: hidden;
}

.content-cards__card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.content-cards__cta {
	text-align: center;
	margin-top: 2.5rem;
}

/* =================================================================
   Layout: Alternated
   Row pattern (desktop): body|media, body|media, media|body, media|body
   Color pattern:         dark, light, light, dark (repeats)
   Uses CSS Grid on the list to build the 2-col checkerboard.
   ================================================================= */

.content-cards--layout-alternated .content-cards__list {
	display: grid;
	grid-template-columns: 1fr;
}

.content-cards--layout-alternated .content-cards__card {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.content-cards--layout-alternated .content-cards__card-body {
	text-align: center;
	justify-content: center;
	padding: 2rem 1.5rem;
}

.content-cards--layout-alternated .content-cards__card-body a:hover {
    color:initial;
}

/* Media area is position:relative so the image can be absolute inside.
   The row height is driven by the body; the image fills whatever that is. */
.content-cards--layout-alternated .content-cards__card-media {
	position: relative;
	min-height: 14rem;
}

.content-cards--layout-alternated .content-cards__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dark cards (1,4,5,8,…) */
.content-cards--layout-alternated
	.content-cards__card:nth-child(4n + 1)
	.content-cards__card-body,
.content-cards--layout-alternated
	.content-cards__card:nth-child(4n)
	.content-cards__card-body {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--bg-secondary);
}

.content-cards--layout-alternated
	.content-cards__card:nth-child(4n + 1)
	.content-cards__card-title,
.content-cards--layout-alternated
	.content-cards__card:nth-child(4n)
	.content-cards__card-title {
	color: var(--wp--preset--color--bg-secondary);
}

/* Light cards (2,3,6,7,…) */
.content-cards--layout-alternated
	.content-cards__card:nth-child(4n + 2)
	.content-cards__card-body,
.content-cards--layout-alternated
	.content-cards__card:nth-child(4n + 3)
	.content-cards__card-body {
	background-color: var(--wp--preset--color--bg-secondary);
	color: var(--wp--preset--color--text);
}

.content-cards--layout-alternated
	.content-cards__card:nth-child(4n + 2)
	.content-cards__card-title,
.content-cards--layout-alternated
	.content-cards__card:nth-child(4n + 3)
	.content-cards__card-title {
	color: var(--wp--preset--color--text-heading);
}

/* =================================================================
   Layout: Grid
   HTML order is body → media; grid visually places media on top.
   ================================================================= */

.content-cards--layout-grid .content-cards__card {
	grid-template-rows: auto 1fr;
}

.content-cards--layout-grid .content-cards__card-media {
	order: -1;
}

/* Cover media: ratio picked from card_media_ratio. Falls back to 4/3
   when no ratio class is present (legacy or non-cover layouts). */
.content-cards--media-cover .content-cards__card-media {
	aspect-ratio: 4 / 3;
}

.content-cards--media-cover.content-cards--ratio-4-3 .content-cards__card-media {
	aspect-ratio: 4 / 3;
}

.content-cards--media-cover.content-cards--ratio-3-2 .content-cards__card-media {
	aspect-ratio: 3 / 2;
}

.content-cards--media-cover.content-cards--ratio-16-9 .content-cards__card-media {
	aspect-ratio: 16 / 9;
}

.content-cards--media-icon .content-cards__card-media {
	width: 4rem;
	height: 4rem;
	margin-bottom: 1rem;
}

.content-cards--media-icon .content-cards__card-img {
	object-fit: contain;
}

/* Icon horizontal alignment follows text alignment */
.content-cards--media-icon.content-cards--text-left .content-cards__card-media {
	margin-right: auto;
}

.content-cards--media-icon.content-cards--text-center
	.content-cards__card-media {
	margin-left: auto;
	margin-right: auto;
}

/* =================================================================
   Grid — Text alignment
   ================================================================= */

.content-cards--layout-grid.content-cards--text-left .content-cards__card-body {
	text-align: left;
	align-items: flex-start;
}

.content-cards--layout-grid.content-cards--text-center
	.content-cards__card-body {
	text-align: center;
	align-items: center;
}

/* =================================================================
   Grid — Variants
   ================================================================= */

.content-cards--layout-grid .content-cards__card-title {
	color: var(--wp--preset--color--text-heading);
}

/* Variant: bordered — gradient frame via dual background (padding-box fill +
   border-box gradient) so the radius is preserved. The padding-box color must
   match the section bg behind the card. */
.content-cards--variant-bordered .content-cards__card {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--wp--preset--color--bg), var(--wp--preset--color--bg)) padding-box,
		var(--wp--preset--color--gradient) border-box;
}

/* When there is no full-bleed image, padding moves to the card so the
   frame keeps a consistent inset around the content. */
.content-cards--variant-bordered.content-cards--media-icon
	.content-cards__card {
	padding: 2rem 1.5rem;
}

.content-cards--variant-bordered.content-cards--media-none
	.content-cards__card {
	padding: 1.5rem;
}

.content-cards--variant-bordered.content-cards--media-icon
	.content-cards__card-body,
.content-cards--variant-bordered.content-cards--media-none
	.content-cards__card-body {
	padding: 0;
}

.content-cards--variant-bordered .content-cards__card--linked:hover {
	transform: translateY(-0.125rem);
	box-shadow: var(--wp--preset--shadow--200);
}

/* Variant: plain — top-only body padding, no frame */
.content-cards--variant-plain .content-cards__card-body {
	padding: 1.5rem 0 0;
}

.content-cards--variant-plain.content-cards--media-icon
	.content-cards__card-body {
	padding: 1rem 0 0;
}

.content-cards--variant-plain.content-cards--media-none
	.content-cards__card-body {
	padding: 0;
}

/* Variant: colored */
.content-cards--variant-colored .content-cards__card-body {
	padding: 2rem 1.5rem;
}

.content-cards--variant-colored.content-cards--media-icon .content-cards__card {
	padding: 2rem 1.5rem;
}

.content-cards--variant-colored.content-cards--media-icon
	.content-cards__card-body {
	padding: 0;
}

.content-cards--variant-colored .content-cards__card--linked:hover {
	transform: translateY(-0.125rem);
	box-shadow: var(--wp--preset--shadow--200);
}

/* Pattern: alternate (odd → primary, even → light) */
.content-cards--variant-colored.content-cards--color-alternate
	.content-cards__card:nth-child(odd) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--bg-secondary);
}
.content-cards--variant-colored.content-cards--color-alternate
	.content-cards__card:nth-child(odd)
	.content-cards__card-title {
	color: var(--wp--preset--color--bg-secondary);
}

.content-cards--variant-colored.content-cards--color-alternate
	.content-cards__card:nth-child(even) {
	background-color: var(--wp--preset--color--bg-secondary);
	color: var(--wp--preset--color--text);
}
.content-cards--variant-colored.content-cards--color-alternate
	.content-cards__card:nth-child(even)
	.content-cards__card-title {
	color: var(--wp--preset--color--text-heading);
}

/* Pattern: all-primary */
.content-cards--variant-colored.content-cards--color-all-primary
	.content-cards__card {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--bg-secondary);
}
.content-cards--variant-colored.content-cards--color-all-primary
	.content-cards__card-title {
	color: var(--wp--preset--color--bg-secondary);
}

/* Pattern: all-light */
.content-cards--variant-colored.content-cards--color-all-light
	.content-cards__card {
	background-color: var(--wp--preset--color--bg-secondary);
	color: var(--wp--preset--color--text);
}
.content-cards--variant-colored.content-cards--color-all-light
	.content-cards__card-title {
	color: var(--wp--preset--color--text-heading);
	margin-bottom: var(--wp--preset--spacing--8);
}

/* =================================================================
   Grid — Radius
   ================================================================= */

.content-cards--layout-grid.content-cards--radius-rounded .content-cards__card {
	border-radius: var(--wp--custom--radius--8);
}

/* When the card has a visible frame (border/bg), only the top corners
   of the image are rounded — the card itself rounds the bottom. */
.content-cards--layout-grid.content-cards--radius-rounded.content-cards--variant-bordered.content-cards--media-cover
	.content-cards__card-img,
.content-cards--layout-grid.content-cards--radius-rounded.content-cards--variant-colored.content-cards--media-cover
	.content-cards__card-img {
	border-radius: var(--wp--custom--radius--8) var(--wp--custom--radius--8) 0 0;
}

/* Plain variant: image is standalone — round all four corners. */
.content-cards--layout-grid.content-cards--radius-rounded.content-cards--variant-plain.content-cards--media-cover
	.content-cards__card-img {
	border-radius: var(--wp--custom--radius--8);
}

.content-cards--layout-grid.content-cards--radius-square .content-cards__card,
.content-cards--layout-grid.content-cards--radius-square
	.content-cards__card-img {
	border-radius: 0;
}

/* =================================================================
   Layout: Grid — flex-based column system
   One code path for columns: flex + flex-basis calc.
   --align-center is just a justify-content decorator (no layout change).
   Alternated keeps its own grid rules above.
   ================================================================= */

.content-cards--layout-grid .content-cards__list {
	display: flex;
	flex-wrap: wrap;
}

/* Mobile default: 1 col */
.content-cards--layout-grid .content-cards__card {
	flex: 0 1 100%;
}

/* Align-center: last row centered when it doesn't fill the row */
.content-cards--layout-grid.content-cards--align-center .content-cards__list {
	justify-content: center;
}

/* Constrained lists: cap the cards container width (header/CTA still span
   the section's container). Useful with wide columns or few cards.
   medium sits between narrow and the full container width. */
.content-cards--layout-grid.content-cards--list-medium .content-cards__list {
	max-width: 68rem;
	margin-inline: auto;
}

.content-cards--layout-grid.content-cards--list-narrow .content-cards__list {
	max-width: 56rem;
	margin-inline: auto;
}

/* =================================================================
   Responsive
   ================================================================= */

/* Small tablet (36rem+): grid goes 2 cols regardless of --cols-N.
   Breakpoint lower than 48rem so phablets don't show an oversized card. */
@media (min-width: 36rem) {
	.content-cards--layout-grid .content-cards__list {
		gap: 1.5rem;
	}
	.content-cards--layout-grid .content-cards__card {
		flex: 0 1 calc((100% - 1.5rem) / 2);
	}
}

/* Tablet (48rem+): section padding scales up; alternated becomes 2-col grid */
@media (min-width: 48rem) {
	.content-cards--py-sm {
		padding-block: 3rem;
	}
	.content-cards--py-md {
		padding-block: 4.5rem;
	}
	.content-cards--py-lg {
		padding-block: 6rem;
	}

	.content-cards--layout-alternated .content-cards__list {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr;
		gap: 0;
	}

	.content-cards--layout-alternated .content-cards__card-body {
		order: 0;
	}

	/* Rows 2,4,… place media on the left */
	.content-cards--layout-alternated
		.content-cards__card:nth-child(4n + 3)
		.content-cards__card-body,
	.content-cards--layout-alternated
		.content-cards__card:nth-child(4n + 4)
		.content-cards__card-body {
		order: 2;
	}
}

/* Mobile-only alternated: even cards flip image side */
@media (max-width: 47.9375rem) {
	.content-cards--layout-alternated
		.content-cards__card:nth-child(even)
		.content-cards__card-body {
		order: 2;
	}
}

/* Desktop (64rem+): --cols-N kicks in.
   These rules apply whether --align-center is on or off — it only
   changes justify-content, not the card's flex-basis. */
@media (min-width: 64rem) {
	.content-cards--layout-alternated .content-cards__card-body {
		padding: 2.5rem 2rem;
	}

	.content-cards--layout-alternated .content-cards__card-media {
		min-height: 18rem;
	}

	.content-cards--layout-grid.content-cards--cols-2 .content-cards__card {
		flex: 0 1 calc((100% - 1.5rem) / 2);
	}
	.content-cards--layout-grid.content-cards--cols-3 .content-cards__card {
		flex: 0 1 calc((100% - 3rem) / 3);
	}
	.content-cards--layout-grid.content-cards--cols-4 .content-cards__card {
		flex: 0 1 calc((100% - 4.5rem) / 4);
	}
}

/* =================================================================
   Reduced motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
	.content-cards__card-img,
	.content-cards__card--linked .content-cards__card-title,
	.content-cards__card--linked {
		transition: none;
	}

	.content-cards__card--linked:hover .content-cards__card-img,
	.content-cards__card--linked:focus-visible .content-cards__card-img {
		transform: none;
	}
}

/* =================================================================
   Scroll-driven reveal — cards fade up as they enter the viewport.
   Uses native CSS scroll-driven animations (animation-timeline: view()).
   Browsers without support fall back to the final state immediately,
   keeping content visible. Skipped for users with reduced-motion.
   ================================================================= */
@keyframes content-cards-card-reveal {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.content-cards__card {
			animation: content-cards-card-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}
	}
}