/**
 * CTA - Image CTA Style
 */

.module.cta.image-cta {
	color: var(--samoyed-white);
	overflow-x: clip;
	position: relative;
	text-align: center;
}

.module.cta.image-cta > .container {
	min-height: 760px;
	position: relative;
	z-index: 1;
}

.module.cta.image-cta .media {
	grid-column: 1 / -1;
	grid-row: 1;
	height: 100%;
	margin-left: var(--viewport-edge);
	width: var(--viewport-full);
	z-index: -1;
}

.module.cta.image-cta .media::after {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

.module.cta.image-cta .content {
	align-self: center;
	grid-column: 6 / -1;
	grid-row: 1;
	padding: var(--module-spacing-large) 0;
}

.module.cta.image-cta .content > * + * {
	margin-top: var(--text-spacing-large);
}

.module.cta.image-cta .content .buttons {
	justify-content: center;
}

.module.cta.image-cta:has(.background-shape) .content {
	align-self: flex-end;
	padding: 200px 0 var(--module-spacing-large);
}

/* The default shape-outside.shape-bottom rendering adds in-flow height
   intended as a transition to a differently-colored section. When this
   module ends the page, that extra height reads as empty cream space
   (shape color matches body bg). Absolute-position it over the image's
   bottom edge instead so it creates a decorative curve and doesn't add
   module height. Skipped on mobile where the layout flips (content over
   image) — there the default in-flow shape sits cleanly below the image. */

@media only screen and (min-width: calc(651rem / 16)) {

	.module.cta.image-cta > .background-shape.shape-outside.shape-bottom {
		bottom: 0;
		left: 0;
		position: absolute;
		width: 100%;
	}

}

/** Text Left Variant **/

.module.cta.image-cta.text-left .media::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

.module.cta.image-cta.text-left .content {
	grid-column: 1 / 8;
}

/** Text Center Variant **/

.module.cta.image-cta.text-center .media::after {
	background: rgba(0, 0, 0, 0.5);
}

.module.cta.image-cta.text-center .content {
	grid-column: 2 / -2;
}

/** No Image Variant **/

.module.cta.image-cta.background-russian-blue {
	background: var(--russian-blue);
}

.module.cta.image-cta.background-russian-blue > .container {
	min-height: auto;
}

.module.cta.image-cta.background-russian-blue .content {
	grid-column: 2 / -2;
	padding: var(--module-spacing-large) 0;
}

/** Beside-Text Variant — contained image next to the text on a plain background **/

.module.cta.image-cta.image-side {
	color: var(--retriever-black);
	text-align: left;
}

.module.cta.image-cta.image-side > .container {
	min-height: 0;
}

.module.cta.image-cta.image-side .media {
	align-self: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--border-radius-large);
	grid-column: 1 / 5;
	grid-row: 1;
	height: auto;
	margin-left: var(--container-breakout);
	overflow: hidden;
	width: auto;
	z-index: auto;
}

.module.cta.image-cta.image-side .media::after {
	display: none;
}

.module.cta.image-cta.image-side .content {
	grid-column: 6 / -1;
	padding: var(--module-spacing-large) 0;
}

.module.cta.image-cta.image-side .content .heading-1 {
	color: var(--russian-blue);
}

.module.cta.image-cta.image-side .content .buttons {
	justify-content: flex-start;
}

/* Keep beside-text padding normal even when a decorative shape is present. */

.module.cta.image-cta.image-side:has(.background-shape) .content {
	align-self: center;
	padding: var(--module-spacing-large) 0;
}

/** Beside-Text — Image Right **/

.module.cta.image-cta.image-side.image-right .media {
	grid-column: 9 / -1;
	margin-left: 0;
	margin-right: var(--container-breakout);
}

.module.cta.image-cta.image-side.image-right .content {
	grid-column: 1 / 8;
}

/*
 * ====================================================================== *
 * MQ >=2222px — Full Max
 * ====================================================================== *
 */

@media only screen and (min-width: calc(2222rem / 16)) {

	.module.cta.image-cta:not(.image-side) .media {
		aspect-ratio: 16 / 9;
		max-height: 1400px;
	}

	.module.cta.image-cta:not(.image-side) .media img {
		position: relative;
	}

	.module.cta.image-cta:has(.background-shape) .content {
		align-self: center;
		padding: 340px 0 120px;
	}

}

