/* ==========================================================================
   Case Detail — Expertises/Cases detail page
   ========================================================================== */

/* ---- Breadcrumb ---- */
.case-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
}

.case-breadcrumb__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.case-breadcrumb__icon img {
  width: 100%;
  height: 100%;
}

.case-breadcrumb__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

/* ---- Case Hero ---- */
.case-hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 120px;
}

.case-hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: var(--green-1200);
}

.case-hero__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 6rem; /* 96px */
  line-height: 1.05;
  letter-spacing: -2.88px;
  max-width: 1178px;
}

.case-hero__subtitle {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 2.375rem; /* 38px */
  line-height: 1.2;
  letter-spacing: -0.76px;
  max-width: 1059px;
}

/* ---- Case Meta (client + services row) ---- */
.case-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 120px;
}

.case-meta__client {
  display: flex;
  align-items: center;
  gap: 16px;
}

.case-meta__client-label {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
}

.case-meta__client-badge {
  display: flex;
  align-items: center;
  gap: 6.909px;
  height: 38px;
  padding-left: 6.909px;
  padding-right: 12px;
  background: var(--base-200);
  border-radius: var(--radius-small);
}

.case-meta__client-logo {
  width: 24.634px;
  height: 24.784px;
  flex-shrink: 0;
}

.case-meta__client-logo img {
  width: 100%;
  height: 100%;
}

.case-meta__client-name {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

.case-meta__services {
  display: flex;
  align-items: center;
  gap: 5px;
}

.case-meta__service-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-card);
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

.case-meta__service-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-card);
  background: var(--base-100);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

/* ---- Case Hero Image ---- */
.case-hero-image {
  padding: 0 120px;
}

.case-hero-image__img {
  width: 100%;
  max-width: 1180px;
  height: 797px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

/* ---- Section Label (bracket pattern, reused) ---- */
.case-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.case-section-label__bracket {
  width: 11px;
  flex-shrink: 0;
}

.case-section-label__bracket--open {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 10px;
}

.case-section-label__bracket--close {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 10px;
}

.case-section-label__bracket-char {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.625rem; /* 26px */
  line-height: 1.2;
  letter-spacing: -0.13px;
  color: var(--blue-600);
  display: block;
}

.case-section-label__bracket--close .case-section-label__bracket-char {
  transform: rotate(180deg);
}

.case-section-label__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

/* ---- Content Rows (De vraag / Onze rol) ---- */
.case-content-row {
  display: flex;
  align-items: flex-start;
  gap: 78px;
  width: 1300px;
}

.case-content-row__body {
  width: 938px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 120px;
}

.case-content-row__body p {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.45px;
  color: var(--green-1200);
}

/* ---- Resultaat Section ---- */
.case-result {
  background: var(--blue-100);
  padding: 120px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.case-result__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 1176px;
}

.case-result__heading-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 458px;
}

.case-result__heading {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 2.875rem; /* 46px */
  line-height: 1.2;
  letter-spacing: -0.92px;
  color: var(--green-1200);
}

.case-result__heading-desc {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.625rem; /* 26px */
  line-height: 1.4;
  color: var(--green-1200);
}

.case-result__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 577px;
}

.case-result__item {
  background: var(--base-100);
  padding: 18px 24px;
}

.case-result__item-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  color: var(--green-1200);
}

/* ---- Gallery ---- */
.case-gallery {
  display: flex;
  gap: 20px;
  width: 100%;
  height: 540px;
  overflow: hidden;
}

.case-gallery__item {
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
}

.case-gallery__item--large {
  width: 820px;
  height: 540px;
}

.case-gallery__item--medium {
  width: 410px;
  height: 540px;
}

.case-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Quote Section ---- */
.case-quote {
  display: flex;
  align-items: flex-start;
  gap: 78px;
  /* Break out of parent's 120px padding to span full section width */
  width: calc(100% + 240px);
  margin-left: -120px;
  padding-left: 120px;
}

.case-quote__attribution {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.case-quote__attribution-text {
  padding: 10px 0;
}

.case-quote__attribution-name {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  color: var(--green-1200);
}

.case-quote__attribution-role {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  color: var(--green-1200);
}

.case-quote__body {
  width: 938px;
  flex-shrink: 0;
  padding-right: 120px;
}

.case-quote__body p {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 1.875rem; /* 30px */
  line-height: 1.25;
  letter-spacing: -0.45px;
  color: var(--green-1200);
}

/* ---- Case page layout ---- */
.case-page .main-wrapper {
  padding-top: 12px;
}

.case-page .case-upper {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
}

.case-page .case-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.case-page .case-hero-with-image {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.case-page .case-body {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: flex-end;
  padding-bottom: 80px;
  background: var(--blue-200);
  overflow: hidden;
  width: 100%;
}

/* ---- CTA on case page ---- */
.case-page .cta {
  width: 100%;
}