/* Content Manager Pro — Study Layout Engine (PHASE 15A1 foundation +
 * PHASE 15A+ enhancement patch)
 *
 * Purely additive on top of hpcm-frontend.css (loaded as a dependency, so
 * it always cascades after it). Everything here is scoped under
 * .hpcm-study-layout so it can never affect archive pages, widgets, or any
 * markup outside a single study article. No new content blocks — layout
 * and typography only.
 *
 * PHASE 15A+ adds: finer visual hierarchy, fluid type across every device
 * width, code block styling, image/figure presentation, list and
 * blockquote refinement, table polish, and granular mobile tuning
 * (320/360/390/412/480px). No existing rule below was removed or renamed —
 * every change either extends an existing selector's declarations or adds
 * a new selector alongside it. No JavaScript, no new markup, no CLS risk:
 * every rule targets elements the existing renderer already outputs.
 */

.hpcm-study-layout {
	/* Declares this subtree as light-only, so Chrome/mobile browsers'
	 * "auto dark theme for web content" never repaints it — see the
	 * matching <meta name="color-scheme"> tag in class-hpcm-reading-
	 * experience.php for the full explanation. */
	color-scheme: light;

	--hpcm-study-max-width: 960px;
	--hpcm-study-wide-max-width: 1180px;
	--hpcm-study-gutter: clamp(16px, 4vw, 48px);

	/* PHASE 15A+ — fluid type + vertical rhythm, additive. */
	--hpcm-study-font-size: clamp(1rem, 0.94rem + 0.3vw, 1.14rem);
	--hpcm-study-rhythm: clamp(1.1em, 1em + .5vw, 1.5em);
}

.hpcm-study-layout .hpcm-study-container {
	box-sizing: border-box;
	max-width: var(--hpcm-study-max-width);
	margin: 0 auto;
	padding: 0 var(--hpcm-study-gutter);
}

/* Tablet: a touch more breathing room. */
@media (min-width: 783px) {
	.hpcm-study-layout .hpcm-study-container {
		padding: 0 var(--hpcm-study-gutter);
	}
}

/* Ultra-wide screens: let the reading column widen slightly but never
 * sprawl edge-to-edge — long lines hurt reading flow. */
@media (min-width: 1600px) {
	.hpcm-study-layout .hpcm-study-container {
		max-width: var(--hpcm-study-wide-max-width);
	}
}

/* ---------------- Typography hierarchy ---------------- */

.hpcm-study-layout .hpcm-content-body {
	line-height: 1.85;
	/* PHASE 15A+ — premium typography tuning, additive. */
	font-size: var(--hpcm-study-font-size);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Ultra-premium refresh: each H2 is numbered as a "Waypoint" on the
	 * study trail — a real sequence readers move through, so the count
	 * carries information rather than decorating. */
	counter-reset: hpcm-waypoint;
}

/* Custom text-selection color — a small but deliberate premium touch. */
.hpcm-study-layout .hpcm-content-body ::selection {
	background: rgba(185, 121, 58, .32);
	color: #1c2b22 !important;
}

/* Editorial drop cap on the article's opening paragraph. Falls back
 * silently to a plain first line on scripts/browsers where ::first-letter
 * doesn't apply cleanly — no layout risk either way. */
.hpcm-study-layout .hpcm-content-body > p:first-of-type::first-letter {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 600;
	font-size: 3.4em;
	line-height: .82;
	float: left;
	padding: .04em .08em 0 0;
	color: #1f6b4a !important;
}

.hpcm-study-layout .hpcm-content-body h1,
.hpcm-study-layout .hpcm-content-body h2,
.hpcm-study-layout .hpcm-content-body h3,
.hpcm-study-layout .hpcm-content-body h4 {
	font-family: 'Source Serif 4', Georgia, serif;
	line-height: 1.3;
	margin-top: var(--hpcm-study-rhythm, 2.1em);
	margin-bottom: .7em;
	/* PHASE 15A+ — additive: keeps headings from breaking mid-phrase and
	 * gives anchor jumps (if ever added later) breathing room; no visual
	 * change on browsers that don't support these yet. */
	text-wrap: balance;
	scroll-margin-top: 1.5em;
}

.hpcm-study-layout .hpcm-content-body > h1:first-child,
.hpcm-study-layout .hpcm-content-body > h2:first-child,
.hpcm-study-layout .hpcm-content-body > h3:first-child {
	margin-top: 0;
}

/* PHASE 15A+ — section separation: a quiet rhythm break before each new H2
 * "section" (but never the first one), without introducing any new
 * markup or a visible "card" boundary. */
.hpcm-study-layout .hpcm-content-body > h2:not(:first-child) {
	margin-top: calc(var(--hpcm-study-rhythm, 2.1em) * 1.4);
	padding-top: var(--hpcm-study-rhythm, 2.1em);
	border-top: 1px dashed rgba(28, 43, 34, .18);
}

/* Ultra-premium refresh: a "Waypoint NN" marker above every top-level H2,
 * reusing the mountain-trail language already established by the Hero and
 * TOC. Pure CSS counters — no new markup, no risk if content already has
 * its own numbering. */
