/* LHR redesign — For Creators application (see contract).
 * Scope: page-templates/template-creators.php only (.lhr-creators).
 * Uses base.css primitives (.lhr-field/.lhr-input/.lhr-label/.lhr-btn/
 * .lhr-eyebrow/.lhr-card); everything new is .lhr-cr-*.
 */

.lhr-creators {
	--lhr-cr-error: #96412f;
}

/* ------------------------------------------------------------------
 * 1. Dark image hero — full-bleed library shot behind a left-aligned
 *    text block. 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.
 *    Plain normal flow: nothing renders above the sticky header slot.
 * ---------------------------------------------------------------- */

.lhr-cr-hero {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--lhr-dark);
	color: #fff;
	padding-block: clamp(72px, 9vw, 128px);
}

/* Two classes: beat `.lhr-redesign img { height: auto }` from base.css. */
.lhr-cr-hero .lhr-cr-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lhr-cr-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(25, 23, 19, 0.85) 0%,
		rgba(25, 23, 19, 0.6) 44%,
		rgba(25, 23, 19, 0.22) 100%
	);
}

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

.lhr-creators .lhr-cr-hero__title {
	font-family: var(--lhr-font-serif);
	font-weight: 400;
	font-size: clamp(38px, 4.6vw, 60px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 18px 0 20px;
	max-width: 640px;
}

.lhr-cr-hero__dek {
	font-family: var(--lhr-font-sans);
	font-size: 17px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	max-width: 56ch;
	margin-inline: 0;
}

/* ------------------------------------------------------------------
 * 2. Layout: form + preview
 * ---------------------------------------------------------------- */

/*
 * Preview aside comes FIRST in source (stacked layouts read preview →
 * form); explicit grid placement puts the form left / rail right on
 * desktop. Items stretch so the rail spans the form's full height and
 * the sticky preview has room to travel (align-items: start starved
 * the sticky of any travel — the 1440 dead-cream bug).
 */
.lhr-cr-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: stretch;
}

.lhr-cr-formcol {
	grid-row: 1;
	grid-column: 1;
	min-width: 0;
}

.lhr-cr-previewcol {
	grid-row: 1;
	grid-column: 2;
}

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

	.lhr-cr-previewcol {
		grid-row: 1;
		grid-column: 1;
	}

	.lhr-cr-formcol {
		grid-row: 2;
		grid-column: 1;
	}
}

.lhr-creators .lhr-cr-apply__title {
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.15;
	color: var(--lhr-ink);
	margin: 0 0 12px;
}

.lhr-cr-apply__sub {
	font-family: var(--lhr-font-sans);
	font-size: 16px;
	line-height: 1.7;
	color: var(--lhr-ink-soft);
	max-width: 56ch;
	margin: 0 0 36px;
}

/* ------------------------------------------------------------------
 * 3. Form
 * ---------------------------------------------------------------- */

.lhr-cr-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lhr-cr-fieldset {
	border: 0;
	border-top: 1px solid var(--lhr-hairline);
	padding: 26px 0 18px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lhr-cr-fieldset legend {
	padding: 0 12px 0 0;
	margin-bottom: 6px;
}

.lhr-cr-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
}

/*
 * Boxed .lhr-input system (contract finder language). The legacy reset in
 * editorial-overhaul.css (`input[type='text'] { border: 0; border-bottom:
 * … }`, specificity 0-1-1) outguns bare `.lhr-input` (0-1-0) and left the
 * text fields underline-only while textarea/file stayed boxed. These
 * 0-2-1 rules restore one boxed system, matching /contact/.
 */
.lhr-creators input.lhr-input,
.lhr-creators textarea.lhr-input {
	background: var(--lhr-card);
	border: 1px solid var(--lhr-hairline);
	border-radius: 0;
	padding-inline: 14px;
	font-family: var(--lhr-font-sans);
	font-size: 14px;
	color: var(--lhr-ink);
}

.lhr-creators input.lhr-input {
	height: 48px;
}

