/* acf/multi-column overrides.
   Block styles (Styles panel): Stat strip, Stat cards, Stat columns,
   Intro beside items, Five across. Inside a Grey panel group the cards
   take the panel look (red titles, small grey copy, arrow buttons). The
   block-level button (sh_button field) is pinned top-right. */

.lp-multi-column .block-contents {
	max-width: 1020px;
}

/* Block-level button (functions.php, sh_button) */
.lp-multi-column .sh-block-btn {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

.lp-multi-column:has(.sh-block-btn) .block-contents {
	position: relative;
}

.lp-multi-column:has(.sh-block-btn) .lp-multi-column__intro {
	max-width: 600px;
}

@media screen and (max-width: 900px) {
	.lp-multi-column .sh-block-btn { position: static; align-self: flex-start; order: 1; }
	.lp-multi-column:has(.sh-block-btn) .lp-multi-column__grid { order: 2; }
	.lp-multi-column:has(.sh-block-btn) .lp-multi-column__intro { padding-right: 0; }
}

/* ---- Cards inside a Grey panel (homepage 4, 6; Why S+H safety) --------- */

.is-style-sh-panel-tr .lp-multi-column .block-contents,
.is-style-sh-panel-bl .lp-multi-column .block-contents {
	align-items: flex-start;
	gap: 40px;
	max-width: none;
}

[class*="is-style-sh-panel"] .lp-multi-column__intro {
	align-items: flex-start;
	max-width: 600px;
	text-align: left;
}

[class*="is-style-sh-panel"] .lp-multi-column__header,
[class*="is-style-sh-panel"] .lp-multi-column__sub-header,
[class*="is-style-sh-panel"] .lp-multi-column__body {
	text-align: left;
}

[class*="is-style-sh-panel"] .lp-multi-column__sub-header {
	margin-top: 4px;
}

[class*="is-style-sh-panel"] .lp-multi-column__grid {
	gap: 24px 80px;
}

[class*="is-style-sh-panel"] .lp-multi-column__icon-card {
	align-items: flex-start;
	text-align: left;
	position: relative;
}

[class*="is-style-sh-panel"] .lp-multi-column__icon-card-title {
	font-weight: 600;
	font-size: 22px;
	line-height: 29px;
	color: var(--primary-300);
	margin-bottom: 10px;
}

[class*="is-style-sh-panel"] .lp-multi-column__icon-card-body p {
	font-size: 13px;
	line-height: 19px;
	color: var(--text-secondary);
	margin: 0 0 6px;
}

[class*="is-style-sh-panel"] .lp-multi-column__icon-card-body ul {
	margin: 0;
	padding-left: 18px;
	font-size: 12px;
	line-height: 19px;
	color: var(--text-primary);
}

[class*="is-style-sh-panel"] a.btn.lp-multi-column__icon-card-btn {
	align-self: flex-end;
	margin-top: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--primary-300);
}

[class*="is-style-sh-panel"] a.btn.lp-multi-column__icon-card-btn:hover {
	color: var(--primary-400);
}

@media screen and (max-width: 900px) {
	[class*="is-style-sh-panel"] .lp-multi-column__grid { gap: 24px 32px; }
}

/* ---- Style: Stat strip (homepage band under the hero) ------------------ */

/* A band: 50 to the card text (40 + the cards' 10), like every band. */
.lp-multi-column.is-style-sh-stat-strip {
	background: var(--neutral-100);
	padding-block: calc(var(--sh-space-section) - 10px);
}

.is-style-sh-stat-strip .block-contents,
.is-style-sh-stat-strip .lp-multi-column__grid {
	gap: 0;
}

.is-style-sh-stat-strip .lp-multi-column__icon-card {
	padding-block: 10px;
	text-align: center;
}

.is-style-sh-stat-strip .lp-multi-column__icon-card + .lp-multi-column__icon-card {
	border-left: 4px solid var(--primary-300);
}

.is-style-sh-stat-strip .lp-multi-column__icon-card-title {
	font-weight: 600;
	font-size: 22px;
	line-height: 29px;
	color: var(--text-primary);
}

.is-style-sh-stat-strip .lp-multi-column__icon-card-body p {
	margin: 0;
}

/* ---- Style: Stat cards (Why S+H "These numbers") ------------------------
   Three 333x286 #6D6E70 cards, 11px apart: title 22/29 white, the Stat
   number, 13/19 white copy, a 12px dark footnote (Small text). */

.lp-multi-column.is-style-sh-stat-cards .block-contents {
	align-items: flex-start;
	gap: 36px;
}

.is-style-sh-stat-cards .lp-multi-column__intro {
	align-items: flex-start;
	text-align: left;
	max-width: 587px;
}

