/* =========================================================================
   BuyTides - Health Programs article cards
   =========================================================================

   The strip of blog cards that closes every Health Programs landing page,
   between the last page section and the sitewide footer. Scoped entirely to
   `.bt-arts`, which inc/program-articles.php renders, so nothing here can
   reach the shop, the product template, or the chrome.

   Each program page already ships its own palette under a `.<prefix>-page`
   wrapper, and those variables are private to those files. This section
   therefore carries its own copy of the brand tokens rather than borrowing
   any one page's, so the strip looks identical on all five programs.
   ========================================================================= */

.bt-arts {
	--bta-navy: #2b3754;
	--bta-navy-deep: #08213a;
	--bta-cyan: #1fc8e3;
	--bta-cyan-tint: #eaf9fc;
	--bta-teal: #1b7fa8;
	--bta-line: #dde7ee;
	--bta-surface: #f4f7f9;
	--bta-muted: #4b6479;

	--bta-shell: 1240px;
	--bta-gutter: clamp(20px, 4vw, 48px);

	--bta-sans: "Inter", system-ui, -apple-system, sans-serif;
	--bta-display: "Outfit", "Inter", system-ui, sans-serif;

	/* The scrim that carries the card text. Sampled dark enough at the base
	   for white body copy to clear AA over a bright photo, and cleared to
	   fully transparent by 62% so the top two thirds of the art stay clean. */
	--bta-scrim: linear-gradient(
		to top,
		rgba(6, 20, 34, 0.94) 0%,
		rgba(6, 20, 34, 0.86) 22%,
		rgba(6, 20, 34, 0.52) 44%,
		rgba(6, 20, 34, 0) 62%
	);

	/* White, not the tint: the last section on every program page is a tinted
	   one, so a tinted strip here would merge with it into a single band. */
	background: #fff;
	color: var(--bta-navy);
	font-family: var(--bta-sans);
	line-height: 1.6;
	padding-block: clamp(56px, 7vw, 104px);
}

/* Twenty Twenty-Five gives every block in the template a vertical block-gap
   margin, which would open a strip of page background between the last page
   section and this one. The page wrappers zero their own children; this
   section sits outside them, so it clears its own. */
.wp-site-blocks .bt-arts,
.bt-arts + * {
	margin-block: 0;
}

.bt-arts *,
.bt-arts *::before,
.bt-arts *::after {
	box-sizing: border-box;
}

.bt-arts__wrap {
	max-width: var(--bta-shell);
	margin-inline: auto;
	padding-inline: var(--bta-gutter);
}

/* ---- Section header ---------------------------------------------------- */

.bt-arts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

.bt-arts__intro {
	max-width: 62ch;
}

.bt-arts__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bta-teal);
}

.bt-arts__title {
	margin: 0;
	font-family: var(--bta-display);
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.12;
	letter-spacing: -0.028em;
	text-wrap: balance;
	color: var(--bta-navy);
}

.bt-arts__sub {
	margin: 10px 0 0;
	font-size: clamp(15px, 1.15vw, 17px);
	color: var(--bta-muted);
	text-wrap: pretty;
}

.bt-arts__allwrap {
	flex: none;
}

.bt-arts__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 12px 20px;
	border: 1px solid var(--bta-line);
	border-radius: 999px;
	background: var(--bta-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--bta-navy);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.bt-arts__all:hover,
.bt-arts__all:focus-visible {
	border-color: var(--bta-cyan);
	color: var(--bta-teal);
	transform: translateY(-1px);
}

.bt-arts__all svg {
	width: 14px;
	height: 14px;
	flex: none;
}

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

.bt-arts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bt-arts__grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

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

.bt-art {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 28px;
	overflow: hidden;
	isolation: isolate;
	background: var(--bta-navy-deep);
	box-shadow: 0 1px 2px rgba(8, 33, 58, 0.08), 0 18px 40px -22px rgba(8, 33, 58, 0.45);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.bt-art:hover,
.bt-art:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(8, 33, 58, 0.1), 0 30px 60px -26px rgba(8, 33, 58, 0.55);
}

/* The whole card is the hit target. The anchor is stretched over the card
   rather than wrapped around it so the byline link inside stays separately
   focusable and the heading keeps its own semantics. */
.bt-art__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	text-indent: -9999px;
	overflow: hidden;
}

.bt-art__link:focus-visible {
	outline: 3px solid var(--bta-cyan);
	outline-offset: 3px;
}

.bt-art__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.bt-art__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.bt-art:hover .bt-art__media img {
	transform: scale(1.045);
}

/* Placeholder art. No editorial photography exists yet, so a card with no
   featured image paints a branded gradient instead of an empty box, the same
   way the program pages handle their own empty image slots. The three hues
   rotate by position so a row never repeats. */