.lhr-creators textarea.lhr-input {
	height: auto;
	padding-block: 12px;
}

.lhr-creators input.lhr-input:hover,
.lhr-creators textarea.lhr-input:hover {
	border-color: var(--lhr-gold-soft);
}

.lhr-creators input.lhr-input:focus,
.lhr-creators textarea.lhr-input:focus {
	border-color: var(--lhr-gold);
	outline: none;
}

.lhr-creators input.lhr-input:focus-visible,
.lhr-creators textarea.lhr-input:focus-visible {
	outline: 2px solid var(--lhr-gold-soft);
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.lhr-cr-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Honeypot: visually removed, still in the accessibility-hidden DOM. */
.lhr-cr-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Niche checkboxes */
.lhr-cr-niches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 18px;
}

@media (max-width: 560px) {
	.lhr-cr-niches {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lhr-cr-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: var(--lhr-font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--lhr-ink);
}

.lhr-cr-check input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background: var(--lhr-card);
	border: 1px solid var(--lhr-hairline);
	border-radius: 0;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
	transition: border-color 200ms var(--lhr-ease), background-color 200ms var(--lhr-ease);
}

.lhr-cr-check input[type='checkbox']:hover {
	border-color: var(--lhr-gold-soft);
}

.lhr-cr-check input[type='checkbox']:checked {
	background: var(--lhr-gold);
	border-color: var(--lhr-gold);
}

.lhr-cr-check input[type='checkbox']:checked::before {
	content: '';
	width: 9px;
	height: 5px;
	margin-top: -2px;
	border-left: 1.6px solid #fff;
	border-bottom: 1.6px solid #fff;
	transform: rotate(-45deg);
}

.lhr-cr-check input[type='checkbox']:focus-visible {
	outline: 2px solid var(--lhr-gold-soft);
	outline-offset: 2px;
}

/* File input */
.lhr-cr-file {
	font-family: var(--lhr-font-sans);
	font-size: 13px;
	color: var(--lhr-ink-soft);
	border: 1px solid var(--lhr-hairline);
	background: var(--lhr-card);
	padding: 12px 14px;
	border-radius: 0;
}

.lhr-cr-file::file-selector-button {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: #fff;
	background: var(--lhr-dark);
	border: 0;
	border-radius: 0;
	padding: 10px 16px;
	margin-right: 14px;
	cursor: pointer;
}

.lhr-cr-file:focus-visible {
	outline: 2px solid var(--lhr-gold-soft);
	outline-offset: 2px;
}

.lhr-cr-hint {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-ink-faint);
	margin: 0;
}

.lhr-cr-count {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-ink-faint);
	text-align: right;
	margin: 0;
}

/* Consent + submit */
.lhr-cr-consent {
	border-top: 1px solid var(--lhr-hairline);
	padding-top: 24px;
	margin-top: 8px;
}

.lhr-cr-consent .lhr-cr-check {
	color: var(--lhr-ink-soft);
}

.lhr-cr-submit {
	align-self: flex-start;
	margin-top: 20px;
}

/* Errors — small caps notes (contract: small-caps error notes). */
.lhr-cr-error {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-cr-error);
	margin: 0;
}

.lhr-cr-errors {
	border: 1px solid var(--lhr-cr-error);
	background: var(--lhr-card);
	padding: 18px 22px;
	margin: 0 0 28px;
}

.lhr-cr-errors .lhr-eyebrow {
	color: var(--lhr-cr-error);
	margin-bottom: 8px;
}

.lhr-cr-errors ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lhr-cr-errors li {
	font-family: var(--lhr-font-sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--lhr-ink-soft);
}

/* ------------------------------------------------------------------
 * 4. Media-kit preview — styled like the review sidebar fact card:
 *    white, hairline, square, letterspaced serif name, small caps meta.
 * ---------------------------------------------------------------- */

.lhr-cr-previewcol {
	min-width: 0;
}

/*
 * Rail = sticky slot + bottom inset image. The slot flexes to fill the
 * rail above the image, and it is the sticky preview's containing block,
 * so the preview rides beside the form and stops just above the image —
 * no dead cream, no overlap.
 */
