/* case-study.css — single case_study (Figma "Case Study Template").
   Centered hero (heading + meta + lead + YouTube video). Body sections reuse the
   shared article block styles (blog-single.css). */

.case-study__hero { padding-top: var(--space-m); }
.case-study__hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
.case-study__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.case-study__title { margin: 0; color: var(--color-grey-900); }
.case-study__title em, .case-study__title i { font-style: italic; }
.case-study__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2x);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  font-weight: 500;
  color: var(--color-grey-700, #4e4e4e);
}
.case-study__sep { color: var(--color-grey-400); }
.case-study__lead {
  margin: 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
}

/* ---------- Hero video ---------- */
.case-study__media { width: 100%; }
.cs-video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-grey-200);
}
.cs-video--facade { cursor: pointer; }
.cs-video__img,
.cs-video__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.cs-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cs-video__play svg {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 4px 16px rgba(13, 13, 13, .3));
  transition: transform .2s ease;
}
.cs-video--facade:hover .cs-video__img { transform: scale(1.02); transition: transform .4s ease; }
.cs-video--facade:hover .cs-video__play svg { transform: scale(1.06); }
.cs-video--facade:focus-visible { outline: 2px solid var(--color-grey-900); outline-offset: 3px; }

/* ---------- Content (dedicated case-study sections) ---------- */
.case-study__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5xl);
  padding-block: var(--space-5xl);
}
.cs-section { margin: 0; }

/* Media + text split */
.cs-split__inner {
  display: flex;
  gap: var(--space-3xl);
  align-items: center;
}
.cs-split--right .cs-split__inner { flex-direction: row-reverse; }
.cs-split__media { flex: 1 1 0; min-width: 0; border-radius: var(--radius-s); }
/* Cover (no explicit ratio) keeps the legacy 1:1 square; explicit ratios via .smedia--ratio. */
.cs-split__media.smedia--cover { aspect-ratio: 1 / 1; }
/* Media fill / ratio / controls: assets/css/media-embed.css (.smedia). */
.cs-split__content {
  flex: 1 1 0;
  min-width: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.cs-split__eyebrow {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-grey-700, #4e4e4e);
}
.cs-split__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-l);
  line-height: var(--lh-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.cs-split__heading em, .cs-split__heading i { font-style: italic; }
.cs-split__body { font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.cs-split__body p { margin: 0 0 var(--space-l); }
.cs-split__body p:last-child { margin-bottom: 0; }
/* Bulleted lists use the Figma circled arrow-right marker (icon/arrow/right, 24px). */
.cs-split__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}
.cs-split__body ul li { position: relative; padding-left: 34px; }
.cs-split__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-circle) center / contain no-repeat;
  mask: var(--icon-arrow-circle) center / contain no-repeat;
}
.cs-split__btn { align-self: flex-start; }

/* Mosaic */
.cs-mosaic__head {
  max-width: 900px;
  margin-bottom: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  /* position + text alignment come from the .u-align-* utility (ACF "align" field) */
}
.cs-mosaic__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-l);
  line-height: var(--lh-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.cs-mosaic__title em, .cs-mosaic__title i { font-style: italic; }
.cs-mosaic__desc { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
/* Adaptive mosaic: single row, widths from flex-grow weights (wide = 2, rest = 1).
   Container aspect-ratio gives all cells one equal, responsive height. */
.cs-mosaic__grid {
  display: flex;
  gap: var(--space-l);
  align-items: stretch;
  aspect-ratio: 1300 / 450;
}
.cs-mosaic__grid[data-count="1"] { aspect-ratio: 16 / 9; }
.cs-mosaic__grid[data-count="2"] { aspect-ratio: 1300 / 560; }
.cs-mosaic__cell {
  flex: 1 1 0;
  flex-grow: var(--cs-grow, 1); /* column width weight, set inline per image */
  min-width: 0;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--color-grey-200);
}
.cs-mosaic__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Steps carousel */
.cs-steps__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
  margin-bottom: var(--space-l);
}
.cs-steps__text { max-width: 800px; display: flex; flex-direction: column; gap: var(--space-2x); }
.cs-steps__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-l);
  line-height: var(--lh-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.cs-steps__desc { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.cs-steps__nav { display: flex; gap: var(--space-xs); flex: 0 0 auto; }
.cs-steps__nav [data-carousel-prev] svg { transform: rotate(180deg); }
.cs-steps__track {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.cs-steps__track::-webkit-scrollbar { display: none; }
.cs-step {
  flex: 0 0 300px;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.cs-step__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--color-grey-200);
}
.cs-step__img { width: 100%; height: 100%; object-fit: cover; }
/* Video/YouTube steps reuse the split-media widget; its --media-ratio must win
   over this box's fixed 4:5 regardless of stylesheet order. */
.cs-step__media.smedia--ratio { aspect-ratio: var(--media-ratio); }
.cs-step__eyebrow {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-grey-900);
}
.cs-step__body { display: flex; flex-direction: column; }
.cs-step__cap { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; color: var(--color-grey-900); }
.cs-step__sub { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-900); }
/* Button pinned to the card bottom (Figma MediaCard: content / button split). */
.cs-step__btn { margin-top: auto; width: 100%; justify-content: center; }

