/* ==========================================================================
   Themas — detail page (Verandering begrijpelijk maken)
   ========================================================================== */

/* ---- Page wrapper ---- */
.themas-page .main-wrapper {
  padding-top: 12px;
}

.themas-page .themas-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--blue-200);
  width: 100%;
  overflow: hidden;
}

.themas-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  padding: 56px 0 120px;
  width: 100%;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.themas-hero {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 120px;
  width: 1420px;
  align-items: flex-start;
  box-sizing: border-box;
  color: var(--green-1200);
}

.themas-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.themas-breadcrumb__icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

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

.themas-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;
}

.themas-hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.themas-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;
}

.themas-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;
}

/* ==========================================================================
   Photo strip — three captioned photos, justify-center, overflows + clipped
   ========================================================================== */

.themas-photos-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.themas-photos {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-shrink: 0;
}

.themas-photo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.themas-photo--1 .themas-photo__image { width: 571px; }
.themas-photo--2 .themas-photo__image { width: 848px; }
.themas-photo--3 .themas-photo__image { width: 679px; }

.themas-photo__image {
  height: 573px;
  border-radius: 3px;
  overflow: hidden;
}

.themas-photo__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.themas-photo__caption {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--green-1200);
  white-space: nowrap;
}

.themas-photo__caption-strong {
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Bracket label primitive (used by intro, cases, insights)
   ========================================================================== */

.themas-bracket {
  width: 11px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.themas-bracket--open {
  justify-content: flex-end;
  padding-top: 10px;
}

.themas-bracket--close {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10px;
}

.themas-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;
}

.themas-bracket--close .themas-bracket__char {
  transform: rotate(180deg);
}

/* Variant: blue-400 (used by Cases label) */
.themas-bracket--accent-blue400 .themas-bracket__char {
  color: var(--blue-400);
}

/* ==========================================================================
   Intro section (bracket label on left, body on right)
   ========================================================================== */

.themas-intro {
  display: flex;
  gap: 78px;
  align-items: flex-start;
  padding-left: 120px;
  width: 1420px;
  box-sizing: border-box;
}

.themas-intro__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex: 1 0 0;
}

.themas-intro__label-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  letter-spacing: -0.09px;
  color: var(--green-1200);
  padding: 10px 0;
}

.themas-intro__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 938px;
  padding-right: 120px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.themas-intro__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);
}

.themas-intro__body p + p {
  margin-top: 1.25em;
}

/* ==========================================================================
   Cases + Insights wrapper — no gap between cases and insights
   ========================================================================== */

.themas-cases-insights {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ==========================================================================
   Cases section
   ========================================================================== */

.themas-cases {
  background: var(--blue-200);
  width: 1420px;
  height: 955px;
  padding: 80px 0 0 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 46px;
  align-items: flex-start;
  overflow: hidden;
}

.themas-cases__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
}

.themas-cases__label-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  letter-spacing: -0.09px;
  color: var(--green-1200);
  padding: 10px 0;
  white-space: nowrap;
}

.themas-cases__list {
  display: flex;
  flex-direction: column;
  width: 698px;
}

.themas-case__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
}

/* Image is mobile-only — hidden on desktop */
.themas-case__image {
  display: none;
}

.themas-case:first-child .themas-case__link {
  padding-top: 0;
}

.themas-case:last-child .themas-case__link {
  padding-bottom: 0;
}

.themas-case__chip {
  display: inline-flex;
  align-items: center;
  gap: 6.909px;
  background: var(--base-200);
  padding: 0 6.909px;
  height: 38px;
  border-radius: 2px;
  align-self: flex-start;
  overflow: hidden;
}

.themas-case__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 99px;
  overflow: hidden;
}

.themas-case__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.themas-case__logo--svg {
  border-radius: 0;
}

.themas-case__logo--svg img {
  object-fit: contain;
}

.themas-case__name {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.25rem; /* 20px */
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: var(--green-1200);
  white-space: nowrap;
}

.themas-case__chip--vattenfall .themas-case__name {
  color: var(--base-1200);
}

.themas-case__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 2.375rem; /* 38px */
  line-height: 1.2;
  letter-spacing: -0.76px;
  color: var(--green-1200);
}

/* ==========================================================================
   Insights section
   ========================================================================== */

.themas-insights {
  background: var(--blue-100);
  width: 100%;
  padding: 120px 0;
  display: flex;
  justify-content: center;
}

.themas-insights__inner {
  display: flex;
  gap: 77px;
  align-items: flex-start;
  width: 1420px;
  padding-left: 120px;
  padding-right: 121px; /* leaves 819px for cards after label + gap (matches Figma) */
  box-sizing: border-box;
}

.themas-insights__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 283px;
  flex-shrink: 0;
}

.themas-insights__label-text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  letter-spacing: -0.09px;
  color: var(--green-1200);
  padding: 10px 0;
  white-space: nowrap;
}

.themas-insights__cards {
  display: flex;
  gap: 22px;
  align-items: stretch;
  flex: 1 0 0;
  min-width: 0;
}

.themas-insight {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--base-100);
  border-radius: 3px;
  overflow: hidden;
}

.themas-insight__image {
  height: 277px;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.themas-insight__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Zelfde inzoom-bij-hover als .insight-card; deze kaart is dezelfde kaart,
   alleen op de themapagina. Zie insights.css voor de afweging. */
@media (hover: hover) {
  .themas-insight:hover .themas-insight__image img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .themas-insight__image img {
    transition: none;
  }

  .themas-insight:hover .themas-insight__image img {
    transform: none;
  }
}

.themas-insight__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.5rem; /* 24px */
  line-height: 1.3;
  letter-spacing: -0.72px;
  color: var(--green-1200);
}

.themas-insight__date {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.1;
  letter-spacing: 0.3px;
  color: var(--green-1200);
  margin-top: auto;
}

/* ==========================================================================
   CTA on themas page
   ========================================================================== */

.themas-page .cta {
  width: 1420px;
  box-sizing: border-box;
}