/*
 * Insurance guide, `/insurance/` + `/zh/insurance/` (dev-064).
 *
 * The page used to render eight sections in one shape - heading, optional
 * paragraph, bullet list - so the reader could not tell a classification from
 * a process from a checklist, and the contents list dropped three of its
 * anchors. This file gives each kind of content its own structure:
 *
 *   .kl-ins__ways     three ways care is paid      -> parallel tiles
 *   .kl-ins__path     three payment paths          -> numbered rows
 *   .kl-ins__process  direct billing, in order     -> stepped timeline
 *   .kl-ins__plain    common misunderstandings     -> prose with a marker
 *   .kl-ins__checklist what to prepare             -> two-column checklist
 *   scope / partner / the hospital records         -> reference block at the foot
 *
 * Scoped under `.kl-insurance-page` so no other page can be affected, and
 * written entirely against the tokens in `assets/css/tokens.css` - no literal
 * colour or spacing values, per the design direction §3. Loaded by
 * `inc/insurance-page.php`, after `style.css`.
 */

/* ------------------------------------------------------- Page skeleton --- */

/*
 * The prose column keeps the site's reading measure; the contents card sits
 * beside it from 1024px up. Below that the contents card moves to the top of
 * the page (see the narrow rules at the foot of this file) - it used to render
 * after every section, which made it useless exactly where it was needed most.
 */
.kl-insurance-page {
	padding-top: var(--kl-space-7);
	padding-bottom: var(--kl-space-8);
}

@media (min-width: 1024px) {
	.kl-insurance-page {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		grid-template-rows: auto 1fr;
		gap: var(--kl-space-7);
		align-items: start;
	}

	/*
	 * Three children share the page: the reading column, the contents slot and
	 * the reference block. Below 1024px they read in that order - header, then
	 * contents, then the sections. Here the contents slot moves into the right
	 * column and the reference block follows the reading column on the left.
	 */
	.kl-insurance-page > #kl-insurance-read {
		grid-column: 1;
		grid-row: 1;
	}

	.kl-insurance-page > .kl-insurance__toc-slot {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.kl-insurance-page > .kl-insurance__ref {
		grid-column: 1;
		grid-row: 2;
	}
}

/*
 * The reading column (#kl-insurance-read) carries the standing `.kl-prose`
 * class for the site's measure, and an id for the selection: the class alone
 * is not unique on the page (the header row uses `.kl-prose` inside its own
 * container), and P32 looks the reading column up by this id.
 */
#kl-insurance-read {
	min-width: 0;
}

#kl-insurance-read section + section {
	margin-top: var(--kl-space-8);
}

#kl-insurance-read h2,
.kl-ins__block > h2 {
	margin: 0 0 var(--kl-space-3);
}

.kl-insurance-page h2 {
	line-height: var(--kl-leading-tight);
}

.kl-insurance__intro {
	margin: var(--kl-space-3) 0 0;
	max-width: var(--kl-measure);
	color: var(--kl-slate);
	line-height: var(--kl-leading-body);
}

.kl-ins__ways,
.kl-ins__paths,
.kl-ins__process,
.kl-ins__plain,
.kl-ins__checklist {
	margin-top: var(--kl-space-5);
}

/* Prose keeps the site's reading measure; the three-way tile row is a
   comparison and runs the width of the column. */
.kl-ins__paths,
.kl-ins__process,
.kl-ins__plain,
.kl-ins__checklist {
	max-width: var(--kl-measure);
}

/* ------------------------------------------------- Three ways care is paid --- */

.kl-ins__ways {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kl-space-4);
	margin: 0;
}

.kl-ins__way {
	padding: var(--kl-space-5);
	border: 1px solid var(--kl-border);
	border-radius: var(--kl-radius-card);
	background: var(--kl-paper);
}

.kl-ins__way dt {
	margin: 0 0 var(--kl-space-2);
	color: var(--kl-accent);
	font-size: var(--kl-text-md);
	font-weight: var(--kl-weight-semibold);
	line-height: var(--kl-leading-snug);
}

.kl-ins__way dd {
	margin: 0;
	color: var(--kl-slate);
	font-size: var(--kl-text-base);
	line-height: var(--kl-leading-body);
}

/* --------------------------------------------------- Three payment paths --- */

/*
 * Alternatives, not steps: each row is one option the reader picks between, so
 * the row is labelled with a weight of its own rather than with an ordinal.
 */
.kl-ins__path {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: var(--kl-space-5);
	margin: 0;
	padding-top: var(--kl-space-5);
	border-top: 1px solid var(--kl-border);
}

.kl-ins__path:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.kl-ins__path + .kl-ins__path {
	margin-top: var(--kl-space-5);
}

.kl-ins__path dt {
	margin: 0;
	color: var(--kl-ink);
	font-size: var(--kl-text-md);
	font-weight: var(--kl-weight-semibold);
	line-height: var(--kl-leading-snug);
}

.kl-ins__path dd {
	margin: 0;
	max-width: var(--kl-measure);
	color: var(--kl-slate);
	line-height: var(--kl-leading-body);
}

/* -------------------------------------------------- Direct billing steps --- */

/*
 * This one really is a sequence - approval, then the network question, then
 * what is still owed and what can still be refused - so the numbers carry the
 * reading order instead of decorating it.
 */
.kl-ins__process {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: kl-ins-step;
}

.kl-ins__step {
	position: relative;
	counter-increment: kl-ins-step;
	padding-left: var(--kl-space-7);
}

