/**
 * LHR — in-article conversion blocks (email capture + consult CTA).
 *
 * Pairs with includes/redesign-convert.php. Three panels are injected into
 * singular content: two newsletter captures (.lhr-cvt--intro, .lhr-cvt--mid)
 * and the one-to-one consulting CTA (.lhr-cvt--consult).
 *
 * Design language is the July-2026 contract, unchanged: white or tinted
 * panel on ivory, 1px hairline, square corners, 11px/.16em small-caps
 * kicker in gold, Playfair line, .lhr-input + .lhr-btn--gold primitives.
 * Understated and editorial — these read as a sibling of the existing
 * .lhr-prose-cta panel, never as a popup.
 *
 * This file loads last in the redesign cascade (see redesign-assets.php), so
 * the two-class selectors below beat .lhr-prose / .lhr-rev-overview__content
 * body rules on a tie. Every value falls back to a literal so the panels
 * survive even if the token layer ever fails to load.
 */

/* ------------------------------------------------------------------
 * 1. Panel shell
 * ---------------------------------------------------------------- */

.lhr-redesign .lhr-cvt {
	clear: both;
	margin: clamp(32px, 4vw, 44px) 0;
	padding: clamp(22px, 3.2vw, 30px);
	background: var(--lhr-card, #ffffff);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
	color: var(--lhr-ink-soft, #6e675c);
	text-align: left;
}

/* Kill inherited prose rhythm (.lhr-prose p, .lhr-rev-overview__content p)
   so spacing inside the panel is ours alone. */
.lhr-redesign .lhr-cvt p {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.7;
	color: inherit;
}

.lhr-redesign .lhr-cvt .lhr-cvt__kicker {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

.lhr-redesign .lhr-cvt .lhr-cvt__title {
	margin: 0 0 10px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(21px, 2.4vw, 25px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--lhr-ink, #22201c);
}

.lhr-redesign .lhr-cvt .lhr-cvt__text {
	margin: 0 0 20px;
	max-width: 62ch;
}

/* Hairline under the copy, above the form — the site's rule language. */
.lhr-redesign .lhr-cvt .lhr-cvt__form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin: 0;
}

.lhr-redesign .lhr-cvt .lhr-cvt__field {
	flex: 1 1 260px;
	min-width: 0;
	margin: 0;
}

.lhr-redesign .lhr-cvt .lhr-cvt__input {
	width: 100%;
	height: 48px;
	border-radius: 0;
}

.lhr-redesign .lhr-cvt .lhr-cvt__submit {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 26px;
	border-radius: 0;
	text-decoration: none;
}

/* .lhr-prose a / .lhr-rev-overview__content a underline the CTA link. */
.lhr-redesign .lhr-cvt a.lhr-btn {
	color: #ffffff;
	text-decoration: none;
	text-decoration-color: transparent;
}

.lhr-redesign .lhr-cvt a.lhr-btn:hover,
.lhr-redesign .lhr-cvt a.lhr-btn:focus-visible {
	color: #ffffff;
}

.lhr-redesign .lhr-cvt .lhr-cvt__micro {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-redesign .lhr-cvt .lhr-cvt__action {
	margin: 0;
}

/* ------------------------------------------------------------------
 * 2. Variants
 * ---------------------------------------------------------------- */

/* Compact capture straight after the intro: lighter, tinted, one line of
   copy — it must not interrupt the read. */
.lhr-redesign .lhr-cvt--intro {
	padding: clamp(20px, 2.8vw, 26px);
	background: var(--lhr-panel, #f1ede4);
	border-color: var(--lhr-hairline, #e5dfd2);
}

.lhr-redesign .lhr-cvt--intro .lhr-cvt__title {
	font-size: clamp(19px, 2vw, 22px);
	margin-bottom: 8px;
}

.lhr-redesign .lhr-cvt--intro .lhr-cvt__text {
	margin-bottom: 16px;
	font-size: 15px;
}

.lhr-redesign .lhr-cvt--intro .lhr-cvt__input {
	background: var(--lhr-card, #ffffff);
}

/* Mid-article capture: the full white panel. */
.lhr-redesign .lhr-cvt--mid {
	background: var(--lhr-card, #ffffff);
}

/* Consulting CTA: white panel with a gold rule across the top so the
   money block reads as the end of the piece without shouting. */
.lhr-redesign .lhr-cvt--consult {
	margin-bottom: 0;
	background: var(--lhr-card, #ffffff);
	border-top: 2px solid var(--lhr-gold, #a9885a);
}

.lhr-redesign .lhr-cvt--consult .lhr-cvt__text {
	margin-bottom: 22px;
}

/* ------------------------------------------------------------------
 * 3. Context tweaks
 * ---------------------------------------------------------------- */

/* Inside the hotel review the Overview panel sits on cream and the last
   paragraph rule is zeroed — restore breathing room above the CTA. */
.lhr-redesign .lhr-rev-overview__content .lhr-cvt {
	margin-top: clamp(28px, 3.5vw, 38px);
}

/* The prose column zeroes trailing margins on its last child; the
   consulting panel is that last child on most articles. */
.lhr-redesign .lhr-prose > .lhr-cvt:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * 4. Small screens
 * ---------------------------------------------------------------- */

@media (max-width: 560px) {
	.lhr-redesign .lhr-cvt .lhr-cvt__field,
	.lhr-redesign .lhr-cvt .lhr-cvt__submit {
		flex: 1 1 100%;
	}

	.lhr-redesign .lhr-cvt .lhr-cvt__submit {
		width: 100%;
	}

	.lhr-redesign .lhr-cvt .lhr-cvt__action .lhr-btn {
		display: flex;
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * 5. Print — CTAs are noise on paper.
 * ---------------------------------------------------------------- */

@media print {
	.lhr-cvt {
		display: none !important;
	}
}