/* Reels ("Perspektywa") — centered head, reuses .reel cards (blog-single.css) */
.cs-reels__head {
  max-width: 800px;
  margin: 0 auto var(--space-l);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
}
.cs-reels__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-l);
  line-height: var(--lh-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.cs-reels__title em, .cs-reels__title i { font-style: italic; }
.cs-reels__sub { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.cs-reels__track {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cs-reels__track::-webkit-scrollbar { display: none; }
/* Tile size: --reel-scale (0..1) shrinks each tile's width; vertical ratio unchanged. */
.cs-reels__track .reel { flex-basis: calc(253px * var(--reel-scale, 1)); }
/* Slider arrows (driven by treatment.js [data-carousel]) — flank the track,
   vertically centered, straddling the edges like the other sliders. */
.cs-reels__slider-wrap { position: relative; }
.cs-reels__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 4px 16px rgba(13, 13, 13, .2);
}
.cs-reels__prev { left: calc(-1 * var(--space-s)); }
.cs-reels__next { right: calc(-1 * var(--space-s)); }
@media (max-width: 600px) { .cs-reels__arrow { display: none; } }

/* Single media */
.cs-media__head { display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-l); max-width: 800px; }
.cs-media__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-l);
  line-height: var(--lh-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.cs-media__title em, .cs-media__title i { font-style: italic; }
.cs-media__desc { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.cs-media__frame { border-radius: var(--radius-s); overflow: hidden; background: var(--color-grey-200); }
.cs-media__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* CTA */
.cs-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-width: 688px;
  /* position + text alignment come from the .u-align-* utility (ACF "align" field) */
}
.cs-cta__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-l);
  line-height: var(--lh-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.cs-cta__title em, .cs-cta__title i { font-style: italic; }
.cs-cta__sub { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }

/* ---------- Responsive sections ---------- */
@media (max-width: 1024px) {
  .case-study__content { gap: var(--space-3xl); }
  .cs-split__inner { gap: var(--space-xl); }
  /* Mosaic stacks (matches Figma Grid-M): each image full width, equal aspect. */
  .cs-mosaic__grid, .cs-mosaic__grid[data-count="1"], .cs-mosaic__grid[data-count="2"] {
    flex-direction: column;
    aspect-ratio: auto;
  }
  .cs-mosaic__cell { flex: 0 0 auto; flex-grow: 0; }
  .cs-mosaic__img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  .cs-split__inner, .cs-split--right .cs-split__inner { flex-direction: column; align-items: stretch; }
  /* Column direction: flex-basis 0 would mean HEIGHT 0 (media has only
     absolutely-positioned children) — size from full width + aspect-ratio. */
  .cs-split__media { flex: 0 0 auto; width: 100%; }
  .cs-split__content { max-width: none; }
  .cs-steps__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .cs-split__heading, .cs-mosaic__title, .cs-steps__heading, .cs-reels__title, .cs-media__title, .cs-cta__title {
    font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m);
  }
  .cs-step { flex-basis: 78%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .case-study__hero { padding-top: var(--space-2x); }
  .case-study__title { font-size: var(--fs-h-l); line-height: var(--lh-h-l); letter-spacing: var(--ls-h-l); }
  .case-study__hero-inner { gap: var(--space-xl); }
  .cs-video__play svg { width: 64px; height: 64px; }
  .case-study__content { padding-block: var(--space-2xl); }
}