@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400&display=swap");

/* ============================================================================================================================
   30 DAYS OF COLOUR campaign section - INTERNAL pages (Professionals, Industrial, For Your Home) - NOV09. STANDALONE file.
   Clone of css/home-campaign-nov09.css re-scoped from ".hn-home" to ".cp-campaign-pages" and re-measured for the 1360px internal
   Figma. Every selector starts with ".cp-campaign-pages" (except the authorised ancestor release below; the custom properties live on .hn-campaign, not on :root), so
   nothing else on the page is affected. No body / #main / .section-inner ancestor overrides are included on purpose.

   Markup (CMS HTML on the three internal pages):
     <div class="cp-campaign-pages">
       <section class="hn-campaign" aria-labelledby="...">
         <div class="hn-campaign__hero" style="background-image:url('...')">      <- background supplied inline
           <div class="hn-campaign__inner">
             <h2>...</h2> <p class="hn-campaign__intro">...</p> <h3>...</h3> <p class="hn-campaign__tagline">...</p>
             <a class="hn-campaign__button" href="...">Read the stories <svg ...></svg></a>
           </div>
         </div>
         <div class="hn-campaign__posts">
           <article class="hn-campaign__post"><a href="..."><img ...></a>
             <div class="hn-campaign__post-copy"><time datetime="...">...</time> <a href="...">Title</a></div></article> (x3)
         </div>
       </section>
     </div>

   Desktop (container 1360px, centred, NOT full-bleed): hero 611px high; copy 56px from the left and 58px from the hero top;
   cards 3 x 400px, 40px gap, 40px side inset, starting 528px below the hero top (they overlap the hero's last 83px).
   Sizing follows the WIDTH OF THE WRAPPER (container queries), not the viewport, because the internal-page column is narrower
   than the screen. Below 1360px the hero height follows the copy and the cards share the width.
   Tunable on .hn-campaign: --cp-campaign-gap-top, --cp-campaign-gap-bottom, --cp-campaign-overlap,
   --cp-campaign-card-min.
   Breakout: the wrapper is min(1360px, 100vw - 40px) wide and centred on its parent with left:50% + translateX(-50%), so the
   1180px internal column no longer limits it. The only rules outside the .cp-campaign-pages scope are the two scoped overflow
   releases below (#main and .section-inner that CONTAIN the campaign, via :has()) and the iPad "MORE FILTERS" nowrap rule
   (body:has(.cp-campaign-pages) only); no other page is matched.
   Merriweather is not loaded on internal pages, so the same Google Fonts import the homepage uses (home-new.css line 1) is
   repeated here. Headings keep the homepage's uppercase.
   Typography is declared explicitly on every element (family, size, weight, line-height, colour, spacing) so the old theme's
   bare h2 / h3 / p / a rules (content.css, core.css, main.css) do not leak in.
   ============================================================================================================================ */

/* ---- Ancestor release (authorised exception, only where the campaign is present) -------------------------------------------
   Parent chain: #main.page-section (overflow hidden) > .m-w1 > .m-w2.section-inner (overflow hidden) > #content > .c-w1 >
   .sfContentBlock > .cp-campaign-pages. Only these two are released; #wrapper still clips at the viewport edge, and the breakout
   below is centred and never wider than the viewport minus 40px, so no horizontal scrollbar is created. */
#main:has(.cp-campaign-pages),
#main .section-inner:has(.cp-campaign-pages) {
	overflow: visible;
}

/* ---- Wrapper: breakout 1360px max, centred on its parent; it is the size container for the responsive rules ------------- */
.cp-campaign-pages {
	container-type: inline-size;
	container-name: cp-campaign;
	position: relative;
	left: 50%;
	display: block;
	box-sizing: border-box;
	width: min(1360px, calc(100vw - 40px));
	max-width: none;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
}