/*
 * ====================================================================== *
 * MQ <=1400px — Small Desktop
 * ====================================================================== *
 */

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

	.module.cta.image-cta > .container {
		min-height: 600px;
	}

}

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

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

	.module.cta.image-cta > .container {
		min-height: 440px;
	}

	.module.cta.image-cta .content {
		grid-column: 4 / -1;
	}

	.module.cta.image-cta.text-center .content {
		grid-column: 2 / -2;
	}

	/* Image CTA with background image — always full width and centered */

	.module.cta.image-cta.background-image .content,
	.module.cta.image-cta.background-image.text-left .content,
	.module.cta.image-cta.background-image.text-center .content {
		grid-column: 1 / -1;
		text-align: center;
	}

	.module.cta.image-cta.background-image .content .buttons {
		justify-content: center;
	}

	/* Beside-text layouts stack: image on top, centered text below. */

	.module.cta.image-cta.image-side > .container {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: var(--text-spacing-large);
		text-align: center;
	}

	.module.cta.image-cta.image-side .media,
	.module.cta.image-cta.image-side.image-right .media {
		aspect-ratio: 4 / 3;
		grid-column: unset;
		height: auto;
		margin: 0 auto;
		max-width: 480px;
		width: 100%;
	}

	.module.cta.image-cta.image-side .content,
	.module.cta.image-cta.image-side.image-right .content {
		grid-column: unset;
		padding: 0;
	}

	.module.cta.image-cta.image-side .content .buttons {
		justify-content: center;
	}

}

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

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

	.module.cta.image-cta.background-image {
		color: var(--retriever-black);
	}

	.module.cta.image-cta.background-image > .container {
		display: flex;
		flex-direction: column;
		min-height: auto;
		padding-bottom: 0;
		padding-top: 0;
	}

	.module.cta.image-cta.background-image .content {
		grid-row: auto;
		order: -1;
		padding: 0;
		text-align: center;
	}

	.module.cta.image-cta.background-image .content > * + * {
		margin-top: var(--text-spacing-small);
	}

	.module.cta.image-cta.background-image .content .white {
		color: inherit;
	}

	.module.cta.image-cta.background-image .content .heading-1 {
		color: var(--russian-blue);
	}

	.module.cta.image-cta.background-image .media {
		grid-row: auto;
		height: 400px;
		margin-left: var(--viewport-edge);
		position: relative;
		width: var(--viewport-full);
	}

	/* Sub-pixel safety strip — bridges any hairline gap between the curve's
	   solid fill and the image's top edge on iOS, where fractional `bottom`
	   values on .shape-top round inconsistently. */

	.module.cta.image-cta.background-image .media::before {
		background: var(--pitty-off-white);
		content: '';
		height: 2px;
		left: 0;
		position: absolute;
		right: 0;
		top: -1px;
		z-index: 1;
	}

	/* Desktop text-left means the image was composed with negative space on the
	   left and the subject on the right — anchoring the crop to the right pulls
	   the subject into view once the layout stacks on mobile. Mirror for text-right. */

	.module.cta.image-cta.background-image.text-left .media img {
		object-position: 100% 50% !important;
	}

	.module.cta.image-cta.background-image.text-right .media img {
		object-position: 0% 50% !important;
	}

	.module.cta.image-cta.background-image .media::after {
		display: none;
	}

	.module.cta.image-cta.background-image:has(.background-shape) .content {
		padding: 0;
	}

	.module.cta.image-cta.background-image .background-shape.shape-top {
		/* Image is 400px tall; SVG renders at 100vw * (84/1440) = 5.833vw.
		   bottom = image_height - svg_height keeps the curve's top edge
		   flush with the image's top. */
		bottom: calc(400px - 5.833vw + 1px);
		left: 0;
		position: absolute;
		top: auto;
		width: 100%;
		z-index: 2;
	}

	.module.cta.image-cta.background-image .background-shape.shape-top svg {
		height: auto;
	}

	.module.cta.image-cta .module-animal-shape {
		bottom: 400px;
	}

	.module:is(.background-russian-blue, .background-mustang-blue, .background-appaloosa-beige) + .module.cta.image-cta.background-image {
		margin-top: 64px;
	}

	.module.cta.image-cta.background-image .heading-1 {
		font-size: calc(48rem / 16);
		line-height: calc(48 / 48);
	}

	.module.cta.image-cta.image-side .media {
		max-width: 360px;
	}

}