.is-style-sh-stat-cards .lp-multi-column__header,
.is-style-sh-stat-cards .lp-multi-column__sub-header {
	text-align: left;
}

.is-style-sh-stat-cards .lp-multi-column__grid {
	gap: 11px;
	width: 100%;
	align-items: stretch;
}

.is-style-sh-stat-cards .lp-multi-column__icon-card {
	align-items: flex-start;
	text-align: left;
	padding: 22px 22px 30px;
	background: var(--neutral-300);
	min-height: 286px;
}

.is-style-sh-stat-cards .lp-multi-column__icon-card-title {
	font-weight: 600;
	font-size: 22px;
	line-height: 29px;
	color: var(--white);
}

.is-style-sh-stat-cards .lp-multi-column__icon-card-body p {
	margin: 0 0 19px;
	font-size: 13px;
	line-height: 19px;
	color: var(--white);
}

.is-style-sh-stat-cards .lp-multi-column__icon-card-body p.sh-stat {
	font-size: 30px;
	line-height: 36px;
	color: var(--primary-400);
}

.is-style-sh-stat-cards .lp-multi-column__icon-card-body p.sh-small {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	color: var(--neutral-400);
}

/* ---- Style: Stat columns (Why S+H "The team behind the record") ---------
   Intro left, 587 wide; three columns with 2px red rules between: the
   Stat number above the title (17 Archivo 500 white), then 13/19 grey. */

.lp-multi-column.is-style-sh-stat-columns .block-contents {
	align-items: flex-start;
	gap: 58px;
}

.is-style-sh-stat-columns .lp-multi-column__intro {
	align-items: flex-start;
	text-align: left;
	max-width: 587px;
}

.is-style-sh-stat-columns .lp-multi-column__header,
.is-style-sh-stat-columns .lp-multi-column__sub-header,
.is-style-sh-stat-columns .lp-multi-column__body {
	text-align: left;
}

.is-style-sh-stat-columns .lp-multi-column__sub-header {
	color: var(--neutral-200);
}

.is-style-sh-stat-columns .lp-multi-column__body p {
	margin: 4px 0 0;
	line-height: 28px;
	color: var(--white);
}

.is-style-sh-stat-columns .lp-multi-column__grid {
	gap: 0;
	width: 100%;
}

.is-style-sh-stat-columns .lp-multi-column__icon-card {
	align-items: flex-start;
	text-align: left;
	padding: 6px 36px 0;
}

.is-style-sh-stat-columns .lp-multi-column__icon-card:first-child {
	padding-left: 0;
}

.is-style-sh-stat-columns .lp-multi-column__icon-card + .lp-multi-column__icon-card {
	border-left: 2px solid var(--primary-300);
}

/* The body's Stat number moves above the title. */
.is-style-sh-stat-columns .lp-multi-column__icon-card-body {
	display: contents;
}

.is-style-sh-stat-columns .lp-multi-column__icon-card-body p.sh-stat {
	order: -1;
	color: var(--primary-300);
}

.is-style-sh-stat-columns .lp-multi-column__icon-card-title {
	font-weight: 500;
	font-size: 17px;
	line-height: 23px;
	color: var(--white);
	margin-bottom: 10px;
}

.is-style-sh-stat-columns .lp-multi-column__icon-card-body p:not(.sh-stat) {
	margin: 0;
	font-size: 13px;
	line-height: 19px;
	color: var(--neutral-200);
}

@media screen and (max-width: 767px) {
	.is-style-sh-stat-columns .lp-multi-column__icon-card,
	.is-style-sh-stat-columns .lp-multi-column__icon-card:first-child {
		padding: 16px 0 0;
		border-left: 0;
	}
	.is-style-sh-stat-columns .lp-multi-column__icon-card + .lp-multi-column__icon-card {
		border-left: 0;
		border-top: 2px solid var(--primary-300);
	}
}

/* ---- Style: Intro beside items (Why S+H safety panel) -------------------
   Intro left (548 of 1020), items in two 172px columns on the right. */

.lp-multi-column.is-style-sh-intro-beside .block-contents {
	display: grid;
	grid-template-columns: minmax(0, 587fr) minmax(0, 407fr);
	gap: 26px;
	align-items: start;
}

.is-style-sh-intro-beside .lp-multi-column__body p {
	margin: 12px 0 0;
	line-height: 28px;
	color: var(--text-primary);
}

.is-style-sh-intro-beside .lp-multi-column__grid,
.is-style-sh-intro-beside.lp-multi-column--cols-2 .lp-multi-column__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 63px;
	padding-top: 28px;
}

.is-style-sh-intro-beside .lp-multi-column__icon-card-title {
	margin-bottom: 2px;
}