.bt-art__media--ph {
	background:
		radial-gradient(120% 90% at 18% 12%, rgba(255, 255, 255, 0.22), transparent 58%),
		linear-gradient(155deg, var(--bta-ph-a) 0%, var(--bta-ph-b) 100%);
}

.bt-art__media--ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(80% 60% at 70% 22%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(80% 60% at 70% 22%, #000 0%, transparent 72%);
}

.bt-art--a {
	--bta-ph-a: #1b7fa8;
	--bta-ph-b: #08213a;
}

.bt-art--b {
	--bta-ph-a: #2b3754;
	--bta-ph-b: #0d5f7d;
}

.bt-art--c {
	--bta-ph-a: #16768f;
	--bta-ph-b: #12406c;
}

/* Wrapper the shortcode emits around the badge and the stretched link so
   wpautop leaves them alone. Both children position against the card, so this
   must not become a box of its own. */
.bt-art__over {
	display: contents;
}

.bt-art__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--bta-scrim);
	pointer-events: none;
}

/* ---- Badge ------------------------------------------------------------- */

.bt-art__badge {
	position: absolute;
	z-index: 2;
	top: 18px;
	left: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	border-radius: 999px;
	background: #fff;
	color: var(--bta-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(8, 33, 58, 0.18);
}

.bt-art__badge svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--bta-cyan);
}

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

.bt-art__body {
	position: absolute;
	z-index: 2;
	inset: auto 0 0 0;
	padding: 24px clamp(18px, 2vw, 26px) clamp(20px, 2vw, 26px);
	color: #fff;
	pointer-events: none;
}

/* Only the byline link needs pointer events back; everything else defers to
   the stretched anchor above the art. */
.bt-art__body a {
	pointer-events: auto;
}

.bt-art__h {
	margin: 0;
	font-family: var(--bta-display);
	font-weight: 600;
	font-size: clamp(21px, 1.55vw, 25px);
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bt-art__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-top: 10px;
}

/* The stats cluster is sized to its content, so the excerpt takes whatever
   is left. min-width:0 is what lets it actually shrink inside the flex row
   rather than forcing the stats off the card. */
.bt-art__excerpt {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.76);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bt-art__stats {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.bt-art__stat {
	text-align: center;
	color: rgba(255, 255, 255, 0.76);
}

.bt-art__stat + .bt-art__stat {
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.bt-art__statv {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-family: var(--bta-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}

.bt-art__statv svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: rgba(255, 255, 255, 0.82);
}

.bt-art__statl {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
}

.bt-art__by {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.24);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}

.bt-art__bydot {
	color: rgba(255, 255, 255, 0.55);
}

.bt-art__author {
	font-weight: 600;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.bt-art__author:hover,
a.bt-art__author:focus-visible {
	color: var(--bta-cyan);
}

.bt-art__time {
	color: rgba(255, 255, 255, 0.7);
}

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

@media (max-width: 1080px) {
	.bt-arts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two across leaves the third card alone on its own row; letting it span
	   both columns as a wider, shorter card reads better than a half-empty
	   row of one. */
	.bt-arts__grid > li:nth-child(3):last-child {
		grid-column: 1 / -1;
	}

	.bt-arts__grid > li:nth-child(3):last-child .bt-art {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 720px) {
	/* Below two columns the grid becomes a swipeable rail rather than a very
	   tall stack, which keeps the section from dominating the page end. */
	.bt-arts__grid {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Bleed the rail to the viewport edges so a card can sit flush while
		   the first one still lines up with the section's gutter. */
		margin-inline: calc(var(--bta-gutter) * -1);
		padding-inline: var(--bta-gutter);
		padding-block-end: 4px;
		/* Without this the snapport starts at the scroller's own edge, so the
		   first card - which sits one gutter in - is never a valid rest point
		   and the rail immediately snaps that gutter away. */
		scroll-padding-inline: var(--bta-gutter);
	}

	.bt-arts__grid::-webkit-scrollbar {
		display: none;
	}

	.bt-arts__grid > li {
		flex: 0 0 min(82vw, 340px);
		scroll-snap-align: start;
	}

	.bt-arts__grid > li:nth-child(3):last-child .bt-art {
		aspect-ratio: 3 / 4;
	}

	.bt-arts__head {
		align-items: flex-start;
	}

	.bt-art__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.bt-art__stats {
		align-self: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bt-art,
	.bt-art__media img,
	.bt-arts__all {
		transition: none;
	}

	.bt-art:hover,
	.bt-art:focus-within {
		transform: none;
	}

	.bt-art:hover .bt-art__media img {
		transform: none;
	}
}