/**
 * Home Native — 1:1 reproduction of the Elementor home.
 * Sections: hero, discover-intro, curated-grid, statement (4 variants), founder.
 * Header/footer are rendered by the theme's native shell (rd-header / rd-footer).
 *
 * Typography: MADE Mirage (loaded by Elementor Pro custom-fonts, available
 * globally because the theme enqueues that handle). Available weights: 400, 500.
 */

.rosenberg-home {
	display: block;
	background: #ffffff;
	color: #091734;
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
}

/* ===== Hero ===== */

.rosenberg-home__hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: 100vh;
	color: #ffffff;
	background: #0a0a0a;
}

.rosenberg-home__hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Fallback image: covers the container until the iframe starts playing. */
.rosenberg-home__hero-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* Vimeo iframe in background mode: maintains the video's own aspect-ratio
 * (16:9) and covers the viewport via min-width/min-height computed in vw/vh
 * that always exceed the screen. Do not combine inset:0 with translate (that
 * conflict caused fragmented re-render on scroll). */
.rosenberg-home__hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 */
	min-height: 100vh;
	min-width: 177.78vh; /* 100vh * (16/9) */
	transform: translate(-50%, -50%);
	border: 0;
	z-index: 2;
	pointer-events: none;
}

.rosenberg-home__hero-inner {
	position: relative;
	z-index: 3;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(48px, 12vh, 140px) 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	min-height: 100vh;
	/* Elementor home anchors the title near the bottom of the hero (~87% from top).
	 * We mirror this with justify-content: flex-end + stronger padding-bottom. */
	justify-content: flex-end;
}

.rosenberg-home__hero-title {
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 400;
	letter-spacing: 12px;
	line-height: 1.5;
	margin: 0;
	color: #ffffff;
}

@media (max-width: 1023px) {
	/* Hero video is portrait on mobile (9:16). Vimeo iframe letterboxes
	 * the video if the iframe does not respect its aspect ratio — so
	 * we size the iframe to cover the container maintaining 9:16,
	 * same cover pattern as desktop but with inverted ratio.
	 *   - width 100vw + height 177.78vw guarantees AR on the width axis
	 *   - min-width 56.25vh + min-height 100vh guarantees AR when the
	 *     viewport is "squashed" (landscape, short upright tablet).
	 * The parent .rosenberg-home__hero-media has overflow:hidden, so
	 * the excess is clipped and the video appears cover (no pillarbox). */
	.rosenberg-home__hero-video {
		top: 50%;
		left: 50%;
		width: 100vw;
		height: 177.78vw; /* 100vw × 16/9 (video is 9:16 portrait) */
		/* dvh instead of vh to prevent the iOS Safari URL bar
		 * from shifting/resizing the iframe when it appears/disappears. */
		min-width: 56.25dvh; /* 100dvh × 9/16 */
		min-height: 100dvh;
		transform: translate(-50%, -50%);
	}
}

@media (max-width: 640px) {
	.rosenberg-home__hero {
		min-height: 80vh;
	}
	.rosenberg-home__hero-inner {
		min-height: 80vh;
		padding: 64px 20px;
	}
	.rosenberg-home__hero-title {
		letter-spacing: 6px;
	}
}

/* ===== Discover intro (tagline above mega-cards) ===== */

.rosenberg-home__discover {
	background: #ffffff;
	padding: 96px 24px 48px;
	text-align: center;
}

.rosenberg-home__discover-tagline {
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(32px, 3.9vw, 56px);
	font-weight: 400;
	letter-spacing: 12px;
	line-height: 1.5;
	color: #091734;
	margin: 0;
}

@media (max-width: 640px) {
	.rosenberg-home__discover {
		padding: 64px 20px 24px;
	}
	.rosenberg-home__discover-tagline {
		letter-spacing: 4px;
	}
}

/* ===== Curated — Card Stack Slider =====
   Wrapper section. The `.rosenberg-stack*` rules were moved to an inline
   `<style>` in template-parts/home/curated-grid.php to escape the
   LiteSpeed Cache combination/cache pipeline (LSC rewrote the combined home.css
   into hashes that were cached in CDN/disk for visitors,
   leaving the stack without CSS for days). Inline ensures the CSS travels with
   the HTML — there is no separate asset to cache.
*/

.rosenberg-home__curated {
	padding: 96px 24px;
	background: #ffffff;
	overflow: hidden;
}

@media (max-width: 640px) {
	.rosenberg-home__curated {
		padding: 64px 16px;
	}
}

/* ===== Statement (4 variants, each its own section) ===== */

.rosenberg-home__statement {
	padding: clamp(80px, 14vh, 160px) 24px;
	background: #ffffff;
	color: #091734;
	text-align: center;
}