.cp-campaign-pages .hn-campaign,
.cp-campaign-pages .hn-campaign *,
.cp-campaign-pages .hn-campaign *::before,
.cp-campaign-pages .hn-campaign *::after {
	box-sizing: border-box;
}

/* ---- Section ------------------------------------------------------------------------------------------------------- */
.cp-campaign-pages .hn-campaign {
	--cp-campaign-gap-top: 0px;
	--cp-campaign-gap-bottom: 32px;
	--cp-campaign-overlap: 83px;
	--cp-campaign-card-min: 312px;
	position: relative;
	display: block;
	float: none;
	width: 100%;
	max-width: 100%;
	margin: var(--cp-campaign-gap-top) 0 0;
	padding: 0;
	font-family: "Source Sans Pro", sans-serif;
	text-align: left;
}

/* ---- Hero (611px high; artwork 572px tall, left bottom; the hero background-image is inline) -------------------------- */
.cp-campaign-pages .hn-campaign .hn-campaign__hero {
	position: relative;
	display: block;
	float: none;
	width: 100%;
	height: 611px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #1a1a1a;
	background-repeat: no-repeat;
	/* Figma 1360 x 611 crop: offset -23.697 / -0.232, size 119.425% x 93.655% (= 1624 x 572px, starts at the top) */
	background-position: -23.697px -0.232px;
	background-size: 119.425% 93.655%;
}

/* Contrast layer for narrower containers only (off on desktop to match the design) */
.cp-campaign-pages .hn-campaign .hn-campaign__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	display: none;
	pointer-events: none;
}

.cp-campaign-pages .hn-campaign .hn-campaign__inner {
	position: relative;
	z-index: 1;
	display: block;
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 58px 56px 0;
}

/* ---- Copy ---------------------------------------------------------------------------------------------------------- */
.cp-campaign-pages .hn-campaign .hn-campaign__inner h2,
.cp-campaign-pages .hn-campaign .hn-campaign__inner .hn-campaign__title {
	display: block;
	float: none;
	width: 518px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Merriweather, serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	line-height: 56px;
	letter-spacing: 0;
	text-align: left;
	text-transform: uppercase;
	text-shadow: none;
	color: #fff;
}

.cp-campaign-pages .hn-campaign .hn-campaign__inner p {
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	text-shadow: none;
	color: #fff;
}

.cp-campaign-pages .hn-campaign .hn-campaign__inner p.hn-campaign__intro,
.cp-campaign-pages .hn-campaign .hn-campaign__inner h2 + p {
	width: 743px;
	max-width: 100%;
	margin-top: 10px;
	font-size: 24px;
	line-height: 33px;
}

.cp-campaign-pages .hn-campaign .hn-campaign__inner h3,
.cp-campaign-pages .hn-campaign .hn-campaign__inner .hn-campaign__subtitle {
	display: block;
	float: none;
	margin: 32px 0 0;
	padding: 0;
	border: 0;
	font-family: Merriweather, serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 400;
	line-height: 44px;
	letter-spacing: -0.36px;
	text-align: left;
	text-transform: uppercase;
	text-shadow: none;
	color: #ff5246;
}

.cp-campaign-pages .hn-campaign .hn-campaign__inner p.hn-campaign__tagline {
	margin-top: 10px;
	font-size: 20px;
	line-height: 28px;
}

.cp-campaign-pages .hn-campaign .hn-campaign__button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	float: none;
	width: 240px;
	max-width: 100%;
	height: 50px;
	margin: 20px 0 0;
	padding: 0 20px;
	border: 2px solid #000;
	background: #fff;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
	color: #000;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cp-campaign-pages .hn-campaign .hn-campaign__button:hover,
.cp-campaign-pages .hn-campaign .hn-campaign__button:focus {
	background: #000;
	color: #fff;
	text-decoration: none;
}

.cp-campaign-pages .hn-campaign .hn-campaign__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.cp-campaign-pages .hn-campaign .hn-campaign__button svg {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 10px;
}

