/* Copper Lantern 6.24.17 — final hero-family geometry contract. */

:root {
	--clt-hero-family-height: 560px;
	--clt-hero-family-shell: min(1420px, calc(100% - 64px));
	--clt-hero-family-copy: 820px;
	--clt-hero-family-lead: 660px;
	--clt-hero-family-pad: clamp(70px, 7vw, 104px);
	--clt-hero-family-title: clamp(62px, 6.25vw, 104px);
	--clt-functional-hero-height: 420px;
	--clt-functional-hero-title: clamp(52px, 5vw, 78px);
}

/* Editorial, destination, service, and supplier heroes share one frame. */
.clt-site :is(
	.clt-hero:not(.clt-home-cinema),
	.clte-hero,
	.cltp-hero,
	.clt-team-hero,
	.clt-advisor-hero,
	.cltvp-explorer .cltvp-hero
) {
	display: flex;
	min-height: var(--clt-hero-family-height);
	align-items: center;
}

/* Match the older high-specificity theme rules without using !important. */
.clt-site .clt-hero.clt-landing-hero:not(.clt-home-cinema),
.clt-site .clt-hero.clt-detail-hero:not(.clt-home-cinema),
.clt-site .clt-hero.clt-partner-hero:not(.clt-home-cinema) {
	min-height: var(--clt-hero-family-height);
}

/* Supplier heroes keep their padding on the shared shell, not twice. */
.clt-site .cltvp-explorer .cltvp-hero {
	padding-block: 0;
}

.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy,
	.clte-hero .clte-hero-copy,
	.cltp-hero .cltp-hero-copy,
	.cltvp-explorer .cltvp-hero .cltvp-shell
) {
	width: var(--clt-hero-family-shell);
	max-width: none;
	margin-inline: auto;
	padding-block: var(--clt-hero-family-pad);
	text-align: left;
}

.clt-site :is(.clt-team-hero-grid, .clt-advisor-hero-grid) {
	width: var(--clt-hero-family-shell);
	max-width: none;
	min-height: var(--clt-hero-family-height);
	margin-inline: auto;
}

.clt-site .clt-team-hero-grid {
	align-items: center;
}

.clt-site .clt-advisor-hero-grid {
	align-items: stretch;
}

/* Keep the portrait profile inside the desktop hero frame. The original
 * stacked copy was taller than its own shared height once the portrait loaded. */
@media (min-width: 1101px) {
	.clt-site .clt-advisor-hero,
	.clt-site .clt-advisor-hero-grid {
		height: var(--clt-hero-family-height);
		min-height: var(--clt-hero-family-height);
		box-sizing: border-box;
		padding-block: clamp(18px, 1.8vw, 26px);
	}

	.clt-site .clt-advisor-portrait {
		height: auto;
		min-height: 0;
		border-block: 1px solid rgba(214, 166, 114, .32);
	}

	.clt-site .clt-advisor-hero-copy {
		display: grid;
		grid-template-columns: minmax(210px, .9fr) minmax(220px, 1.1fr);
		grid-template-rows: auto auto auto;
		column-gap: 28px;
		row-gap: 16px;
		align-content: center;
		min-height: 0;
		padding: 32px clamp(28px, 3vw, 46px);
	}

	.clt-site .clt-advisor-hero-copy > .clt-eyebrow {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		margin-bottom: 0;
	}

	.clt-site .clt-advisor-hero-copy > h1 {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
	}

	.clt-site .clt-advisor-hero-copy > .clt-advisor-quote {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: center;
		margin-bottom: 0;
		font-size: 16px;
		line-height: 1.55;
	}

	.clt-site .clt-advisor-hero-actions {
		grid-column: 1 / -1;
		grid-row: 3;
		grid-template-columns: 186px minmax(0, 1fr);
		gap: 18px;
		margin-top: 0;
	}

	.clt-site .clt-advisor-designation {
		padding: 6px 0 6px 16px;
	}

	.clt-site .clt-advisor-designation strong {
		font-size: 15px;
		line-height: 1.2;
	}

	.clt-site .clt-advisor-designation small {
		margin-top: 3px;
	}

	.clt-site .clt-advisor-designation p + p {
		margin-top: 8px;
		padding-top: 8px;
	}
}

/* Short identity titles stay on one line when the viewport has room. */
@media (min-width: 761px) {
	.clt-site :is(.clt-contact-hero, .clt-our-story-hero) h1 {
		max-width: none;
		white-space: nowrap;
	}

	.clt-site :is(.clt-contact-hero, .clt-our-story-hero) .clt-hero-title-mixed > :is(span, em) {
		display: inline;
	}

	.clt-site :is(.clt-contact-hero, .clt-our-story-hero) .clt-hero-title-mixed > em {
		margin: 0 0 0 .16em;
	}
}

