/* ============================================================
 * BP_Cultures_Applications_Showcase_Widget
 * Cream container + header (eyebrow / divider / serif / 3 indicators)
 * + 1 featured card (left, full-image overlay) + 2x2 small grid
 * + bottom filled-olive CTA
 * ============================================================ */

:root {
	--bp-cas-cream:        #F7F4EC;
	--bp-cas-cream-2:      #F4ECDD;
	--bp-cas-green:        #2A3F2A;
	--bp-cas-green-2:      #1F2A1F;
	--bp-cas-olive:        #B8B25A;
	--bp-cas-olive-2:      #A89E48;
	--bp-cas-body:         #26362D;
	--bp-cas-font-display: 'DM Serif Display', Georgia, serif;
	--bp-cas-font-body:    'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	--bp-cas-radius-card:  20px;
}

.bp-cas {
	background: var(--bp-cas-cream);
	padding-block: clamp( 56px, 6vw, 76px );
	color: var(--bp-cas-body);
	font-family: var(--bp-cas-font-body);
}

.bp-cas__container {
	max-inline-size: 1320px;
	margin-inline: auto;
	padding-inline: clamp( 24px, 4vw, 56px );
	background: var(--bp-cas-cream-2);
	border: 1.5px solid var(--bp-cas-olive);
	border-radius: 28px;
	padding-block: clamp( 44px, 5vw, 72px );
	padding-inline: clamp( 28px, 4vw, 56px );
}

/* ----------- HEADER ----------- */
.bp-cas__header {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	grid-template-areas:
		"header-text indicators"
		".             intro";
	column-gap: clamp( 32px, 4vw, 56px );
	row-gap: 28px;
	align-items: start;
	margin-block-end: clamp( 28px, 3.6vw, 44px );
}

.bp-cas__header-text {
	grid-area: header-text;
	max-inline-size: 640px;
}

.bp-cas__indicators {
	grid-area: indicators;
}

.bp-cas__intro {
	grid-area: intro;
}

.bp-cas__eyebrow {
	display: inline-block;
	font-family: var(--bp-cas-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bp-cas-green);
	margin: 0;
}

/* gold divider under the eyebrow */
.bp-cas__divider {
	display: block;
	inline-size: 48px;
	block-size: 1.5px;
	background: var(--bp-cas-olive);
	margin-block-start: 14px;
	border: 0;
}

.bp-cas__title {
	font-family: var(--bp-cas-font-display);
	font-weight: 400;
	color: var(--bp-cas-green-2);
	font-size: clamp( 38px, 3.6vw, 60px );
	line-height: 1.0;
	letter-spacing: -0.005em;
	margin: 24px 0 0;
	max-inline-size: 100%;
	white-space: pre-line;
}

.bp-cas__header-divider {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-block: 18px 2px;
}
.bp-cas__header-divider-line {
	display: inline-block;
	inline-size: 56px;
	block-size: 1px;
	background: var(--bp-cas-olive);
	border: 0;
	padding: 0;
}
.bp-cas__header-divider-diamond {
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	transform: rotate(45deg);
	background: var(--bp-cas-olive);
}

.bp-cas__intro {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bp-cas-body);
	max-inline-size: 520px;
	margin: 0;
	opacity: 0.92;
}

/* ----------- INDICATORS ----------- */
.bp-cas__indicators {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, minmax(0, 1fr) );
	gap: 0;
	border-block-start: 1px solid rgba( 42, 63, 42, 0.18 );
	border-block-end: 1px solid rgba( 42, 63, 42, 0.18 );
}

.bp-cas__indicator {
	padding: 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-inline-start: 1px solid rgba( 42, 63, 42, 0.18 );
}

.bp-cas__indicator:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.bp-cas__indicator:last-child {
	padding-inline-end: 0;
}

.bp-cas__indicator-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	color: var(--bp-cas-olive);
	background: transparent;
	margin: 0;
}

.bp-cas__indicator-icon svg {
	inline-size: 22px;
	block-size: 22px;
}

