/*
 * Ri4Power page — sections unique to this page.
 * Loaded alongside blue-e.css and ss-enclosures.css, which supply the
 * shared hotspot, callout, carousel, industry-grid, dash-pagination,
 * icon-row and button styles.
 *
 * Values measured from Figma node 219:3301. Where the design disagrees
 * with its sibling pages on a shared component, the Blue e+ value is
 * kept as canonical.
 */

/*
 * The shared hero uses background-size: cover, tuned for Blue E's very
 * wide 2.49:1 raster. This page's banner is 1661x750 (2.215) against a
 * ~1.9 hero box, so cover scaled it to fill the height and cropped
 * 157px off each side — losing the light streaks and pushing the
 * product right of where Figma places it.
 *
 * Sizing to 100% width shows the whole composition as the frame does;
 * the image is shorter than the box and sits on the section's own black
 * background, which it already blends into.
 */
.product-hero--ri4 {
	/*
	 * Centred, not top-aligned: the image is 867px tall at full width
	 * inside a ~1009px hero, so anchoring it to the top left all 142px
	 * of slack below it. Centring splits that evenly, matching the
	 * reference where the product sits mid-frame.
	 */
/* 	background-position: center center;
	background-size: 100% auto; */
}

/* The H1 runs Helvetica Bold here against Helvetica Neue elsewhere;
   the second line is the longer, lighter half. Leading matches the
   1.2 shared by every hero heading. */
.product-hero__heading--ri4 {
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.2;
}

.product-hero__heading-sub {
	display: inline;
}

/* Description is 20px on this page against 18px on the others. */
.product-hero__subheading--lg {
	font-size: 20px;
	line-height: 1.2;
}

/* ==========================================
   Explore Ri4Power
========================================== */

.ri4-explore__intro {
	margin: -16px 0 48px;
	max-width: 908px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.8;
}

/* ==========================================
   Universal design — white band carousel
========================================== */

.ri4-design {
	background-color: #fff;
	padding: 91px 0;
}

/*
 * The Figma for this page drops the active-tab underline that every
 * sibling carousel has. Kept consistent with them instead, so the
 * shared .blue-e-carousel__tab.is-active rule applies unchanged.
 */

.ri4-slide {
	display: grid;
	grid-template-columns: minmax(0, 700px) minmax(0, 700px);
	align-items: center;
	gap: 0;
	background-color: #000;
}

.ri4-slide__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 131px 165px;
}

.ri4-slide__media img {
	display: block;
	width: 100%;
	max-width: 370px;
	height: auto;
	object-fit: cover;
}

.ri4-slide__body {
	padding: 62.24px 40.018px 40.018px;
}

.ri4-slide__title {
	margin: 0 0 30.013px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
}

.ri4-slide__spec {
	margin: 0 0 20px;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.ri4-slide__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ri4-slide__list li {
	position: relative;
	padding: 14.006px 0 0 19.8px;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

/* Square marker, 10.004px here against 12.698px on the sibling pages. */
.ri4-slide__list li::before {
	content: "";
	position: absolute;
	top: 22.4px;
	left: 0;
	width: 10.004px;
	height: 10.004px;
	background-color: #e50043;
}

.ri4-slide__link {
	display: inline-block;
	margin-top: 24px;
	color: #e50043;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ==========================================
   Industries — dark variant of the SS grid
========================================== */

.ss-industries--dark {
	background-color: #000;
}

/* ==========================================
   Sector applications — white band
========================================== */

.ri4-sector {
	background-color: #fff;
	padding: 89px 0;
}

/*
 * Tightened against the shared defaults (60px heading margin, 40px
 * pagination margin) so this band holds one viewport. Scoped to the
 * section, so the sibling carousels keep the design spacing.
 */
.ri4-sector .blue-e-section-heading {
	margin-bottom: 32px;
}

.ri4-sector .ss-pagination {
	margin-top: 20px;
}

/*
 * The image column is capped rather than fixed: at 1024 a hard 682px
 * left only 50px for the copy, crushing the text and its button. The
 * text column keeps a 320px floor and the image yields.
 */
/*
 * The copy takes the larger share and the image the smaller: at the
 * Figma 682px the text wrapped to nine lines, and the two columns
 * together made the band taller than a window. A wider measure costs
 * the text lines, and the narrower image column costs height directly.
 */
.ri4-case {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(0, 520px);
	align-items: center;
	gap: 64px;
	/* Figma's vertical is 100px; trimmed to hold the band to a window. */
	padding: 32px 0 32px 84px;
	background-color: #000;
}

.ri4-case__title {
	margin: 0 0 32px;
	/* Figma 439px; widened so the headline holds fewer lines. */
	max-width: 720px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.5;
}

.ri4-case__block {
	margin: 0 0 20px;
	/* Figma 556px; the cap, not the column, was setting the wrap. */
	max-width: 720px;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

.ri4-case__label {
	font-weight: 700;
}

/*
 * Figma is 682x509, but that 509px made the section ~1072px tall — more
 * than a normal window. Letterboxed so the band fits one viewport; the
 * img's object-fit: cover crops rather than distorts.
 */
.ri4-case__media {
/* 	aspect-ratio: 682 / 300; */
	overflow: hidden;
	max-height: 509px;
}

.ri4-case__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================
   Power assistance CTA
========================================== */

.ri4-assist {
	background-color: #000;
	padding: 96px 0;
}

.ri4-assist__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 676px);
	align-items: center;
	gap: 64px;
}

.ri4-assist__heading {
	margin: 0 0 24px;
	max-width: 626px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.5;
}

.ri4-assist__text {
	margin: 0 0 40px;
	max-width: 542px;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

.ri4-assist__media {
	aspect-ratio: 676 / 379;
	overflow: hidden;
}

.ri4-assist__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================
   Responsive — not designed in Figma.
========================================== */

@media(max-width: 1400px){
	.ri4-case{
		padding: 30px 0 30px 60px;
		    gap: 40px;
		grid-template-columns: minmax(320px, 1fr) minmax(0, 40%)
	}
}

@media (max-width: 1023px) {
	.ri4-slide {
		grid-template-columns: 1fr;
	}

	.ri4-slide__media {
		padding: 40px;
	}

	.ri4-case {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 48px 40px;
	}

	.ri4-assist__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.ri4-design,
	.ri4-sector,
	.ri4-assist {
		padding: 64px 0;
	}

	.ri4-explore__intro {
		margin-bottom: 32px;
		line-height: 1.7;
	}

	.ri4-slide__media {
		padding: 28px 24px;
	}

	.ri4-slide__body {
		padding: 28px 24px;
	}

	.ri4-slide__title,
	.ri4-case__title,
	.ri4-assist__heading {
		line-height: 1.4;
	}

	.ri4-slide__list li,
	.ri4-slide__spec,
	.ri4-case__block,
	.ri4-assist__text {
		line-height: 1.7;
	}

	.ri4-slide__list li::before {
		top: 20px;
	}

	.ri4-case {
		padding: 28px 24px;
	}

	/*
	 * The hero heading and description used to loosen their leading
	 * here. They now hold the 1.2 shared by every hero at every width,
	 * so the base rules above carry it and there is nothing to override.
	 */
}

/*
 * Why Rittal: three icons per carousel slide here, against four on SS
 * Enclosures, which supplies the shared .ss-why styles.
 */
.ss-why--three .ss-why__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}