/**
 * Cards Grid
 */

.module.cards-grid:has(.shape-top.shape-outside) .container {
	padding-top: var(--text-spacing-large);
}

.module.cards-grid:has(.shape-bottom.shape-outside) .container {
	padding-bottom: var(--text-spacing-large);
}

.module.cards-grid header {
	margin-bottom: var(--text-spacing-large);
	text-align: center;
}

.module.cards-grid header .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

/** Card grid **/

.module.cards-grid ul.grid {
	align-items: flex-start;
	gap: var(--text-spacing-medium);
}

.module.cards-grid ul.grid li a {
	height: 100%;
}

.module.cards-grid.columns-3 ul.grid {
	grid-template-columns: repeat(3, 1fr);
}

.module.cards-grid.columns-4 ul.grid {
	grid-template-columns: repeat(4, 1fr);
}

/** V1 — Icon card variant **/

.module.cards-grid:has(.has-icon) header {
	margin-bottom: var(--module-spacing-medium);
}

.module.cards-grid:has(.has-icon) ul.grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	row-gap: calc(var(--text-spacing-medium) + 16px);
}

/* Columns-4 icon cards — force 4 or 2 (never 3) so the 4th card never orphans */

.module.cards-grid.columns-4:has(.has-icon) ul.grid {
	grid-template-columns: repeat(4, 1fr);
}

/* Columns-3 icon cards — force 3 instead of letting auto-fit collapse
   to 2 at narrower viewports. */

.module.cards-grid.columns-3:has(.has-icon) ul.grid {
	grid-template-columns: repeat(3, 1fr);
}

.module.cards-grid .card-item.has-icon {
	text-align: center;
}

.module.cards-grid .card-item.has-icon .icon + .card-text {
	margin-top: var(--text-spacing-xxsmall);
}

/** No-link cards — description text **/

.module.cards-grid .card-item.no-link .card-text .small-text {
	color: var(--grayhound);
	margin: var(--text-spacing-xxsmall) 0 0;
}

/** Animal shape overrides **/

.module.cards-grid .module-animal-shape.animal-pitbull {
	--animal-shape-offset: -150px;
	bottom: calc(100% - 300px);
}

.module.cards-grid .module-animal-shape.animal-pitbull.module-animal-shape-right {
	transform: scaleX(-1);
}

/** V2 — Image card variant (location cards) **/

.module.cards-grid:has(.has-image) {
	background: transparent;
	padding: 0;
}

.module.cards-grid:has(.has-image) header {
	margin-bottom: var(--module-spacing-medium);
}

.module.cards-grid:has(.has-image) ul.grid {
	gap: var(--text-spacing-xsmall);
}

.module.cards-grid .card-item.has-image .media {
	aspect-ratio: 287 / 380;
}

/* Overlay text: stack eyebrow + heading in a wrapper, arrow-block beside */

.module.cards-grid .card-item.has-image .card-overlay > div {
	align-items: flex-start;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--text-spacing-xxsmall);
	min-width: 0;
}

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

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

	.module.cards-grid.columns-4 ul.grid {
		gap: var(--text-spacing-small);
	}

}

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

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

	.module.cards-grid.columns-4 ul.grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

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

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

	.module.cards-grid:has(.has-icon) ul.grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}

	.module.cards-grid.columns-4:has(.has-icon) ul.grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Text-only cards carry a heading and a paragraph each, so three across
	   is too narrow here — stack them. */
	.module.cards-grid.columns-3:not(:has(.has-icon, .has-image)) ul.grid {
		grid-template-columns: 1fr;
	}

	/* Show arrow-block by default on tablet/mobile — no hover available */
	.module.cards-grid .card.service .arrow-block {
		opacity: 1;
		position: static;
		transform: none;
	}

	.module.cards-grid a.card.service:hover .card-text {
		transform: translateY(-12px);
	}

	.module.cards-grid .card-item.has-icon .heading-5 {
		font-size: calc(18rem / 16);
		line-height: calc(26 / 18);
	}

	.module.cards-grid.columns-4 .card-item.has-icon .heading-5 {
		font-size: calc(28rem / 16);
		line-height: calc(34 / 28);
	}

}

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

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

	.module.cards-grid:has(.shape-bottom.shape-outside) .container {
		padding-bottom: 0;
	}

	.module.cards-grid ul.grid,
	.module.cards-grid:has(.has-image) ul.grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.module.cards-grid ul.grid {
		gap: var(--text-spacing-xsmall);
	}

	.module.cards-grid:has(.has-icon) ul.grid {
		gap: var(--text-spacing-xsmall);
		grid-template-columns: repeat(2, 1fr);
	}

	.module.cards-grid.columns-3 ul.grid,
	.module.cards-grid.columns-3:has(.has-icon) ul.grid {
		gap: var(--text-spacing-medium);
		grid-template-columns: 1fr;
	}

	.module.cards-grid:has(.has-icon) header {
		margin-bottom: var(--text-spacing-large);
	}

	.module.cards-grid .module-animal-shape.animal-pitbull {
		bottom: calc(100% - 200px);
	}

	.module.cards-grid.columns-4 .card-item.has-icon .heading-5 {
		font-size: calc(18rem / 16);
		line-height: calc(26 / 18);
	}

	.module.cards-grid .card.service {
		gap: var(--text-spacing-xxsmall);
		padding: var(--text-spacing-xsmall);
	}

	.module.cards-grid .card.service .icon {
		height: 64px;
		width: 64px;
	}

	.module.cards-grid .card.service .icon img {
		height: 40px;
		width: 40px;
	}

	.module.cards-grid .card.service .arrow-block {
		opacity: 1;
		position: static;
		transform: none;
	}

	.module.cards-grid a.card.service:hover .card-text {
		transform: translateY(-12px);
	}

	.module.cards-grid .card-item.has-image .media {
		aspect-ratio: 160 / 212;
		border-radius: var(--border-radius-normal);
	}

	.module.cards-grid:has(.has-image) ul.grid {
		column-gap: var(--text-spacing-xsmall);
		row-gap: var(--text-spacing-medium);
	}

	.module.cards-grid:has(.has-image) header {
		margin-bottom: var(--text-spacing-xlarge);
	}

	/* Location cards: text below image on mobile */

	.module.cards-grid .card.location {
		container-type: inline-size;
		display: flex;
		flex-direction: column;
		overflow: visible;
		position: relative;
	}

	.module.cards-grid .card.location::after {
		display: none;
	}

	.module.cards-grid .card.location .card-overlay {
		align-items: flex-start;
		flex-direction: column;
		gap: 0;
		padding: var(--text-spacing-xsmall) 0 0;
		position: static;
	}

	.module.cards-grid .card.location .card-overlay > div {
		gap: 0;
	}

	.module.cards-grid .card.location .card-overlay .xlarge-text {
		color: var(--russian-blue);
		font-size: calc(18rem / 16);
		line-height: calc(26 / 18);
	}

	.module.cards-grid .card.location .card-overlay .eyebrow {
		display: none;
	}

	.module.cards-grid .card.location .card-overlay .arrow-block {
		position: absolute;
		right: var(--text-spacing-xxsmall);
		top: -36px;
	}

	.module.cards-grid a.card.location:hover .card-overlay > div {
		transform: none;
	}

}