/* ============================================================================================================================
   30 DAYS OF COLOUR campaign section - new homepage only (NOV09). STANDALONE file: link it AFTER /css/home-new.css.
   Every selector starts with ".hn-home .hn-campaign", so nothing outside that section (or any other page) is affected.
   It does not redefine .hn-home, .hn-cards or .hn-promos; fonts are the ones the homepage already loads (Merriweather from
   home-new.css, Source Sans Pro from the master), so no @import / @font-face here.

   Markup (Sitefinity HTML, placed between .hn-cards and .hn-promos, inside .hn-home):
     <section class="hn-campaign" aria-labelledby="hn-campaign-title">
       <div class="hn-campaign__hero" style="background-image:url('...1655x584 image...')">
         <div class="hn-campaign__inner">
           <h2 id="hn-campaign-title">Supporting Canadian Business</h2>
           <p class="hn-campaign__intro">...</p>
           <h3>30 Days of Colour</h3>
           <p class="hn-campaign__tagline">...</p>
           <a class="hn-campaign__button" href="...">Read the stories <svg viewBox="0 0 16 10" aria-hidden="true" focusable="false">...</svg></a>
         </div>
       </div>
       <div class="hn-campaign__posts">
         <article class="hn-campaign__post">
           <a href="..."><img src="..." width="1000" height="560" alt=""></a>
           <div class="hn-campaign__post-copy"><time datetime="...">Nov 1, 2026</time> <a href="...">Post title</a></div>
         </article>  (x3)
       </div>
     </section>
   The h2 / h3 / title link may also carry the optional classes hn-campaign__title / hn-campaign__subtitle / hn-campaign__post-title.
   The hero's background-image is supplied inline; this file sets everything else about the background (size, position, repeat, colour).

   Desktop (Figma, 1920 page): hero 1920 x 701, inner 1360 centred, copy starts 70px below the hero top, cards start 574px below it
   (they overlap the last 127px), 3 x 440px cards, 20px gap, 336px high, 32px before .hn-promos.
   Tunable without touching rules (set on .hn-campaign): --hn-campaign-gap-top (space above the section, 20px = same rhythm as
   the card row's gap), --hn-campaign-overlap (how far the cards overlap the hero).
   ============================================================================================================================ */

/* ---- Ancestor clip (641-767px) ------------------------------------------------------------------------------------------
   main.css (#main .m-w2 { overflow: hidden }) clips the column that holds the homepage. home.css makes #main .section-inner visible from 768px
   (!important), but below that the 20px-inset .m-w2.section-inner cut the full-bleed campaign (hero started 20px in, the cards' right border
   was cut). Only the .section-inner that contains .hn-campaign is released; #main and the outer #wrapper keep their clipping (home-new.css), so the
   100vw breakout cannot create a horizontal scrollbar. Other pages and columns without .hn-campaign are not matched. */
body.home-style #main .section-inner:has(.hn-campaign) {
	overflow: visible;
}

/* ---- Section wrapper ---------------------------------------------------------------------------------------------- */
.hn-home .hn-campaign {
	--hn-campaign-gap-top: 20px;
	--hn-campaign-overlap: 127px;
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	margin: var(--hn-campaign-gap-top) auto 0;
	padding: 0;
	font-family: "Source Sans Pro", sans-serif;
}

/* ---- Hero (desktop: 1920 x 701, Figma crop 104.755% x 101.271%, left bottom) ------------------------------------- */
.hn-home .hn-campaign .hn-campaign__hero {
	position: relative;
	display: block;
	width: 100%;
	height: 701px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #1a1a1a;
	background-repeat: no-repeat;
	background-position: left bottom;
	/* Below 1920px the width shrinks, so the height-driven size keeps the artwork undistorted (and still covers the hero);
	   at 1920px it is the exact Figma size (see the min-width: 1920px rule) */
	background-size: auto 101.271%;
}