.hpcm-study-layout .hpcm-content-body > h2 {
	counter-increment: hpcm-waypoint;
}

.hpcm-study-layout .hpcm-content-body > h2::before {
	content: "Waypoint " counter(hpcm-waypoint, decimal-leading-zero);
	display: block;
	font-family: 'IBM Plex Mono', ui-monospace, monospace;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #b9793a !important;
	margin-bottom: .5em;
}

.hpcm-study-layout .hpcm-content-body h1 {
	font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.4rem);
	letter-spacing: -.01em;
}

.hpcm-study-layout .hpcm-content-body h2 {
	font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
	letter-spacing: -.01em;
}

.hpcm-study-layout .hpcm-content-body h3 {
	font-size: clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
}

.hpcm-study-layout .hpcm-content-body h4 {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.hpcm-study-layout .hpcm-content-body p {
	margin: 0 0 var(--hpcm-study-rhythm, 1.35em);
	max-width: 72ch;
	/* PHASE 15A+ — reduces short dangling last lines / lonely first lines
	 * on browsers that support it; no effect elsewhere. */
	orphans: 3;
	widows: 3;
}

.hpcm-study-layout .hpcm-content-body ul,
.hpcm-study-layout .hpcm-content-body ol {
	margin: 0 0 var(--hpcm-study-rhythm, 1.35em);
	padding-left: 1.4em;
}

.hpcm-study-layout .hpcm-content-body li {
	margin-bottom: .5em;
	/* PHASE 15A+ — extra breathing room between the marker and the text
	 * improves scanning without changing indentation/markup. */
	padding-left: .2em;
}

/* PHASE 15A+ — subtle premium marker colour, additive. */
.hpcm-study-layout .hpcm-content-body ul li::marker {
	color: #b9793a !important;
}

.hpcm-study-layout .hpcm-content-body ol li::marker {
	color: #1c2b22 !important;
	font-weight: 700;
}

.hpcm-study-layout .hpcm-content-body li > ul,
.hpcm-study-layout .hpcm-content-body li > ol {
	margin-top: .5em;
	margin-bottom: 0;
}

.hpcm-study-layout .hpcm-content-body blockquote {
	position: relative;
	margin: var(--hpcm-study-rhythm, 1.75em) 0;
	padding: 1em 1.4em 1em 2.4em;
	border-left: 4px solid #b9793a;
	background: rgba(185, 121, 58, .08);
	font-style: italic;
	border-radius: 0 10px 10px 0;
}

/* PHASE 15A+ — decorative quote glyph, purely presentational, additive. */
.hpcm-study-layout .hpcm-content-body blockquote::before {
	content: "\201C";
	position: absolute;
	top: .05em;
	left: .5em;
	font-size: 1.8em;
	font-style: normal;
	line-height: 1;
	color: #b9793a !important;
	opacity: .6;
}

.hpcm-study-layout .hpcm-content-body blockquote p:last-child {
	margin-bottom: 0;
}

/* ---------------- Code blocks (PHASE 15A+, new) ---------------- */

.hpcm-study-layout .hpcm-content-body pre {
	margin: var(--hpcm-study-rhythm, 1.75em) 0;
	padding: 1em 1.2em;
	background: #123f2b;
	color: #e8f2ea !important;
	border-radius: 10px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	font-size: .92em;
	line-height: 1.6;
	scrollbar-color: #b9793a #123f2b;
	scrollbar-width: thin;
}

.hpcm-study-layout .hpcm-content-body pre::-webkit-scrollbar {
	height: 8px;
}

.hpcm-study-layout .hpcm-content-body pre::-webkit-scrollbar-thumb {
	background: #b9793a;
	border-radius: 999px;
}

.hpcm-study-layout .hpcm-content-body pre code {
	background: none;
	padding: 0;
	color: inherit !important;
	font-size: inherit;
	border-radius: 0;
}

.hpcm-study-layout .hpcm-content-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	background: #f4efe1;
	color: #1c2b22 !important;
	padding: .15em .4em;
	border-radius: 5px;
	font-size: .9em;
	word-break: break-word;
}

/* ---------------- Tables ---------------- */

.hpcm-study-layout .hpcm-content-body table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: var(--hpcm-study-rhythm, 1.75em) 0;
	font-size: .96em;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 10px;
	border: 1px solid #e6ddc9;
	scrollbar-color: #b9793a #f4efe1;
	scrollbar-width: thin;
}

.hpcm-study-layout .hpcm-content-body table::-webkit-scrollbar {
	height: 8px;
}

.hpcm-study-layout .hpcm-content-body table::-webkit-scrollbar-thumb {
	background: #b9793a;
	border-radius: 999px;
}

.hpcm-study-layout .hpcm-content-body table th,
.hpcm-study-layout .hpcm-content-body table td {
	padding: .7em .9em;
	border-bottom: 1px solid #e6ddc9;
	text-align: left;
	vertical-align: top;
}

.hpcm-study-layout .hpcm-content-body table tr:last-child td {
	border-bottom: none;
}

