/* =========================================================================
   Essevo — Casuïstiek
   assets/css/casus.css

   Vervang de merktokens hieronder door de exacte waarden uit de stijlgids.
   Alles in dit bestand haakt op die variabelen.

   1. Tokens
   2. Bands en wrapper
   3. Hero
   4. Feitenkaart
   5. Leeskolom
   6. Paneel
   7. Uitklapblok
   8. Aanpakstappen
   9. Quote
  10. Wat maakte het verschil
  11. Overzichtsgrid
  12. Responsive
   ========================================================================= */

/* 1. Tokens --------------------------------------------------------------- */

.casus,
.casus-grid {
	--e-navy:      #14243F;
	--e-navy-soft: #5B6B85;
	--e-coral:     #cc5f37;
	--e-link:      #2563a8;
	--e-warm:      #FFF8F5;
	--e-warm-deep: #FDECE4;
	--e-white:     #FFFFFF;
	--e-rule:      #E7E1DC;
	--e-border:    #EDE7E2; 
	--e-mono: "JetBrains Mono", sans-serif;
	--e-wrap: 1200px;
	--e-read: 720px;
	color: var(--e-navy);
}

/* 2. Bands en wrapper ----------------------------------------------------- */

.single-cases .site-main,
.single-cases #content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.casus-wrap {
	width: 100%;
	max-width: var(--e-wrap);
	margin: 0 auto;
	padding-left:20px;
	padding-right:20px;
}



.casus-band--white { 
	background: var(--e-white);
	padding-top:120px;
	padding-bottom: 90px;
}
.casus-band--warm  { background: var(--e-white); }

/* 3. Hero ----------------------------------------------------------------- */

.casus-hero {
	background: linear-gradient(0deg, #FBEFE7 0%, #fff8f5 100%);
	padding:90px 20px 0px 20px; 
}

.casus-crumbs {
	font-family: var(--e-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e-navy-soft);
	margin-bottom: 28px;
}

.casus-crumbs a {
	color: var(--e-coral);
	text-decoration: none;
}

.casus-crumbs a:hover { color: var(--e-coral); border-bottom-color: var(--e-coral); }
.casus-crumbs__sep    { margin-inline: 8px; }

.casus-hero__title {
	font-size: clamp(34px, 5.4vw, 58px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--e-navy);
	max-width: 15ch;
	margin: 0;
}

.casus-hero__subline {
	font-size: clamp(18px, 2vw, 21px);
	line-height: 1.5;
	color: var(--e-navy-soft);
	max-width: 48ch;
	margin: 20px 0 0;
}

.casus-hero__meta {
	font-family: var(--e-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--e-navy-soft);
	margin: 24px 0 0;
}

/* 4. Feitenkaart ---------------------------------------------------------- */

.casus-facts {
	margin-top: 80px;
	margin-bottom:-50px;
	background: var(--e-white);
	border-radius: 16px;
	border:1px solid var(--e-rule);
	overflow: hidden;
	position:relative;
	z-index:2
}

.casus-facts__list { margin: 0; }

.casus-facts__row {
	display: grid;
	grid-template-columns: 180px 1fr;
	border-top: 1px solid var(--e-rule);
}

.casus-facts__row:first-child { border-top: 0; }

.casus-facts__row dt {
	margin: 0;
	padding: 22px 24px;
	background: var(--e-warm);
	font-family: var(--e-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e-coral);
}

.casus-facts__row dd {
	margin: 0;
	padding: 20px 28px;
	font-size: 16px;
	line-height: 1.6;
}

.casus-facts__figure {
	margin: 0;
	padding: 24px 28px;
	border-top: 1px solid var(--e-rule);
	background: var(--e-warm);
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--e-coral);
}

/* 5. Leeskolom ------------------------------------------------------------ */

.casus-prose {
	max-width: var(--e-read);
	font-size: 18px;
	line-height: 1.75;
}

.casus-prose > *:first-child { margin-top: 0; }
.casus-prose > *:last-child  { margin-bottom: 0; }

.casus-prose p { margin: 0 0 24px; }

.casus-lead {
	font-size: clamp(19px, 2.2vw, 22px);
	line-height: 1.55;
	color: var(--e-navy);
	margin-bottom: 32px !important;
}

.casus-prose h2 {
	font-size:  30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.022em;
	color: #1a3a5c;
	margin: 56px 0 20px;
}

.casus-prose h3 {
	font-size: clamp(20px, 2.4vw, 24px);
	line-height: 1.3;
	font-weight: 700;
	margin: 44px 0 16px;
}

