/* ================================================
   RED POINT — BRAND STORY  "40 שנים בחושך"  (Figma 109:744)
   ================================================
   section  1440x650 · padding 140/60 · centred
   headline 90/80 · tracking -2.2 · line 1 white, line 2 accent red
   body     573px · 16/1.4 · white/55
   ================================================ */

.rp-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 650px;
	width: 100%;
	padding: 140px 60px;
	overflow: hidden;
	background-color: #0C0C0C;
	box-sizing: border-box;
}

/* The radial glow — rgba(255,59,59,0.14) anchored bottom-centre, gone by 60%. This is what
   stops the section reading as flat black. It was the one genuine miss when this design was
   first converted, because it is encoded as a background image in the Figma. */
.rp-brand--glow {
	background-image: radial-gradient(1610px 727px at 50% 100%, rgba(255, 59, 59, 0.14) 0%, rgba(255, 59, 59, 0) 60%);
}

/* The soft blurred red block behind the copy (109:745) — 500x144, 10% red, 80px blur. */
.rp-brand__block {
	position: absolute;
	left: 32.6%;
	top: 48.9%;
	width: 500px;
	height: 144px;
	z-index: 0;
	pointer-events: none;
	background-color: rgba(255, 59, 59, 0.1);
	filter: blur(80px);
}

.rp-brand__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

.rp-brand__headline {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 90px;
	line-height: 80px;
	letter-spacing: -2.2px;
}

.rp-brand__lead,
.rp-brand__accent {
	display: block;
}

.rp-brand__lead {
	font-weight: 300;
	color: #FFFFFF;
}

.rp-brand__accent {
	color: #FF3B3B;
}

.rp-brand__body {
	margin: 0;
	width: 573px;
	max-width: 100%;
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.rp-brand {
		padding: 80px 24px;
	}

	/* A FLAT 52px DOES NOT FIT A PHONE. Measured at a 500px viewport, the accent line
	   "עכשיו הדלקנו את האורות." needs 471px inside a 452px content box — and the box shrinks
	   with the screen while the type does not. Because .rp-brand carries `overflow: hidden`
	   the text was not pushing the page wide, it was being CLIPPED at both edges: the client's
	   screenshot shows the first and last characters of both lines sliced off.

	   Hebrew has no hyphenation to fall back on and these are short, unbreakable words, so the
	   type has to scale rather than wrap.

	   9vw is the widest that keeps the longest line inside the 24px gutters at 360px and up
	   (the line needs 471 x size/52 px, against a box of viewport - 48). The 52px ceiling is
	   the design's own tablet size and takes over from ~578px; the 24px floor keeps it legible
	   on the narrowest phones still in use. */
	/* ============================================================
	   WHY `!important` — read this before removing it
	   ============================================================
	   This widget registers an Elementor Typography control whose DEFAULT is 90px/80px, and
	   Elementor bakes every control value into the PAGE's own generated stylesheet:

	     /wp-content/uploads/elementor/css/post-65.css
	     .elementor-65 .elementor-element.elementor-element-d48a1bb .rp-brand__headline{
	         font-size:90px; line-height:80px; letter-spacing:-2.2px; }

	   Specificity (0,3,0), NO media query, and loaded after this file. Nothing this stylesheet
	   can say at (0,1,0) will ever beat it, at any width — which is why the first attempt at
	   this fix shipped, served correctly, and changed nothing on the phone. The `padding` change
	   in this same block worked only because Elementor does not set padding.

	   That page stylesheet carries TEN such rules and not one media query, so the same trap
	   applies to any widget with a typography control: .rp-hero__title (pinned at 100px),
	   .rp-news__title (50px), and others that happen to declare no responsive size and so are
	   harmless today.

	   The clean fix is responsive defaults on the control itself (tablet_default /
	   mobile_default), so Elementor emits its own media queries — but that only takes effect
	   once Elementor regenerates the page CSS, and it cannot override a value already saved in
	   the page. !important is the deterministic one, and its scope is one media query.

	   If a mobile size is ever set in the Elementor UI, THIS will override it. Remove the
	   !important then. */
	.rp-brand__headline {
		font-size: clamp(24px, 9vw, 52px) !important;
		line-height: 0.92 !important;
		/* -2.2px against the design's 90px, kept proportional so it does not crush small type. */
		letter-spacing: -0.04em !important;
	}

	/* `width: 573px` + `max-width: 100%` LOOKS SAFE AND IS NOT.
	   A definite width is the element's min-content contribution, so .rp-brand__inner — a flex
	   item sized to fit its content — could not shrink below 573px, and the 100% max-width then
	   resolved against that same 573px parent, so it never bit. Measured on the live page at a
	   500px viewport: inner and body both 573 wide, hanging 36px past each edge of a 452px
	   content box, with overflow:hidden slicing the ends off every line.

	   Swapping which property is definite fixes it: the paragraph now fills the column and stops
	   at the design's 573px instead of demanding it. Scoped to <=1024 so the desktop column keeps
	   its exact measure — at full width `width: 100%` would let it grow to the headline's width,
	   which is wider than the 573 the design specifies. */
	.rp-brand__body {
		width: 100%;
		max-width: 573px;
	}
}