/* Long-form pages (Answers, cost guide), About face panel and sky coverage (audit P1-4, P1-8, P1-10, P2-1).
   Loads after components.css. Text on sky always sits on a cream or yellow plate: ink on sky is only 4.46:1. */

/* Full-bleed bands paint past their section box; clip at the page edge so nothing scrolls sideways. */
.hm-page { overflow-x: clip; }

/* ---------- FAQ band: the whole band is sky, the prop sits straight on it (P1-10) ---------- */
.hm-faq {
	position: relative;
	isolation: isolate;
	padding-bottom: var(--hm-section);
	--hm-faq-prop: url("../brand/props-inked/tv.svg");
}
.hm-faq::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background:
		url("../brand/fx/cloud-2.svg") 4% 14% / clamp(7rem, 14vw, 13rem) auto no-repeat,
		url("../brand/fx/cloud-3.svg") 97% 86% / clamp(6rem, 12vw, 11rem) auto no-repeat,
		var(--hm-halftone-light) 0 0 / 9px 9px,
		var(--hm-sky-ground);
	border-block: var(--hm-line-lg);
	pointer-events: none;
}
.hm-faq .hm-section__intro {
	padding: .8rem 1rem;
	background: var(--hm-paper);
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
	color: var(--hm-ink);
}
.hm-faq .hm-section__intro p:last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
	.hm-faq::after {
		border: 0;
		background:
			var(--hm-faq-prop) 50% 56% / 58% auto no-repeat,
			var(--hm-fx-burst) 50% 54% / 96% auto no-repeat;
	}
}
/* One distinct prop per page (P2-1): the inked TV stays the default only where nothing else uses it. */
.hm-page--home .hm-faq { --hm-faq-prop: url("../brand/props-inked/hdmi-cable.svg"); }
.hm-page--pricing .hm-faq { --hm-faq-prop: url("../brand/props-inked/wall-mount.svg"); }
.hm-page--tv-mounting .hm-faq { --hm-faq-prop: url("../brand/props-inked/drill.svg"); }
.hm-page--about .hm-faq { --hm-faq-prop: url("../brand/props-inked/tape-measure.svg"); }
.hm-page--cost-guide .hm-faq { --hm-faq-prop: url("../brand/props-inked/calendar.svg"); }
:is(.hm-page--area-cane-bay, .hm-page--area-nexton, .hm-page--area-carnes-crossroads) .hm-faq { --hm-faq-prop: url("../brand/props-inked/check-burst.svg"); }

