/*
 * Ravello Child — homepage.css
 * Styles for front-page composite sections: hero, category tiles,
 * product rows, editorial split, sale banner, IG strip, stores,
 * newsletter. Mobile-first, fluid, BEM.
 */

/* -------------------- Home scope -------------------- */
.rv-home { overflow-x: clip; }

/* -------------------- Hero -------------------- */
.rv-hero {
	position: relative;
	min-height: min(100vh, 920px);
	display: grid;
	align-items: center;
	color: var(--rv-paper);
	isolation: isolate;
	overflow: hidden;
}
.rv-hero__bg {
	position: absolute; inset: 0;
	background-image: var(--rv-hero-img);
	background-size: cover;
	background-position: center 30%;
	transform: scale(1.05);
	z-index: -2;
}
.rv-hero__overlay {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 30% 70%, rgba(0,0,0,0.15), transparent 60%),
		linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
	z-index: -1;
}
.rv-hero__inner {
	padding-block: clamp(4rem, 14vw, 10rem);
	width: 100%;
}
.rv-hero__content { max-width: 820px; }
.rv-hero__title {
	font-family: var(--rv-font-display);
	font-weight: 500;
	font-size: clamp(56px, 6.5vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-md);
	color: var(--rv-paper);
}
.rv-hero__title em { font-style: italic; }
/* Hero is above the fold — lines must render without depending on the
 * reveal observer. Animation is an enhancement, gated behind html.js +
 * explicit .rv-reveal opt-in. */
.rv-hero__line {
	display: block;
	opacity: 1;
	transform: none;
}
html.js .rv-hero.rv-reveal:not(.is-visible) .rv-hero__line {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 900ms var(--ease-default), transform 900ms var(--ease-default);
}
.rv-hero.rv-reveal.is-visible .rv-hero__line { opacity: 1; transform: translateY(0); }
.rv-hero.rv-reveal.is-visible .rv-hero__line:nth-child(1) { transition-delay: 120ms; }
.rv-hero.rv-reveal.is-visible .rv-hero__line:nth-child(2) { transition-delay: 260ms; }
.rv-hero.rv-reveal.is-visible .rv-hero__line:nth-child(3) { transition-delay: 400ms; }
.rv-hero__lede {
	max-width: 44ch;
	font-size: 20px;
	line-height: 30px;
	color: rgba(250, 247, 242, 0.86);
	margin: 0 0 var(--space-lg);
}
.rv-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

/* -------------------- Tiles -------------------- */
.rv-tiles__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}
@media (min-width: 600px) {
	.rv-tiles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.rv-tiles__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
}
.rv-tile {
	position: relative;
	display: block;
	overflow: hidden;
	color: var(--rv-paper);
	background: var(--rv-ink);
	isolation: isolate;
}
.rv-tile__img {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.rv-tile__img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1200ms var(--ease-default);
}
.rv-tile:hover .rv-tile__img img { transform: scale(1.04); }
.rv-tile::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.38) 100%);
	pointer-events: none;
}
.rv-tile__label {
	position: absolute;
	left: clamp(16px, 2vw, 28px);
	right: clamp(16px, 2vw, 28px);
	bottom: clamp(16px, 2vw, 28px);
	color: var(--rv-paper);
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.rv-tile__label .display,
.rv-tile__label .display.h3,
.rv-tile__label h3 {
	font-family: var(--rv-font-display);
	font-size: var(--fs-h3); /* match Vercel tile label (clamp 1.25rem,2vw,1.625rem = 26px max) */
	line-height: 1.08;
	margin: 0;
	color: var(--rv-paper);
}
.rv-tile__cta {
	font-family: var(--rv-font-body);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	opacity: 0.92;
}

/* -------------------- Product row -------------------- */
.rv-row__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xs);
	align-items: end;
	margin-bottom: var(--space-lg);
}
@media (min-width: 900px) {
	.rv-row__head {
		grid-template-columns: 1fr auto;
		gap: var(--space-md);
	}
	.rv-row__head .btn-link { justify-self: end; }
}
.rv-row__head .display { margin: 0; }
.rv-row__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(220px, 66vw, 300px);
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.rv-row__track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
	.rv-row__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-columns: initial;
		overflow: visible;
		gap: var(--space-lg); /* Vercel uses the larger gap at desktop (40px) for breathing room */
	}
	.rv-row--bags .rv-row__track { grid-template-columns: repeat(3, 1fr); }
}
.rv-card {
	display: block;
	color: inherit;
	scroll-snap-align: start;
}
.rv-card__img {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #fff;
}
.rv-card__img img {
	width: 100%; height: 100%; object-fit: contain;
	object-position: center center;
	transition: transform 800ms var(--ease-default);
}
.rv-card:hover .rv-card__img img { transform: scale(1.03); }
.rv-card__meta {
	padding-top: var(--space-sm);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-sm);
}
.rv-card__name {
	font-family: var(--rv-font-body);
	font-weight: var(--weight-medium, 500);
	font-size: var(--fs-small);
}
.rv-card__price {
	font-family: var(--rv-font-body);
	font-size: var(--fs-small);
	color: var(--rv-ink);
}
.rv-card__price del { opacity: 0.55; margin-right: 0.35em; }
.rv-card__price ins { text-decoration: none; color: var(--rv-sale); font-weight: var(--weight-medium, 500); }

