/*
 * Made Hot — collection page photo redesign (2026-09-25).
 * Shared by both forked, per-collection templates
 * (template-collection-dirty-talk.php, template-collection-dating-debrief.php),
 * loaded after microlessons.css AND microlessons-redesign.css (see
 * Madehot_Microlessons::maybe_enqueue_assets()) — this file only adds the
 * two pieces that are genuinely new on those forks (overlay hero, photo+quote
 * band). The product cards, "Shop the Collection" heading, split-banner,
 * quote-band, and bio section are unchanged and reuse
 * microlessons-redesign.css as-is. Each fork supplies its own image/copy via
 * its own template + Madehot_Microlessons data methods — this file is purely
 * the shared visual pattern, not shared content.
 *
 * All color/font tokens (--accent, --cream, --ink, --testimonial-brown,
 * --madehot-serif, etc.) come from that file's .madehot-collection scope —
 * not redefined here, since these pages carry that same class.
 */

/* ============ Hero — photo with text + CTA overlaid directly on it,
   instead of the original shared template's stacked banner+content split ============ */
.madehot-collection-hero-overlay {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--charcoal);
	background-image: linear-gradient(rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.55)), var(--madehot-hero-image);
	background-size: cover;
	background-position: center;
	padding: 60px 20px;
	text-align: center;
}

.madehot-collection-hero-overlay-inner {
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* 2026-09-25: matches the shop hero eyebrow's updated spec (same font
   sizing/letter-spacing/alignment treatment) — --madehot-sans instead of
   the shop's literal 'Public Sans' since this page's own font stack leads
   with Jost, not Public Sans; same underlying idea, this page's fonts. */
.madehot-collection-hero-overlay .madehot-eyebrow {
	color: var(--cream);
	opacity: 0.85;
	font-family: var(--madehot-sans);
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 2.71px;
	text-align: center;
	text-transform: uppercase;
}

.madehot-collection-hero-overlay h1 {
	font-family: var(--madehot-serif);
	color: var(--cream);
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.2;
	margin: 0 0 1.25rem;
	letter-spacing: 0px;
	text-align: center;
}

.madehot-collection-hero-overlay h1 em {
	font-style: italic;
}

.madehot-collection-hero-overlay .madehot-collection-intro-copy p {
	color: #E8E2DC;
	opacity: 0.92;
	margin: 0 0 2rem;
	font-family: var(--madehot-sans);
	font-weight: 400;
	font-size: 18px;
	line-height: 100%;
	letter-spacing: 0px;
	text-align: center;
}

/* Reuses .madehot-lesson-cta's own taupe/uppercase/hover-darken styling
   (from microlessons-redesign.css), this just repositions + keeps the
   hover text legible on a dark photo — same override the original shared
   hero used for .madehot-hero-cta. */
.madehot-collection-hero-overlay-cta {
	display: inline-flex;
	text-decoration: none;
}

.madehot-collection-hero-overlay-cta:hover,
.madehot-collection-hero-overlay-cta:focus-visible {
	color: var(--cream);
}

@media (max-width: 600px) {
	.madehot-collection-hero-overlay {
		min-height: 420px;
	}
}

/* ============ Photo + quote band — between the product grid and the
   existing split-banner/quote-band sections ============ */
.madehot-collection-quote-photo {
	position: relative;
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--charcoal);
	background-image: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.45)), var(--madehot-hero-image);
	background-size: cover;
	background-position: center;
	padding: 60px 24px;
	text-align: center;
}

.madehot-collection-quote-photo-text {
	font-family: var(--madehot-serif);
	font-style: italic;
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	line-height: 1.5;
	color: var(--cream);
	max-width: 640px;
	margin: 0 auto;
}

.madehot-collection-quote-photo-text em {
	font-style: italic;
	opacity: 0.85;
}

@media (max-width: 600px) {
	.madehot-collection-quote-photo {
		min-height: 320px;
	}
}

/* ============================================================
 * Dating Debrief — Figma-matched refinements (2026-09-25)
 * Source: https://www.figma.com/design/YbGTB6KpTVjDVlMQ4d1aJb/Made-Hot?node-id=2739-2
 * (node 2739:2, "Dating 3", 1920px-wide desktop frame).
 *
 * Scoped to .madehot-collection-dating-debrief only — dirty-talk keeps its
 * existing tuned styling from the shop-page-matching pass; the two
 * collections are separate Figma frames, not meant to render identically.
 *
 * Font-size clamps: min is a readable mobile floor, max is the exact Figma
 * px (converted to rem), preferred is that px value as vw of the 1920px
 * frame (e.g. 65.042px / 1920px = 3.39vw) so it scales fluidly in between
 * instead of jumping at a breakpoint.
 * ============================================================ */
