/*
 * addictions.css — the "Addictions We Treat" card grid.
 *
 * Figma: "categories" frame, node 45:1690. Artboard reference: three columns of
 * 521x568 cards with 33px between them, a 71.5px teal circle flush to each
 * card's top-right, and the title and rule sitting ~50px off the bottom.
 *
 * Display type is scaled to this site's 1280px column, as elsewhere: the
 * artboard sizes are multiplied by 1280/1634 (~0.78).
 */

.addictions {
	background: var(--surface-frame);
	color: var(--forest-ink);
}

.addictionsInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	padding-block: clamp(56px, 6.2vw, 110px);
	padding-bottom: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.addictionsEyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 28px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--forest-ink);
}

.addictionsEyebrow .eyebrowRule {
	color: var(--accent);
}

/* h2. Fixed 42px by explicit request, matching every other h2 on the page. */
.addictionsTitle {
	margin-top: clamp(12px, 1.3vw, 20px);
	/* 1023px at 44px on the artboard = 23.25em. In em so the two-line break
	   survives the scale down to this column. */
	max-width: 23.5em;
	font-size: 42px;
	line-height: 1.364;
	font-weight: 400;
	text-align: center;
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--forest-ink);
}

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

.addictionsGrid {
	width: 100%;
	margin-top: clamp(32px, 3.4vw, 60px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

/* The arrow lives here rather than inside the card — see the note in the
   template — so the item is what positions it. */
.addictionsGridItem {
	position: relative;
}

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

.addictionCard {
	position: relative;
	/* 521.43 x 568 on the artboard. */
	aspect-ratio: 521 / 568;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	isolation: isolate;
	/*
	 * Three corners at 40px; the top-right is enlarged to 48px specifically to
	 * seat the arrow button. This is the key move that actually produces a
	 * smooth transition, and it replaced an earlier attempt that masked a
	 * separate 36.5px hole into a 40px-radius corner: two nearly-equal, not
	 * concentric circles that close together pinch rather than blend.
	 *
	 * Here the button (56px, radius 28) is positioned with its centre exactly
	 * on this corner's own rounding centre (see .addictionCardArrow) — so the
	 * button's circle and the card's corner curve share one origin. That makes
	 * the ring of visible card between them (48 - 28 = 20px wide) constant-width
	 * and perfectly smooth by construction, for any photo the corner happens to
	 * be cropping, with no mask and no extra fillet element needed.
	 */
	border-top-left-radius: 40px;
	border-top-right-radius: 48px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
}

.addictionCardImg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The scrim. Idle it only darkens the lower third, enough to carry the title;
 * on hover it deepens and climbs, which is the state the artboard draws on the
 * first card. Measured off that render: roughly 0.14 alpha where the text
 * begins, reaching ~0.85 at the bottom.
 */
.addictionCard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/*
	 * The brief specified 0.8 / 0.4 / 0. Against the nine real photographs that
	 * carries the card title at only 2.65:1 on the worst of them (Fentanyl) —
	 * they are far brighter than the placeholder the section was first built
	 * against. Same direction and shape, deepened to 0.94 / 0.68, which measures
	 * 5.46:1 on that worst card and leaves margin for an editor swapping in
	 * another bright image.
	 */
	background: linear-gradient(
		to top,
		rgba(18, 49, 44, 0.94) 0%,
		rgba(18, 49, 44, 0.68) 30%,
		rgba(18, 49, 44, 0) 100%
	);
	transition: opacity 0.35s var(--ease), background 0.35s var(--ease);
	pointer-events: none;
}

.addictionsGridItem:hover .addictionCard::after,
.addictionsGridItem:focus-within .addictionCard::after {
	background: linear-gradient(
		to top,
		rgba(18, 49, 44, 0.93) 0%,
		rgba(18, 49, 44, 0.72) 55%,
		rgba(18, 49, 44, 0.3) 100%
	);
}

.addictionCardArrow {
	position: absolute;
	/*
	 * Centred on the top-right corner's own 48px rounding centre: that centre
	 * sits 48px in from each edge, and the button's own radius (28px) is
	 * subtracted to place its edge rather than its centre, leaving the 20px
	 * gap the corner's extra 8px of radius (48 vs the other corners' 40) was
	 * sized to create.
	 */
	top: 20px;
	right: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 71.5px on the artboard, scaled to this column. */
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.addictionCardArrow .btnArrow {
	width: 17px;
	height: 12px;
}

.addictionsGridItem:hover .addictionCardArrow,
.addictionsGridItem:focus-within .addictionCardArrow {
	background: var(--accent-deep);
	transform: translate(-2px, 2px);
}

.addictionCardBody {
	/*
	 * No position set — z-index still applies because this is a flex item of
	 * .addictionCard (a flex item's z-index works without the item itself
	 * being positioned), and leaving it unpositioned is what lets
	 * .addictionCardLink::after (below) reach all the way up to the card as
	 * its containing block instead of stopping here.
	 */
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 clamp(20px, 3vw, 40px) 40px;
	text-align: center;
	color: var(--warm-sand);
}

/*
 * The rule under the title (node 45:1697). A background image rather than a
 * border-bottom or a ::after — a border paints edge-to-edge and cannot fade,
 * and a ::after would need position: relative on this element, which was
 * exactly what kept .addictionCardLink::after (below) from stretching past
 * the title's own box: position: absolute always resolves to the *nearest*
 * positioned ancestor, so with the title positioned, the card-wide overlay
 * was silently landing on the title instead of the card, and the rest of the
 * card — the photo above it — was never clickable.
 *
 * h3. Fixed 26px by explicit request.
 */
.addictionCardTitle {
	margin: 0;
	padding-bottom: 20px;
	/*
	 * Warm-sand at low opacity rather than --hairline (#afafaf): that grey
	 * reads as muddy against the dark scrim, where a lighter, translucent
	 * version of the card's own text colour reads as a fine rule instead of
	 * a hard grey bar. Fully transparent at both ends, solid across the
	 * middle third.
	 */
	background-image: linear-gradient(
		to right,
		rgba(246, 242, 234, 0) 0%,
		rgba(246, 242, 234, 0.45) 30%,
		rgba(246, 242, 234, 0.45) 70%,
		rgba(246, 242, 234, 0) 100%
	);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 1px;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 400;
	text-transform: capitalize;
}

.addictionCardLink {
	color: inherit;
	text-decoration: none;
}

/*
 * Makes the whole card clickable while the accessible name stays the title.
 * Resolves to .addictionCard (position: relative, the outer <article>) as its
 * containing block — nothing between the two carries its own position
 * anymore, including .addictionCardBody's z-index: 1, which still lifts it
 * above the card's scrim without position: relative because it is a flex
 * item of .addictionCard, and a flex item's z-index applies whether or not
 * the item itself is positioned.
 */
.addictionCardLink::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.addictionCardLink:focus-visible {
	outline: none;
}

/*
 * The ring goes on the item, not the card, only because the card's own
 * overflow:hidden would otherwise clip an outline that sits partly outside
 * its box. Matches the card's own per-corner radii so the ring traces the
 * same shape, including the enlarged top-right corner.
 */
.addictionsGridItem:has(.addictionCardLink:focus-visible) {
	outline: 2px solid var(--accent-on-dark);
	outline-offset: 3px;
	border-top-left-radius: 40px;
	border-top-right-radius: 48px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
}

/*
 * The description is always present; only its height and opacity animate.
 * grid-template-rows 0fr -> 1fr is what makes an auto-height reveal
 * animatable at all — max-height would need a magic number that clips long
 * copy at narrow widths.
 */
.addictionCardReveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.35s var(--ease), opacity 0.3s var(--ease);
}

.addictionCardReveal > * {
	overflow: hidden;
	min-height: 0;
}

.addictionsGridItem:hover .addictionCardReveal,
.addictionsGridItem:focus-within .addictionCardReveal {
	grid-template-rows: 1fr;
	opacity: 1;
}

.addictionCardText {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
	line-height: 1.5;
}

/* --------------------------------------------------------------- Small */

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

/*
 * No hover on a touch screen, so the description would never be reachable.
 * There it is simply always visible and the card grows to fit.
 */
@media (hover: none) {
	.addictionCard {
		aspect-ratio: auto;
		min-height: 420px;
	}

	.addictionCard::after {
		background: linear-gradient(
			to top,
			rgba(18, 49, 44, 0.93) 0%,
			rgba(18, 49, 44, 0.72) 55%,
			rgba(18, 49, 44, 0.3) 100%
		);
	}

	.addictionCardReveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}

@media (max-width: 600px) {
	.addictionsGrid {
		grid-template-columns: minmax(0, 1fr);
	}
}