/*
 * Case Study Details — frontend styles.
 *
 * Additive to assets/css/blog/blog-listing.css + assets/css/blog/blog-details.css,
 * which already supply everything reused as-is here per this build's
 * requirement: .blog-listing__inner, .blog-featured*, .blog-listing__meta-row*,
 * .blog-listing__divider, .blog-details__back*, .blog-details__content
 * (entry-content typography), .blog-details__section-heading. This file only
 * covers what's genuinely new to a Case Study: the content logo, the Key
 * Outcomes block (also used standalone by the [key_outcomes] shortcode), and
 * the Related Case Studies cards. Colors/spacing not called out by an exact
 * redline (card background tints, in particular — no per-post color field
 * exists yet) use a best-effort 2-tone alternating palette; adjust directly
 * if an exact spec becomes available.
 *
 * @package Greenova
 */

/* =============================================================================
   Full-width content
   ============================================================================= */

/*
 * Blog Details caps .blog-details__content at 840px (a comfortable reading
 * column for long-form blog prose) — the Case Study Figma instead runs the
 * entry content the full width of .blog-listing__inner (out to where the
 * featured image's right edge lands), so that cap is lifted here.
 */
.case-study-details .blog-details__content {
	max-width: none;
}

/* =============================================================================
   Key Outcomes (rendered via the [key_outcomes] shortcode, inside entry-content)
   ============================================================================= */

.entry-content .key-outcomes {
	margin: 40px 0;
}

.blog-details__content h3 {
	font-size: 48px;
	font-weight: 500;
	line-height: 53px;
	color:          #000000;
	margin: 20px 0 14px;
}
.key-outcomes__label {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      18px;
	font-weight:    600;
	line-height:    24px;
	color:          #000000;
	margin:         0 0 16px;
}

.key-outcomes__list {
	display:        flex;
	flex-direction: column;
	gap:            15px;
}

.key-outcomes__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    52.8px;
	letter-spacing: -1.92px;
	color:          #000000;
	margin:         0 0 4px;
}

.key-outcomes__value {
	color: #000000; /* Same color as the title — the Figma has no distinct value tint, unlike an earlier draft of this spec. */
}

.key-outcomes__desc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 26px;
	color:       #58595B;
	margin:      0;
}

/* =============================================================================
   Related Case Studies
   ============================================================================= */

.case-study-related-grid {
	display:        flex;
	flex-direction: column;
	gap:            32px;
}

.case-study-related-card {
	width:           100%; /* Parent .blog-listing__inner is already max-width:1376px, so this lands on the Figma's 1376px at desktop. */
	height:          538px;
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	overflow:        hidden;
	gap:             40px;
	border-radius:   24px;
	padding:         32px 32px 32px 36px;
	text-decoration: none;
	color:           inherit;
	transition:      transform 0.3s ease, box-shadow 0.3s ease;
	box-sizing:      border-box;
}

/*
 * Neutralise the theme's global `a { color: #0d6efd; } a:hover { text-decoration: underline; }`
 * (style.css) — without this, the whole card (itself an <a>) inherits link
 * blue/underline on every state, which then bleeds into every descendant
 * that doesn't set its own color. Every state is pinned to "not a link"
 * explicitly; only .case-study-related-card__read-more (a plain span, not
 * a nested anchor) keeps its own intended hover color via the override
 * further below.
 */
.case-study-related-card,
.case-study-related-card:hover,
.case-study-related-card:focus,
.case-study-related-card:visited,
.case-study-related-card:active {
	color:           inherit;
	text-decoration: none;
}