.lhr-cr-rail {
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 3vw, 44px);
	height: 100%;
}

.lhr-cr-previewslot {
	flex: 1 0 auto;
	min-width: 0;
}

.lhr-cr-preview {
	position: sticky;
	top: calc(var(--m-header-h, 92px) + 28px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* 3:4 inset image, hairline frame with a white mat, fills the rail end. */
.lhr-cr-railimg {
	margin: 0;
	background: var(--lhr-card);
	border: 1px solid var(--lhr-hairline);
	padding: 10px;
}

.lhr-cr-railimg .lhr-cr-railimg__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.lhr-cr-preview {
		position: static;
	}

	.lhr-cr-railimg {
		display: none;
	}
}

.lhr-cr-kit {
	overflow: hidden;
}

.lhr-cr-kit__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--lhr-panel);
	display: grid;
	place-items: center;
	border-bottom: 1px solid var(--lhr-hairline);
}

.lhr-creators .lhr-cr-kit__media .lhr-cr-kit__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	/* !important: a legacy global `img { height: auto }` outranks the
	   element rule and let the natural-ratio image overflow the 4:3 media
	   box, painting over the card body (QA: uploaded portrait photo
	   swallowed the whole preview card). */
	height: 100% !important;
	max-height: 100%;
	object-fit: cover;
	display: block;
}

.lhr-cr-kit__photo[hidden] {
	display: none;
}

.lhr-cr-kit__monogram {
	font-family: var(--lhr-font-serif);
	font-weight: 400;
	font-size: 44px;
	letter-spacing: 0.12em;
	color: var(--lhr-gold);
	text-indent: 0.12em; /* optically recentre the letterspaced pair */
}

.lhr-cr-kit__body {
	padding: 26px 26px 28px;
}

.lhr-creators .lhr-cr-kit__name {
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lhr-ink);
	margin: 0 0 6px;
}

.lhr-cr-kit__loc {
	font-family: var(--lhr-font-sans);
	font-size: var(--lhr-caps-size);
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-ink-faint);
	margin: 0 0 20px;
}

.lhr-cr-kit__name.is-empty,
.lhr-cr-kit__loc.is-empty,
.lhr-cr-kit__bio.is-empty,
.lhr-cr-chip--empty {
	color: var(--lhr-ink-faint);
}

/* Stat row — Playfair numerals over small caps platform labels. */
.lhr-cr-kit__stats {
	list-style: none;
	margin: 0 0 20px;
	padding: 16px 0;
	border-top: 1px solid var(--lhr-hairline);
	border-bottom: 1px solid var(--lhr-hairline);
	display: flex;
	gap: 8px;
}

.lhr-cr-kit__stat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lhr-cr-kit__stat[hidden] {
	display: none;
}

.lhr-cr-kit__num {
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: 26px;
	line-height: 1;
	color: var(--lhr-ink);
}

.lhr-cr-kit__stat--empty .lhr-cr-kit__num {
	color: var(--lhr-ink-faint);
}

.lhr-cr-kit__statlabel {
	font-family: var(--lhr-font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-ink-faint);
}