.rv-empty {
	padding: var(--space-xl) 0;
	color: var(--rv-mist);
	text-align: center;
	font-style: italic;
}

/* -------------------- Atelier split caption -------------------- */
.rv-split__figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.rv-split__figure img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1400ms var(--ease-default);
}
.rv-split__figure:hover img { transform: scale(1.03); }
.rv-split__caption {
	position: absolute;
	left: var(--space-md);
	bottom: var(--space-md);
	color: var(--rv-paper);
	font-family: var(--rv-font-body);
	font-size: var(--fs-micro);
	letter-spacing: var(--tracking-editorial);
	text-transform: uppercase;
	z-index: 1;
	padding: 0.25rem 0.6rem;
	background: rgba(14, 14, 14, 0.55);
	backdrop-filter: blur(4px);
}

/* -------------------- Product row subtitle -------------------- */
/* Tiles section lede ("Shoes, bags, and leather goods...") — Vercel: Inter,
   fs-medium (14.4px), muted gray, normal weight/style. */
.rv-tiles .lede,
.rv-tiles__head .lede {
	font-family: var(--rv-font-body);
	font-size: var(--fs-medium);
	font-weight: var(--weight-regular);
	font-style: normal;
	color: var(--rv-text-muted);
	margin-top: var(--space-sm);
}

/* Row subtitles ("True Luxury Is Handmade.", "Walk in True Italian Style.")
   match Vercel: Inter, italic, muted gray, fs-medium. Same treatment as the
   tiles lede so all homepage subheadings read consistently. */
.rv-row__sub {
	margin: var(--space-2xs) 0 0;
	font-family: var(--rv-font-body);
	font-size: var(--fs-medium);
	font-style: italic;
	font-weight: var(--weight-regular);
	color: var(--rv-text-muted);
}
.rv-row__sub em { font-style: italic; }
.rv-card--placeholder { pointer-events: none; opacity: 0.85; }

/* -------------------- Editorial split -------------------- */
.rv-split__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: center;
}
@media (min-width: 900px) {
	.rv-split__grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp(48px, 6vw, 96px);
		align-items: center;
	}
}
.rv-split__media {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.rv-split__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1400ms var(--ease-default);
}
.rv-split__media:hover img { transform: scale(1.03); }
.rv-split__body .display { margin: var(--space-xs) 0 var(--space-md); }
.rv-split__body .display span { display: block; }
.rv-split__lede {
	max-width: 52ch;
	font-size: var(--fs-medium);
	line-height: 1.65;
	color: var(--rv-ink);
	margin: 0 0 var(--space-lg);
}
.rv-split__ctas {
	display: flex; flex-wrap: wrap; gap: var(--space-sm);
}

/* -------------------- Sale banner -------------------- */
.rv-sale {
	position: relative;
	isolation: isolate;
	color: var(--rv-paper);
	overflow: hidden;
	padding-block: clamp(5rem, 12vw, 9rem);
	margin-block: var(--space-2xl);
}
.rv-sale__bg {
	position: absolute; inset: 0;
	background-image: var(--rv-sale-img);
	background-size: cover;
	background-position: center;
	z-index: -2;
}
.rv-sale__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 100%);
	z-index: -1;
}
.rv-sale__inner {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}
.rv-sale__inner .display {
	font-family: var(--rv-font-display);
	line-height: 0.95;
	margin: var(--space-sm) 0 var(--space-md);
}
.rv-sale__inner .display span { display: block; }
.rv-sale__lede {
	font-size: var(--fs-medium);
	color: rgba(250, 247, 242, 0.86);
	margin: 0 0 var(--space-lg);
}
.btn--on-dark.btn-primary {
	background: var(--rv-paper);
	color: var(--rv-black);
	border-color: var(--rv-paper);
}
.btn--on-dark.btn-primary:hover {
	background: var(--rv-gold);
	border-color: var(--rv-gold);
	color: var(--rv-black);
}