.case-study-related-card:hover {
	transform:  translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.case-study-related-card:focus-visible {
	outline:        2px solid #000000;
	outline-offset: 4px;
}

.case-study-related-card--0 {
	background-color: #F9ECE4; /* Peach */
}

.case-study-related-card--1 {
	background-color: #E4F1D6; /* Light green */
}

.case-study-related-card__content {
	width:           632px;
	height:          100%;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	min-width:       0;
}

.case-study-related-card__meta {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      12px;
	font-weight:    400;
	line-height:    1;
	letter-spacing: 1.2px; /* 10% of the 12px font-size. */
	text-transform: uppercase;
	color:          #64748B;
	margin-bottom:  20px;
}

.case-study-related-card__title {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      32px;
	font-weight:    400;
	line-height:    44px;
	letter-spacing: -1.92px;
	color:          #000000;
	width:          632px;
	max-width:      100%;
	margin:         0 0 20px;
}

.case-study-related-card__excerpt {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28.8px;
	color:       #000000;
	width:       632px;
	max-width:   100%;
	margin:      0 0 40px;
}

.case-study-related-card__outcome {
	display:        flex;
	flex-direction: column;
}

.case-study-related-card__outcome-label {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      12px;
	font-weight:    400;
	line-height:    1;
	letter-spacing: 1.2px; /* 10% of the 12px font-size. */
	text-transform: uppercase;
	color:          #64748B;
	margin-bottom:  12px;
}

.case-study-related-card__outcome-title {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      14px;
	font-weight:    400;
	line-height:    1;
	letter-spacing: -0.14px; /* -1% of the 14px font-size. */
	color:          #64748B;
	margin-bottom:  8px;
}

.case-study-related-card__outcome-value {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    52.8px;
	letter-spacing: -1.92px;
	color:          #000000;
	margin-bottom:  8px; /* Small gap when .outcome-desc follows (below); :last-child below covers the row-with-no-desc case. */
}

.case-study-related-card__outcome-value:last-child {
	margin-bottom: 24px; /* No description follows — this is the last element before Read Case Study, so it needs the full gap itself. */
}

.case-study-related-card__outcome-desc {
	font-family:   'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:     13px;
	font-weight:   400;
	color:         #64748B;
	margin-bottom: 24px;
}

.case-study-related-card__read-more {
	display:        inline-flex;
	align-items:    center;
	gap:            12px;
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      20px;
	font-weight:    500;
	line-height:    20px;
	letter-spacing: 0;
	text-transform: none;
	color:          #2EA8FF;
	margin-top:     auto; /* Pins to the bottom of .case-study-related-card__content regardless of how tall the text above runs. */
}

/* Text color never changes on hover — only the arrow icon animates (see assets/css/blog/blog-listing.css's shared .blog-listing__read-more-icon transition). */
.case-study-related-card__read-more:hover {
	color: #2EA8FF;
}

.case-study-related-card__media {
	position:      relative;
	flex:          0 0 632px;
	width:         632px;
	height:        490px;
	border-radius: 22px;
	overflow:      hidden;
}

.case-study-related-card__image {
	display:         block;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
	border-radius:   22px;
}

.case-study-related-card__logo {
	position:   absolute;
	top:        50%;
	left:       50%;
	transform:  translate(-50%, -50%);
	z-index:    1;
	max-width:  60%;
	max-height: 72px;
	width:      auto;
	height:     auto;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 991.98px ) {
	.key-outcomes__list {
		gap: 32px;
	}

	.key-outcomes__heading {
		font-size:      32px;
		line-height:    1.15;
		letter-spacing: -1.28px;
	}

	.case-study-related-card {
		flex-direction: column-reverse; /* Media comes after content in the DOM — reversing puts the image on top, per the Figma's tablet layout. */
		align-items:    stretch;
		width:          100%;
		height:         auto;
		padding:        24px;
		gap:            24px;
	}

	.case-study-related-card__content {
		width:  100%;
		height: auto;
	}

	.case-study-related-card__title,
	.case-study-related-card__excerpt {
		width: 100%;
	}

	.case-study-related-card__media {
		flex:   0 0 auto;
		width:  100%;
		height: 320px;
	}
}

@media ( max-width: 575.98px ) {
	.key-outcomes__label {
		font-size: 16px;
	}

	.key-outcomes__list {
		gap: 24px;
	}

	.key-outcomes__heading {
		font-size:      26px;
		letter-spacing: -1.04px;
	}

	.key-outcomes__desc {
		font-size:   14px;
		line-height: 22px;
	}

	.case-study-related-card {
		padding: 20px;
		gap:     20px;
	}

	.case-study-related-card__media {
		height: 220px;
	}

	.case-study-related-card__meta {
		margin-bottom: 16px;
	}

	.case-study-related-card__title {
		font-size:      20px;
		line-height:    1.3;
		letter-spacing: -0.8px;
		margin-bottom:  12px;
	}

	.case-study-related-card__excerpt {
		font-size:   15px;
		line-height: 1.5;
		margin-bottom: 24px;
	}

	.case-study-related-card__outcome-value {
		font-size:      28px;
		line-height:    1.2;
		letter-spacing: -1.12px;
	}

	.case-study-related-card__read-more {
		font-size: 16px;
	}
}