/**
 * CTA — Photo CTA
 *
 * Rounded card with centered content and a cluster of tilted photos.
 * Light variant uses appaloosa-beige, dark variant uses russian-blue.
 * Reusable on any page — not tied to a specific archive or template.
 */

.photos-cta-inner {
	align-items: center;
	background: var(--appaloosa-beige);
	border-radius: var(--border-radius-large);
	color: inherit;
	display: flex;
	flex-direction: row;
	gap: var(--text-spacing-xlarge);
	margin-left: var(--container-breakout);
	padding: var(--module-spacing-small) var(--text-spacing-xxlarge);
	text-decoration: none;
	width: calc(100% - var(--container-breakout) * 2);
}

a.photos-cta-inner:hover {
	opacity: 0.95;
}

/*** Content ***/

.photos-cta-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	min-width: 0;
}

.photos-cta-content .heading-4 + .content-styles {
	margin-top: calc(var(--text-spacing-xsmall) - var(--text-spacing-medium));
	text-align: left;
}

/*** Photo Cluster ***/

.photos-cta-images {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	padding: 0;
	position: relative;
}

.photos-cta-photo {
	aspect-ratio: 3 / 4;
	border-radius: var(--border-radius-normal);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
	overflow: clip;
	position: relative;
	width: 160px;
}

.photos-cta-photo img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.photos-cta-photo[data-jazzy-scroll="fade-in"] {
	transform: translateY(-30px);
	transition-duration: .5s;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.photos-cta-photo[data-jazzy-scroll="fade-in"].animated-in {
	transform: translateY(0);
}

.photos-cta-images .photos-cta-photo:nth-child(1) {
	rotate: -6deg;
	translate: 35px 0;
	z-index: 1;
}

.photos-cta-images .photos-cta-photo:nth-child(2) {
	rotate: 3deg;
	translate: 0 -12px;
	z-index: 2;
}

.photos-cta-images .photos-cta-photo:nth-child(3) {
	rotate: -4deg;
	translate: -35px 0;
	z-index: 1;
}

/** Dark variant **/

.photos-cta-dark .photos-cta-inner {
	background: var(--russian-blue);
	color: var(--samoyed-white);
}

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

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

	.photos-cta-inner {
		background: none;
		gap: 0;
		margin-left: 0;
		padding: var(--module-spacing-small) 0;
		position: relative;
		width: 100%;
	}

	.photos-cta-images {
		left: -20px;
	}

	.photos-cta-inner::before {
		background: var(--appaloosa-beige);
		border-radius: var(--border-radius-large);
		bottom: 0;
		content: '';
		left: 25%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: -1;
	}

	.photos-cta-dark .photos-cta-inner::before {
		background: var(--russian-blue);
	}

	.photos-cta-content {
		padding-right: var(--text-spacing-large);
	}

	.photos-cta-photo {
		width: 120px;
	}

}

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

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

	.photos-cta-inner {
		background: var(--appaloosa-beige);
		flex-direction: column;
		padding: var(--text-spacing-xlarge) var(--text-spacing-medium);
		text-align: center;
	}

	.photos-cta-dark .photos-cta-inner {
		background: var(--russian-blue);
	}

	.photos-cta-inner::before {
		display: none;
	}

	.photos-cta-images {
		left: auto;
	}

	.photos-cta-content {
		align-items: center;
		padding-right: 0;
		padding-top: var(--text-spacing-xsmall);
	}

	/* Override the base .heading-4 + .content-styles text-align: left so
	   the paragraph stays centered along with the heading on mobile. */

	.photos-cta-content .heading-4 + .content-styles {
		text-align: center;
	}

	.photos-cta-photo {
		width: 100px;
	}

}

/**
 * CTA — Double CTA
 *
 * Two side-by-side cards with contrasting backgrounds.
 */

.double-cta-heading {
	margin: 0 0 var(--text-spacing-large);
	text-align: center;
}