/* -------------------- Instagram strip -------------------- */
.rv-ig__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xs);
	align-items: end;
	margin-bottom: var(--space-lg);
}
@media (min-width: 900px) {
	.rv-ig__head { grid-template-columns: 1fr auto; }
	.rv-ig__head .btn-link { justify-self: end; }
}
.rv-ig__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2xs);
}
@media (min-width: 600px)  { .rv-ig__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .rv-ig__grid { grid-template-columns: repeat(6, 1fr); } }
.rv-ig__tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.rv-ig__tile img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 900ms var(--ease-default);
}
.rv-ig__tile:hover img { transform: scale(1.06); }
.rv-ig__overlay {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	color: var(--rv-paper);
	background: rgba(14, 14, 14, 0);
	opacity: 0;
	transition: opacity var(--dur-standard) var(--ease-default), background var(--dur-standard) var(--ease-default);
}
.rv-ig__tile:hover .rv-ig__overlay {
	opacity: 1;
	background: rgba(14, 14, 14, 0.35);
}

/* -------------------- Stores -------------------- */
.rv-stores__head { text-align: center; margin-bottom: var(--space-xl); }
.rv-stores__head .display { margin: var(--space-xs) 0 0; }
.rv-stores__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	max-width: 880px;
	margin-inline: auto;
	justify-items: center;
	grid-template-rows: auto;
}
@media (min-width: 720px)  {
	.rv-stores__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto auto auto auto;
	}
	.rv-store {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 5;
	}
}
.rv-store {
	border-top: 1px solid var(--rv-border);
	padding-top: var(--space-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	row-gap: var(--space-2xs);
}
.rv-store__name { margin: 0; min-height: 2.6rem; display: flex; align-items: center; }
.rv-store__addr,
.rv-store__hours,
.rv-store__phone {
	margin: 0;
	color: var(--rv-ink);
	font-size: var(--fs-small);
	line-height: 1.5;
	min-height: calc(1.5em * 1);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rv-store__addr { min-height: calc(1.5em * 2); }
.rv-store__hours { min-height: calc(1.5em * 2); }
.rv-store__phone a { color: inherit; }
.rv-store .btn-link { margin-top: var(--space-sm); align-self: center; }

/* -------------------- Newsletter -------------------- */
.rv-news {
	background: var(--rv-paper);
	text-align: center;
}
.rv-news__inner {
	max-width: 640px;
	margin-inline: auto;
}
.rv-news__inner .display { margin: var(--space-xs) 0 var(--space-sm); }
.rv-news__inner .display span { display: block; }
.rv-news__lede {
	color: var(--rv-ink);
	margin: 0 0 var(--space-lg);
	font-size: var(--fs-medium);
}
.rv-news__form {
	display: flex;
	gap: var(--space-2xs);
	max-width: 480px;
	margin: 0 auto var(--space-sm);
}
.rv-news__form .rv-input { flex: 1; }
.rv-news__fineprint {
	font-size: var(--fs-micro);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--rv-mist);
	margin: 0;
}
.rv-news__social {
	display: flex;
	justify-content: center;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: var(--space-md) 0 0;
}
.rv-news__social .rv-iconbtn {
	color: var(--rv-paper);
	border: 1px solid rgba(250, 247, 242, 0.28);
	border-radius: 999px;
	width: 40px;
	height: 40px;
	display: inline-grid;
	place-items: center;
	transition: background .2s ease, border-color .2s ease;
}
.rv-news__social .rv-iconbtn:hover {
	background: rgba(250, 247, 242, 0.08);
	border-color: rgba(250, 247, 242, 0.55);
}

/* -------------------- Section padding utility -------------------- */
.section-pad {
	padding-block: clamp(3rem, 8vw, 6.5rem);
}

/* -------------------- Shoe sale promo strip -------------------- */
.rv-shoesale {
	background: var(--rv-ink);
	color: var(--rv-paper);
	border-top: 1px solid rgba(250, 247, 242, 0.06);
	border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.rv-shoesale__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	padding-block: clamp(28px, 5vw, 56px);
}
.rv-shoesale__eyebrow {
	font-size: var(--fs-micro, 0.72rem);
	letter-spacing: var(--tracking-wide, 0.18em);
	text-transform: uppercase;
	color: var(--rv-gold, #c9a35a);
	margin: 0;
}
.rv-shoesale__headline {
	font-family: var(--rv-font-display);
	font-weight: 500;
	font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 28ch;
}
.rv-shoesale__sub {
	font-size: 0.95rem;
	color: rgba(250, 247, 242, 0.7);
	margin: 0 0 6px;
}
.rv-shoesale__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.rv-shoesale__ctas .btn-ghost {
	color: var(--rv-paper);
	border-color: rgba(250, 247, 242, 0.55);
}
.rv-shoesale__ctas .btn-ghost:hover {
	background: rgba(250, 247, 242, 0.08);
}

/* -------------------- Sale campaign popup -------------------- */
.rv-sale-pop {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: clamp(16px, 4vw, 32px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .26s ease;
}
.rv-sale-pop.is-open {
	opacity: 1;
	pointer-events: auto;
}
.rv-sale-pop[hidden] { display: none; }
.rv-sale-pop__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 14, 14, 0.55);
	backdrop-filter: blur(2px);
}
.rv-sale-pop__card {
	position: relative;
	background: var(--rv-cream, #faf7f2);
	color: var(--rv-ink, #0e0e0e);
	max-width: 420px;
	width: 100%;
	padding: clamp(28px, 6vw, 44px) clamp(24px, 5vw, 40px);
	border: 1px solid rgba(14, 14, 14, 0.08);
	border-top: 3px solid var(--rv-gold, #c9a35a);
	box-shadow: 0 30px 80px -20px rgba(14, 14, 14, 0.35);
	text-align: center;
	transform: translateY(12px);
	transition: transform .26s ease;
}
.rv-sale-pop.is-open .rv-sale-pop__card { transform: translateY(0); }
.rv-sale-pop__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 0;
	color: var(--rv-ink);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity .15s ease;
}
.rv-sale-pop__close:hover { opacity: 1; }
.rv-sale-pop__eyebrow {
	font-size: var(--fs-micro, 0.72rem);
	letter-spacing: var(--tracking-wide, 0.18em);
	text-transform: uppercase;
	color: var(--rv-gold, #c9a35a);
	margin: 0 0 12px;
}
.rv-sale-pop__title {
	font-family: var(--rv-font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 1rem + 2.4vw, 2.2rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.rv-sale-pop__pct {
	display: block;
	font-size: clamp(2.6rem, 1.4rem + 5vw, 4rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: 4px;
}
.rv-sale-pop__sub {
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(14, 14, 14, 0.7);
	margin: 0 0 22px;
}
.rv-sale-pop__cta {
	display: inline-block;
	min-width: 200px;
	padding: 14px 28px;
	margin-bottom: 14px;
}
.rv-sale-pop__fine {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(14, 14, 14, 0.5);
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.rv-sale-pop, .rv-sale-pop__card { transition: none; }
}

/* PDP supporting line under price */
.rv-sale-note {
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rv-gold, #c9a35a);
	margin: 0;
}
.pdp__price + .rv-sale-note {
	margin-top: -14px;
	margin-bottom: 18px;
}
.rv-sale-note + .pdp-highlights {
	margin-top: 4px;
}

/* ========================================================================
 * MOBILE HERO REFINEMENT (≤ 720px)
 * 2-line title break, lifted content, refined lede spacing. Desktop
 * styling untouched.
 * ======================================================================== */
@media (max-width: 720px) {
	/* Anchor content toward middle, with slight bottom bias. Center align
	 * vertically beats WP cover's stretch. */
	.rv-hero.wp-block-cover,
	.rv-hero {
		min-height: 100svh;
		align-items: center !important;
		justify-content: flex-start !important;
	}
	.rv-hero.wp-block-cover > .wp-block-cover__inner-container,
	.rv-hero > .wp-block-cover__inner-container {
		width: 100%;
		align-self: center;
	}
	.rv-hero__inner {
		/* Balanced top/bottom padding with slight bottom bias so content
		 * sits visually between middle and bottom. */
		padding-block: clamp(140px, 22vh, 220px) clamp(120px, 18vh, 180px) !important;
		padding-inline: clamp(20px, 6vw, 28px) !important;
		max-width: 100%;
	}
	.rv-hero__content { max-width: 100%; }
	/* Force every text element to share the same left edge as .rv-hero__inner.
	 * <h1>/<p>/<.wp-block-buttons> all inherit padding-inline from parent
	 * but each can ship its own margin-inline — zero it out. */
	.rv-hero .rv-hero__title,
	.rv-hero .rv-hero__lede,
	.rv-hero .rv-hero__ctas,
	.rv-hero .wp-block-buttons {
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}
	.rv-hero__title {
		font-size: clamp(44px, 12vw, 66px);
		line-height: 0.98;
		letter-spacing: -0.02em;
		max-width: 14ch;
		margin-block: 0 0.9rem;
	}
	.rv-hero__title .rv-hero__line { display: block; }
	.rv-hero__title em { font-style: italic; }
	.rv-hero__lede {
		font-family: var(--rv-font-body);
		font-size: 15.5px;
		line-height: 1.5;
		max-width: 28ch;
		color: rgba(250, 247, 242, 0.92);
		margin-block: 0 1.25rem;
	}
	.rv-hero__ctas,
	.rv-hero .wp-block-buttons {
		gap: 0.6rem !important;
		justify-content: flex-start !important;
	}
}

/* Mobile overlay — slightly darker than desktop for legibility on the
 * mobile portrait crop while keeping imagery visible. */
@media (max-width: 720px) {
	.rv-hero.wp-block-cover .wp-block-cover__background,
	.rv-hero.wp-block-cover > .has-background-dim {
		background:
			linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.42) 100%) !important;
		opacity: 1 !important;
	}
}