/**
 * LHR redesign — Points & Miles section (/points-and-miles/).
 * Template: page-templates/template-points.php. Contract tokens §1; shared
 * primitives from base.css (.lhr-container, .lhr-section, .lhr-section-head,
 * .lhr-eyebrow, .lhr-label, .lhr-btn, .lhr-card, .lhr-media). The full-guide
 * grid reuses the editorial-card component (editorial.css) unchanged.
 *
 * Everything here is scoped .lhr-pm-*. No new visual language: dark image
 * hero + scrim, hairline-framed white cards on cream, letterspaced small
 * caps, Playfair headings, square corners, gold accents.
 */

/* ------------------------------------------------------------------
 * 1. Image hero — contract §5b paint pattern: opaque dark fallback,
 *    plain DOM paint order (bg → img → scrim), NO isolation and NO
 *    z-index on the media layers; only the content lifts on z.
 * ---------------------------------------------------------------- */

.lhr-pm-hero {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--lhr-dark, #191713);
	color: #fff;
	padding-block: clamp(76px, 9.5vw, 136px);
}

/* Two classes: beat `.lhr-redesign img { height: auto }` from base.css.
   The hook is `__photo`, not `__img`: `lhr-pm-hero__img` contains the
   substring `m-hero__img`, which trips the legacy hero guard in
   includes/helpers/page-header.php and forces decoding="async" on the LCP
   image — the first-paint bug contract §5b exists to prevent. Keep in sync
   with template-points.php. */
.lhr-pm-hero .lhr-pm-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lhr-pm-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Matches the homepage hero plate: dark enough to hold white Playfair on
	   the left, clear enough that the photograph still reads on the right.
	   The previous 0.88/0.66/0.28 ramp flattened this (already dark) night
	   shot into a black rectangle. */
	background: linear-gradient(
		to right,
		rgba(25, 23, 19, 0.72) 0%,
		rgba(25, 23, 19, 0.42) 48%,
		rgba(25, 23, 19, 0.08) 100%
	);
}

.lhr-pm-hero__inner {
	position: relative;
	z-index: 2;
	text-align: left;
}

.lhr-pm-hero__eyebrow {
	margin: 0 0 20px;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

/* Two classes: the ink `.lhr-redesign h1` rule in base.css must not win. */
.lhr-pm-hero .lhr-pm-hero__title {
	margin: 0;
	max-width: 760px;
	font-family: var(--lhr-font-serif, 'Playfair Display', serif);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--lhr-cream, #f7f4ee);
}

.lhr-pm-hero__dek {
	margin: 24px 0 0;
	max-width: 620px;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 16.5px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.78);
}

/* Two small-caps jump links on a hairline rule. */
.lhr-pm-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	max-width: 620px;
	margin: 40px 0 0;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.lhr-pm-hero__link {
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: var(--lhr-caps-size, 11px);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track, 0.16em);
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.78);
	transition: color 200ms var(--lhr-ease, ease);
}