.bp-cas__indicator-title {
	font-family: var(--bp-cas-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--bp-cas-green-2);
	margin: 4px 0 0;
	line-height: 1.25;
	letter-spacing: 0.005em;
}

.bp-cas__indicator-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--bp-cas-body);
	margin: 0;
	opacity: 0.85;
}

/* ----------- ARTICLE GRID ----------- */
.bp-cas__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: 20px;
	align-items: stretch;
}

.bp-cas__grid-left,
.bp-cas__grid-right {
	display: grid;
	gap: 20px;
}

.bp-cas__grid-right {
	grid-template-columns: repeat( 2, minmax(0, 1fr) );
}

/* ----------- CARD (base) ----------- */
.bp-cas__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bp-cas-cream);
	border: 1px solid rgba( 42, 63, 42, 0.15 );
	border-radius: var(--bp-cas-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 220ms ease, transform 220ms ease;
	height: 100%;
}

.bp-cas__card:hover {
	border-color: var(--bp-cas-olive);
	transform: translateY( -2px );
}

.bp-cas__card-media {
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	overflow: hidden;
	flex: 1 1 auto;
	min-block-size: 0;
}

/* ----------- SMALL CARD ----------- */
.bp-cas__card--small {
	display: grid;
	grid-template-rows: 16 / 7;  /* fallback */
	grid-template-rows: minmax(0, 44%) minmax(0, 56%);
}

.bp-cas__card--small .bp-cas__card-media {
	flex: 0 0 auto;
	block-size: auto;
}

.bp-cas__card-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bp-cas__card-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* small card body */
.bp-cas__card--small .bp-cas__card-body {
	padding: 22px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 auto;
}

.bp-cas__card--small .bp-cas__card-badge {
	margin-block-end: 14px;
}

.bp-cas__card--small .bp-cas__card-title {
	margin-block-end: 12px;
}

.bp-cas__card--small .bp-cas__card-excerpt {
	margin-block-end: 16px;
}

.bp-cas__card--small .bp-cas__card-cta {
	margin-block-start: auto;
}

/* ----------- FEATURED CARD ----------- */
.bp-cas__card--featured {
	display: block;
	isolation: isolate;
}

.bp-cas__card--featured .bp-cas__card-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	aspect-ratio: auto;
	block-size: 100%;
}

.bp-cas__card--featured .bp-cas__card-img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center center;
}

.bp-cas__card--featured .bp-cas__card-veil {
	background: linear-gradient(
		180deg,
		rgba( 20, 50, 30, 0.05 ) 0%,
		rgba( 20, 50, 30, 0.15 ) 35%,
		rgba( 20, 50, 30, 0.55 ) 70%,
		rgba( 20, 50, 30, 0.92 ) 100%
	);
	z-index: 1;
}

.bp-cas__card--featured .bp-cas__card-body {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding: 28px 28px 30px;
	color: #FFFFFF;
	gap: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

/* ----------- BADGE ----------- */
.bp-cas__card-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-cas-green);
	background: rgba( 184, 178, 90, 0.22 );
	border: 1px solid rgba( 184, 178, 90, 0.55 );
	border-radius: 999px;
	padding: 5px 11px;
}

.bp-cas__card--featured .bp-cas__card-badge {
	background: rgba( 184, 178, 90, 0.32 );
	border-color: rgba( 184, 178, 90, 0.65 );
	color: #FFFFFF;
}

/* ----------- TITLES ----------- */
.bp-cas__card-title {
	font-family: var(--bp-cas-font-display);
	font-weight: 400;
	font-size: clamp( 20px, 1.45vw, 25px );
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--bp-cas-green-2);
	margin: 0;
}

.bp-cas__card--featured .bp-cas__card-title {
	color: #FFFFFF;
	font-size: clamp( 26px, 1.9vw, 30px );
	line-height: 1.05;
}