/* ---------- About: whole face at native aspect, never upscaled (P1-4) ---------- */
.hm-about__art {
	container-type: inline-size;
	min-height: 0;
	align-items: end;
	justify-items: center;
	background:
		url("../brand/fx/cloud-1.svg") 6% 8% / 34% auto no-repeat,
		url("../brand/fx/cloud-4.svg") 98% 3% / 28% auto no-repeat,
		var(--hm-sky-ground);
}
.hm-about__art::after {
	inset: 0;
	--hm-face-w: min(100cqw, 700px);
	background: repeating-conic-gradient(from 0deg at calc(50% + .11 * var(--hm-face-w)) calc(100% - .63 * var(--hm-face-w)), color-mix(in srgb, var(--hm-cream) 70%, transparent) 0deg 4deg, transparent 4deg 13deg);
	-webkit-mask: radial-gradient(circle at calc(50% + .11 * var(--hm-face-w)) calc(100% - .63 * var(--hm-face-w)), #000 0 calc(.3 * var(--hm-face-w)), transparent calc(.75 * var(--hm-face-w)));
	mask: radial-gradient(circle at calc(50% + .11 * var(--hm-face-w)) calc(100% - .63 * var(--hm-face-w)), #000 0 calc(.3 * var(--hm-face-w)), transparent calc(.75 * var(--hm-face-w)));
}
.hm-about .hm-about__img {
	position: relative;
	inset: auto;
	width: 100%;
	max-width: 700px; /* natural width of mike-face: never rendered larger at DPR 1 */
	height: auto;
	max-height: none;
	aspect-ratio: 700 / 772;
	object-fit: contain;
	object-position: 50% 100%;
}

/* ---------- Long-form body: cream question panels on a sky field (P1-8) ---------- */
.hm-lf {
	position: relative;
	isolation: isolate;
	padding: calc(var(--hm-section) + 1.25rem) var(--hm-gutter) var(--hm-section);
	border-bottom: var(--hm-line-lg);
}
.hm-lf::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		var(--hm-halftone-light) 0 0 / 9px 9px,
		linear-gradient(90deg, var(--hm-sky-deep), var(--hm-sky) 16%, var(--hm-sky-light) 50%, var(--hm-sky) 84%, var(--hm-sky-deep));
	pointer-events: none;
}
.hm-lf > * { max-width: 50rem; margin-inline: auto; }

/* Panels: the jump list and every question. */
.hm-lf-jump, .hm-lf-q {
	position: relative;
	margin-bottom: 2.75rem;
	padding: 0 clamp(1.1rem, 4vw, 2.4rem) clamp(1.1rem, 3vw, 1.8rem);
	background: var(--hm-paper) var(--hm-paper-image);
	border: var(--hm-line-lg);
	border-radius: var(--hm-radius-box);
	box-shadow: var(--hm-backplate-sm);
	color: var(--hm-ink);
}
.hm-lf-jump { max-width: 72rem; }
.hm-lf-q > :last-child, .hm-lf-jump > :last-child { margin-bottom: 0; }

/* Yellow tab on the panel's top edge: the jump label and every question H2. */
.hm-lf-q > h2, .hm-lf-jump > .hm-tab {
	position: relative;
	isolation: isolate;
	display: inline-block;
	max-width: 100%;
	margin: 0 0 .35rem -.35rem;
	padding: .34em .75em .28em;
	font-family: var(--hm-font-display);
	font-weight: 400;
	font-size: clamp(1.35rem, 1.05rem + 1vw, 1.95rem);
	line-height: 1.02;
	letter-spacing: .03em;
	color: var(--hm-ink);
	text-wrap: balance;
	transform: translateY(-50%) rotate(-1.5deg);
	scroll-margin-top: calc(var(--hm-header-h) + 2.5rem);
}
.hm-lf-q > h2::before, .hm-lf-jump > .hm-tab::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow);
	border: var(--hm-line);
	box-shadow: 4px 4px 0 var(--hm-ink);
	transform: skewX(-10deg);
}
.hm-lf-jump > .hm-tab { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.hm-lf-q > h2 + * { margin-top: -.35em; }

/* Jump list: two columns at 1000px and up. */
.hm-lf-jump ul { margin: 0; padding: 0 0 0 1.1rem; list-style: none; }
.hm-lf-jump li { position: relative; margin: 0; padding: .32rem 0; break-inside: avoid; }
.hm-lf-jump li::before { content: ""; position: absolute; left: -1.1rem; top: .78em; width: .55rem; height: .55rem; background: var(--hm-orange); border: 2px solid var(--hm-ink); transform: rotate(45deg); }
.hm-lf-jump a { color: var(--hm-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.hm-lf-jump a:hover { text-decoration-color: var(--hm-orange); }
@media (min-width: 1000px) {
	.hm-lf-jump ul { columns: 2; column-gap: 3rem; }
}

/* Body type inside panels. */
.hm-lf-q p, .hm-lf-q li { font-size: var(--hm-fs-body); line-height: 1.6; }
.hm-lf-q ul, .hm-lf-q ol { padding-left: 1.25rem; }
.hm-lf-q li { margin-bottom: .4em; }
.hm-lf-q a { color: var(--hm-ink); text-decoration-thickness: 2px; text-underline-offset: .16em; }

/* Cost tables: ink-bordered cream panels with a yellow head row. */
.hm-lf-q .wp-block-table { margin: 1.25rem 0; overflow-x: auto; }
.hm-lf-q .wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--hm-cream);
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
	overflow: hidden;
	font-size: 1rem;
}
.hm-lf-q .wp-block-table th {
	padding: .6rem .8rem;
	background: var(--hm-halftone-yellow) 0 0 / 6px 6px, var(--hm-yellow);
	border: 0;
	border-bottom: var(--hm-line);
	font-family: var(--hm-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	letter-spacing: .03em;
	text-align: left;
	color: var(--hm-ink);
}
.hm-lf-q .wp-block-table td { padding: .6rem .8rem; border: 0; border-top: 2px dashed color-mix(in srgb, var(--hm-ink) 22%, transparent); vertical-align: top; line-height: 1.45; }
.hm-lf-q .wp-block-table tr:first-child td { border-top: 0; }
.hm-lf-q .wp-block-table td:nth-child(2) { font-weight: 800; min-width: 5.5rem; }
.hm-lf-q .wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--hm-paper) 70%, transparent); }
.hm-lf-q .wp-block-table figcaption { margin-top: .6rem; font-size: .875rem; color: var(--hm-ink); text-align: left; }
@media (max-width: 599px) {
	.hm-lf-q .wp-block-table th, .hm-lf-q .wp-block-table td { padding: .5rem .55rem; font-size: .95rem; }
}