/* ---- Post cards (3 x 400px, 40px gap, 40px side inset, top 528px = overlap the hero's last 83px) ------------------------ */
.cp-campaign-pages .hn-campaign .hn-campaign__posts {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 400px));
	justify-content: center;
	gap: 40px;
	float: none;
	width: 100%;
	max-width: 100%;
	margin: calc(var(--cp-campaign-overlap) * -1) 0 var(--cp-campaign-gap-bottom);
	padding: 0 40px;
}

/* min-height, not height: titles are never clipped - a long title makes the (equal-height) row taller */
.cp-campaign-pages .hn-campaign .hn-campaign__post {
	display: flex;
	flex-direction: column;
	float: none;
	min-width: 0;
	min-height: var(--cp-campaign-card-min);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 2px solid #c22d29;
	background: #fff;
	color: #000;
}

/* banner image link: 8px padding, original 1000 x 560 shown whole (contain) */
.cp-campaign-pages .hn-campaign .hn-campaign__post > a {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	padding: 8px;
	line-height: 0;
	text-decoration: none;
}

/* width is !important only because mobile.css has "#content img { width: auto }" (an ID selector) */
.cp-campaign-pages .hn-campaign .hn-campaign__post > a img {
	display: block;
	width: 100% !important;
	height: auto;
	max-width: 100%;
	margin: 0;
	aspect-ratio: 1000 / 560;
	object-fit: contain;
	border: 0;
}

.cp-campaign-pages .hn-campaign .hn-campaign__post-copy {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0 28px 28px;
	font-family: "Source Sans Pro", sans-serif;
	text-align: left;
}

.cp-campaign-pages .hn-campaign .hn-campaign__post-copy time {
	display: block;
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -0.14px;
	text-transform: none;
	color: #646464;
}

.cp-campaign-pages .hn-campaign .hn-campaign__post-copy a {
	display: block;
	margin: 0;
	padding: 0;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	color: #000;
}

.cp-campaign-pages .hn-campaign .hn-campaign__post-copy a:hover,
.cp-campaign-pages .hn-campaign .hn-campaign__post-copy a:focus {
	color: #c22d29;
	text-decoration: underline;
}

.cp-campaign-pages .hn-campaign .hn-campaign__post > a:focus-visible,
.cp-campaign-pages .hn-campaign .hn-campaign__post-copy a:focus-visible {
	outline: 2px solid #c22d29;
	outline-offset: 2px;
}

/* ============================================================================================================================
   Narrower than 1360px (width of the wrapper): no fixed hero height - the copy decides it, so nothing can overflow - and the
   cards share the width equally. A dark layer sits over the artwork so the white copy always has contrast.
   ============================================================================================================================ */