.hpcm-study-layout .hpcm-content-body table th {
	background: #f4efe1;
	font-weight: 700;
}

/* PHASE 15A+ — zebra striping aids row-scanning on wide tables, additive. */
.hpcm-study-layout .hpcm-content-body table tbody tr:nth-child(even) td {
	background: #fdfbf5;
}

/* ---------------- Images & figures (PHASE 15A+, new) ---------------- */

.hpcm-study-layout .hpcm-content-body img {
	border-radius: 10px;
	margin: var(--hpcm-study-rhythm, 1.75em) auto;
	display: block;
	box-shadow: 0 6px 20px rgba(16, 36, 62, .12);
}

.hpcm-study-layout .hpcm-content-body figure {
	margin: var(--hpcm-study-rhythm, 1.75em) 0;
}

.hpcm-study-layout .hpcm-content-body figure img {
	margin-bottom: .6em;
}

.hpcm-study-layout .hpcm-content-body figcaption {
	font-size: .88em;
	text-align: center;
	color: #5a6270 !important;
	font-style: italic;
	line-height: 1.5;
}

/* ---------------- Language-aware rhythm ---------------- */

.hpcm-study-layout.hpcm-study-lang-hi .hpcm-content-body {
	line-height: 2;
}

/* ---------------- Priority accent (metadata-driven, subtle) ---------------- */

.hpcm-study-layout.hpcm-study-priority-high .hpcm-content-body h2,
.hpcm-study-layout.hpcm-study-priority-high .hpcm-content-body h3 {
	border-left: 3px solid #9a2b1f;
	padding-left: .6em;
}

.hpcm-study-layout.hpcm-study-priority-medium .hpcm-content-body h2,
.hpcm-study-layout.hpcm-study-priority-medium .hpcm-content-body h3 {
	border-left: 3px solid #b9793a;
	padding-left: .6em;
}

/* ---------------- Links: comfortable reading + touch targets (PHASE 15A+, new) ---------------- */

.hpcm-study-layout .hpcm-content-body a {
	color: #1f6b4a !important;
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
	/* A larger effective tap target than the visible underline, without
	 * altering surrounding text flow (line-height already provides room). */
	padding: .05em 0;
}

.hpcm-study-layout .hpcm-content-body a:hover,
.hpcm-study-layout .hpcm-content-body a:focus-visible {
	text-decoration-thickness: 2px;
}

/* ---------------- Mobile-first responsive ---------------- */

@media (max-width: 782px) {
	.hpcm-study-layout {
		--hpcm-study-gutter: 18px;
	}
	.hpcm-study-layout .hpcm-content-body p {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.hpcm-study-layout {
		--hpcm-study-gutter: 14px;
	}
	.hpcm-study-layout .hpcm-content-body h1 {
		margin-top: 1.6em;
	}
	.hpcm-study-layout .hpcm-content-body h2,
	.hpcm-study-layout .hpcm-content-body h3 {
		margin-top: 1.8em;
	}
}

/* PHASE 15A+ — granular small-device tuning (412 / 390 / 360 / 320px),
 * additive. Each step trims gutters and rhythm slightly further and keeps
 * the font-size floor comfortable rather than letting clamp() alone
 * shrink it past a readable minimum on the very smallest phones. */

@media (max-width: 412px) {
	.hpcm-study-layout {
		--hpcm-study-gutter: 13px;
	}
	.hpcm-study-layout .hpcm-content-body {
		font-size: 1rem;
		line-height: 1.75;
	}
	.hpcm-study-layout .hpcm-content-body table th,
	.hpcm-study-layout .hpcm-content-body table td {
		padding: .55em .65em;
		font-size: .94em;
	}
}

@media (max-width: 390px) {
	.hpcm-study-layout {
		--hpcm-study-gutter: 12px;
	}
	.hpcm-study-layout .hpcm-content-body blockquote,
	.hpcm-study-layout .hpcm-content-body pre {
		padding-left: 1.1em;
		padding-right: 1.1em;
	}
	.hpcm-study-layout .hpcm-content-body blockquote {
		padding-left: 2em;
	}
}

@media (max-width: 360px) {
	.hpcm-study-layout {
		--hpcm-study-gutter: 11px;
	}
	.hpcm-study-layout .hpcm-content-body {
		font-size: .98rem;
	}
	/* Thumb-friendly: a little extra vertical room around links and list
	 * items, the two most-tapped/scanned elements, on the narrowest phones. */
	.hpcm-study-layout .hpcm-content-body a {
		padding: .1em 0;
	}
	.hpcm-study-layout .hpcm-content-body li {
		margin-bottom: .65em;
	}
}

@media (max-width: 320px) {
	.hpcm-study-layout {
		--hpcm-study-gutter: 10px;
	}
	.hpcm-study-layout .hpcm-content-body {
		font-size: .96rem;
		line-height: 1.7;
	}
	.hpcm-study-layout .hpcm-content-body h1 {
		font-size: 1.55rem;
	}
	.hpcm-study-layout .hpcm-content-body h2 {
		font-size: 1.3rem;
	}
}