.lhr-cr-kit__handle {
	font-family: var(--lhr-font-sans);
	font-size: 12px;
	color: var(--lhr-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lhr-cr-kit__section {
	margin-top: 18px;
}

.lhr-cr-kit__section .lhr-label {
	display: block;
	margin-bottom: 10px;
}

/* Gold niche chips */
.lhr-cr-kit__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lhr-cr-chip {
	font-family: var(--lhr-font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--lhr-caps-track);
	text-transform: uppercase;
	color: var(--lhr-gold);
	border: 1px solid var(--lhr-gold-soft);
	background: var(--lhr-card);
	padding: 6px 10px;
	border-radius: 0;
}

.lhr-cr-chip--empty {
	border-color: var(--lhr-hairline);
}

.lhr-cr-chip--empty[hidden] {
	display: none;
}

.lhr-cr-kit__bio {
	font-family: var(--lhr-font-sans);
	font-size: 14px;
	line-height: 1.7;
	color: var(--lhr-ink-soft);
	max-width: 44ch;
	margin: 0;
	overflow-wrap: break-word;
}

.lhr-cr-preview__note {
	font-family: var(--lhr-font-sans);
	font-size: 13px;
	font-style: italic;
	color: var(--lhr-ink-faint);
	margin: 0;
}

/* Stacked layouts: compact preview above the form — slim media band
   instead of the tall 4:3 panel, tighter card body. (Placed after the
   base kit rules so equal-specificity overrides win in source order.) */
@media (max-width: 1023px) {
	.lhr-cr-kit__media {
		aspect-ratio: auto;
		height: 120px;
	}

	.lhr-cr-kit__monogram {
		font-size: 30px;
	}

	.lhr-cr-kit__body {
		padding: 20px 20px 22px;
	}

	.lhr-creators .lhr-cr-kit__name {
		font-size: 18px;
	}

	.lhr-cr-kit__stats {
		padding: 12px 0;
		margin-bottom: 14px;
	}
}

/* ------------------------------------------------------------------
 * 5. Confirmation state
 * ---------------------------------------------------------------- */

.lhr-cr-done {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(40px, 6vw, 64px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.lhr-cr-done__mark {
	width: 56px;
	height: 56px;
	border: 1px solid var(--lhr-gold-soft);
	border-radius: 0;
	display: grid;
	place-items: center;
	color: var(--lhr-gold);
}

.lhr-creators .lhr-cr-done__title {
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.2;
	color: var(--lhr-ink);
	margin: 0;
}

.lhr-cr-done__copy {
	font-family: var(--lhr-font-sans);
	font-size: 15px;
	line-height: 1.7;
	color: var(--lhr-ink-soft);
	max-width: 48ch;
	margin: 0;
}

/* ------------------------------------------------------------------
 * 6. Closing band — hairline-topped cross-link to /for-hotels/
 *    (small caps eyebrow + serif line + text link, centred).
 * ---------------------------------------------------------------- */

.lhr-cr-outro {
	padding-bottom: var(--lhr-section, 96px);
}

.lhr-cr-outro__inner {
	border-top: 1px solid var(--lhr-hairline);
	padding-top: clamp(36px, 5vw, 56px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.lhr-creators .lhr-cr-outro__line {
	font-family: var(--lhr-font-serif);
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--lhr-ink);
	max-width: 24ch;
	margin: 0 0 14px;
}

/* ------------------------------------------------------------------
 * 7. About/Contact polish (QA 2026-07, item 6). The generic-page hero
 *    and form classes live in editorial.css (another agent's file);
 *    this QA pass owns the fix, so the overrides live here, scoped to
 *    body.page so the journal (blog), 404 and Blackbook are untouched.
 * ---------------------------------------------------------------- */

/* The hero text joins the 760px measure column the page body uses, so
   eyebrow/title/sub align with the content instead of hanging at the
   container gutter (visible drift at 1024px+). margin-inline leaves the
   existing block margins intact. */
.lhr-redesign.page .lhr-page-hero__eyebrow,
.lhr-redesign.page .lhr-page-hero__title,
.lhr-redesign.page .lhr-page-hero__sub {
	max-width: 760px;
	margin-inline: auto;
}

/* Submit row: note aligns to the button label's baseline instead of
   floating mid-button; stacks cleanly under the button on small screens. */
.lhr-redesign.page .lhr-form__actions {
	align-items: baseline;
	gap: 18px 26px;
}

.lhr-redesign.page .lhr-form__note {
	max-width: 52ch;
}

@media (max-width: 690px) {
	.lhr-redesign.page .lhr-form__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* ------------------------------------------------------------------
 * 8. Motion safety
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lhr-creators *,
	.lhr-creators *::before,
	.lhr-creators *::after {
		transition: none !important;
		animation: none !important;
	}
}