/* Post Card widget: proof card with Pearl/Red variants and a responsive image/CTA layout. */

/* The stretched CTA overlay needs this element as its containing block; keep the
 * intermediate wrapper unpositioned. Full height keeps cards equal in a row. */
.redteam-post-card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--s5);
	padding: var(--s5);
	border-radius: var(--s1);
	background-color: var(--color-pearl-100, #f5f2ee);
	overflow: clip;
	transition: background-color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card,
.redteam-post-card:hover {
	background-color: var(--color-red-200-base, #ed1b24);
}

/* --- Header: badge + stat, and the trend icon circle ------------------- */

.redteam-post-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s3);
}

.redteam-post-card__badge-stat {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}

.redteam-post-card__badge {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: var(--s1) var(--s2);
	border-radius: 4rem;
	backdrop-filter: blur(16rem);
	color: var(--color-black-500, #000000);
	font-family: var(--font-h6, 'Archivo'), sans-serif;
	font-weight: var(--font-h6-weight, 400);
	font-size: var(--font-h6-size, 18rem);
	line-height: 1.7;
	letter-spacing: 0.18rem;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.05);
	transition: color 0.3s ease, background-color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card__badge,
.redteam-post-card:hover .redteam-post-card__badge {
	color: var(--color-pearl-200-base, #f0ebe5);
	background: rgba(255, 255, 255, 0.05);
}

.redteam-post-card__badge-dot {
	width: 10rem;
	height: 10rem;
	margin-right: var(--s2);
	border-radius: 50%;
	background-color: var(--color-red-200-base, #ed1b24);
	flex-shrink: 0;
}

.redteam-post-card__stat {
	color: var(--color-red-200-base, #ed1b24);
	transition: color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card__stat,
.redteam-post-card:hover .redteam-post-card__stat {
	color: var(--color-pearl-200-base, #f0ebe5);
}

.redteam-post-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62rem;
	height: 62rem;
	border: 1rem solid rgba(77, 55, 52, 0.2);
	border-radius: 50%;
	flex-shrink: 0;
	transition: border-color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card__icon,
.redteam-post-card:hover .redteam-post-card__icon {
	border-color: rgba(255, 255, 255, 0.2);
}

.redteam-post-card__icon::after {
	content: "";
	display: block;
	width: 28rem;
	height: 28rem;
	mask-image: url("../../assets/images/icon-trend-up.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--color-walnut-400, #3f2e2b);
	transition: background-color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card__icon::after,
.redteam-post-card:hover .redteam-post-card__icon::after {
	background-color: var(--color-pearl-200-base, #f0ebe5);
}

/* --- Divider (desktop only — absent from the mobile design entirely) --- */

.redteam-post-card__divider {
	border-top: 1rem dashed rgba(77, 55, 52, 0.2);
	transition: border-top-color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card__divider,
.redteam-post-card:hover .redteam-post-card__divider {
	border-top-color: rgba(255, 255, 255, 0.2);
}

/* --- Quote ---------------------------------------------------------------- */

.redteam-post-card__quote {
	font-family: var(--font-body-large, 'Archivo'), sans-serif;
	font-weight: var(--font-body-large-weight, 400);
	font-size: var(--font-body-large-size, 28rem);
	line-height: var(--font-body-large-line-height, 1.4);
	letter-spacing: 0.28rem;
	color: var(--color-walnut-400, #3f2e2b);
	transition: color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card__quote,
.redteam-post-card:hover .redteam-post-card__quote {
	color: var(--color-pearl-200-base, #f0ebe5);
}

.redteam-post-card__quote p {
	margin: 0;
}

/* --- Attribution ------------------------------------------------------- */

.redteam-post-card__attribution {
	display: flex;
	flex-direction: column;
}

.redteam-post-card__name,
.redteam-post-card__title {
	margin: 0 !important;
	font-family: var(--font-text, 'Archivo'), sans-serif;
	font-weight: var(--font-text-weight, 400);
	font-size: var(--font-text-size, 18rem);
	line-height: 1.7;
	letter-spacing: 0.18rem;
	transition: color 0.3s ease;
}

.redteam-post-card__name {
	color: var(--color-black-500, #000000);
}

.redteam-post-card__title {
	color: var(--color-black-300, #555555);
}

.redteam-post-card--red .redteam-post-card__name,
.redteam-post-card--red .redteam-post-card__title,
.redteam-post-card:hover .redteam-post-card__name,
.redteam-post-card:hover .redteam-post-card__title {
	color: var(--color-pearl-200-base, #f0ebe5);
}

/* --- Media + CTA overlay ------------------------------------------------ */

/* Desktop overlaps the CTA onto the image's bottom-right corner via CSS GRID (both
 * children share grid-area 1/1), never `position: absolute`.
 *
 * That is load-bearing, not stylistic: the CTA's `::before` stretches over the
 * whole card to make it clickable, and an absolutely positioned pseudo-element
 * resolves `inset: 0` against its own HOST once that host is itself positioned. So
 * positioning the anchor to place it would trap its own stretch pseudo inside the
 * anchor's small box. Grid overlap gives the same placement with the anchor left
 * static, so the containing-block search reaches past this (also unpositioned)
 * wrapper up to the card. */
.redteam-post-card__media-wrap {
	display: grid;
	/* Pin the image + CTA to the bottom so they line up across a row of equal-height
	 * cards. As the last flex child, `margin-top: auto` absorbs whatever height a
	 * shorter quote didn't use, on top of the card's own gap — so the quote→image
	 * distance is var(--s5) at minimum and grows from there. Reset at <=960px, where
	 * cards are one-up with no row to align to. */
	margin-top: auto;
}

/* Desktop only (the <=960px block turns this off): the image's bottom-right corner
 * is cut away and the CTA sits in that cut-out on the card's own background rather
 * than over the photo — the same mask-driven-notch idiom as card/'s login variant.
 * `mask-size: 100% 100%` is safe here, unlike some of the theme's other notch
 * masks, because the mask's viewBox (770/421) matches this element's aspect-ratio
 * exactly, so it cannot skew. */
.redteam-post-card__media {
	grid-area: 1 / 1;
	aspect-ratio: 770 / 421;
	overflow: hidden;
	mask-image: url("../../assets/masks/mask-post_card_image.svg");
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}

.redteam-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.redteam-post-card__cta {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: end;
	margin: var(--s0);
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	color: var(--color-walnut-400, #3f2e2b);
	font-family: var(--font-text, 'Archivo'), sans-serif;
	font-size: 18rem;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.3s ease;
}

/* Stretched link: the whole card is clickable, not just the visible CTA text. Kept
 * as this anchor's own pseudo-element rather than a second full-card overlay
 * anchor — there is exactly one real link in the markup, and nesting another <a>
 * around content that already contains one would be invalid HTML. */
.redteam-post-card__cta::before {
	content: "";
	position: absolute;
	inset: 0;
}

.redteam-post-card--red .redteam-post-card__cta,
.redteam-post-card:hover .redteam-post-card__cta {
	color: var(--color-pearl-200-base, #f0ebe5);
}

/* Same shape and spacing as the Button widget's Link variant — a bare triangle, no
 * circle, `gap: var(--s2)` between text and icon. The icon's colour is driven
 * independently of the text's, as in Link: explicit red by default, switching to
 * `currentColor` (already pearl-200 by then, via the rule above) on hover or the
 * Red variant. */
.redteam-post-card__cta-icon {
	display: block;
	width: 9rem;
	height: 10rem;
	flex-shrink: 0;
	mask-image: var(--icon-arrow-right);
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--color-red-200-base, #ed1b24);
	transition: background-color 0.3s ease;
}

.redteam-post-card--red .redteam-post-card__cta-icon,
.redteam-post-card:hover .redteam-post-card__cta-icon {
	background-color: currentColor;
}

/* --- Mobile / tablet: no divider, and the CTA becomes an underlined text row
 * below the image instead of an overlay --------------------------------------- */

@media (width <= 960px) {
	.redteam-post-card {
		gap: var(--s4);
		padding: var(--s4) var(--s4) var(--s5);
	}

	.redteam-post-card__badge {
		max-width: 206rem;
		white-space: normal;
		font-size: var(--font-h6-size-tablet, 16rem);
		line-height: 1.2;
	}

	.redteam-post-card__stat {
		font-size: var(--font-stats-size-tablet, 60rem);
	}

	.redteam-post-card__icon {
		width: 42rem;
		height: 42rem;
	}

	.redteam-post-card__icon::after {
		width: 20rem;
		height: 20rem;
	}

	.redteam-post-card__divider {
		display: none;
	}

	.redteam-post-card__quote {
		font-size: var(--font-body-large-size-tablet, 18rem);
		line-height: 1.6;
		letter-spacing: 0;
	}

	.redteam-post-card__name,
	.redteam-post-card__title {
		font-size: var(--font-text-size-tablet, 16rem);
		line-height: 1.6;
		letter-spacing: 0.16rem;
	}

	/* Resets the desktop grid overlap so .media and .cta stack as normal in-flow
	 * siblings. The bottom-pin goes with it: cards are one-up here, so there is no
	 * row to align to and an auto margin would just stretch the quote→image gap. */
	.redteam-post-card__media-wrap {
		display: block;
		margin-top: 0;
	}

	.redteam-post-card__media {
		aspect-ratio: 305 / 212;
		border-radius: var(--s1);
		overflow: hidden;
		mask-image: none;
	}

	.redteam-post-card__cta {
		margin: var(--s3) 0 0;
		gap: var(--s2);
		font-size: 14rem;
		line-height: 1.3;
		text-decoration: underline;
	}
}