/* 2026-09-25: font-family corrected to Inter (was inheriting
   var(--madehot-sans), i.e. Jost/Public Sans) — the Figma frame specifies
   Inter Semi Bold for the eyebrow, Inter Regular for the hero body copy,
   and Inter Semi Bold for the button label. Enqueued alongside the
   existing collection-page fonts, see maybe_enqueue_assets(). */
.madehot-collection-dating-debrief .madehot-collection-hero-overlay .madehot-eyebrow {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: clamp(0.75rem, 0.74vw, 0.89rem); /* 14.228px */
	letter-spacing: 2.75px;
}

.madehot-collection-dating-debrief .madehot-collection-hero-overlay h1 {
	font-size: clamp(2rem, 3.39vw, 4.07rem); /* 65.042px */
	max-width: 848px;
	margin: 0 auto;
}

.madehot-collection-dating-debrief .madehot-collection-hero-overlay .madehot-collection-intro-copy {
	max-width: 772px;
	margin: 0 auto;
}

.madehot-collection-dating-debrief .madehot-collection-hero-overlay .madehot-collection-intro-copy p {
	font-family: 'Inter', sans-serif;
	font-size: clamp(0.95rem, 0.85vw, 1.02rem); /* 16.261px */
	margin: 0 0 19px;
}

.madehot-collection-dating-debrief .madehot-collection-hero-overlay-cta {
	min-width: min(320px, 100%);
	justify-content: center;
	padding: 20px 32px;
	font-family: 'Inter', sans-serif;
}

/* Figma's hero content gap is 34.427px (was the shared 30px). */
.madehot-collection-dating-debrief .madehot-collection-hero-overlay-inner {
	gap: 34px;
}

/* Measured directly from Figma: hero image y=35.57/height=1210.4, content
   block y=322.16/height=636.96 — top gap (322.16-35.57=286.6px) and bottom
   gap (image bottom 1245.97 - content bottom 959.12=286.8px) are
   essentially identical, ~14.93vw of the 1920px frame. The shared rule's
   flat 60px padding plus min-height/align-items:center produced a much
   tighter, viewport-height-dependent gap instead of this specific,
   symmetric whitespace. */
.madehot-collection-dating-debrief .madehot-collection-hero-overlay {
	padding-top: clamp(60px, 14.93vw, 287px);
	padding-bottom: clamp(60px, 14.93vw, 287px);
}

/* Figma shows this as two separate stacked lines (both italic, second
   lighter-weight and smaller) rather than one sentence with an inline
   emphasis phrase — overriding display on the existing markup/CSS instead
   of duplicating the template, since the underlying text/em structure is
   already exactly this: sentence, then em phrase.
   The 34.427px gap between the two lines belongs on the em (the second
   line) as margin-top — putting it on the parent <p> as margin-bottom
   pushes the whole quote away from the section below instead of
   separating the two lines from each other, which is the actual bug this
   fixes: the two lines had no gap between them at all before. */
.madehot-collection-dating-debrief .madehot-collection-quote-photo-text {
	max-width: 790px;
	font-size: clamp(1.75rem, 3.01vw, 3.62rem); /* 57.837px */
	line-height: 1.15;
	display: block;
	margin: 0 auto;
}

.madehot-collection-dating-debrief .madehot-collection-quote-photo-text em {
	display: block;
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.25rem, 2.01vw, 2.41rem); /* 38.558px */
	color: #E8E2DC;
	opacity: 1;
	max-width: 658px;
	margin: 34px auto 0;
}

@media (max-width: 900px) {
	.madehot-collection-dating-debrief .madehot-collection-hero-overlay h1,
	.madehot-collection-dating-debrief .madehot-collection-hero-overlay .madehot-collection-intro-copy,
	.madehot-collection-dating-debrief .madehot-collection-quote-photo-text,
	.madehot-collection-dating-debrief .madehot-collection-quote-photo-text em {
		max-width: 100%;
	}
}