.casus-prose h4 {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	margin: 32px 0 8px;
}

.casus-prose a {
	color: var(--e-navy);
	text-decoration: underline;
	text-decoration-color: var(--e-coral);
	text-underline-offset: 3px;
}


/* 6. Paneel (resultatenblok) ---------------------------------------------- */

.casus-panel {
	background: var(--e-warm);
	border-radius: 16px;
	padding: 44px 48px;
	margin: 48px 0 0;
}

.casus-panel > *:first-child { margin-top: 0; }
.casus-panel > *:last-child  { margin-bottom: 0; }

.casus-panel h2 { 
	margin-top: 0; 
	font-size:  30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.022em;
	color: #1a3a5c;
}

.casus-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 750px;
}

.casus-panel li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 16px;
	font-size: 18px;
	line-height: 1.75;
}

.casus-panel li:last-child { margin-bottom: 0; }

.casus-panel li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .68em;
	width: 7px;
	height: 7px;
	background: var(--e-coral);
}


.casus-panel li p { margin: 0; }

/* 7. Uitklapblok ---------------------------------------------------------- */

.casus-expander__bar{
	border-top: 1px solid var(--e-rule);
}
.casus-expander__bar > .casus-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 30px 20px;
	cursor: pointer;
	list-style: none;
	transition: background .18s ease;
}

.casus-expander__bar::-webkit-details-marker { display: none; }
.casus-expander__bar::marker { content: ""; }

.casus-expander__bar:hover { background: var(--e-warm); }

.casus-expander[open] .casus-expander__bar {
	background: var(--e-warm);
	border-bottom: 1px solid var(--e-rule);
}

.casus-expander__bar:focus-visible {
	outline: 3px solid var(--e-coral);
	outline-offset: -3px;
}

.casus-expander__intro { display: block; }

.casus-expander__eyebrow {
	display: block;
	font-family: var(--e-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--e-coral);
	margin-bottom: 10px;
}

.casus-expander__title {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.casus-expander__sub {
	display: block;
	font-size: 15px;
	line-height: 1.55;
	color: var(--e-navy-soft);
	margin-top: 8px;
}

.casus-expander__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	color: #2563a8;
	white-space: nowrap;
}

.casus-expander__label--open,
.casus-expander[open] .casus-expander__label--closed { display: none; }
.casus-expander[open] .casus-expander__label--open   { display: inline; }

.casus-expander__arrow { transition: transform .22s ease; }
.casus-expander[open] .casus-expander__arrow { transform: rotate(180deg); }

.casus-expander__body {
	background: var(--e-white);
	padding-top:50px;
}

/* 8. Aanpakstappen -------------------------------------------------------- */

.casus-aanpak {
	background: var(--e-warm);
	padding-top:50px;
	padding-bottom:50px;
	margin-top:50px;
}

.casus-aanpak > .casus-prose h2 { margin-top: 0; }

.casus-step { 
	border-top: 1px solid #e7e1dc;
    padding-top: 34px;
    margin-top: 44px;
}
.casus-step:last-child { margin-bottom: 0; }

.casus-step > h3 {
	position: relative;
	padding-left: 56px;
	font-size: clamp(19px, 2.2vw, 22px);
	line-height: 1.35;
	font-weight: 600;
	margin: 0 0 16px;
	color: #1a3a5c;
}

.casus-step__num {
	position: absolute;
	left: 0;
	top:7px;
	font-family: var(--e-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--e-coral);
}

.casus-step__body {
	padding-left: 56px;
	max-width: none;
}

.casus-step__body > p,
.casus-step__body > ul,
.casus-step__body > ol {
	max-width: 790px;
}

.casus-step__body ul{ 
	list-style: none;
	margin: 0;
	padding: 0;
}
.casus-step__body ul li{ 
    position: relative;
    padding-left: 26px;
	margin-bottom:14px
}
.casus-step__body ul li b{ 
	color: #1a3a5c;
}

.casus-step__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--e-coral);
}

/* Drie kolommen binnen stap 05 */

.casus-kolommen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
	margin-bottom:30px;
}
.casus-kolommen .casus-kolom{
	    background: #ffffff;
    border: 1px solid #e7e1dc;
    border-radius: 14px;
    padding: 26px 28px 28px;
}
.casus-kolom h4 { margin: 0 0 8px; color: #1a3a5c; }
.casus-kolom p  { margin: 0; font-size: 16px; line-height: 1.65; }

/* 9. Quote ---------------------------------------------------------------- */

.casus-quote {
	margin: 48px 0;
	padding-left: 28px;
	border-left: 3px solid var(--e-coral);
}

.casus-quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(20px, 2.4vw, 24px);
	line-height: 1.5;
	font-weight: 500;
}

