/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.horizontal-cards {
	container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* header — title on the left, optional button to its right */

.horizontal-cards__header.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.horizontal-cards__buttons {
	flex-shrink: 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* search & blogs archive pages */

.horizontal-cards--search,
.horizontal-cards--blogs {
	padding-top: 12px;
}

.horizontal-cards--search .horizontal-cards__header.section-header,
.horizontal-cards--blogs .horizontal-cards__header.section-header {
	margin-bottom: 26px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* body text: */
.horizontal-cards__body-text {
	margin-top: -35px;
	margin-bottom: 26px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* cards: */

.horizontal-cards__cards {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.horizontal-cards__card {
	border-radius: var(--box-border-radius-sm);
	overflow: hidden;

	display: flex;
	gap: 0;
	align-items: stretch;

	/* Floor so a low-content card (e.g. title only) can't collapse short and crop
       the image to a thin sliver. Content is centered, so extra height reads fine;
       cards with more copy grow past this naturally. */
	min-height: 280px;
}

/* image_side ACF toggle: off (default) keeps DOM order (image left, content
   right); on reverses the row so the image renders on the right instead. */
.horizontal-cards__card--image-right {
	flex-direction: row-reverse;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* image */

.horizontal-cards__card__image {
	flex: 0 0 40%;
	overflow: hidden;
	position: relative;
}
.horizontal-cards__card__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* fit_images toggle: show the whole image, padded, instead of cropping it to the card */
.horizontal-cards--fit-images .horizontal-cards__card__image {
	background: var(--white);
}

.horizontal-cards--fit-images .horizontal-cards__card__image img {
	top: 20px;
	left: 20px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	object-fit: contain;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content */

.horizontal-cards__card__content {
	flex: 0 0 60%;
	padding: 30px 36px;

	display: flex;
	gap: 10px;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}
.horizontal-cards--manual-content .horizontal-cards__card__content {
	padding: 40px 36px;
}

/*blogs colors all dark blue*/
.horizontal-cards--blogs .horizontal-cards__card__content {
	background: var(--blue-dk);
}

/*default manual colors alternating dark blue and dark purple*/
.horizontal-cards--manual-content
	.horizontal-cards__card--default-color:nth-child(1n)
	.horizontal-cards__card__content {
	background: var(--blue-dk);
}

.horizontal-cards--manual-content
	.horizontal-cards__card--default-color:nth-child(2n)
	.horizontal-cards__card__content {
	background: var(--purple-dk);
}

/*custom manual colors*/
.horizontal-cards--manual-content
	.horizontal-cards__card--custom-color--blue-dk
	.horizontal-cards__card__content {
	background: var(--blue-dk);
}

.horizontal-cards--manual-content
	.horizontal-cards__card--custom-color--purple-dk
	.horizontal-cards__card__content {
	background: var(--purple-dk);
}

.horizontal-cards--manual-content
	.horizontal-cards__card--custom-color--purple-md
	.horizontal-cards__card__content {
	background: var(--purple-md);
}

.horizontal-cards__card__content > *,
.horizontal-cards__card__content > * > * {
	color: var(--white);
	margin: 0;
}

.horizontal-cards__card__date {
	font-family: "Cachet";
	font-size: 18px;
	font-weight: 600;
}

.horizontal-cards__card__description,
.horizontal-cards__card__content p,
.horizontal-cards__card__content li {
	font-weight: 500;
}

.horizontal-cards__card__content p {
	margin-bottom: 8px;
}

.horizontal-cards__card__content p:last-child {
	margin-bottom: 0;
}

/* The `> *` reset above zeroes list margins, leaving bullets flush against the
   copy underneath them. */
.horizontal-cards__card__content ul,
.horizontal-cards__card__content ol {
	margin-bottom: 12px;
	padding-left: 20px;
}

.horizontal-cards__card__content ul:last-child,
.horizontal-cards__card__content ol:last-child {
	margin-bottom: 0;
}

/* Links inherit --blue-dk from the global `a` rule, which disappears against the
   dark blue / purple card backgrounds. */
.horizontal-cards__card__content a:not(.btn) {
	color: var(--white);
	font-weight: 700;
	text-decoration: underline;
}

.horizontal-cards__card__content a:not(.btn):hover {
	color: var(--blue-lt);
}

.horizontal-cards__card__buttons {
	margin-top: 10px;
}

/* Card backgrounds alternate --blue-dk / --purple-dk, and the global button
   hovers swap to those same two colors (btn--purple:hover -> blue-dk,
   btn--blue:hover -> purple-md) — so a hovered button can melt into the card
   behind it. Inside these cards, hover to white instead. */
.horizontal-cards__card__content .btn.btn--purple:hover,
.horizontal-cards__card__content .btn.btn--blue:hover {
	background: var(--white);
}

.horizontal-cards__card__content .btn.btn--purple:hover .btn-text,
.horizontal-cards__card__content .btn.btn--blue:hover .btn-text {
	color: var(--purple-dk);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile */

@container (max-width: 715px) {
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* header — stack the button under the title */

	.horizontal-cards__header.section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* cards */

	.horizontal-cards__card {
		flex-direction: column;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* image */

	/* Stacked: the image no longer stretches to match a side content column, so give
       the container an explicit landscape ratio (clamped) rather than letting it
       collapse short. The base absolute img + object-fit: cover fills and crops it,
       keeping every card the same, never-too-short shape across mobile widths. */
	.horizontal-cards__card__image {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 3 / 2;
		min-height: 220px;
		max-height: 340px;
	}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	/* content */

	.horizontal-cards__card__content {
		flex: 0 0 100%;
		padding: 20px 25px;
	}
}