@media screen and (max-width: 900px) {
	.lp-multi-column.is-style-sh-intro-beside .block-contents { grid-template-columns: 1fr; }
	.is-style-sh-intro-beside .lp-multi-column__grid { padding-top: 0; }
}

/* ---- Style: Five across (homepage sectors band) ------------------------ */

.is-style-sh-five .block-contents {
	gap: 36px;
}

.is-style-sh-five .lp-multi-column__intro {
	max-width: 620px;
}

.is-style-sh-five .lp-multi-column__sub-header {
	font-family: var(--font-family-body);
	font-weight: 400;
	font-size: 14px;
}

.is-style-sh-five .lp-multi-column__grid,
.is-style-sh-five.lp-multi-column--cols-4 .lp-multi-column__grid,
.is-style-sh-five.lp-multi-column--cols-3 .lp-multi-column__grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.is-style-sh-five .lp-multi-column__icon-wrapper {
	width: 36px;
	height: 36px;
	margin-bottom: 6px;
}

.is-style-sh-five .lp-multi-column__icon {
	max-width: 30px;
	max-height: 30px;
}

.is-style-sh-five .lp-multi-column__icon-card-title {
	font-weight: 800;
	font-size: 14px;
	line-height: 21px;
	color: var(--white);
}

@media screen and (max-width: 767px) {
	.is-style-sh-five .lp-multi-column__grid,
	.is-style-sh-five.lp-multi-column--cols-4 .lp-multi-column__grid,
	.is-style-sh-five.lp-multi-column--cols-3 .lp-multi-column__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Plain Multi Column in a Dark band, and style "Half width" ----------
   Request A Quote "What happens next?" (plain, 3 across); Our Team "Built
   around C.R.E.W." and Careers "Why Work at S+H Steel?" (Half width: the
   frames keep the items in the left 588px of the 1020 content); the "One
   team" photo band (Half width, no items). Intro and cards left-aligned,
   card titles Archivo 600 22/29 white, text Open Sans 13/19 white, red
   outline button (the Primary component). 2026-09-29. */

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .block-contents,
.lp-multi-column.is-style-sh-half .block-contents {
	align-items: flex-start;
}

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .lp-multi-column__intro,
.lp-multi-column.is-style-sh-half .lp-multi-column__intro {
	align-items: flex-start;
	max-width: 587px;
}

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) :is(.lp-multi-column__header, .lp-multi-column__sub-header, .lp-multi-column__body),
.lp-multi-column.is-style-sh-half :is(.lp-multi-column__header, .lp-multi-column__sub-header, .lp-multi-column__body) {
	text-align: left;
}

/* Over a photo (the One team band) the sub-line is grey, as in the frames. */
.lp-multi-column.is-style-sh-half.lp-block--has-bg .lp-multi-column__sub-header {
	color: var(--neutral-200);
}

.lp-multi-column.is-style-sh-half .lp-multi-column__body p {
	color: var(--white);
}

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .lp-multi-column__grid {
	column-gap: clamp(24px, 6vw, 87px);
	row-gap: 28px;
}

.lp-multi-column.is-style-sh-half .lp-multi-column__grid {
	max-width: 588px;
	column-gap: 24px;
	row-gap: 28px;
}

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .lp-multi-column__icon-card,
.lp-multi-column.is-style-sh-half .lp-multi-column__icon-card {
	align-items: flex-start;
	text-align: left;
	padding: 0;
	background: none;
}

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .lp-multi-column__icon-card-title,
.lp-multi-column.is-style-sh-half .lp-multi-column__icon-card-title {
	margin: 0 0 20px;
	font-weight: 600;
	font-size: 22px;
	line-height: 29px;
	color: var(--white);
}

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .lp-multi-column__icon-card-body p:not(:last-child),
.lp-multi-column.is-style-sh-half .lp-multi-column__icon-card-body p:not(:last-child) {
	margin: 0 0 8px;
}

.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .lp-multi-column__icon-card-body p,
.lp-multi-column.is-style-sh-half .lp-multi-column__icon-card-body p {
	font-size: 13px;
	line-height: 19px;
	color: var(--white);
}

.lp-multi-column.is-style-sh-half a.btn-primary,
.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) a.btn-primary {
	color: var(--primary-300);
	border-color: var(--primary-300);
}

.lp-multi-column.is-style-sh-half a.btn-primary:hover,
.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) a.btn-primary:hover {
	color: var(--white);
	background: var(--primary-300);
}

@media screen and (max-width: 765px) {
	.is-style-sh-dark .lp-multi-column:not([class*="is-style-"]) .lp-multi-column__grid,
	.lp-multi-column.is-style-sh-half .lp-multi-column__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}