/**
 * Cards — Sticky Scroll
 *
 * Left sticky sidebar, right stacked horizontal cards.
 */

/* Animal shape — labrador override */

.module.sticky-scroll .module-animal-shape.animal-labrador {
	bottom: calc(100% - 100px);
	rotate: 6deg;
	width: 320px;
}

/*
 * ====================================================================== *
 * Layout
 * ====================================================================== *
 */

/*** Sidebar ***/

.module.sticky-scroll .sticky-scroll-sidebar {
	align-self: start;
	grid-column: 1 / 6;
	padding-right: var(--text-spacing-xlarge);
	position: sticky;
	top: calc(var(--header-height) + var(--text-spacing-large));
}

.module.sticky-scroll .sticky-scroll-sidebar .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.sticky-scroll .sticky-scroll-sidebar .heading-2 {
	margin: 0 0 var(--text-spacing-small);
}

.module.sticky-scroll .sticky-scroll-sidebar .content-styles {
	margin-bottom: var(--text-spacing-medium);
}

.module.sticky-scroll .sticky-scroll-callout {
	background: var(--wolfhound-gray);
	border-radius: var(--border-radius-normal);
	display: flex;
	font-size: calc(14rem / 16);
	gap: var(--text-spacing-xsmall);
	margin-bottom: var(--text-spacing-medium);
	padding: var(--text-spacing-xsmall);
}

.module.sticky-scroll .sticky-scroll-callout-icon {
	align-items: center;
	background: var(--samoyed-white);
	border-radius: 50%;
	color: var(--russian-blue);
	display: flex;
	flex-shrink: 0;
	font-size: calc(12rem / 16);
	height: 32px;
	justify-content: center;
	width: 32px;
}

.module.sticky-scroll .sticky-scroll-callout .content-styles,
.module.sticky-scroll .sticky-scroll-callout .content-styles p {
	font-size: calc(14rem / 16);
	line-height: calc(22 / 14);
	margin-bottom: 0;
}

.module.sticky-scroll .sticky-scroll-callout .content-styles > *:last-child {
	margin-bottom: 0;
}

/*** Cards ***/

.module.sticky-scroll .sticky-scroll-cards {
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-column: 6 / -1;
}

.module.sticky-scroll .sticky-scroll-card {
	align-items: center;
	background: var(--appaloosa-beige);
	border: none;
	border-radius: var(--border-radius-normal);
	color: inherit;
	display: flex;
	font: inherit;
	gap: var(--text-spacing-medium);
	margin-left: 105px;
	overflow: visible;
	padding: var(--text-spacing-medium);
	text-align: left;
	width: 100%;
}

/* When no card has an image, drop the image-overlap gutter so cards
   fill their column. Higher specificity than the breakpoint-specific
   margin-left values so it applies at every size. */

.module.sticky-scroll .sticky-scroll-cards:not(:has(.media)) .sticky-scroll-card {
	margin-left: 0;
}

:is(a, button).sticky-scroll-card:hover {
	--card-shadow: 8px 24px 64px 0px rgba(0, 0, 0, 0.08);
}

:is(a, button).sticky-scroll-card:hover .media img {
	transform: scale(1.05);
}

:is(a, button).sticky-scroll-card:hover .heading-5 {
	color: var(--russian-blue-hover);
}

:is(a, button).sticky-scroll-card:hover .arrow-block {
	background: var(--goldie-yellow-hover);
	transform: translateX(3px);
}

.module.sticky-scroll .sticky-scroll-card .media {
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius-normal);
	flex-shrink: 0;
	margin-left: calc(-105px - var(--text-spacing-medium));
	overflow: hidden;
	width: 210px;
}

.module.sticky-scroll .sticky-scroll-card .media:not(.full-image) img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/** Logo Mode **/

.module.sticky-scroll .sticky-scroll-card .media.full-image {
	background: var(--wolfhound-gray);
	overflow: hidden;
	padding: var(--text-spacing-medium) var(--text-spacing-xlarge);
}

.module.sticky-scroll .sticky-scroll-card .media.full-image img {
	height: 100%;
	object-fit: contain;
	position: static;
	width: 100%;
}

.module.sticky-scroll .sticky-scroll-card-content {
	flex: 1;
	min-width: 0;
}

.module.sticky-scroll .sticky-scroll-card-content .eyebrow {
	color: var(--russian-blue);
	margin-bottom: var(--text-spacing-xxsmall);
}

.module.sticky-scroll .sticky-scroll-card-content .heading-5 {
	margin: 0 0 var(--text-spacing-xxsmall);
	transition: color .3s ease;
}