.casus-quote blockquote p { margin: 0; }
.casus-quote blockquote p::before { content: "\201C"; }
.casus-quote blockquote p::after  { content: "\201D"; }

.casus-quote figcaption {
	margin-top: 16px;
	font-family: var(--e-mono);
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--e-navy-soft);
}

/* 10. Wat maakte het verschil --------------------------------------------- */

.casus-verschil {
	background: var(--e-warm);
	border-radius: 16px;
	padding: clamp(28px, 3.6vw, 48px);
	margin-top: 56px;
}

.casus-verschil > .casus-prose h2 { margin-top: 0; }

.casus-verschil__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 40px;
	margin-top: 28px;
}

.casus-verschil__item h4 { margin: 0 0 8px; font-size: 17px; }
.casus-verschil__item p  { margin: 0; font-size: 16px; line-height: 1.7; }

/* 11. Overzichtsgrid ------------------------------------------------------ */

.casus-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
}

.casus-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--e-white);
	border: 1px solid var(--e-border);
	border-radius: 14px;
	padding: 32px 34px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.casus-tile:hover {
	transform: translateY(-3px);
	border-color: #E2D8D1;
	box-shadow: 0 18px 40px rgba(20, 36, 63, .10);
}

/* Twee wrappers: kop-blok en content-blok */

.casus-tile__content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.casus-tile__num {
	font-family: var(--e-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--e-coral);
	margin: 0 0 16px;
}

.casus-tile__title {
	margin: 0 0 14px;
}

.casus-tile__title a:hover {
	color: var(--e-navy);
}

/* Hele tegel klikbaar, met één echte link per tegel */
.casus-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
}

.casus-tile__meta {
	font-size: 13px;
	line-height: 1.6;
	color: var(--e-navy-soft);
	margin: 0 0 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--e-border);
}

.casus-tile__body {
	font-size: 15.5px;
	line-height: 1.72;
	color: var(--e-navy);
}

.casus-tile__body p { margin: 0; }

.casus-tile__link {
	margin-top: auto;
	padding-top: 26px;
	font-size: 15px;
	font-weight: 500;
	color: var(--e-link);
}

.casus-tile__link .arr {
	display: inline-block;
	margin-left: 6px;
	transition: transform 140ms ease;
}

.casus-tile:hover .casus-tile__link .arr {
	transform: translateX(4px);
}

/* Oneven laatste tegel vult de volle breedte: kop links, tekst rechts */

.casus-grid .casus-tile:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}

.casus-grid .casus-tile:last-child:nth-child(odd) .casus-tile__title {
	max-width: none;
}

.casus-grid .casus-tile:last-child:nth-child(odd) .casus-tile__meta {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* 12. Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {

	.casus-kolommen,
	.casus-verschil__list { grid-template-columns: 1fr; }

	.casus-grid { grid-template-columns: 1fr; gap: 20px; }

	.casus-grid .casus-tile:last-child:nth-child(odd) {
		display: flex;
		flex-direction: column;
	}

	.casus-grid .casus-tile:last-child:nth-child(odd) .casus-tile__meta {
		border-bottom: 1px solid var(--e-border);
		padding-bottom: 20px;
		margin-bottom: 22px;
	}
}

@media (max-width: 640px) {
	.casus-hero{ padding: 40px 0px; }
	.casus-facts { margin-top: 30px; margin-bottom: -100px;}
	.casus-band--white { padding-bottom: 50px;}
	.casus-prose { font-size: 17px; }
	.casus-prose h2,.casus-panel h2 {font-size: 24px;}
	.casus-facts__row { grid-template-columns: 1fr; }
	.casus-facts__row dt { padding: 16px 20px 8px; }
	.casus-facts__row dd { padding: 10px 20px; }
	.casus-facts__figure { padding: 20px; }
	.casus-panel { padding: 28px 24px; }
	.casus-expander__cta { font-size: 13px; }
	.casus-step > h3 { padding-left: 0; padding-top: 26px; }
	.casus-step__num { top: 0; }
	.casus-step__body { padding-left: 0; }
	.casus-tile { padding: 26px 24px; }
	.casus-tile__title { font-size: 22px; max-width: none; }

}

@media (prefers-reduced-motion: reduce) {
	.casus-expander__arrow,
	.casus-tile,
	.casus-tile__link .arr { transition: none; }
	.casus-tile:hover { transform: none; }
	.casus-tile:hover .casus-tile__link .arr { transform: none; }
}