/* ================================================
   RED POINT — HERO  (Figma 109:212)
   ================================================
   section   1440x800 · flex column · space-between
   media     a VIDEO in the file, not a still — the image is only its poster frame
   tint      linear-gradient(90.16deg, rgba(0,0,0,.2) .14%, rgba(102,102,102,.2) 107.68%)
   fade      109:213 — 280px fade to #0C0C0C, so the hero dissolves into the section below
   title     Futurism 100/80 · line 1 Light, line 2 Regular (109:237)
   subtitle  20/1.3 #E6E6E6
   pills     130x40 · rgba(37,37,37,.6) · 1px border in the category's own colour
   ================================================ */

.rp-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	min-height: 800px;
	width: 100%;
	overflow: hidden;
	background-color: #0C0C0C;
}

/* The product page's hero: pills only, no media, no title (1440x220). */
.rp-hero--compact {
	min-height: 220px;
}

/* ------------------------------------------------
   MEDIA + SCRIMS
   ------------------------------------------------ */
.rp-hero .rp-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* The hero's own gradient, straight from the design. */
.rp-hero__tint {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(90.16deg, rgba(0, 0, 0, 0.2) 0.14%, rgba(102, 102, 102, 0.2) 107.68%);
}

/* 109:213 — the hero fades into the page background over its last 280px. Without it the
   photo stops dead against the trust strip below. */
.rp-hero__fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 280px;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(12, 12, 12, 0) 0%, #0C0C0C 88%);
}

/* NOT IN THE DESIGN — a deliberate addition.
   Figma's one hero photo is dark, so the white nav reads fine over it. The CATEGORY heroes
   vary, and on the lighter ones the nav disappeared. This is invisible over a dark image
   and rescues a light one. Toggled off in the widget to match the Figma exactly. */
.rp-hero__scrim-top {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 180px;
	z-index: 1;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(12, 12, 12, 0.55) 0%, rgba(12, 12, 12, 0) 100%);
}

/* ------------------------------------------------
   CONTENT
   ------------------------------------------------
   100px of top padding is the nav's height (109:214) — the Header widget sits over the top
   of the hero, so the copy has to start beneath it. */
.rp-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 100px 60px 0;
	box-sizing: border-box;
}

.rp-hero--compact .rp-hero__inner {
	padding-top: 0;
	justify-content: center;
}

/* ------------------------------------------------
   COPY  (109:237)
   ------------------------------------------------ */
.rp-hero__copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 24px 0;
	text-align: right;
}

.rp-hero__title {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 100px;
	/* 80px against 100px type — the lines tuck into each other, which is what gives the
	   headline its stacked look. Not a mistake. */
	line-height: 80px;
	color: #FFFFFF;
}

.rp-hero__title-line {
	display: block;
}

/* First line Light, second Regular (109:237). */
.rp-hero__title-line--light {
	font-weight: 300;
}

.rp-hero__subtitle {
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 20px;
	line-height: 1.3;
	color: #E6E6E6;
}

.rp-hero__subtitle span {
	display: block;
}

/* The category page sets its strapline in italic; the home page does not. */
.rp-hero__subtitle--italic {
	font-style: italic;
}

/* ------------------------------------------------
   PILLS
   ------------------------------------------------
   No direction override, and that IS the right answer here — unlike the header's icon row.

   The pills are listed לנשים first, and under RTL the first child paints on the RIGHT,
   which is where the design starts them (at the 60px right gutter). justify-content:
   flex-start resolves to the RIGHT edge in an RTL container, so the strip fills leftwards
   exactly as the design does.

   Check the handedness of every row — the answer differs even within one section. */
.rp-hero__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	width: 100%;
	padding: 40px 0;
}

/* Each pill carries its category's colour as --rp-pill, set inline by the widget. The
   border is that colour; the ACTIVE pill fills with it. One rule, eight colours — instead
   of eight rules. */
.rp-hero__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	padding: 12px 16px;
	border: 1px solid var(--rp-pill, #FF3B3B);
	border-radius: 100px;
	background-color: rgba(37, 37, 37, 0.6);
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	color: #FFFFFF;
	white-space: nowrap;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

/* hover:bg-surface — the solid #252525, on inactive pills only. :not(--active) so hovering
   the current category's filled pill doesn't repaint it grey (a :hover pseudo outranks the
   plain --active class otherwise). Matches the Next.js CategoryStrip; the old rgba(…,0.9) was
   near-invisible over the hero photo, which read as "hover does nothing". */
.rp-hero__pill:not(.rp-hero__pill--active):hover {
	background-color: #252525;
}

.rp-hero__pill--active {
	background-color: var(--rp-pill, #FF3B3B);
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   The Figma has no mobile frames, so this is a sensible fallback, not a specified layout. */
@media (max-width: 1024px) {
	/* 132px, NOT 100px — it has to equal the mobile bar's height.
	   Below 1024px the desktop header is hidden and the 132px mobile bar takes over, pulled up
	   over the hero by a matching -132px margin. The hero was still clearing only 100px, so the
	   first 32px of its content sat UNDER the bar: on a phone that put the first category pill
	   (לנשים) behind the logo, hiding a whole category from customers.

	   Tied to .rp-mheader's height by hand — the two are one decision. If that bar's height
	   changes, this changes with it. */
	.rp-hero__inner {
		padding: 132px 24px 0;
	}
	/* `!important` IS LOAD-BEARING HERE — see the note in redpoint-brand-story.css.
	   Elementor writes the widget's Typography control into the PAGE's own stylesheet as
	   `.elementor-65 .elementor-element-xxxx .rp-hero__title{font-size:100px}` — specificity
	   (0,3,0), no media query, loaded after this file. Without !important this rule loses at
	   every width and the hero title stays 100px on a phone. */
	.rp-hero__title {
		font-size: 56px !important;
		line-height: 48px !important;
	}

	/* Tablet: smaller pills so three or four fit a row instead of two. */
	.rp-hero .rp-hero__pills {
		gap: 12px;
		padding: 28px 0;
	}

	.rp-hero .rp-hero__pill {
		min-width: 0;
		padding: 10px 14px;
		font-size: 15px;
	}
}

/* ------------------------------------------------
   PHONE — two buttons per row
   ------------------------------------------------
   A fixed TWO per row, not free wrapping. Letting them wrap naturally is what looked wrong
   originally: a different count on every line and ragged gaps, because the labels are all
   different lengths. Pinning each to half the row keeps the grid even however long the words
   are, and halves the column's height compared with one-per-row.

   `align-items: stretch` matters here — a two-word label wrapping to two lines would otherwise
   leave its neighbour short, and the pair would sit at different heights.

   `min-width: 0` still matters too: the base rule floors pills at 130px, and a percentage width
   alone does not override a min-width in a flex row.

   The menu button is NOT part of this — it stays full width across the bottom of the list, set
   in redpoint-category-menu.css. */
@media (max-width: 767px) {

	/* Only this section's own spacing lives here now. The pill LAYOUT — two per row, equal
	   heights, the menu button full width beneath them — is shared with the product page and
	   the category archive, and is defined once in redpoint-category-menu.css. It used to be
	   written out separately in all three stylesheets, which is exactly why the three strips
	   ended up looking different from each other on a phone. */
	.rp-hero .rp-hero__pills {
		padding: 20px 0;
	}
}