/* WS5 — Steel & Hardware Centre (page #24). Classes are set on the native Bricks elements; layout props that
   Bricks exposes (grid columns/gap, card colours, gallery columns/ratio/radius) stay in the element settings. */

/* ---------- banner: full-width photo, navy angled H1 label over the left ---------- */
.spf-shc-banner.brxe-section {
	--spf-shc-slant: clamp(3.2rem, 6vw, 8.4rem);
	position: relative;
	width: 100%;
	height: clamp(21rem, 17.7vw, 25.5rem); /* ~255px at 1440 (5.6:1) */
	padding: 0;
	overflow: hidden;
}
.spf-shc-banner__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.spf-shc-banner .spf-shc-banner__label.brxe-heading {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	max-width: 94%;
	margin: 0;
	padding: 1.7rem calc(var(--spf-shc-slant) + 1.2rem) 1.7rem clamp(1.6rem, 3vw, 4rem);
	background: rgba(0, 48, 150, .9);
	clip-path: polygon(0 0, calc(100% - var(--spf-shc-slant)) 0, 100% 100%, 0 100%);
	color: #fff;
	font-family: "Arial Black", Arial, sans-serif;
	font-size: clamp(2.1rem, 1.2rem + 2vw, 3.8rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.spf-shc-h1-line { display: block; }

/* ---------- content column (sections stay transparent so the WS3 watermark shows through) ---------- */
.spf-shc-main.brxe-section {
	padding: 4.8rem 1.5rem 7rem;
	background: none;
}
.spf-shc-col.brxe-container { align-items: stretch; }
.spf-shc-intro,
.spf-shc-inside,
.spf-shc-brands { width: 100%; }
.spf-shc-inside { margin-top: 4.8rem; }
.spf-shc-brands { margin-top: 4.2rem; }

/* ---------- heading + long yellow rule rows ---------- */
.spf-shc-headrow { width: 100%; }
.spf-shc-headrow > .spf-shc-rule.brxe-divider {
	flex: 1 1 6rem;
	width: auto;
	min-width: 6rem;
}
.spf-shc-h2.brxe-heading,
.spf-shc-label.brxe-heading,
.spf-shc-cta__text.brxe-text-basic {
	margin: 0;
	color: #003096;
	font-family: "Arial Black", Arial, sans-serif;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.spf-shc-h2.brxe-heading { font-size: clamp(1.7rem, 1.4rem + .6vw, 2.1rem); }
.spf-shc-label.brxe-heading,
.spf-shc-cta__text.brxe-text-basic { font-size: clamp(1.6rem, 1.35rem + .5vw, 1.9rem); }
.spf-shc-headrow--rule-first > .spf-shc-label { flex: 0 0 auto; white-space: nowrap; }
.spf-shc-intro .spf-shc-headrow { margin-bottom: .8rem; }

/* ---------- body copy ---------- */
.spf-shc-copy.brxe-text { width: 100%; }
.spf-shc-help { width: 100%; margin-top: 2.7rem; } /* one line gap (1.5 x 1.8rem) */
.spf-shc-h3.brxe-heading {
	margin: 0;
	color: #003096;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: none;
}

/* ---------- take a look inside: 4 x 3:2 photos, lightbox ---------- */
.spf-shc-gallery { margin-top: 1.8rem; }
.spf-shc-gallery .bricks-layout-item a {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	cursor: zoom-in;
}
.spf-shc-gallery .bricks-layout-item .image {
	display: block;
	width: 100%;
	object-fit: cover;
}
.spf-shc-gallery .bricks-layout-item a:focus-visible {
	outline: 3px solid #003096;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
	.spf-shc-gallery .bricks-layout-item .image { transition: filter .2s ease; }
}
.spf-shc-gallery .bricks-layout-item a:hover .image { filter: brightness(1.07); }

/* ---------- our brands: 38 white logo cards (colour set natively per card when the artwork is solid) ---------- */
.spf-shc-grid.brxe-block {
	width: 100%;
	margin-top: 2.6rem;
	align-items: stretch;
}
.spf-shc-grid > .spf-shc-card.brxe-block {
	width: auto;
	min-width: 0;
	height: 9.5rem;
	padding: 1.1rem 1.5rem;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
	overflow: hidden;
}
.spf-shc-grid > .spf-shc-card--solid.brxe-block { padding: .5rem .8rem; }
.spf-shc-card > .spf-shc-logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* solid-colour artwork (Q-Bond, Nice): scale up to fill the card, crop the empty field around the wordmark */
.spf-shc-card > .spf-shc-logo.spf-shc-logo--fill {
	object-fit: cover;
	object-position: 50% 78%;
}

/* stop-gap PDF crops: trim the sliver of original card edge. The <img> is sized to the artwork (height:auto) so the
   clip percentages apply to the artwork itself, not to the letterboxed box. */
.spf-shc-card > .spf-shc-logo.spf-shc-logo--trim-bottom,
.spf-shc-card > .spf-shc-logo.spf-shc-logo--trim-edges {
	height: auto;
	max-height: 100%;
}
.spf-shc-card > .spf-shc-logo.spf-shc-logo--trim-bottom { clip-path: inset(0 0 6% 0); }
.spf-shc-card > .spf-shc-logo.spf-shc-logo--trim-edges { clip-path: inset(2.2% 0 1.6% 0); }
/* Galv-Etch is a two-tone (yellow | charcoal) block: let it run edge to edge like the PDF card */
.spf-shc-grid > .spf-shc-card.spf-shc-card--galv.brxe-block {
	padding: 0;
	background-image: linear-gradient(90deg, #ebec06 52.3%, #262422 52.3%);
}

/* ---------- closing call to action ---------- */
.spf-shc-cta { width: 100%; margin-top: 4.2rem; }
.spf-shc-cta__text.brxe-text-basic { flex: 0 1 29.6em; max-width: 100%; text-wrap: balance; }
.spf-shc-cta > .spf-shc-rule.brxe-divider { flex: 1 1 8rem; width: auto; min-width: 8rem; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
	.spf-shc-banner.brxe-section { height: 22rem; }
	/* label moves to the top so the staff member and the man at the till stay visible */
	.spf-shc-banner .spf-shc-banner__label.brxe-heading { top: 1.4rem; transform: none; padding-top: 1.2rem; padding-bottom: 1.2rem; }
	.spf-shc-main.brxe-section { padding: 3.2rem 1.5rem 5rem; }
	.spf-shc-inside { margin-top: 3.4rem; }
	.spf-shc-brands { margin-top: 3.2rem; }
	.spf-shc-cta { margin-top: 3.2rem; }
	.spf-shc-grid > .spf-shc-card.brxe-block { height: 9rem; }
}
@media (max-width: 478px) {
	.spf-shc-grid > .spf-shc-card.brxe-block { height: 8.4rem; padding: 1rem 1.2rem; }
	.spf-shc-grid > .spf-shc-card--solid.brxe-block { padding: .4rem .6rem; }
}