/* Final copy rhythm prevents page-specific and supplier CSS from drifting. */
.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy,
	.clte-hero .clte-hero-copy,
	.cltp-hero .cltp-hero-copy,
	.clt-team-hero,
	.clt-advisor-hero-copy,
	.cltvp-explorer .cltvp-hero
) :is(.clt-eyebrow, .clte-eyebrow, .cltp-kicker, .cltvp-kicker) {
	margin: 0 0 14px;
	color: var(--clt-copper-on-dark, #d6a672);
	text-align: left;
	text-shadow: var(--clt-photo-text-shadow, 0 2px 8px rgba(0, 0, 0, .68));
}

.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy > h1,
	.clte-hero-copy > h1,
	.cltp-hero-copy > h1,
	.clt-team-hero h1,
	.clt-advisor-hero-copy h1,
	.cltvp-explorer .cltvp-hero h1
) {
	max-width: var(--clt-hero-family-copy);
	margin: 0 0 26px;
	color: var(--clt-cream, #faf6f0);
	font-family: var(--clt-font-script, var(--clt-script-font, "RastantyCortez", Georgia, serif));
	font-size: var(--clt-hero-family-title);
	font-style: normal;
	font-weight: 400;
	letter-spacing: -.015em;
	line-height: .88;
	text-align: left;
	text-transform: none;
	text-wrap: balance;
}

.clt-site :is(
	.clt-hero:not(.clt-home-cinema) .clt-hero-copy,
	.clte-hero .clte-hero-copy,
	.cltp-hero .cltp-hero-copy,
	.cltvp-explorer .cltvp-hero .cltvp-shell
) > p:not(.clt-eyebrow, .clte-eyebrow, .cltp-kicker, .cltvp-kicker) {
	max-width: var(--clt-hero-family-lead);
	margin: 0;
	color: #fff;
	font-family: var(--clt-font-body, "Quicksand", Arial, sans-serif);
	font-size: clamp(17px, 1.15vw, 19px);
	font-weight: 400;
	line-height: 1.65;
	text-align: left;
	text-shadow: var(--clt-photo-text-shadow, 0 2px 8px rgba(0, 0, 0, .68));
}

.clt-site :is(.clte-actions, .cltp-actions) {
	margin-top: 32px;
}

/* Search, contact, and other utility headers intentionally use a shorter frame. */
.clt-site .clt-page-hero:not(.clt-404),
.clt-site .clt-archive-hero:not(.clt-404) {
	display: flex;
	min-height: var(--clt-functional-hero-height);
	align-items: center;
}

.clt-site .clt-page-hero:not(.clt-404) > .clt-narrow,
.clt-site .clt-archive-hero:not(.clt-404) > .clt-narrow {
	width: var(--clt-hero-family-shell);
	max-width: none;
	margin-inline: auto;
	padding-block: 54px;
	text-align: left;
}

.clt-site .clt-page-hero:not(.clt-404) > .clt-narrow > h1,
.clt-site .clt-archive-hero:not(.clt-404) > .clt-narrow > h1 {
	max-width: 820px;
	margin: 0 0 24px;
	font-size: var(--clt-hero-family-title);
	line-height: .92;
}

.clt-site .clt-page-hero.clt-404 {
	min-height: max(520px, 65vh);
	justify-content: center;
}

.clt-site .clt-404 > .clt-narrow {
	text-align: center;
}

.clt-site .clt-404 > .clt-narrow > :is(h1, p) {
	margin-inline: auto;
}

/* The homepage remains cinematic, but the photograph is slightly less cropped. */
@media (min-width: 821px) {
	.clt-site .clt-home-cinema-focus {
		transform: scale(.985);
		transform-origin: center center;
		animation: none;
	}

	.clt-site .clt-home-cinema-veil {
		background:
			none;
	}
}

/* Windows at 125% commonly resolve inside this CSS-width band. */
@media (min-width: 1101px) and (max-width: 1600px) {
	:root {
		--clt-hero-family-height: 460px;
		--clt-hero-family-shell: min(1190px, calc(100% - 80px));
		--clt-hero-family-copy: 720px;
		--clt-hero-family-lead: 660px;
		--clt-hero-family-pad: 60px;
		--clt-hero-family-title: clamp(60px, 5.8vw, 88px);
		--clt-functional-hero-height: 360px;
		--clt-functional-hero-title: clamp(48px, 5.2vw, 72px);
	}

	body.clt-site .clt-service-page .clt-honeymoon-hero .clt-hero-copy {
		min-height: var(--clt-hero-family-height);
		padding-block: 36px;
	}
}

@media (max-width: 1100px) {
	:root {
		--clt-hero-family-height: 430px;
		--clt-hero-family-shell: min(100% - 48px, 1190px);
		--clt-hero-family-copy: 760px;
		--clt-hero-family-pad: 54px;
		--clt-hero-family-title: clamp(56px, 8.5vw, 82px);
		--clt-functional-hero-height: 400px;
	}

	.clt-site .clt-advisor-hero-grid {
		min-height: 0;
	}
}

@media (max-width: 760px) {
	:root {
		--clt-hero-family-height: 410px;
		--clt-hero-family-shell: min(100% - 40px, 1190px);
		--clt-hero-family-copy: 100%;
		--clt-hero-family-lead: 100%;
		--clt-hero-family-pad: 48px;
		--clt-hero-family-title: clamp(52px, 15vw, 70px);
		--clt-functional-hero-height: 380px;
		--clt-functional-hero-title: clamp(46px, 13vw, 62px);
	}

	.clt-site .clt-team-hero-grid {
		min-height: 0;
	}

	.clt-site .clt-page-hero:not(.clt-404) > .clt-narrow,
	.clt-site .clt-archive-hero:not(.clt-404) > .clt-narrow {
		width: var(--clt-hero-family-shell);
		padding-block: 48px;
	}
}

@media (max-width: 540px) {
	:root {
		--clt-hero-family-height: 390px;
		--clt-hero-family-shell: calc(100% - 28px);
		--clt-hero-family-title: clamp(48px, 15vw, 64px);
	}

	.clt-site .clt-page-hero:not(.clt-404) > .clt-narrow,
	.clt-site .clt-archive-hero:not(.clt-404) > .clt-narrow {
		width: var(--clt-hero-family-shell);
	}
}

@media (prefers-reduced-motion: reduce) and (min-width: 821px) {
	.clt-site .clt-home-cinema-focus {
		animation: none;
		transform: scale(.985);
	}
}

/* 6.40.22: the current destination renderer joins the existing hero shell.
 * Its previous 61%/720px copy cap introduced a third title line at 1920px.
 * Keep the wider title measure inside the shared shell without changing type.
 */
.clt-site .clt-destination-system .hero-inner {
	width: var(--clt-hero-family-shell);
}

.clt-site .clt-destination-system .hero-copy {
	width: min(var(--clt-hero-family-copy), 100%);
}

/* These current travel families use a single desktop frame and copy datum.
 * Padding belongs to the copy, once. Minimum heights still grow with content,
 * including enlarged text; no fixed height, clipped copy, or image zoom.
 * Homepage, profile heroes and shorter utility headers are outside this scope.
 */
@media (min-width: 1101px) {
	body.clt-site :is(.clt-cruise-discovery, .clt-journeys-system-page, .clt-new-journey-page) > .clt-hero,
	.clt-site .clt-destination-system .hero,
	.clt-site .cltvp-collection-page .cltvp-collection-hero {
		align-items: flex-start;
	}

	body.clt-site :is(.clt-cruise-discovery, .clt-journeys-system-page, .clt-new-journey-page) > .clt-hero .clt-hero-copy,
	.clt-site .clt-destination-system .hero-copy,
	.clt-site .cltvp-collection-page .cltvp-collection-hero > .cltvp-shell {
		display: flex;
		min-height: var(--clt-hero-family-height);
		flex-direction: column;
		justify-content: flex-start;
		padding-block: 48px;
	}

	/* The supplier hero retains its existing 2px copper bottom border. */
	.clt-site .cltvp-collection-page .cltvp-collection-hero > .cltvp-shell {
		min-height: calc(var(--clt-hero-family-height) - 2px);
	}
}

@media (min-width: 1101px) and (max-width: 1600px) {
	body.clt-site :is(.clt-cruise-discovery, .clt-journeys-system-page, .clt-new-journey-page) > .clt-hero .clt-hero-copy,
	.clt-site .clt-destination-system .hero-copy,
	.clt-site .cltvp-collection-page .cltvp-collection-hero > .cltvp-shell {
		padding-block: 28px;
	}
}

/* Script capitals and lowercase swashes need a little ink clearance when
 * enlarged on a phone. Long single words may wrap rather than leave the hero.
 */
@media (max-width: 760px) {
	.clt-site :is(.clt-cruise-discovery, .clt-journeys-system-page, .clt-new-journey-page) > .clt-hero h1,
	.clt-site .clt-destination-system .hero h1,
	.clt-site .cltvp-collection-page .cltvp-collection-hero h1 {
		padding-inline: .12em;
		overflow-wrap: anywhere;
	}
}

/* 6.40.23 — approved option B: quiet, static light on plain utility heroes.
 * This is background paint only: no new layer, motion, crop, height or type rule.
 * Photo families, supplied inline images, and the homepage are deliberately excluded.
 * Supplier headers must explicitly report no-image; never infer that from a missing photo.
 */
body.clt-site:not(.home) main :is(.clt-page-hero, .clt-archive-hero, .clt-utility-header):not(.clt-hero):not(.has-image):not([style*="url(" i]):not(:has(img, picture, video)),
body.clt-site:not(.home) .cltvp-explorer :is(.cltvp-search-hero, .cltvp-fleet-hero, .cltvp-ship-page-hero).no-image:not(.has-image):not([style*="url(" i]):not(:has(img, picture, video)) {
	background-color: #071713;
	background-image: radial-gradient(ellipse at 92% 12%, #29443e 0, transparent 58%);
}

/* Compact legal headers need the same readable copper as other dark heroes. */
body.clt-site:not(.home) main .clt-utility-header:not(.clt-hero):not(.has-image):not([style*="url(" i]):not(:has(img, picture, video)) > .clt-shell > .clt-eyebrow {
	color: var(--clt-copper-on-dark, #d6a672);
}
