/**
 * Card: Insight
 *
 * Loaded by the card partial itself, so every placement of the card gets it. The arrow is
 * decorative: the title link is the one control, and its `::after` covers the whole card, so the
 * arrow can take `.corner` without becoming the pseudo's containing block. The excerpt keeps clear
 * of the arrow by the arrow's size plus its inset and one more inset of air.
 */

/*** Card: Insight ***/

.card.post {
	--card-padding: var(--text-spacing-large);
	justify-content: flex-end;
	min-height: calc(400rem / 16);
	padding: var(--card-padding);
}

.card.post .eyebrow {
	margin: 0 0 var(--text-spacing-xsmall);
}

.card.post .excerpt {
	color: var(--text);
	font-weight: 400;
	margin: var(--text-spacing-xxsmall) calc(var(--icon-button-size) + 2 * var(--text-spacing-xxsmall) - var(--card-padding)) 0 0;
}

.card.post .card-link:focus-visible {
	outline: none;
}

.card.post:has(.card-link:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 3px;
	z-index: 1;
}

.card.post:has(.card-link:hover) > .btn.primary {
	background: var(--white);
}

/** Wide **/

.card.post.wide {
	align-content: start;
	column-gap: var(--gap);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	min-height: 0;
	padding: var(--module-spacing-medium) 0;
}

.card.post.wide header {
	grid-column: 2 / span 5;
}

.card.post.wide .excerpt {
	grid-column: 7 / span 5;
	margin: 0;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.card.post {
		min-height: 0;
	}

	.card.post.wide {
		display: flex;
		padding: var(--card-padding);
	}

	.card.post.wide .excerpt {
		margin: var(--text-spacing-xxsmall) calc(var(--icon-button-size) + 2 * var(--text-spacing-xxsmall) - var(--card-padding)) 0 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

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

	.card.post {
		--card-padding: var(--text-spacing-small);
	}

}