/* ----------- EXCERPT ----------- */
.bp-cas__card-excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-cas-body);
	margin: 0;
	opacity: 0.92;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bp-cas__card--small .bp-cas__card-excerpt {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.bp-cas__card--featured .bp-cas__card-excerpt {
	color: rgba( 255, 255, 255, 0.92 );
	opacity: 1;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* ----------- CARD CTA ----------- */
.bp-cas__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bp-cas-green);
	margin: 0;
}

.bp-cas__card--featured .bp-cas__card-cta {
	color: #FFFFFF;
}

.bp-cas__card-arrow {
	display: inline-block;
	transition: transform 200ms ease;
}

.bp-cas__card:hover .bp-cas__card-arrow {
	transform: translateX( 3px );
}

/* ----------- BOTTOM CTA (FILLED OLIVE) ----------- */
.bp-cas__bottom {
	display: flex;
	justify-content: center;
	margin-block-start: clamp( 30px, 3.6vw, 36px );
}

.bp-cas__bottom-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bp-cas-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 0 38px;
	block-size: 50px;
	border: 0;
	border-radius: 999px;
	background: var(--bp-cas-olive);
	text-decoration: none;
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	box-shadow: 0 10px 24px -18px rgba( 31, 42, 31, 0.45 );
}

.bp-cas__bottom-cta:hover {
	background: var(--bp-cas-olive-2);
	transform: translateY( -1px );
}

.bp-cas__bottom-arrow {
	display: inline-block;
	transition: transform 200ms ease;
}

.bp-cas__bottom-cta:hover .bp-cas__bottom-arrow {
	transform: translateX( 3px );
}

/* ----------- RESPONSIVE ----------- */
@media ( max-width: 1024px ) {
	.bp-cas__header {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}
	.bp-cas__title {
		font-size: clamp( 40px, 5vw, 54px );
	}
	.bp-cas__indicators {
		grid-template-columns: 1fr;
		border-block-start: 0;
		border-block-end: 0;
	}
	.bp-cas__indicator {
		padding: 16px 0;
		border-inline-start: 0;
		border-block-end: 1px solid rgba( 42, 63, 42, 0.18 );
		flex-direction: row;
		gap: 14px;
		align-items: flex-start;
	}
	.bp-cas__indicator:last-child {
		border-block-end: 0;
	}
	.bp-cas__indicator-icon {
		inline-size: 28px;
		block-size: 28px;
		flex: 0 0 28px;
	}
	.bp-cas__grid {
		grid-template-columns: 1fr;
	}
	.bp-cas__grid-right {
		grid-template-columns: repeat( 2, minmax(0, 1fr) );
	}
	.bp-cas__card--featured .bp-cas__card-body {
		padding: 24px;
	}
}

@media ( max-width: 640px ) {
	.bp-cas__title {
		font-size: clamp( 32px, 8vw, 42px );
	}
	.bp-cas__grid-right {
		grid-template-columns: 1fr;
	}
	.bp-cas__card--featured .bp-cas__card-media {
		position: relative;
		inset: auto;
		block-size: auto;
		aspect-ratio: 16 / 11;
	}
	.bp-cas__card--featured .bp-cas__card-img {
		position: absolute;
		inset: 0;
	}
	.bp-cas__card--featured .bp-cas__card-body {
		position: static;
		color: var(--bp-cas-green-2);
		padding: 22px;
	}
	.bp-cas__card--featured .bp-cas__card-title,
	.bp-cas__card--featured .bp-cas__card-excerpt,
	.bp-cas__card--featured .bp-cas__card-cta {
		color: var(--bp-cas-green-2);
	}
	.bp-cas__card--featured .bp-cas__card-cta {
		color: var(--bp-cas-green);
	}
	.bp-cas__card--featured .bp-cas__card-badge {
		background: rgba( 184, 178, 90, 0.22 );
		border-color: rgba( 184, 178, 90, 0.55 );
		color: var(--bp-cas-green);
	}
	.bp-cas__card--featured .bp-cas__card-veil {
		display: none;
	}
	.bp-cas__bottom-cta {
		font-size: 12px;
		padding: 0 28px;
		block-size: 46px;
	}
}