.rosenberg-home__statement-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.rosenberg-home__statement-heading {
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(28px, 3.9vw, 56px);
	font-weight: 400;
	letter-spacing: 7.2px;
	line-height: 1.5;
	margin: 0;
}

.rosenberg-home__statement-body {
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(14px, 1.4vw, 17.6px);
	font-weight: 400;
	letter-spacing: 4.2px;
	line-height: 1.6;
	margin: 0;
}

.rosenberg-home__statement-image {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 32px auto 0;
}

/* Section-specific tweaks where the Elementor home uses different bg/contrast. */

.rosenberg-home__statement--each-jewel {
	background: #f5f5f5;
}

/* JEWELS THAT DEFY TIME — full viewport-height com heading multi-linha
 * (preserva quebras vindas do PHP) + subheading menor centralizada. */
.rosenberg-home__statement--jewels {
	min-height: 900px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 120px 20px;
}

.rosenberg-home__statement--jewels .rosenberg-home__statement-inner {
	gap: 20px;
	max-width: 1400px;
}

.rosenberg-home__statement--jewels .rosenberg-home__statement-heading {
	white-space: pre-line;
	font-size: 56px;
	letter-spacing: 12px;
	line-height: 84px;
	color: #091734;
}

.rosenberg-home__statement--jewels .rosenberg-home__statement-body {
	font-size: 24px;
	letter-spacing: 6.6px;
	line-height: 38.4px;
	color: #595958;
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.rosenberg-home__statement--jewels {
		min-height: 70vh;
		padding: 80px 20px;
	}
	.rosenberg-home__statement--jewels .rosenberg-home__statement-heading {
		/* On mobile the viewport is too narrow to accommodate the forced
		 * line breaks (\n) from PHP — they cause re-breaks in the middle of sentences.
		 * Cancels pre-line to let the text flow naturally. */
		white-space: normal;
		font-size: clamp(28px, 6vw, 48px);
		letter-spacing: 6px;
		line-height: 1.3;
	}
	.rosenberg-home__statement--jewels .rosenberg-home__statement-body {
		font-size: 16px;
		letter-spacing: 3px;
		line-height: 1.6;
	}
}

/* Wrapper that limits the scope of the 3 sticky split statements. Without it, the
 * containing block is the entire <main> (~8890px), which would make the 3rd sticky
 * stick far beyond its own 100vh. */
.rosenberg-home__statement-stack {
	position: relative;
	/* Intrinsic height = sum of the 3 sticky (each one 100vh in document flow). */
}

/* Split statements (2-col image+text alternating) — power-beauty, shine-boldly,
 * wear-seduction. Each section becomes sticky at the top: as the user scrolls, the
 * next section covers the previous one ("stack/peel" effect). Solid background
 * on each section to hide what is beneath it. */
.rosenberg-home__statement--layout-split {
	position: sticky;
	top: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 0;
	background: #ffffff;
	height: 100vh;
	min-height: 100vh;
	align-items: stretch;
	overflow: hidden;
}

.rosenberg-home__statement-media {
	overflow: hidden;
	height: 100%;
}

.rosenberg-home__statement-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rosenberg-home__statement-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 60px;
	text-align: left;
}

.rosenberg-home__statement--layout-split .rosenberg-home__statement-heading {
	white-space: pre-line;
	font-size: 56px;
	font-weight: 400;
	letter-spacing: 5px;
	line-height: 84px;
	color: #091734;
	margin: 0;
	text-align: left;
}

/* Image side: left → ordem natural (media depois content == media esquerda).
 * right → inverte com order. */
.rosenberg-home__statement--img-right .rosenberg-home__statement-media {
	order: 2;
}
.rosenberg-home__statement--img-right .rosenberg-home__statement-content {
	order: 1;
}

@media (max-width: 900px) {
	/* Mobile: sticky 100dvh image + text in natural flow below. Image
	 * stays pinned at the top while the user scrolls; then the text rises and
	 * reading continues — no blank gap around the text.
	 *
	 * Embrace is excluded (:not) because it has its own layout (full-bleed banner
	 * without peel). */
	.rosenberg-home__statement--layout-split:not(.rosenberg-home__statement--embrace) {
		position: static;
		grid-template-columns: 1fr;
		grid-template-rows: 100vh auto;
		grid-template-rows: 100dvh auto;
		height: auto;
		min-height: 0;
		overflow: visible;
	}
	.rosenberg-home__statement--layout-split:not(.rosenberg-home__statement--embrace) .rosenberg-home__statement-media {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100dvh;
	}
	.rosenberg-home__statement-media img {
		min-height: 0;
		max-height: none;
		height: 100%;
	}
	.rosenberg-home__statement--layout-split:not(.rosenberg-home__statement--embrace) .rosenberg-home__statement-content {
		/* Text in natural flow — no sticky, no forced 100dvh. */
		position: relative;
		background: #ffffff;
		z-index: 1;
		padding: 48px 24px;
	}
	/* Embrace keeps existing rules (not sticky). */
	.rosenberg-home__statement--embrace .rosenberg-home__statement-content {
		padding: 32px 24px;
		justify-content: center;
	}
	.rosenberg-home__statement--layout-split .rosenberg-home__statement-heading {
		font-size: clamp(22px, 5.2vw, 32px);
		letter-spacing: 2.5px;
		line-height: 1.3;
	}
	/* Em mobile, sempre imagem em cima do texto. */
	.rosenberg-home__statement--img-right .rosenberg-home__statement-media,
	.rosenberg-home__statement--img-left .rosenberg-home__statement-media {
		order: 1;
	}
	.rosenberg-home__statement--img-right .rosenberg-home__statement-content,
	.rosenberg-home__statement--img-left .rosenberg-home__statement-content {
		order: 2;
	}
}