/* Comic break every 3 to 4 questions: an inked prop on a burst, straight on the sky, beside a speech card. */
.hm-lf-break {
	--hm-lf-prop: url("../brand/props-inked/stud-finder.svg");
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: 1rem;
	max-width: 62rem;
	min-height: clamp(12rem, 22vw, 17rem);
	margin: 0 auto 3rem;
}
.hm-lf-break::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	align-self: stretch;
	min-height: 12rem;
	background:
		var(--hm-lf-prop) 50% 52% / auto 58% no-repeat,
		var(--hm-fx-burst) 50% 50% / contain no-repeat;
}
.hm-lf-break::after {
	content: "";
	position: absolute;
	inset: -1rem -2rem;
	z-index: -1;
	background:
		url("../brand/fx/cloud-1.svg") 0 0 / clamp(6rem, 12vw, 10rem) auto no-repeat,
		url("../brand/fx/cloud-3.svg") 100% 100% / clamp(5rem, 10vw, 9rem) auto no-repeat;
	pointer-events: none;
}
.hm-lf-break > .hm-lf-speech {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	max-width: 26rem;
	margin: 0;
	padding: 1rem 1.25rem 1.2rem;
	background: var(--hm-paper);
	border: var(--hm-line);
	border-radius: var(--hm-radius-box);
	box-shadow: var(--hm-backplate);
	font-family: var(--hm-font-voice);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	text-align: center;
	text-wrap: balance;
	color: var(--hm-ink);
	transform: rotate(-3deg);
}
.hm-lf-break--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.hm-lf-break--flip::before { grid-column: 2; }
.hm-lf-break--flip > .hm-lf-speech { grid-column: 1; justify-self: end; transform: rotate(2.5deg); }
.hm-lf-break--level { --hm-lf-prop: url("../brand/props-inked/level.svg"); }
.hm-lf-break--level::before { background-size: 78% auto, contain; }
.hm-lf-break--hdmi { --hm-lf-prop: url("../brand/props-inked/hdmi-cable.svg"); }
.hm-lf-break--drill { --hm-lf-prop: url("../brand/props-inked/drill.svg"); }
.hm-lf-break--tape { --hm-lf-prop: url("../brand/props-inked/tape-measure.svg"); }
@media (max-width: 699px) {
	.hm-lf-break, .hm-lf-break--flip { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
	.hm-lf-break::before, .hm-lf-break--flip::before { grid-column: 1; grid-row: 1; min-height: 10.5rem; }
	.hm-lf-break > .hm-lf-speech, .hm-lf-break--flip > .hm-lf-speech { grid-column: 1; grid-row: 2; justify-self: center; }
}

/* Two columns of question panels at 1200px and up: keeps a readable measure without a 45 percent sky page.
   Breaks fall after an even panel count, so pairs stay aligned and the reading order matches the DOM. */
@media (min-width: 1200px) {
	.hm-lf { display: grid; grid-template-columns: repeat(2, minmax(0, 37rem)); justify-content: center; column-gap: 2rem; align-items: start; }
	.hm-lf > * { max-width: none; margin-inline: 0; }
	.hm-lf > .hm-lf-jump, .hm-lf > .hm-lf-break, .hm-lf > .hm-lf-q:has(.wp-block-table), .hm-page--cost-guide .hm-lf > .hm-lf-q:first-child { grid-column: 1 / -1; }
	.hm-lf > .hm-lf-break { width: 100%; max-width: 62rem; justify-self: center; }
	.hm-page--answers .hm-lf > .hm-lf-q:last-child { grid-column: 1 / -1; } /* 23 answers: the last one sits alone */
}