/*
 * /turf-calculator/ page layout. Loaded only on that page (HTP_UI::enqueue).
 * The page itself is built in Breakdance; these rules restyle its existing
 * elements by their Breakdance element classes (post 1876), so the layout
 * ships as code. If an element is deleted and recreated in Breakdance, its
 * class changes and the matching rule below must be updated.
 *
 *   section 100  hero (badge 101, H1 102)
 *   section 103  content > div 104 > rich-text 106 (intro), shortcode 105 (calculator),
 *                rich-text 107 (prices table, worked example, "How much is turf per m²")
 */

/* ── Hero: compact, so the calculator reaches the first screen ─────── */
body.htp-calc-page .bde-section-1876-100 .section-container {
	height: auto;
	min-height: 0;
	padding: 150px 20px 36px;
	gap: 12px;
}
body.htp-calc-page .bde-badge-1876-101,
body.htp-calc-page .bde-heading-1876-102 {
	margin-top: 0;
}
body.htp-calc-page .bde-badge-1876-101 span {
	font-size: 13px;
	letter-spacing: .02em;
}
body.htp-calc-page .bde-heading-1876-102 {
	font-size: clamp(30px, 4.2vw, 46px);
	line-height: 1.1;
	letter-spacing: -.01em;
}

/* ── Content: calculator beside the explanation ────────────────────── */
body.htp-calc-page .bde-section-1876-103 .section-container {
	padding: 40px 20px 72px;
	align-items: stretch;
	text-align: left;
}
body.htp-calc-page .bde-div-1876-104 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "calc" "intro" "prices";
	gap: 36px;
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	align-items: start;
	text-align: left;
}
body.htp-calc-page .bde-shortcode-1876-105 { grid-area: calc; width: 100%; min-width: 0; }
body.htp-calc-page .bde-rich-text-1876-106 { grid-area: intro; min-width: 0; }
body.htp-calc-page .bde-rich-text-1876-107 { grid-area: prices; min-width: 0; }
body.htp-calc-page .bde-shortcode-1876-105 .twd-turf-calculator {
	max-width: none;
	margin: 0;
}
/* The page H1 already says "Turf Calculator"; the card opens with its description instead. */
body.htp-calc-page .bde-shortcode-1876-105 .twd-tc-title { display: none; }
body.htp-calc-page .bde-shortcode-1876-105 .twd-tc-subtitle { margin-top: 0; font-size: 14px; }

@media (min-width: 1024px) {
	body.htp-calc-page .bde-div-1876-104 {
		grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
		grid-template-areas: "calc intro" "calc prices";
		column-gap: 64px;
		row-gap: 28px;
	}
	/* The calculator stays in view while the prices and explanation scroll past. */
	body.htp-calc-page .bde-shortcode-1876-105 {
		position: sticky;
		top: 112px;
	}
}

/* ── Reading text ──────────────────────────────────────────────────── */
body.htp-calc-page .bde-rich-text-1876-106 p,
body.htp-calc-page .bde-rich-text-1876-107 p {
	max-width: 62ch;
	margin: 0 0 14px;
	font-size: 16.5px;
	line-height: 1.65;
	color: #3d4a42;
	text-align: left;
}
body.htp-calc-page .bde-rich-text-1876-106 p:first-child {
	font-size: 18.5px;
	line-height: 1.55;
	color: var(--htp-ink, #1f2a24);
}
body.htp-calc-page .bde-rich-text-1876-106 a,
body.htp-calc-page .bde-rich-text-1876-107 a {
	color: var(--htp-green, #007d44);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.htp-calc-page .bde-rich-text-1876-107 h2 {
	margin: 8px 0 14px;
	font: 600 clamp(22px, 2.4vw, 27px)/1.25 Poppins, sans-serif;
	color: var(--htp-ink, #1f2a24);
	text-align: left;
	letter-spacing: -.005em;
}
body.htp-calc-page .bde-rich-text-1876-107 h2:not(:first-child) {
	margin-top: 36px;
}

/* ── Price board: the rich-text table, restyled ────────────────────── */
body.htp-calc-page .bde-rich-text-1876-107 table {
	width: 100%;
	max-width: 620px;
	margin: 0 0 18px;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 8px;
	background: transparent;
}
body.htp-calc-page .bde-rich-text-1876-107 thead th {
	padding: 0 18px 2px;
	border: 0;
	background: none;
	font: 600 12px/1.3 Montserrat, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--htp-muted, #5b6a61);
	text-align: left;
}
body.htp-calc-page .bde-rich-text-1876-107 thead th:last-child { text-align: right; white-space: nowrap; }
body.htp-calc-page .bde-rich-text-1876-107 tbody td {
	padding: 16px 18px;
	border: 1px solid var(--htp-line, #d1d5db);
	border-width: 1px 0;
	background: #fff;
	vertical-align: middle;
	text-align: left;
}
body.htp-calc-page .bde-rich-text-1876-107 tbody td:first-child {
	border-left-width: 1px;
	border-radius: 14px 0 0 14px;
}
body.htp-calc-page .bde-rich-text-1876-107 tbody td:last-child {
	border-right-width: 1px;
	border-radius: 0 14px 14px 0;
	text-align: right;
	white-space: nowrap;
	font: 700 22px/1 Poppins, sans-serif;
	color: var(--htp-green, #007d44);
	font-variant-numeric: tabular-nums;
}
body.htp-calc-page .bde-rich-text-1876-107 tbody td:last-child::after {
	content: " / m²";
	font: 500 13px/1 Montserrat, sans-serif;
	color: var(--htp-muted, #5b6a61);
}
body.htp-calc-page .bde-rich-text-1876-107 tbody td:first-child a {
	font: 600 17px/1.3 Poppins, sans-serif;
	color: var(--htp-ink, #1f2a24);
	text-decoration: none;
}
body.htp-calc-page .bde-rich-text-1876-107 tbody td:first-child a:hover,
body.htp-calc-page .bde-rich-text-1876-107 tbody td:first-child a:focus-visible {
	color: var(--htp-green, #007d44);
	text-decoration: underline;
}
/* Worked example: the paragraph straight after the table. */
body.htp-calc-page .bde-rich-text-1876-107 table + p {
	max-width: 620px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--htp-mist, #f2f7f3);
	font-size: 15px;
	color: var(--htp-ink, #1f2a24);
}

/* ── Phones ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	body.htp-calc-page .bde-section-1876-100 .section-container { padding: 118px 16px 24px; }
	body.htp-calc-page .bde-badge-1876-101 { display: none; } /* keep the first screen for the calculator */
	body.htp-calc-page .bde-section-1876-103 .section-container { padding: 20px 16px 56px; }
	body.htp-calc-page .bde-div-1876-104 { gap: 28px; }
	body.htp-calc-page .bde-rich-text-1876-106 p:first-child { font-size: 17px; }
	body.htp-calc-page .bde-rich-text-1876-107 tbody td { padding: 14px 14px; }
	body.htp-calc-page .bde-rich-text-1876-107 tbody td:last-child { font-size: 19px; }
}