/*
 * Home - Campaign.
 *
 * Read from cp-all-designer/index.html:334-368 and css/app.css:1546-1557,
 * 1591-1600, 1626-1721, 1815, 1825.
 *
 * Drawn at 1440 (app.css:113): a fixed measure carries across unchanged.
 * Colour, type, padding, the frame's height, the gaps and the corner arrive
 * from the Style tab and are not repeated here.
 *
 * Left behind:
 * - Every `.oppc__item figcaption` rule (app.css:1688-1706) — the design's own
 *   markup on this page prints no figcaption inside a card, so nothing there
 *   draws. The campaign's name is carried for a screen reader instead, and
 *   the whole card is the link.
 * - `.opp__head-side` (app.css:1597) — index.html says so itself at 344-345:
 *   the picker it held was taken out.
 * - `.oppc` margin-bottom (app.css:1627) — `.sec.opp .oppc:last-child` at 1557
 *   sets it to nought and the rail is the last child, so it never applies.
 * - `.sec.opp.opp--channels` (app.css:1554) — that is the next section's band.
 */

.custom-home-campaign {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
}

.custom-home-campaign__inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1920px;                     /* the content cap, every band */
}

/* ------------------------------------------------------------------ */
/* The head                                                            */
/* ------------------------------------------------------------------ */

/* app.css:1591 — copy on the left, the right edge left open. */
.custom-home-campaign__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 44px;                             /* clamp(20, 3*14.4, 48) = 43.2 → even */
}

.custom-home-campaign__head-copy {
	flex: 1 1 420px;
	min-width: 0;
}

.custom-home-campaign__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 600;
	/* app.css:190 measures 1.15px; every px value here is even. */
	letter-spacing: 2px;
	text-transform: uppercase;
}

.custom-home-campaign__title {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.custom-home-campaign__title em {
	position: relative;
	display: inline-block;
	font-style: normal;                    /* app.css:255-260: upright, a step larger than its line */
	font-weight: 700;
	font-size: 108%;  
}

.custom-home-campaign__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 8px;
	border-radius: 4px;                    /* app.css:238 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

.custom-home-campaign__description {
	margin: 22px 0 0;                      /* app.css:1600 min(22, 2.4*9) */
	font-weight: 400;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* The rail                                                            */
/* ------------------------------------------------------------------ */

/*
 * Full width, not inside the cap: the rail reaches the window edge, which is
 * the point of it. index.html:353-355 says as much.
 */
.custom-home-campaign__rail {
	position: relative;
}

/* app.css:1638-1656 — a real horizontal scroller, snapping on centres. */
.custom-home-campaign__view {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-x pan-y;
	overscroll-behavior-x: contain;
}

.custom-home-campaign__view::-webkit-scrollbar {
	display: none;
}

.custom-home-campaign__view.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.custom-home-campaign__view.is-teleport {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.custom-home-campaign__view.is-teleport .custom-home-campaign__item {
	transition: none;
}

.custom-home-campaign__rail.is-narrow .custom-home-campaign__view {
	height: auto;                          /* app.css:1664 */
}

.custom-home-campaign__track {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
}

/* ---- one card — app.css:1674-1695 ---- */
.custom-home-campaign__item {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	box-shadow: 0 18px 44px -14px rgba(22, 65, 140, 0.2);   /* --sh, app.css:146 */
	transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-campaign__item:not(.is-mid) {
	opacity: 0.4;
	transform: scale(0.9);
}

.custom-home-campaign__item:not(.is-mid):hover {
	opacity: 0.62;
}

.custom-home-campaign__item.is-near {
	opacity: 1;
	transform: scale(1);
}

.custom-home-campaign__item.is-mid {
	opacity: 1;
	transform: scale(1);
	cursor: default;
	box-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg, app.css:147 */
}

.custom-home-campaign__rail.is-narrow .custom-home-campaign__item {
	opacity: 1;
	transform: none;                       /* app.css:1693 */
}

.custom-home-campaign__item-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	color: inherit;
	text-decoration: none;
}

/* The campaign's name is there for a screen reader; the artwork carries it. */
.custom-home-campaign__item-name {
	position: absolute;
	width: 2px;
	height: 2px;
	margin: -2px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The media slot keeps the card's box whether or not there is artwork in it. */
.custom-home-campaign__item-picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.custom-home-campaign__item-picture > img,
.custom-home-campaign__item-picture > video {
	transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            filter 550ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-campaign__item:hover .custom-home-campaign__item-picture > img,
.custom-home-campaign__item:hover .custom-home-campaign__item-picture > video {
	transform: scale(1.05);                /* app.css:1695 */
}

/* ---- the dots — app.css:1709-1721 ---- */
.custom-home-campaign__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.custom-home-campaign__dot {
	width: 10px;                           /* app.css:1714 measures 9px */
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	opacity: 0.5;
	cursor: pointer;
	appearance: none;
	transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-campaign__dot:hover {
	opacity: 0.85;
}

.custom-home-campaign__dot.is-active {
	width: 28px;
	border-radius: 1000px;
	opacity: 1;
}

.custom-home-campaign__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;                   /* app.css:1721 measures 3px */
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* app.css:903 — the author's own line breaks close up below the wide tier. */
	.custom-home-campaign__description br {
		display: none;
	}
	.custom-home-campaign__description {
		line-height: 1.6;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-home-campaign__rail {
		padding-left: 24px;                /* app.css:1815 var(--pad) */
		padding-right: 24px;
	}
	.custom-home-campaign__description {
		line-height: 1.5;                  /* app.css:2992 */
	}
	.custom-home-campaign__title em::after {
		bottom: 2px;
		height: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-home-campaign__item,
	.custom-home-campaign__item-picture > img,
	.custom-home-campaign__item-picture > video,
	.custom-home-campaign__dot {
		transition: none;
	}
	.custom-home-campaign__item:hover .custom-home-campaign__item-picture > img,
	.custom-home-campaign__item:hover .custom-home-campaign__item-picture > video {
		transform: none;
	}
	.custom-home-campaign__view {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ */
/* One band, one screen — desktop only                                 */
/* ------------------------------------------------------------------ */

/* app.css:336-338 (.sec) gives this band the window's height, and app.css:2830 hands it back
   at 1024 and below, where the content sets the height as it does everywhere
   else. min-height, so a band that outgrows the window takes the room it needs
   and the page scrolls rather than cutting anything off. */
@media (min-width: 1025px) {
	.custom-home-campaign {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* A flex item with auto side margins shrinks to its own content, so the
	   content box is told its width again: the whole band, up to the cap. */
	.custom-home-campaign > .custom-home-campaign__inner {
		width: 100%;
	}
}