/* From 1920px up the hero is as wide as the viewport (.hn-home is the 100vw breakout; the section has no max-width), so the artwork
   must keep its aspect AND cover the full width: exactly the Figma size at 1920px (2011.3 x 709.7px, left bottom), and exactly
   100% of the width on wider screens (the extra height is cropped from the top). Copy and cards stay in the centred 1360px column. */
@media screen and (min-width: 1920px) {
	.hn-home .hn-campaign .hn-campaign__hero {
		background-size: max(2011.3px, 100%) auto;
	}
}

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

.hn-home .hn-campaign .hn-campaign__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto;
	padding: 70px 0 0;
}

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

.hn-home .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;
	color: #fff;
}

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

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

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

.hn-home .hn-campaign .hn-campaign__button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	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-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: #000;
	transition: background-color 0.2s ease, color 0.2s ease;
}

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

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

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

/* ---- Post cards (desktop: 3 x 440 x 336, 20px gap, start 574px below the hero top = overlap the last 127px) --------- */
.hn-home .hn-campaign .hn-campaign__posts {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 440px));
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 1360px;
	margin: calc(var(--hn-campaign-overlap) * -1) auto 32px;
	padding: 0;
}

.hn-home .hn-campaign .hn-campaign__post {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 336px;
	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) */
.hn-home .hn-campaign .hn-campaign__post > a {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	padding: 8px;
	line-height: 0;
	text-decoration: none;
}

.hn-home .hn-campaign .hn-campaign__post > a img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1000 / 560;
	object-fit: contain;
	border: 0;
}

.hn-home .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;
}

.hn-home .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;
	color: #646464;
}

.hn-home .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-decoration: underline;
	color: #000;
}

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

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

/* ============================================================================================================================
   Below 1400px: no fixed hero height - the copy decides it (so nothing can overflow), the page gutters match the card row
   (20px), the cards share the width equally and keep equal heights. A dark layer sits over the artwork so the white copy
   always has contrast, whatever part of the image is behind it.
   ============================================================================================================================ */
@media screen and (max-width: 1399px) {
	.hn-home .hn-campaign .hn-campaign__hero {
		height: auto;
		padding: 60px 20px calc(var(--hn-campaign-overlap) + 40px);
		background-size: cover;
	}

	.hn-home .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%);
	}

	.hn-home .hn-campaign .hn-campaign__inner {
		padding-top: 0;
	}

	.hn-home .hn-campaign .hn-campaign__posts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0 20px;
	}

	.hn-home .hn-campaign .hn-campaign__post-copy {
		padding-bottom: 28px;
	}
}

/* ---- iPad (the rest of the homepage uses 30px side margins here) ---------------------------------------------------- */
@media screen and (max-width: 1023px) {
	.hn-home .hn-campaign {
		--hn-campaign-overlap: 80px;
	}

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

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

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

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

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

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

	.hn-home .hn-campaign .hn-campaign__post-copy {
		padding: 2px 16px 28px;
	}

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

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

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

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

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

/* ---- Phone (same range as the site's mobile.css; 30px side margins like the rest of the homepage) -------------------- */
@media screen and (max-width: 640px) {
	.hn-home .hn-campaign {
		--hn-campaign-overlap: 48px;
	}

	.hn-home .hn-campaign .hn-campaign__hero {
		padding: 40px 30px calc(var(--hn-campaign-overlap) + 32px);
	}

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

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

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

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

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

	.hn-home .hn-campaign .hn-campaign__posts {
		gap: 30px;
		padding: 0 30px;
	}

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

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

	.hn-home .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. */
.hn-home .hn-campaign .hn-campaign__posts[aria-busy="true"] {
	min-height: 336px;
}

.hn-home .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;
	color: #000;
}

.hn-home .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;
}

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

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

/* one card per row below 900px: reserve about three cards while loading */
@media screen and (max-width: 899px) {
	.hn-home .hn-campaign .hn-campaign__posts[aria-busy="true"] {
		min-height: 640px;
	}
}

@media screen and (max-width: 640px) {
	.hn-home .hn-campaign .hn-campaign__posts[aria-busy="true"] {
		min-height: 900px;
	}
}

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