/* Loaded on page-treatment-category.php and page-treatment.php (inc/onsil/enqueue.php).
   Category pages render entirely from shared partials (page.css/shared.css) — this file only
   covers the treatment DETAIL page's bespoke hero split; every other section on both templates
   reuses partials already styled elsewhere. */

/* ── treat-hero — treatment-detail.md §2: product image left (610×665, bg #e2e0db — the
   spec's own --color-bg-image token, a page-local placeholder color with no shared-token
   equivalent), copy right (en-name, h1 title, subtitle, body, tag pills). ── */

/* audit-6: text column anchors at y=161 (100px section pad + 61px), not vertically centred on
   the media — and stops at 640px, not the leftover 1fr flex width (750px). The 610×640 pair
   leaves the node's own dead space to the right rather than stretching the body to the wrap's
   far edge. (nuviju's node measures 660 for this same column — within tolerance of 640.) */
.onsil-treat-hero__grid {
	display: grid;
	grid-template-columns: 610px 640px;
	align-items: start;
	gap: 80px;
}

.onsil-treat-hero__media {
	background-color: #e2e0db;
	height: 665px;
	overflow: hidden;
	/* audit-6: every route's node insets the packshot inside the box with margins on all sides
	   (ulthera 5.1%/9.1%, botulinum 8.6%/31.7%, nuviju 84%×78%, gouri 11%/23%) — no shared field
	   carries per-image margins, so a single contain-friendly padding is used everywhere; the
	   object-fit switch below is what actually fixes the crop (botulinum's landscape photo was
	   cut to ~46% of its height at 2.2× under `cover`). */
	padding: 32px;
}

.onsil-treat-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.onsil-treat-hero__en-name {
	/* audit-6: node is Pretendard, not the Libertinus display face. */
	font-family: var(--f-ui), sans-serif;
	font-size: 16px; /* treatment-detail.md typography table: "En-name 16px Regular, #6b6257" */
	letter-spacing: .04em;
	color: var(--c-muted);
}

.onsil-treat-hero__body {
	padding-top: 61px; /* audit-6: 100 (section pad) + 61 = the node's 161px text anchor */
}

/* .onsil-h3 (shared.css) already carries the 30px/38 Medium ink spec — compounded on the
   element (class="onsil-h3 onsil-treat-hero__title"), so only hero-specific spacing lives here. */
.onsil-treat-hero__title {
	margin-top: 12px;
}

.onsil-treat-hero__subtitle {
	margin-top: 16px;
	font-family: var(--f-ui), sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.4;
	color: var(--c-muted);
}

.onsil-treat-hero__text {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.onsil-treat-hero__text p {
	font-family: var(--f-ui), var(--f-body), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-muted); /* treatment-detail.md: "Hero body 16px Regular, #6b6257" */
}

.onsil-treat-hero__tags {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.onsil-treat-hero__tag {
	border: 1px solid;
	border-color: var(--c-line);
	border-radius: var(--r-pill);
	padding: 7px 20px;
	font-family: var(--f-ui), var(--f-body), sans-serif;
	font-size: 16px;
	color: var(--c-muted);
}

@media (max-width: 768px) {
	.onsil-treat-hero__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.onsil-treat-hero__body {
		padding-top: 0; /* audit-6: the 161px PC anchor is a header-offset artefact of the
		                   two-column grid; single-column M has no such gap in the node. */
	}

	.onsil-treat-hero__media {
		height: auto;
		aspect-ratio: 375 / 400;
		padding: 16px;
	}

	/* audit-6: no mobile typography existed at all — the build shipped desktop sizes verbatim.
	   Figma M: 13px en-name, 22px title at 1.3 line-height, 16px subtitle/1.6, 14px body,
	   12px pills h30 pad 5/10 gap 5. (--t-h3 is already 22px at this breakpoint via base.css;
	   only the line-height needs overriding here — .onsil-h3's 38px is a fixed PC value.) */
	.onsil-treat-hero__en-name {
		font-size: 13px;
	}

	.onsil-treat-hero__title {
		margin-top: 8px;
		line-height: 1.3;
	}

	.onsil-treat-hero__subtitle {
		margin-top: 10px;
		font-size: 16px;
		line-height: 1.6;
	}

	.onsil-treat-hero__text {
		margin-top: 16px;
	}

	.onsil-treat-hero__text p {
		font-size: 14px;
	}

	.onsil-treat-hero__tags {
		gap: 5px;
	}

	.onsil-treat-hero__tag {
		padding: 5px 10px;
		font-size: 12px;
	}
}