.module.sticky-scroll .sticky-scroll-card-content .small-text {
	color: var(--retriever-black);
	margin: 0;
}

.module.sticky-scroll .sticky-scroll-card .arrow-block {
	flex-shrink: 0;
}

/** Colored Backgrounds **/

.module.sticky-scroll.background-appaloosa-beige .sticky-scroll-card,
.module.sticky-scroll.background-russian-blue .sticky-scroll-card {
	background: var(--samoyed-white);
	color: var(--russian-blue);
}

.module.sticky-scroll.background-russian-blue .sticky-scroll-card .heading-5 {
	color: var(--russian-blue);
}

.module.sticky-scroll.background-russian-blue .sticky-scroll-card .small-text {
	color: var(--retriever-black);
}

/** Beige Background **/

.module.sticky-scroll.background-appaloosa-beige .sticky-scroll-callout {
	background: #DDD8D0;
}

.module.sticky-scroll.background-appaloosa-beige .sticky-scroll-callout-icon {
	background: #CFC9C0;
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.sticky-scroll .sticky-scroll-sidebar {
		padding-right: 0;
	}

	.module.sticky-scroll .module-animal-shape.animal-labrador {
		width: 256px;
	}

}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

@media only screen and (max-width: calc(950rem / 16)) {

	.module.sticky-scroll .sticky-scroll-sidebar {
		grid-column: 1 / -1;
		padding-right: 0;
		position: static;
		top: 0;
	}

	.module.sticky-scroll .sticky-scroll-cards {
		grid-column: 1 / -1;
	}

	/* Mirror the desktop half-overlap: card background shifts right by half
	   the image width, image is pulled back to sit flush with the main
	   container's content-left, so the beige starts halfway through the
	   image. */

	.module.sticky-scroll .sticky-scroll-card {
		margin-left: 150px;
	}

	.module.sticky-scroll .sticky-scroll-card .media {
		margin-left: calc(-150px - var(--text-spacing-medium));
		width: 300px;
	}

	.module.sticky-scroll .sticky-scroll-sidebar .content-styles {
		margin-bottom: 0;
	}

	.module.sticky-scroll .sticky-scroll-sidebar .content-styles.large-text {
		margin-bottom: var(--text-spacing-xsmall);
	}

	.module.sticky-scroll .module-animal-shape.animal-labrador {
		width: 300px;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

@media only screen and (max-width: calc(650rem / 16)) {

	.module.sticky-scroll {
		/* Half the image height: image is 4:3 at full card-content width
		   (container content minus card horizontal padding). Defined in
		   vw/px (no %) so substitution gives the same value whether
		   consumed by the card or the .media (different containing
		   blocks). Used to slide the image up so the card bg starts
		   at the image's vertical midpoint. */
		--image-half-h: calc((var(--container-width) - var(--container-outer-padding) * 2 - var(--text-spacing-small) * 2) * 3 / 8);
	}

	.module.sticky-scroll .container {
		gap: var(--text-spacing-xsmall);
	}

	/* Sidebar button is optional — when present, it needs an extra 16px
	   of breathing room before the first card. */

	.module.sticky-scroll:has(.sticky-scroll-sidebar > .btn.secondary) > .container {
		gap: var(--text-spacing-medium);
	}

	.module.sticky-scroll .sticky-scroll-sidebar .heading-2 {
		margin-bottom: var(--text-spacing-xsmall);
	}

	.module.sticky-scroll .sticky-scroll-cards {
		gap: var(--text-spacing-medium);
	}

	.module.sticky-scroll .sticky-scroll-card {
		align-items: flex-start;
		flex-direction: column;
		margin-left: 0;
		overflow: visible;
		padding: var(--text-spacing-small);
		padding-bottom: calc(var(--text-spacing-small) + 8px);
	}

	.module.sticky-scroll .sticky-scroll-card:has(.media) {
		margin-top: var(--image-half-h);
		padding-top: 0;
	}

	.module.sticky-scroll .sticky-scroll-card .media {
		margin-left: 0;
		margin-top: calc(var(--image-half-h) * -1);
		width: 100%;
	}

	:is(a, button).sticky-scroll-card:hover .media img {
		transform: none;
	}

	:is(a, button).sticky-scroll-card:hover .arrow-block {
		transform: none;
	}

	/* Reduce only the content→arrow gap (column flex on mobile) from the
	   card's 32px gap down to 24px via a negative margin-top on arrow. */

	.module.sticky-scroll .sticky-scroll-card .arrow-block {
		margin-top: calc(-1 * var(--text-spacing-xxsmall));
	}

}