/*
 * SS Enclosures page — sections unique to this page.
 * Loaded alongside blue-e.css, which supplies the shared hotspot,
 * callout, carousel, sub-nav and button styles.
 *
 * Values measured from Figma node 213:1278. Where the design disagrees
 * with its sibling pages on a shared component (form panel, submit
 * radius, button width), the Blue e+ value is kept as canonical.
 */

/* Kept as a hook; the base .product-hero__button is already 230x40. */
.product-hero__button--wide {
	width: 230px;
}

/* ==========================================
   Types of enclosures
========================================== */

.ss-types {
	background-color: #000;
	padding: 96px 0;
}

.ss-types__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 53px;
}

.ss-type {
	display: flex;
	flex-direction: column;
}

.ss-type__media {
	aspect-ratio: 440 / 344;
	background-color: #0b0b0b;
	overflow: hidden;
}

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

.ss-type__plate {
	flex: 1 1 auto;
	padding: 40px 32px 32px;
	background-color: #fff;
	color: #000;
}

.ss-type__title {
	margin: 0 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 24.969px;
}

.ss-type__body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 24.969px;
	white-space: pre-wrap;
}

/* The "available on request" line, split out from the body copy. */
.ss-type__note {
	margin: 20px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	opacity: .7;
}

.ss-types__cta {
	margin-top: 54px;
	text-align: center;
}

.ss-button--wide {
	width: 230px;
}

.ss-types__footnote {
	margin: 40px auto 0;
	max-width: 1191px;
	color: #fff;
	opacity: .5;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 35.657px;
	text-align: center;
}

/* ==========================================
   Industries — white band
========================================== */

.ss-industries {
	background-color: #fff;
	padding: 96px 0;
}

.ss-industries__intro {
	margin: 0 0 48px;
	max-width: 1159px;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 35.657px;
}

.ss-industries__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.ss-industry {
	background-color: #000;
	overflow: hidden;
}

.ss-industry__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ss-industry__media {
	aspect-ratio: 440 / 275;
	overflow: hidden;
}

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

.ss-industry__label {
	margin: 0;
	padding: 20px;
	min-height: 90px;
	display: flex;
	align-items: center;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 20px;
}

/* ==========================================
   Success stories — shares the white band
========================================== */

.ss-stories {
	background-color: #fff;
	padding: 0 0 96px;
}

/*
 * Text column floor: the 163px gap plus a fixed image column squeezed
 * the copy to ~109px at 1024, clipping its button.
 */
.ss-story {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(0, 562px);
	align-items: center;
	gap: clamp(40px, 8vw, 163px);
	padding: 57px 75px 34px;
	background-color: #000;
}

.ss-story__title {
	margin: 0 0 24px;
	max-width: 512px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 42px;
}

.ss-story__text {
	margin: 0 0 40px;
	max-width: 481px;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 30.524px;
}

.ss-story__media {
	aspect-ratio: 562 / 435;
	overflow: hidden;
}

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

/* Dash pagination — unique to this page. */
/*
 * Arrows sit at the outer edges with the dashes centred between them,
 * matching the Blue E carousel bar. They were grouped in the middle
 * alongside the dashes, which read as a different component.
 */
.ss-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 40px;
}

.ss-pagination__dashes {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.ss-pagination__dash {
	position: relative;
	width: 30px;
	height: 20px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.ss-pagination__dash::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 30px;
	height: 2px;
	background-color: #000;
	opacity: .3;
	transition: opacity .2s;
}

.ss-pagination__dash.is-active::after,
.ss-pagination__dash:hover::after {
	opacity: 1;
}

/*
 * Same Figma chevrons as the Blue E carousel arrows, drawn as a mask so
 * they inherit currentColor. The ‹/› in the markup remains
 * the fallback and is hidden by the zero font-size.
 */
.ss-pagination__arrow {
	position: relative;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	color: #1f1f1f;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: opacity .2s;
}

.ss-pagination__arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
}

.ss-pagination__arrow[data-carousel-prev]::before {
	-webkit-mask-image: url("../img/arrow-prev.svg");
	mask-image: url("../img/arrow-prev.svg");
}

.ss-pagination__arrow[data-carousel-next]::before {
	-webkit-mask-image: url("../img/arrow-next.svg");
	mask-image: url("../img/arrow-next.svg");
}

/* The design compounds two opacities to ~0.23; one value reads better. */
.ss-pagination__arrow.is-disabled {
	opacity: .35;
}

/* ==========================================
   Why Rittal — icon row
========================================== */

.ss-why {
	background-color: #000;
	padding: 96px 0;
}

.ss-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ss-why__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
}

/*
 * Fixed 60x60 box, not width alone: the uploaded icons are not all
 * square (one is 60x75), so "height: auto" made that one 15px taller
 * and pushed its label out of line with the rest of the row.
 */
.ss-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
}

.ss-why__icon img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	/* Scale to fit the box; never crop or stretch. */
	object-fit: contain;
}

.ss-why__label {
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 24.68px;
}

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

@media (max-width: 1023px) {
	.ss-types__grid,
	.ss-industries__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ss-story {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px;
	}

	.ss-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ss-types,
	.ss-industries,
	.ss-why {
		padding: 64px 0;
	}

	.ss-stories {
		padding-bottom: 64px;
	}

	.ss-types__grid,
	.ss-industries__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ss-type__plate {
		padding: 28px 24px;
	}

	.ss-type__title {
		margin-bottom: 14px;
	}

	.ss-type__body,
	.ss-industries__intro,
	.ss-story__text,
	.ss-types__footnote {
		line-height: 1.7;
	}

	.ss-story {
		padding: 28px 24px;
	}

	.ss-story__title {
		line-height: 1.4;
	}

	.ss-why__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ss-why__item {
		gap: 20px;
	}

	.blue-e-button.ss-button--wide {
		width: 230px;
	}

	.product-hero__button--wide {
		width: 230px;
	}
}

/*
 * Why Rittal carousel: each slide is its own grid, swapped by the shared
 * carousel script. [hidden] in blue-e.css keeps the inactive ones out.
 */
.ss-why__carousel {
	display: flex;
	flex-direction: column;
}

.ss-why__panels {
	flex: 1 1 auto;
}

/*
 * The dash pagination was designed for the white Success Stories band;
 * on the black Why Rittal section its near-black arrows and dashes are
 * invisible, so they invert here.
 */
.ss-why .ss-pagination__arrow {
	color: #fff;
}

.ss-why .ss-pagination__dash::after {
	background-color: #fff;
}