/* EMBRACE — banner-cta.webp image occupies the full width of the section as
 * background, text + form sit over the right column (the darker part
 * of the original image).
 *
 * The image is 1920×500 (super wide). We use background-image on the section
 * with cover + center so it spans both "columns". */
.rosenberg-home__statement--embrace.rosenberg-home__statement--layout-split {
	position: static;
	height: auto;
	min-height: 600px;
	overflow: hidden;
	background-color: #091734;
	background-image: url("/wp-content/uploads/2025/08/banner-cta.webp");
	background-size: cover;
	background-position: center;
}

/* Split layout keeps the 1fr 1fr grid only to position the content in
 * the right column; the left column stays empty (the image shows behind). */
.rosenberg-home__statement--embrace .rosenberg-home__statement-media {
	display: none;
}

.rosenberg-home__statement--embrace .rosenberg-home__statement-heading,
.rosenberg-home__statement--embrace .rosenberg-home__statement-body {
	color: #ffffff;
}

.rosenberg-home__statement--embrace .rosenberg-home__statement-body {
	max-width: 540px;
}

.rosenberg-home__statement--embrace .rosenberg-home__statement-content {
	grid-column: 2 / 3; /* forces content to the right column only */
	gap: 24px;
	padding: 80px 60px;
}

@media (max-width: 900px) {
	.rosenberg-home__statement--embrace.rosenberg-home__statement--layout-split {
		min-height: 480px;
		background-position: left center;
		position: relative;
	}
	/* Overlay covers the entire image on mobile (not only the right column). */
	.rosenberg-home__statement--embrace.rosenberg-home__statement--layout-split::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(9, 23, 52, 0.7);
		pointer-events: none;
		z-index: 0;
	}
	.rosenberg-home__statement--embrace .rosenberg-home__statement-content {
		grid-column: 1 / -1;
		padding: 56px 24px;
		position: relative;
		z-index: 1;
		text-align: center;
		align-items: center;
	}
	/* Especificidade dupla pra vencer regras base do split-layout / cta-btn. */
	.rosenberg-home__statement--embrace.rosenberg-home__statement--layout-split .rosenberg-home__statement-heading {
		text-align: center;
	}
	.rosenberg-home__statement--embrace.rosenberg-home__statement--layout-split .rosenberg-archive__cta-btn {
		align-self: center;
	}
}

/* CTA "Speak with an Advisor" in EMBRACE — duplicated from archive.css to
 * avoid enqueuing the entire archive.css in home-native just for the
 * button. Class keeps the original name for conceptual reuse. */
.rosenberg-home__cta-btn,
.rosenberg-home__statement--embrace .rosenberg-archive__cta-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 40px;
	border: 1px solid #ffffff;
	border-radius: 5px;
	color: #ffffff;
	background: transparent;
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	align-self: flex-start;
}

.rosenberg-home__cta-btn:hover,
.rosenberg-home__cta-btn:focus-visible,
.rosenberg-home__statement--embrace .rosenberg-archive__cta-btn:hover,
.rosenberg-home__statement--embrace .rosenberg-archive__cta-btn:focus-visible {
	background: #c6a74f;
	border-color: #c6a74f;
	color: #ffffff;
	outline: none;
}

@media (max-width: 640px) {
	.rosenberg-home__statement-heading {
		letter-spacing: 3px;
	}
	.rosenberg-home__statement-body {
		letter-spacing: 2.5px;
	}
}

/* ===== Founder (2 cols: stacked name left, image right full-bleed) =====
 * Navy background (#091734) — mirrors the Elementor home. The PNG david-rosenberg-2
 * is a cutout with transparency, so it sits naturally on navy without white fades.
 * Founder + Embrace appear visually as ONE section (both navy). */

.rosenberg-home__founder {
	background: #091734;
	color: #ffffff;
	overflow: hidden;
}