.double-cta-grid {
	display: grid;
	gap: var(--text-spacing-small);
	grid-template-columns: 1fr 1fr;
}

.double-cta-card {
	border-radius: var(--border-radius-large);
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
	padding: var(--text-spacing-xlarge);
}

.double-cta-card .heading-4 {
	margin: 0;
}

.double-cta-card p {
	margin: 0;
}

.double-cta-card .btn {
	align-self: flex-start;
	margin-top: var(--text-spacing-xxsmall);
}

.double-cta-card.dark {
	background: var(--russian-blue);
	color: var(--samoyed-white);
}

.double-cta-card.light {
	background: var(--appaloosa-beige);
}

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

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

	.double-cta-card {
		padding: var(--text-spacing-large);
		text-align: center;
	}

	.double-cta-card .btn {
		align-self: center;
	}

}

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

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

	.double-cta-grid {
		grid-template-columns: 1fr;
	}

	.double-cta-card {
		padding: var(--text-spacing-large);
	}

}

/**
 * CTA — Small CTA
 *
 * Compact horizontal bar: heading left, description center, arrow right.
 * Entire bar is optionally a link.
 */

.module.cta.small-cta .container {
	position: relative;
}

.small-cta-bar {
	align-items: center;
	background: var(--appaloosa-beige);
	border-radius: var(--border-radius-large);
	color: inherit;
	display: flex;
	gap: var(--text-spacing-large);
	padding: var(--text-spacing-large) var(--text-spacing-xlarge);
	text-decoration: none;
	transition: background .2s ease;
}

a.small-cta-bar:hover {
	background: #D8D5D0;
}

/* On a beige-background module, darken the bar so it has contrast against the page */

.module.cta.small-cta.background-appaloosa-beige .small-cta-bar {
	background: #DDD8D0;
}

.module.cta.small-cta.background-appaloosa-beige a.small-cta-bar:hover {
	background: #CFC9C0;
}

.small-cta-bar .heading-4 {
	flex-shrink: 0;
	margin: 0;
}

.small-cta-bar p {
	color: var(--grayhound);
	flex: 1;
	margin: 0;
}

.small-cta-bar .arrow-block {
	flex-shrink: 0;
	transition: background .25s ease, transform .25s ease;
}

a.small-cta-bar:hover .arrow-block {
	background: var(--goldie-yellow-hover);
	transform: translateX(3px);
}

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

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

	.small-cta-bar {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--text-spacing-xsmall);
		padding: var(--text-spacing-medium);
	}

}

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

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

	.small-cta-bar {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--text-spacing-xsmall);
		padding: var(--text-spacing-medium);
	}

}

/**
 * CTA — ALE Call-Out
 *
 * Animal Law Enforcement box: keystone logo beside heading, copy, and
 * click-through to the fight cruelty page and report cruelty form.
 */

.module.cta.ale-callout .container {
	position: relative;
}

.ale-callout-box {
	align-items: center;
	background: var(--russian-blue);
	border-radius: var(--border-radius-large);
	color: var(--samoyed-white);
	display: flex;
	gap: var(--text-spacing-xlarge);
	padding: var(--text-spacing-xlarge);
}

/* White chip behind the logo: the keystone and PSPCA marks are both dark blue,
   so they need a light ground to read against the box. */

.ale-callout-logo {
	align-items: center;
	background: var(--samoyed-white);
	border-radius: var(--border-radius-normal);
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	padding: var(--text-spacing-xsmall);
	width: 180px;
}

.ale-callout-logo img {
	display: block;
	height: auto;
	width: 100%;
}

.ale-callout-content {
	flex: 1;
	min-width: 0;
}

.ale-callout-content .heading-4 {
	margin: 0;
}

.ale-callout-content p {
	margin: var(--text-spacing-xsmall) 0 0;
}

.ale-callout-content .buttons {
	margin-top: var(--text-spacing-medium);
}

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

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

	.ale-callout-box {
		gap: var(--text-spacing-large);
		padding: var(--text-spacing-large);
	}

	.ale-callout-logo {
		width: 120px;
	}

}

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

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

	.ale-callout-box {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--text-spacing-small);
		padding: var(--text-spacing-medium);
	}

	.ale-callout-logo {
		width: 100px;
	}

}