/**
 * Category link panels.
 *
 * The notched black / gold panels from the current site, reused as the two
 * links through to the category overview pages. The whole panel is the link.
 *
 * Contrast note: #bd9b51 carries dark text at roughly 8:1, but white text at
 * only 2.6:1, so the gold panel is deliberately inked rather than reversed.
 */

/* The Products nav item anchors here, so keep the panels clear of the sticky
   header when jumped to. */
.sterling-cats {
	scroll-margin-top: 110px;
}

.sterling-cats__row {
	align-items: stretch;
}

/* Elementor gives child containers width:100%, so cap the width rather than
   relying on flex-basis alone, or the two panels stack full width. */
.sterling-cat {
	position: relative;
	flex: 1 1 340px;
	width: auto;
	max-width: calc(50% - 16px);
	gap: 0;
	/* The cut corner, top right. */
	clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%);
	transition: transform 0.18s ease, filter 0.18s ease;
}

.sterling-cat:hover,
.sterling-cat:focus-within {
	transform: translateY(-3px);
	filter: brightness(1.08);
}

/* Category icons, lifted as vectors from the current site's panels.
   They sit inside .e-con-inner so they pick up the container padding set in
   Elementor, rather than hugging the panel corner. */
.sterling-cat > .e-con-inner::before {
	content: "";
	display: block;
	width: 34px;
	height: 40px;
	margin-bottom: 1.5rem;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}

/* Both source icons are drawn in white. */
.sterling-cat--black > .e-con-inner::before {
	background-image: url("../images/icon-keyed-padlock.svg");
}

.sterling-cat--gold > .e-con-inner::before {
	background-image: url("../images/icon-enclosure-lock.svg");
	filter: invert(1);
}

/* Colour variants
   ------------------------------------------------------------------------ */

.sterling-cat--black {
	background-color: var(--sterling-black, #0e0e0e);
}

.sterling-cat--black::before {
	filter: invert(1);
}

.sterling-cat--gold {
	background-color: var(--sterling-gold, #bd9b51);
}

/* Type
   ------------------------------------------------------------------------ */

.elementor-widget-heading.sterling-cat__title .elementor-heading-title {
	margin: 0 0 0.85rem;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: none;
	letter-spacing: 0;
}

.sterling-cat--black .sterling-cat__title .elementor-heading-title {
	color: var(--sterling-gold, #bd9b51);
}

.sterling-cat--gold .sterling-cat__title .elementor-heading-title {
	color: var(--sterling-black, #0e0e0e);
}

.sterling-cat__copy {
	max-width: 34ch;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.55;
}

.sterling-cat--black .sterling-cat__copy {
	color: #fff;
}

.sterling-cat--gold .sterling-cat__copy {
	color: var(--sterling-black, #0e0e0e);
}

/* Call to action
   ------------------------------------------------------------------------ */

.sterling-cat__cta {
	margin-top: auto;
	padding-top: 1.5rem;
}

.elementor-widget-heading.sterling-cat__cta .elementor-heading-title {
	font-family: var(--sterling-display, sans-serif);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.elementor-widget-heading.sterling-cat__cta .elementor-heading-title::after {
	content: " →";
	white-space: nowrap;
}

.sterling-cat--black .sterling-cat__cta .elementor-heading-title {
	color: #fff;
}

.sterling-cat--gold .sterling-cat__cta .elementor-heading-title {
	color: var(--sterling-black, #0e0e0e);
}

/* Breakpoints
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.sterling-cat {
		flex-basis: 100%;
		max-width: 100%;
		clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sterling-cat {
		transition: none;
	}

	.sterling-cat:hover,
	.sterling-cat:focus-within {
		transform: none;
	}
}