.kl-ins__step + .kl-ins__step {
	margin-top: var(--kl-space-6);
}

/* The spine runs through the markers; it stops at the last one. */
.kl-ins__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: calc(var(--kl-space-6) + var(--kl-space-2));
	bottom: calc(-1 * var(--kl-space-6));
	left: 11px;
	width: 1px;
	background: var(--kl-border-strong);
}

.kl-ins__step::after {
	content: counter(kl-ins-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--kl-accent-ring);
	border-radius: var(--kl-radius-pill);
	background: var(--kl-accent-soft);
	color: var(--kl-accent);
	font-family: var(--kl-font-mono);
	font-size: var(--kl-text-xs);
	font-variant-numeric: tabular-nums;
}

.kl-ins__step-title {
	margin: 0;
	font-size: var(--kl-text-md);
	font-weight: var(--kl-weight-semibold);
	line-height: var(--kl-leading-snug);
}

.kl-ins__step p {
	margin: var(--kl-space-2) 0 0;
	max-width: var(--kl-measure);
	color: var(--kl-slate);
	line-height: var(--kl-leading-body);
}

/* ----------------------------------------------- Misunderstandings, prep --- */

.kl-ins__plain {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: var(--kl-measure);
}

.kl-ins__plain li {
	position: relative;
	padding-left: var(--kl-space-5);
	color: var(--kl-slate);
	line-height: var(--kl-leading-body);
}

.kl-ins__plain li + li {
	margin-top: var(--kl-space-4);
}

/* A teal point, not a bullet: it matches the numbered markers above. */
.kl-ins__plain li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--kl-radius-pill);
	background: var(--kl-accent);
}

.kl-ins__checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kl-space-3) var(--kl-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kl-ins__checklist li {
	position: relative;
	padding-left: var(--kl-space-5);
	color: var(--kl-slate);
	line-height: var(--kl-leading-body);
}

.kl-ins__checklist li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--kl-radius-pill);
	background: var(--kl-accent);
}

/* --------------------------------------------------- Scope and partner --- */

.kl-insurance__scope {
	margin-top: var(--kl-space-7);
}

.kl-insurance__scope-title {
	margin: 0 0 var(--kl-space-4);
	font-size: var(--kl-text-2xl);
}

/* The declaration reuses style.css; only its measure is restated here. */
.kl-insurance__scope .kl-declaration {
	max-width: var(--kl-measure);
}

.kl-ins__block + .kl-ins__block {
	margin-top: var(--kl-space-7);
}

/* -------------------------------------------------- Direct-billing list --- */

.kl-insurance__direct > h2,
.kl-insurance__direct-lede {
	max-width: var(--kl-measure);
}

/*
 * Three up on a wide screen. The records carry a lot of text each, so the
 * measure comes from the card's own padding rather than from --kl-measure.
 */
.kl-insurance__direct-list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kl-insurance__record {
	display: flex;
	flex-direction: column;
	gap: var(--kl-space-2);
	padding: var(--kl-space-4);
}

.kl-insurance__record > p {
	margin: 0;
}

.kl-insurance__record-name {
	line-height: var(--kl-leading-snug);
}

/* The source line sits on the card's floor, so the rows line up across cards. */
.kl-insurance__record-source {
	margin-top: auto;
	padding-top: var(--kl-space-2);
}

/* ------------------------------------------------------------ Narrow --- */

@media (max-width: 1023px) {
	/* The slot sits between the header and the sections at this width. */
	.kl-insurance__toc-slot {
		margin-bottom: var(--kl-space-6);
	}

	.kl-insurance__toc-slot .kl-policy__toc {
		position: static;
		margin-bottom: var(--kl-space-6);
	}

	.kl-insurance__direct-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.kl-ins__ways {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.kl-ins__path {
		grid-template-columns: 1fr;
		gap: var(--kl-space-2);
	}
}

@media (max-width: 640px) {
	.kl-insurance__direct-list,
	.kl-ins__checklist {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.kl-insurance__record {
		padding: var(--kl-space-4);
	}
}

/* ------------------------------------------------------------ Contents --- */

/*
 * Desktop keeps the standing card and pins it. It is scrollable because the
 * page now names every anchor (eight, not five) and must stay on screen.
 */
@media (min-width: 1024px) {
	.kl-insurance__toc-slot .kl-policy__toc {
		max-height: calc(100dvh - var(--kl-space-6));
		overflow-y: auto;
	}
}

/*
 * Below 1024px the card becomes a disclosure: a closed summary costs one row
 * instead of eight, and the list only has to be scrolled once the reader asks
 * for it. `insurance-toc.js` builds the disclosure; without JavaScript the
 * plain list stays, which is what a reader with no script support would want
 * anyway. Every label here is added by the script, so no new copy ships.
 */
.kl-insurance-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kl-space-3);
	padding: var(--kl-space-2) var(--kl-space-1);
	color: var(--kl-ink);
	font-size: var(--kl-text-base);
	font-weight: var(--kl-weight-semibold);
	letter-spacing: var(--kl-tracking-caps);
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

/* One chevron, drawn here, rotating with the disclosure state. */
.kl-insurance-toc__summary::-webkit-details-marker {
	display: none;
}

.kl-insurance-toc__summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--kl-dur-fast) var(--kl-ease);
}

.kl-insurance-toc[open] .kl-insurance-toc__summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.kl-insurance-toc__summary::after {
		transition: none;
	}
}