.rosenberg-home__founder-inner {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	/* Image reduced to ~1/4 of the section (half the previous width) and
	 * flush against the right edge of the page. Text occupies the rest. */
	grid-template-columns: 3fr 1fr;
	gap: 0;
	align-items: stretch;
}

.rosenberg-home__founder-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px 48px 96px 80px;
}

/* Stacked name reuses the rosenberg-archive__stacked-name pattern (defined
 * in archive.css, not enqueued here). We recreate the minimum rules to
 * work standalone in home-native. */
.rosenberg-home__founder-name.rosenberg-archive__stacked-name {
	font-family: "MADE Mirage", "Helvetica Neue", Arial, serif;
	color: #ffffff;
	text-transform: uppercase;
	line-height: 0.92;
	letter-spacing: 0.04em;
	font-weight: 400;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.06em;
	margin: 0;
}

.rosenberg-home__founder-tagline {
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.18em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	margin: 32px 0 24px;
	max-width: 460px;
}

.rosenberg-home__founder-cta {
	display: inline-block;
	align-self: flex-start;
	padding: 14px 40px;
	border: 1px solid #ffffff;
	border-radius: 5px;
	color: #ffffff;
	background: transparent;
	font-family: "MADE Mirage", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rosenberg-home__founder-cta:hover,
.rosenberg-home__founder-cta:focus-visible {
	background: #c6a74f;
	border-color: #c6a74f;
	color: #ffffff;
	outline: none;
}

.rosenberg-home__founder-name .rosenberg-archive__stacked-word {
	display: block;
	white-space: nowrap;
}

.rosenberg-home__founder-name .rosenberg-archive__stacked-word:nth-child(odd) {
	font-size: clamp(28px, 3.4vw, 56px);
}
.rosenberg-home__founder-name .rosenberg-archive__stacked-word:nth-child(even) {
	font-size: clamp(56px, 6.6vw, 108px);
}
.rosenberg-home__founder-name .rosenberg-archive__stacked-word:nth-child(2) {
	margin-left: 0.5em;
}
.rosenberg-home__founder-name .rosenberg-archive__stacked-word:nth-child(3) {
	margin-left: 1.6em;
}

/* Right image: 1/4 of the section, edge-to-edge (flush against the right edge). */
.rosenberg-home__founder-media {
	margin: 0;
	overflow: hidden;
	display: flex;
	justify-self: end;
	align-self: stretch;
	width: 100%;
}

.rosenberg-home__founder-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 600px;
	object-fit: cover;
	object-position: center;
}

.screen-reader-text {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 900px) {
	/* On mobile: image inside the navy block occupying 100% width, text
	 * and button positioned over the bottom fade of the image (same grid cell,
	 * stacked with z-index). */
	.rosenberg-home__founder-inner {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas: "stack";
		min-height: 90vh;
	}
	.rosenberg-home__founder-media,
	.rosenberg-home__founder-text {
		grid-area: stack;
	}
	.rosenberg-home__founder-media {
		position: relative;
		z-index: 0;
		justify-self: stretch;
		width: 100%;
	}
	.rosenberg-home__founder-img {
		min-height: 90vh;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}
	/* Navy fade over the bottom of the image — creates the dark area where text
	 * + button sit legibly. */
	.rosenberg-home__founder-media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			transparent 40%,
			rgba(9, 23, 52, 0.85) 75%,
			#091734 100%
		);
		pointer-events: none;
	}
	.rosenberg-home__founder-text {
		position: relative;
		z-index: 1;
		align-self: end;
		padding: 0 24px 48px;
	}
	.rosenberg-home__founder-name .rosenberg-archive__stacked-word:nth-child(odd) {
		font-size: clamp(24px, 7vw, 40px);
	}
	.rosenberg-home__founder-name .rosenberg-archive__stacked-word:nth-child(even) {
		font-size: clamp(40px, 12vw, 64px);
	}
	.rosenberg-home__founder-tagline {
		margin: 16px 0 20px;
	}
	/* Forced line break in the tagline (mobile only): "The Story Behind" /
	 * "The International 'Ice Man'". The span becomes display:block, inheriting the
	 * line-height of the <p>. Desktop keeps it on one line (display:inline default). */
	.rosenberg-home__founder-tagline-break {
		display: block;
		font-size: 0; /* hides the extra space that serves as a fallback on desktop */
		line-height: 0;
	}
	/* Mobile: each-jewel appears after founder (DOM order is each-jewel → founder
	 * by default; flex order is inverted only on mobile). */
	.rosenberg-home__founder-stack {
		display: flex;
		flex-direction: column;
	}
	.rosenberg-home__founder-stack .rosenberg-home__founder {
		order: 1;
	}
	.rosenberg-home__founder-stack .rosenberg-home__statement--each-jewel {
		order: 2;
	}
}

/* Feature video usa .rosenberg-landing__video do landing.css — enqueueado
 * condicionalmente em functions.php para home-native. */