.lhr-pm-hero__link:hover,
.lhr-pm-hero__link:focus-visible {
	color: var(--lhr-gold-soft, #cbb48d);
}

/* ------------------------------------------------------------------
 * 2. Shared section rhythm + heading
 * ---------------------------------------------------------------- */

.lhr-pm .lhr-section {
	padding-block: calc(var(--lhr-section, 96px) / 2);
}

.lhr-pm-start {
	padding-top: var(--lhr-section, 96px);
}

.lhr-pm .lhr-pm-heading {
	margin: 0 0 clamp(28px, 4vw, 44px);
	max-width: 660px;
	font-family: var(--lhr-font-serif, 'Playfair Display', serif);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--lhr-ink, #22201c);
}

/* The section-head eyebrow already carries the caps; kill h2 defaults. */
.lhr-pm .lhr-pm-all__eyebrow {
	margin: 0;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: var(--lhr-caps-size, 11px);
	font-weight: 600;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * 3. Start here — three hairline-framed entry-point cards
 * ---------------------------------------------------------------- */

.lhr-pm-start .lhr-section-head {
	margin-bottom: 14px;
}

.lhr-pm-start__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	align-items: start;
}

.lhr-pm-start-card {
	display: flex;
	flex-direction: column;
	padding: 10px;
}

.lhr-pm-start-card__media {
	display: block;
	background: var(--lhr-panel, #f1ede4);
}

/* Two classes: beat `.lhr-redesign img { height: auto }` from base.css. */
.lhr-pm-start-card .lhr-pm-start-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lhr-pm-start-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 12px 14px;
}

/* Numeral + lane label: the "01 · Choose a card" step line. */
.lhr-pm-start-card__step {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
}

.lhr-pm-start-card__num {
	font-family: var(--lhr-font-serif, 'Playfair Display', serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--lhr-gold, #a9885a);
}

.lhr-pm-start-card__label {
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-pm .lhr-pm-start-card__title {
	margin: 0 0 12px;
	font-family: var(--lhr-font-serif, 'Playfair Display', serif);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--lhr-ink, #22201c);
}

.lhr-pm-start-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms var(--lhr-ease, ease);
}

.lhr-pm-start-card__title a:hover,
.lhr-pm-start-card__title a:focus-visible {
	color: var(--lhr-gold, #a9885a);
}

.lhr-pm-start-card__excerpt {
	margin: 0 0 20px;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-pm-start-card__foot {
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
}

/* ------------------------------------------------------------------
 * 4. How we approach points — editorial split + hairline principles
 * ---------------------------------------------------------------- */

.lhr-pm-approach__grid {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.lhr-pm-approach__intro .lhr-pm-heading {
	margin-bottom: 20px;
}

.lhr-pm-approach__copy {
	margin: 0;
	max-width: 420px;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 15px;
	line-height: 1.8;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-pm-principles {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-pm-principle {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 8px 24px;
	margin: 0;
	padding: 24px 0;
	border-bottom: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-pm-principle__label {
	padding-top: 7px;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

/* Serif line — the editorial half of the small-caps/serif pairing. */
.lhr-pm-principle__line {
	display: block;
	min-width: 0;
	font-family: var(--lhr-font-serif, 'Playfair Display', serif);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--lhr-ink, #22201c);
}

/* ------------------------------------------------------------------
 * 5. The cards block — disclosure panel + referral cards
 * ---------------------------------------------------------------- */

.lhr-pm-cards .lhr-pm-heading {
	margin-bottom: clamp(22px, 3vw, 32px);
}

/* Disclosure sits ABOVE the cards, on the tinted panel so it reads as a
   standing notice rather than a footnote. */
.lhr-pm-disclosure {
	background: var(--lhr-panel, #f1ede4);
	border: 1px solid var(--lhr-hairline, #e5dfd2);
	border-radius: 0;
	padding: clamp(24px, 3.4vw, 36px) clamp(22px, 3.4vw, 40px);
	margin-bottom: clamp(24px, 3vw, 36px);
}

.lhr-pm-disclosure__label {
	margin: 0 0 16px;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-gold, #a9885a);
}

.lhr-pm-disclosure__copy {
	margin: 0 0 12px;
	max-width: 84ch;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 14px;
	line-height: 1.75;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-pm-disclosure__copy:last-of-type {
	margin-bottom: 0;
}

/* Statutory UK line — hairline-separated, faint small caps. */
.lhr-pm-disclosure__legal {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-pm-cards__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	align-items: stretch;
}

.lhr-pm-card {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 36px) clamp(26px, 3vw, 34px);
}

.lhr-pm-card__head {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-pm-card__issuer {
	margin: 0 0 12px;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-pm .lhr-pm-card__name {
	margin: 0;
	font-family: var(--lhr-font-serif, 'Playfair Display', serif);
	font-size: clamp(22px, 2.3vw, 28px);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.005em;
	color: var(--lhr-ink, #22201c);
}

.lhr-pm-card__take {
	margin: 20px 0 0;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 15px;
	line-height: 1.75;
	color: var(--lhr-ink-soft, #6e675c);
}

/* Welcome-offer row — a gold-ruled slot that stays neutral until the
   _lhr_card_bonus_* meta is filled in by a human. */
.lhr-pm-card__offer {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 22px 0 0;
	padding: 16px 18px;
	background: var(--lhr-panel, #f1ede4);
	border-left: 2px solid var(--lhr-gold, #a9885a);
}

.lhr-pm-card__offer-label {
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-pm-card__offer-value {
	font-family: var(--lhr-font-serif, 'Playfair Display', serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--lhr-ink, #22201c);
}

.lhr-pm-card__terms {
	margin: 12px 0 0;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 13px;
	line-height: 1.65;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-pm .lhr-pm-card__listlabel {
	margin: 26px 0 14px;
}

.lhr-pm-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-pm-card__item {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 13px 0;
	border-bottom: 1px solid var(--lhr-hairline, #e5dfd2);
}

.lhr-pm-card__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
	color: var(--lhr-gold, #a9885a);
}

.lhr-pm-card__tick svg {
	display: block;
	width: 15px;
	height: 15px;
	stroke: currentColor;
}

.lhr-pm-card__itemtext {
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 14px;
	line-height: 1.65;
	color: var(--lhr-ink-soft, #6e675c);
}

.lhr-pm-card__foot {
	margin: auto 0 0;
	padding-top: 26px;
}

.lhr-pm-card__cta {
	width: 100%;
}

.lhr-pm-card__ref,
.lhr-pm-card__updated {
	margin: 14px 0 0;
	font-family: var(--lhr-font-sans, 'Hanken Grotesk', sans-serif);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--lhr-ink-faint, #98917f);
}

.lhr-pm-card__updated {
	margin-top: 8px;
}

/* ------------------------------------------------------------------
 * 6. All guides — editorial-card grid (component from editorial.css)
 * ---------------------------------------------------------------- */

.lhr-pm-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.lhr-pm-all__foot {
	margin: clamp(28px, 3.4vw, 40px) 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--lhr-hairline, #e5dfd2);
	text-align: center;
}

/* The global dark Blackbook band closes the page — give it air. */
.lhr-pm-all {
	padding-bottom: var(--lhr-section, 96px);
}

/* ------------------------------------------------------------------
 * 7. Responsive
 * ---------------------------------------------------------------- */

@media (max-width: 1023px) {
	.lhr-pm-start__grid,
	.lhr-pm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lhr-pm-approach__grid {
		grid-template-columns: 1fr;
	}

	.lhr-pm-approach__copy {
		max-width: 560px;
	}
}

@media (max-width: 860px) {
	.lhr-pm-cards__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 690px) {
	.lhr-pm-start__grid,
	.lhr-pm-grid {
		grid-template-columns: 1fr;
		max-width: 480px;
	}

	.lhr-pm-hero__meta {
		gap: 14px 28px;
	}

	.lhr-pm-principle {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.lhr-pm-principle__label {
		padding-top: 0;
	}

	.lhr-pm-card__cta {
		white-space: normal;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lhr-pm-hero__link,
	.lhr-pm-start-card__title a {
		transition: none;
	}
}