/* Featured Post widget: shared framed background with a case-study notch. */

.redteam-featured-post {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s7);
	padding: var(--s7);
	border-radius: var(--s1);
	color: var(--color-white, #fffffd);
	background-image: url('./../../assets/images/bg-framed_container.webp');
	background-position: left top;
	background-size: cover;
	overflow: hidden;
	box-sizing: border-box;
}

/* Image column. `mask-size: 100% 100%` stretches the notch mask to the box, so keep
 * this column near the mask's own 675x496 ratio or the notch's angle shifts. */
.redteam-featured-post__media {
	flex: 0 1 675rem;
	mask-image: url('./../../assets/masks/mask-case_study.svg');
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	-webkit-mask-image: url('./../../assets/masks/mask-case_study.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
}

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

/* Text column */
.redteam-featured-post__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s5);
	flex: 0 1 526rem;
}

/* The Kit paints bare h3/p at .elementor-kit-{id} h3 (0-1-1), which inheritance
 * from the card loses to — hence the explicit white rather than `inherit`. */
.redteam-featured-post__title,
.redteam-featured-post__excerpt,
.redteam-featured-post__content {
	margin: 0 !important;
	color: var(--color-white) !important;
}

/* Body copy is 18rem/1.7 — the base body size at a looser line-height than the
 * theme default, so it's set here rather than via a .b-text-* preset. */
.redteam-featured-post__excerpt,
.redteam-featured-post__content p {
	font-size: var(--font-text-size, 18rem);
	line-height: 1.7;
	letter-spacing: 0.01em;
}


.redteam-featured-post__content :is(h1, h2, h3, h4, h5, h6, p, li, a) {
	color: var(--color-white);
}

/* Button — matches the Primary variant in extensions/button/style.css. That
 * styling is scoped to the Button widget's own markup, so it's restated here
 * for this widget's plain anchor. */
.redteam-featured-post__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	padding: var(--s3) var(--s4);
	border-radius: var(--s05);
	font-family: var(--font-body-small, 'Archivo'), sans-serif;
	font-size: var(--font-body-small-size, 16rem) !important;
	font-weight: var(--font-body-small-weight, 400);
	line-height: var(--font-body-small-line-height, 1.3);
	text-decoration: none;
	background-color: var(--color-red-200-base);
	color: var(--color-white) !important;
	transition: background-color 0.3s, color 0.3s;
}

.redteam-featured-post__button::after {
	content: "";
	display: block;
	width: 9rem;
	height: 10rem;
	mask: var(--icon-arrow-right);
	mask-repeat: no-repeat;
	mask-position: right center;
	background-color: currentColor;
}

.redteam-featured-post__button:hover,
.redteam-featured-post__button:focus {
	background-color: var(--color-red-500);
	color: var(--color-pearl-200-base) !important;
}

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

	.redteam-featured-post__media,
	.redteam-featured-post__body {
		flex: 0 0 auto;
		width: 100%;
	}
}