/*
 * detox.css — the "What We Do" intro and 2x2 feature grid.
 *
 * Figma: "our standard" frame, node 45:1588. The artboard frame is 1263px
 * wide against this site's 1280px column, so its pixel values carry over
 * essentially 1:1 and are used here as measured rather than rescaled.
 *
 * Every dimension below was read off the rendered artboard, not its layer
 * boxes — the layer metadata describes a 528x335 rectangle per quadrant,
 * which is the teal backing layer, not the card the reader actually sees.
 * What renders is:
 *
 *   27px │ 591px card │ 27px │ 591px card │ 27px     = 1263px
 *
 * with the same 27px rhythm vertically. That one value is the grid gap, the
 * grid's outer padding, the card corner radius, and the distance the teal
 * layer is offset — hence the single --detox-edge custom property.
 *
 * The teal layer sits behind each card, shifted 27px diagonally *outward*
 * from the grid centre, so it shows only as an L-shaped sliver along the two
 * outer edges (.detoxCard::before). The card face itself is --surface-deep.
 *
 * The light shape around the centre badge is not a notch cut into the cards:
 * it is an opaque 230x230 rounded square (radius 87px) painted on top of
 * where the four corners meet. Its rounded corners are what produce the
 * concave curve the cards appear to have. Drawing it as a plate rather than
 * masking four separate cards keeps the curve continuous by construction.
 */

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

.detoxInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	padding-block: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

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

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

.detoxTitle {
	margin-top: clamp(12px, 1.3vw, 20px);
	max-width: 21em;
	font-size: 42px;
	line-height: 1.364;
	font-weight: 400;
	text-transform: capitalize;
	text-wrap: balance;
}

.detoxTitle span {
	color: inherit;
}

.detoxIntro {
	margin-top: clamp(16px, 1.8vw, 28px);
	max-width: 980px;
	font-family: var(--font-body);
	font-size: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);
	line-height: 1.625;
	color: var(--ink-muted);
}

/* -------------------------------------------------------- Feature grid */

.detoxGridWrap {
	position: relative;
	width: 100%;
	margin-top: clamp(48px, 5.4vw, 96px);
	/*
	 * Gives the teal slivers a stacking context to sit in. They are drawn at
	 * z-index -1 (see .detoxCard::before); without a context of their own the
	 * nearest one is the root, and they would paint underneath .detox's own
	 * background instead of on top of it — invisible.
	 */
	isolation: isolate;
}

.detoxGrid {
	--detox-edge: 27px;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--detox-edge);
	/* The teal layer overhangs each card by --detox-edge; this padding is the
	   room it overhangs into, so the section still ends at the column edge. */
	padding: var(--detox-edge);
	margin: 0;
	list-style: none;
}

.detoxCard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	/* 413px against the artboard's 1263px frame. */
	min-height: clamp(320px, 32.7vw, 418px);
	padding: clamp(32px, 5.3vw, 68px);
	border-radius: var(--detox-edge);
	color: var(--white);
	text-align: left;
	background: var(--surface-deep);
}

/*
 * The teal sliver behind each card. z-index -1 puts it behind the card's own
 * background, which works because .detoxCard is only position:relative with
 * z-index auto and so starts no stacking context of its own — do not add
 * isolation or a z-index here without moving this to a real element.
 *
 * Solid accent teal under the same 60%-opacity organic texture Figma uses
 * (assets/images/detox-card-texture.webp — the source PNG's alpha channel is
 * pre-multiplied by that 60% at build time, so a plain background-image
 * reproduces the composite with no CSS opacity trick). The texture is shown
 * at a fixed 1024px scale rather than stretched, so the sliver catches a
 * slice of the pattern instead of a flat fill.
 */
.detoxCard::before {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: inherit;
	background-color: var(--accent);
	background-image: url("../images/detox-card-texture.webp");
	background-size: 1024px 1024px;
	background-position: top left;
	background-repeat: no-repeat;
}

/* Each sliver is offset away from the grid centre, so it shows along the two
   edges that face the section's outer corner. inset is top/right/bottom/left. */