@container cp-campaign (max-width: 1359px) {
	.cp-campaign-pages .hn-campaign .hn-campaign__hero {
		height: auto;
		padding: 56px 40px calc(var(--cp-campaign-overlap) + 40px);
		background-position: left top;
		background-size: cover;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__hero::before {
		display: block;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.32) 100%);
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner {
		padding: 0;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy {
		padding: 0 20px 28px;
	}
}

/* ---- Tablet-sized column ------------------------------------------------------------------------------------------- */
@container cp-campaign (max-width: 1023px) {
	.cp-campaign-pages .hn-campaign {
		--cp-campaign-overlap: 60px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__hero {
		padding: 48px 30px calc(var(--cp-campaign-overlap) + 32px);
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner h2,
	.cp-campaign-pages .hn-campaign .hn-campaign__inner .hn-campaign__title {
		width: 560px;
		font-size: 36px;
		line-height: 44px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner p.hn-campaign__intro,
	.cp-campaign-pages .hn-campaign .hn-campaign__inner h2 + p {
		font-size: 20px;
		line-height: 28px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner h3,
	.cp-campaign-pages .hn-campaign .hn-campaign__inner .hn-campaign__subtitle {
		font-size: 30px;
		line-height: 38px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner p.hn-campaign__tagline {
		font-size: 18px;
		line-height: 26px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__posts {
		gap: 16px;
		padding: 0 30px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy {
		padding: 0 16px 28px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy a {
		font-size: 18px;
		line-height: 26px;
	}
}

/* ---- Narrow column: one card per row, image left and copy right ----------------------------------------------------- */
@container cp-campaign (max-width: 899px) {
	.cp-campaign-pages .hn-campaign .hn-campaign__posts {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post {
		display: grid;
		grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
		align-items: center;
		min-height: 0;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy {
		padding: 12px 24px 28px 8px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy a {
		font-size: 20px;
		line-height: 28px;
	}
}

/* ---- Phone-sized column --------------------------------------------------------------------------------------------- */
@container cp-campaign (max-width: 640px) {
	.cp-campaign-pages .hn-campaign {
		--cp-campaign-overlap: 40px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__hero {
		padding: 40px 24px calc(var(--cp-campaign-overlap) + 32px);
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__hero::before {
		background: rgba(0, 0, 0, 0.62);
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner h2,
	.cp-campaign-pages .hn-campaign .hn-campaign__inner .hn-campaign__title {
		width: 100%;
		font-size: 30px;
		line-height: 38px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner p.hn-campaign__intro,
	.cp-campaign-pages .hn-campaign .hn-campaign__inner h2 + p {
		font-size: 18px;
		line-height: 26px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner h3,
	.cp-campaign-pages .hn-campaign .hn-campaign__inner .hn-campaign__subtitle {
		margin-top: 24px;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.24px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__inner p.hn-campaign__tagline {
		font-size: 18px;
		line-height: 26px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__posts {
		gap: 24px;
		padding: 0 24px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy {
		padding: 4px 20px 28px;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy a {
		font-size: 20px;
		line-height: 28px;
	}
}

/* ---- Dynamic cards (js/home-campaign-posts-nov10.js) ---------------------------------------------------------------------
   While the script loads the posts the (empty) container keeps the space of one card row so the page below does not jump;
   it is released as soon as the cards or the fallback link are in. The fallback is one white card-style box with a plain link. */
.cp-campaign-pages .hn-campaign .hn-campaign__posts[aria-busy="true"] {
	min-height: var(--cp-campaign-card-min);
}

.cp-campaign-pages .hn-campaign .hn-campaign__posts-message {
	grid-column: 1 / -1;
	margin: 0;
	padding: 28px;
	border: 2px solid #c22d29;
	background: #fff;
	font-family: "Source Sans Pro", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: #000;
}

.cp-campaign-pages .hn-campaign .hn-campaign__posts-message a {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	text-decoration: underline;
	color: #000;
}

.cp-campaign-pages .hn-campaign .hn-campaign__posts-message a:hover,
.cp-campaign-pages .hn-campaign .hn-campaign__posts-message a:focus {
	color: #c22d29;
	text-decoration: underline;
}

.cp-campaign-pages .hn-campaign .hn-campaign__posts-message a:focus-visible {
	outline: 2px solid #c22d29;
	outline-offset: 2px;
}

/* one card per row in a narrow column: reserve about three cards while loading */
@container cp-campaign (max-width: 899px) {
	.cp-campaign-pages .hn-campaign .hn-campaign__posts[aria-busy="true"] {
		min-height: 640px;
	}
}

@container cp-campaign (max-width: 640px) {
	.cp-campaign-pages .hn-campaign .hn-campaign__posts[aria-busy="true"] {
		min-height: 900px;
	}
}

/* ---- iPad (viewport 768-1199px) - internal pages only (For Your Home, Professionals, Industrial) --------------------------------
   16px (not 28px) of white under the card titles; 64px after the campaign before the next section. Professionals: 32px between the
   product-filter toolbar and the campaign (only on a page that has the toolbar, #more-filter-sec) and "MORE FILTERS" never wraps. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.cp-campaign-pages .hn-campaign {
		--cp-campaign-gap-bottom: 64px;
	}

	body:has(#more-filter-sec) .cp-campaign-pages .hn-campaign {
		--cp-campaign-gap-top: 32px;
	}

	/* the 312px card minimum is released here so the 16px padding really is the white space under the last title line; the three
	   cards stay equal in height (grid rows stretch to the tallest card) and titles are never clipped */
	.cp-campaign-pages .hn-campaign .hn-campaign__post {
		min-height: 0;
		height: auto;
	}

	.cp-campaign-pages .hn-campaign .hn-campaign__post-copy {
		padding-bottom: 16px;
	}

	body:has(.cp-campaign-pages) #more-filter-text,
	body:has(.cp-campaign-pages) #more-filter-text label {
		white-space: nowrap;
	}

	/* "MORE FILTERS" + the plus icon stay side by side on ONE line (the legacy floats stacked the icon under the label inside the
	   narrow #more-filter column, making the button 70px high). The column grows to the button instead of clipping it. */
	/* Professionals filter toolbar (only the .top-options row that contains #more-filter-sec): the filter column (a Pure 25%-wide
	   inline-block, ~247px) is too narrow for [MORE FILTERS +] and [CLEAR ALL] side by side, so CLEAR ALL overlapped the button.
	   The row becomes a non-wrapping flex row: the left spacer column keeps its 25% (the filter column starts where it did), the
	   filter column grows to the width of its content (never wraps, never shrinks) and the trailing spacer columns absorb
	   the difference. Inside #more-filter-sec the button and CLEAR ALL sit on one line, 12px apart, no floats and no fixed widths. */
	body:has(.cp-campaign-pages) .top-options:has(#more-filter-sec) {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	body:has(.cp-campaign-pages) .top-options:has(#more-filter-sec) > .filter-empty-col:first-child {
		flex: 0 0 25%;
		min-width: 0;
	}

	body:has(.cp-campaign-pages) .top-options:has(#more-filter-sec) > .filter-col {
		flex: 0 0 auto;
		width: auto;
		min-width: max-content;
	}

	body:has(.cp-campaign-pages) .top-options:has(#more-filter-sec) > .filter-col ~ .filter-empty-col {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	body:has(.cp-campaign-pages) #more-filter-sec {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
	}

	body:has(.cp-campaign-pages) #more-filter-sec #more-filter,
	body:has(.cp-campaign-pages) #more-filter-sec #clear-all {
		float: none;
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	body:has(.cp-campaign-pages) .moreFilterBtn {
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 4px;
		white-space: nowrap;
	}

	body:has(.cp-campaign-pages) .moreFilterBtn #more-filter-text,
	body:has(.cp-campaign-pages) .moreFilterBtn #more-filter-icon {
		float: none;
		flex: 0 0 auto;
		padding-top: 0;
	}

	body:has(.cp-campaign-pages) .moreFilterBtn #more-filter-icon img {
		display: block;
	}

	/* Professionals: before any search the results panel (#...pnlResults.block.search-result) holds nothing visible but its
	   "&nbsp;" line (23.8px) and 60px bottom padding = 83.8px of white space between the filter toolbar and the campaign.
	   Collapse it ONLY while it is empty: no result list (.pure-g from the ListView layout), no "Results" heading and no result
	   message text. Once a search renders products (the .pure-g list) or a "no results" message, the panel is shown exactly
	   as before, pagination included. Height 0 + overflow hidden keeps the element in the DOM (the page's scroll-to-results script
	   still finds it); the 32px gap is the campaign's own --cp-campaign-gap-top. */
	body:has(.cp-campaign-pages) .block.search-result:not(:has(.pure-g)):not(:has(h2)):not(:has([id$="lblResultMessage"]:not(:empty))) {
		height: 0;
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-campaign-pages .hn-campaign .hn-campaign__button {
		transition: none;
	}
}