/* ==========================================================================
   Case detail template — shared by every nested Succesverhalen case page
   (this file has no per-case content, so future cases just reuse it).
   ========================================================================== */

.case-hero {
  padding-bottom: 96px;
}

.case-hero .container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 48px;
}

.case-hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

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

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

.case-hero__label span {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-lavender);
}

/* Masked with the sitewide brand mark (assets/icons/beeldmerk-digitaal.svg)
   scaled way up, same technique as the Figma source — an "X" cutout
   showing the photo through, rather than a plain rectangle. */
.case-hero__media {
  width: clamp(200px, 28vw, 420px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  mask-image: url(/assets/icons/beeldmerk-digitaal.svg);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(/assets/icons/beeldmerk-digitaal.svg);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

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

@media (max-width: 900px) {
  .case-hero .container {
    grid-template-columns: 1fr;
  }

  .case-hero__media {
    display: none;
  }

  /* .page-back's sitewide mobile rule (styles.css) stacks it 72px above
     whatever .page-hero__heading wraps — fine on beloftes/waarden, where
     that's just the title, but here the label sits above the title too
     and the button would land on top of it. Handing the positioning
     context to .case-hero__content instead (which starts at the label's
     own top) lets that same -72px/16px-gap rule clear the label as well,
     with no change to the rule's actual values. */
  .case-hero__content {
    position: relative;
  }

  .case-hero .page-hero__heading {
    position: static;
  }
}

/* ---- Body ---- */

.case-body {
  padding-bottom: 96px;
}

.case-body__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 984px;
}

.case-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
}

.case-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Matches the Figma source's one emphasized paragraph (the case's opening
   question) — every other body paragraph uses .about-section__text's own
   default (Light) weight. */
.case-body__text--emphasized {
  font-weight: 600;
  font-size: 24px;
}

.case-list {
  list-style: disc;
  padding-left: 20px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--color-text-p);
}

.case-list li + li {
  margin-top: 8px;
}

.case-divider {
  border: none;
  border-top: 1px solid var(--color-bg-lavender-20);
  margin: 0;
}

/* The rounded/clipped photo frame and its (optional) caption are separate
   elements — a figcaption inside the same overflow:hidden box as the
   photo would get visually clipped by its rounded corners. */
.case-image {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-image__frame {
  border-radius: 16px;
  overflow: hidden;
}

.case-image__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.case-image figcaption {
  font-size: 16px;
  font-style: italic;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.6);
}

/* Quote text uses a serif italic stack (no Source Serif Pro font file is
   hosted locally — every other typeface on the site is self-hosted, so a
   system serif stands in rather than adding an external font request). */
.case-quote {
  position: relative;
  padding-left: 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case-quote::before {
  content: '\201C';
  position: absolute;
  left: 52px;
  top: -56px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 200px;
  line-height: 1;
  color: var(--color-bg-lavender-20);
  pointer-events: none;
}

.case-quote__text {
  position: relative;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-lavender);
}

.case-quote__meta {
  position: relative;
  display: flex;
  gap: 12px;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.6);
}

.case-quote__meta strong {
  font-weight: 600;
  color: inherit;
}

/* Closing editorial note (e.g. "reviewed by X") — smaller and muted,
   distinct from the regular body copy. */
.case-credit {
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.case-tag {
  padding: 8px 20px;
  border-radius: 50px;
  background: var(--color-bg-lavender-20);
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--color-text-p);
}

/* ---- Meer succesverhalen ---- */

.case-more {
  padding-bottom: 96px;
}

.case-more__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 984px;
}

.case-more__title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-lime);
}

/* Same values as .cases-grid (styles.css), just under its own class —
   .cases-grid also carries a global padding-left rule that assumes it
   sits directly on a .container section (true on the homepage), which
   would double up with .case-more__inner's own margin-left here. */
.case-more__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 32px;
}

@media (max-width: 900px) {
  .case-columns {
    grid-template-columns: 1fr;
  }

  .case-more__grid {
    grid-template-columns: 1fr;
  }

  .case-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .case-card__image {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .case-hero {
    padding-bottom: 56px;
  }

  .case-body {
    padding-bottom: 56px;
  }

  .case-more {
    padding-bottom: 56px;
  }

  .case-quote {
    padding-left: 40px;
  }

  .case-quote::before {
    left: 28px;
    top: -40px;
    font-size: 140px;
  }
}