.detoxGrid > .detoxCard:nth-child(1)::before {
	inset: calc(var(--detox-edge) * -1) var(--detox-edge) var(--detox-edge) calc(var(--detox-edge) * -1);
}

.detoxGrid > .detoxCard:nth-child(2)::before {
	inset: calc(var(--detox-edge) * -1) calc(var(--detox-edge) * -1) var(--detox-edge) var(--detox-edge);
}

.detoxGrid > .detoxCard:nth-child(3)::before {
	inset: var(--detox-edge) var(--detox-edge) calc(var(--detox-edge) * -1) calc(var(--detox-edge) * -1);
}

.detoxGrid > .detoxCard:nth-child(4)::before {
	inset: var(--detox-edge) calc(var(--detox-edge) * -1) calc(var(--detox-edge) * -1) var(--detox-edge);
}

/* The two right-column cards mirror their content away from the centre
   badge — icon, heading and body all flip to the right, matching the
   artboard exactly (nodes 45:1633, 45:1667). */
.detoxCard:nth-child(2n) {
	align-items: flex-end;
	text-align: right;
}

.detoxFeatureIcon {
	flex: 0 0 auto;
	width: auto;
	height: 60px;
	color: var(--white);
}

.detoxCardTitle {
	margin-top: 32px;
	/* Figma gives the title a 376px measure and the body 360px. Both keep the
	   copy clear of the centre plate, which reaches ~101px into each card's
	   inner corner — widen either and the last line runs under it. */
	max-width: 376px;
	font-size: 30px;
	line-height: 1.267;
	font-weight: 400;
	text-transform: capitalize;
	color: var(--white);
}

.detoxCardText {
	margin-top: 24px;
	max-width: 360px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	/* Figma's own #dde7dd on --surface-deep measures 9.2:1. */
	color: var(--surface-frame);
}

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

/*
 * .detoxBadge is the light plate, not the circle — it is what cuts the
 * rounded-square hole the four cards appear to curve around. The teal circle
 * is .detoxBadgeDisc inside it, and the gap between the two is the halo ring.
 */
.detoxBadge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 230px;
	height: 230px;
	border-radius: 87px;
	background: var(--surface-frame);
}

.detoxBadgeDisc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 179px;
	height: 179px;
	border-radius: 50%;
	/*
	 * Flat --accent-deep rather than the textured teal the artboard puts here.
	 * The label is 18px normal weight, so it needs 4.5:1, and the texture's
	 * light swirls run straight behind the words — sampled off the artboard
	 * render they bottom out at 2.03:1. --accent-deep matches the textured
	 * circle's median tone (4.94:1 measured) and holds 5.01:1 everywhere.
	 */
	background: var(--accent-deep);
}

.detoxBadgeText {
	max-width: 98px;
	font-size: 18px;
	line-height: 1.45;
	font-weight: 400;
	text-align: center;
	color: #fff;
}

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

@media (max-width: 900px) {
	/*
	 * The badge only works centred on the gap between four cards; once the
	 * grid drops to one column there is no gap for it to sit in, so it moves
	 * inline above the cards instead of floating mid-layout. Its plate is the
	 * section's own background colour, so inline it simply reads as spacing
	 * around the circle.
	 */
	.detoxGrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.detoxCard,
	.detoxCard:nth-child(2n) {
		align-items: flex-start;
		text-align: left;
	}

	/* One column has no outward diagonal to speak of, so every sliver settles
	   on the same top-left edge rather than alternating per row. */
	.detoxGrid > .detoxCard:nth-child(n)::before {
		inset: calc(var(--detox-edge) * -1) var(--detox-edge) var(--detox-edge) calc(var(--detox-edge) * -1);
	}

	.detoxBadge {
		position: static;
		transform: none;
		order: -1;
		margin: 0 auto;
	}

	.detoxGridWrap {
		display: flex;
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.detoxTitle {
		font-size: 32px;
		line-height: 1.264;
	}

	.detoxBadgeDisc {
		width: 129px;
		height: 129px;
	}

	.detoxGridWrap {
		margin-top: 0;
	}

	.detoxGrid {
		--detox-edge: 10px;
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.detoxCard {
		padding: 28px 24px;
	}

	.detoxCardTitle {
		font-size: 26px;
	}
}