/**
 * Case Study (Klantverhaal) — template styles.
 *
 * Every rule is scoped under .lct-cs (the widget wrapper), so this file
 * cannot reach the Artikel single template, the Publicaties listing, or any
 * other page. In particular it never restyles .lct-artikel or a bare
 * .lct-pub-card — the related grid is targeted only via .lct-cs--related.
 *
 * Values taken from P10-Klantverhaal.html's own stylesheet:
 *   dark-blue #03224E   light-blue #0062C7   orange #D78135
 *   orange-light #FFF3E8   blue-light #EDF4FC
 *   gray-50 #F9FAFB  gray-200 #E5E7EB  gray-600 #4B5563  gray-700 #374151
 *   fact card    24px padding, 8px radius, 1px #E5E7EB border
 *   facts grid   4 columns, 24px gap
 *   sidebar      #EDF4FC, 24px padding, 8px radius, 4px left border in orange
 *   product card 8px radius, 1px border, 200px media, 24px body padding
 *   product grid 3 columns, 32px gap
 */

/* The story container is a sibling of the widget wrapper, not a descendant,
   so it needs the same token scope — without this, var(--cs-navy) resolves to
   nothing inside .lct-cs-story and every colour silently falls back to the
   inherited body grey. */
.lct-cs,
.lct-cs-story {
	--cs-navy: var( --e-global-color-brand_navy, #03224e );
	--cs-blue: var( --e-global-color-brand_link_blue, #0062c7 );
	--cs-orange: var( --e-global-color-brand_orange, #d78135 );
	--cs-orange-light: #fff3e8;
	--cs-blue-light: #edf4fc;
	--cs-gray-200: #e5e7eb;
	--cs-gray-600: #4b5563;
	--cs-gray-700: #374151;
	--cs-cream: #fbf3ec;
	--cs-radius: 8px;
}

.lct-cs__heading {
	margin: 0 0 32px;
	color: var( --cs-navy );
	font-size: 29px;
	line-height: 1.25;
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * Hero meta — sector chip(s) + date
 * ------------------------------------------------------------------ */

.lct-cs .lct-cs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.lct-cs .lct-cs-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 4px;
	background-color: var( --cs-orange-light );
	color: var( --cs-orange );
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: filter .2s ease;
}

.lct-cs a.lct-cs-chip:hover {
	filter: brightness( .96 );
}

.lct-cs .lct-cs-date {
	color: var( --cs-gray-600 );
	font-size: 15px;
}

/* ------------------------------------------------------------------
 * Hero image — the reference's .hero-image is a full-width banner with a
 * fixed 400px height and an 8px radius, so the photo is cropped to the
 * band rather than rendered at its natural height.
 *
 * Scoped to .lct-cs-featured, a class used only by this template.
 * ------------------------------------------------------------------ */

.lct-cs-featured img {
	display: block;
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 8px;
}

@media ( max-width: 1024px ) {
	.lct-cs-featured img { height: 320px; }
}

@media ( max-width: 767px ) {
	.lct-cs-featured img { height: 220px; }
}

/* ------------------------------------------------------------------
 * "In het kort" fact cards
 * ------------------------------------------------------------------ */

.lct-cs .lct-cs-grid {
	display: grid;
	gap: 24px;
	align-items: stretch;
}

.lct-cs .lct-cs-grid--facts {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

.lct-cs .lct-cs-fact {
	background-color: #fff;
	padding: 24px;
	border: 1px solid var( --cs-gray-200 );
	border-radius: var( --cs-radius );
}

.lct-cs .lct-cs-fact__label {
	margin: 0 0 8px;
	color: var( --cs-gray-600 );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.lct-cs .lct-cs-fact__value {
	margin: 0;
	color: var( --cs-navy );
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
 * Sidebar quote + product links
 * ------------------------------------------------------------------ */

.lct-cs .lct-cs-quote {
	margin: 0;
}

.lct-cs .lct-cs-quote__text {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	color: var( --cs-navy );
	font-size: 18px;
	font-style: italic;
	line-height: 1.6;
	quotes: "\201C" "\201D";
}

.lct-cs .lct-cs-quote__text::before { content: open-quote; }
.lct-cs .lct-cs-quote__text::after  { content: close-quote; }

.lct-cs .lct-cs-quote__by {
	color: var( --cs-gray-700 );
	font-size: 15px;
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Sidebar boxes — the quote and the products list are each their own
 * panel, mirroring the Artikel single template's sidebar box system.
 *
 * Measured from the live Artikel template, containers 6b04dcc
 * (ROI-calculator) and e3ef2a0 (Gerelateerde thema's):
 *   padding 32px      square corners (radius 0)
 *   fills   navy #03224E  /  cream #FBF3EC
 *   heading 24px / 700 navy, 22px below
 *   mobile_extra padding 24px 22px
 *
 * Done here rather than as Elementor container settings so the whole
 * treatment stays inside this stylesheet, which only loads on pages
 * carrying the Case Study widget. The Artikel template is not touched.
 * ------------------------------------------------------------------ */

.lct-cs--quote,
.lct-cs--products {
	padding: 32px;
	border-radius: 0;
}

.lct-cs--quote {
	background-color: var( --cs-navy );
}

.lct-cs--products {
	background-color: var( --cs-cream );
}

/* Both box headings follow .lct-artikel__heading, not the page's 36px
   section headings — these label a panel, not a section. */
.lct-cs--quote .lct-cs__heading,
.lct-cs--products .lct-cs__heading {
	margin: 0 0 22px;
	padding-top: 0;
	border-top: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
}

.lct-cs--products .lct-cs__heading {
	color: var( --cs-navy );
}

/* On the navy fill the heading, quote and attribution all invert. */
.lct-cs--quote .lct-cs__heading {
	color: #fff;
}

.lct-cs--quote .lct-cs-quote__text {
	color: #fff;
}

.lct-cs--quote .lct-cs-quote__by {
	color: rgba( 255, 255, 255, .78 );
}

/* A heading-only block (the product sections until the Product CPT
   exists) must not leave 22px of dead space under its title. */
.lct-cs--empty .lct-cs__heading {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * "Het volledige verhaal" body copy.
 *
 * The story is post_content, so before this rule its sub-headings
 * inherited the Kit's generic h3 — measured at 30px in the SAME grey
 * rgb(122,122,122) as the paragraphs beneath them, which flattened the
 * hierarchy: the section title and its sub-headings read as one block.
 *
 * Restores the Homepage's scale and colour split:
 *   h1 55  ->  h2 36 (section)  ->  h3 25 (sub-head)  ->  18 body
 *   navy #03224E for every heading, grey for body copy.
 *
 * The class is applied to the Post Content widget on template 483, so
 * nothing outside this template is affected. Doubled class keeps it
 * above the Kit's own `.elementor-kit-6 h3` without !important.
 * ------------------------------------------------------------------ */

.lct-cs-story.lct-cs-story h2,
.lct-cs-story.lct-cs-story h3,
.lct-cs-story.lct-cs-story h4 {
	color: var( --cs-navy );
	font-weight: 700;
	line-height: 1.3;
}

.lct-cs-story.lct-cs-story h3 {
	margin: 40px 0 12px;
	font-size: 25px;
}

.lct-cs-story.lct-cs-story > *:first-child,
.lct-cs-story.lct-cs-story .elementor-widget-container > *:first-child {
	margin-top: 0;
}

.lct-cs-story.lct-cs-story p {
	margin: 0 0 18px;
	color: var( --cs-gray-700 );
	font-size: 18px;
	line-height: 1.6;
}

.lct-cs-story.lct-cs-story p:last-child {
	margin-bottom: 0;
}

.lct-cs .lct-cs-productlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lct-cs .lct-cs-productlist__item {
	margin: 0 0 8px;
}

.lct-cs .lct-cs-productlist__item:last-child {
	margin-bottom: 0;
}

.lct-cs .lct-cs-productlist__link {
	display: block;
	color: var( --cs-blue );
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	transition: color .2s ease;
}

.lct-cs a.lct-cs-productlist__link:hover,
.lct-cs a.lct-cs-productlist__link:focus-visible {
	color: var( --cs-navy );
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * "Producten in deze case" cards
 * ------------------------------------------------------------------ */

.lct-cs .lct-cs-grid--products {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 32px;
}

.lct-cs .lct-cs-product {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid var( --cs-gray-200 );
	border-radius: var( --cs-radius );
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, box-shadow .3s ease;
}

a.lct-cs-product:hover {
	transform: translateY( -4px );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, .1 );
}

.lct-cs .lct-cs-product__media {
	width: 100%;
	height: 200px;
	background-color: var( --cs-gray-200 );
	overflow: hidden;
}

.lct-cs .lct-cs-product__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lct-cs .lct-cs-product__img--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, #e5e7eb 0%, #d4d7dd 100% );
}

.lct-cs .lct-cs-product__body {
	padding: 24px;
}

.lct-cs .lct-cs-product__title {
	margin: 0 0 8px;
	color: var( --cs-navy );
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.lct-cs .lct-cs-product__text {
	margin: 0;
	color: var( --cs-gray-700 );
	font-size: 15px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Related case studies — reuses the publication card, spacing only here.
 * Scoped to .lct-cs--related so the Artikel and Publicaties grids are
 * untouched.
 * ------------------------------------------------------------------ */

.lct-cs--related .lct-publications--related .lct-pub-grid {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 50px 34px;
}

/* ------------------------------------------------------------------
 * Responsive — existing Elementor breakpoints only (mobile 767,
 * mobile_extra 880, tablet 1024, tablet_extra 1200, laptop 1366).
 * No new breakpoint is introduced.
 * ------------------------------------------------------------------ */

@media ( max-width: 1200px ) {
	.lct-cs .lct-cs-grid--facts {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 1024px ) {
	.lct-cs .lct-cs-grid--products,
	.lct-cs--related .lct-publications--related .lct-pub-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 24px;
	}

	.lct-cs__heading {
		font-size: 26px;
		margin-bottom: 24px;
	}

	/* The panel headings keep their own scale, not the section scale. */
	.lct-cs--quote .lct-cs__heading,
	.lct-cs--products .lct-cs__heading {
		font-size: 22px;
		margin-bottom: 18px;
	}

	.lct-cs-story.lct-cs-story h3 {
		font-size: 23px;
		margin-top: 32px;
	}
}

/* mobile_extra — matches the Artikel boxes' own 24px/22px step. */
@media ( max-width: 880px ) {
	.lct-cs--quote,
	.lct-cs--products {
		padding: 24px 22px;
	}
}

@media ( max-width: 767px ) {
	.lct-cs .lct-cs-grid--facts,
	.lct-cs .lct-cs-grid--products,
	.lct-cs--related .lct-publications--related .lct-pub-grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 20px;
	}

	.lct-cs .lct-cs-fact,
	.lct-cs .lct-cs-product__body {
		padding: 20px;
	}

	.lct-cs .lct-cs-quote__text {
		font-size: 17px;
	}

	.lct-cs__heading {
		font-size: 24px;
	}

	.lct-cs--quote .lct-cs__heading,
	.lct-cs--products .lct-cs__heading {
		font-size: 20px;
	}

	.lct-cs-story.lct-cs-story h3 {
		font-size: 21px;
		margin-top: 28px;
	}

	.lct-cs-story.lct-cs-story p {
		font-size: 17px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lct-cs .lct-cs-product,
	.lct-cs .lct-cs-chip,
	.lct-cs .lct-cs-productlist__link {
		transition: none;
	}

	a.lct-cs-product:hover {
		transform: none;
	}
}