/* Noosphere case study — real flattened exports from Figma node 191:641,
   mapped 1:1 by Figma layer name (Noosphere 1/3/4/5/6/7/8, Slide 16:9 - 13).
   No hand-drawn CSS gradients/masks — panels are inserted as images as-is. */

.case {
  padding-top: calc(var(--header-top) * 3);
  padding-bottom: 80px;
}

.case__layout {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.case__title {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 30px;
  text-transform: none;
}

.case__meta {
  opacity: 0.64;
  font-size: 13px;
  margin-top: 4px;
}

.case__lede {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 300;
  text-transform: none;
  color: rgba(255, 255, 255, 0.8);
}

.case__panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case__panel {
  width: 100%;
  display: block;
  border-radius: 0;
}

.case__panel-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.case__panel-row .case__panel {
  flex: 1;
  min-width: 0;
}

/* Desktop (Figma 191:641): two columns — intro text left (~110.9px),
   panels right (~491px, 857px wide), both starting at the same top offset.
   Intro is sticky (courier-studio.com/projects/basny pattern): it stays
   pinned in view while the panels column scrolls past it, instead of
   scrolling away with the rest of the page. */
@media (min-width: 1024px) {
  .case {
    padding-top: var(--hero-text-top);
  }

  .case__layout {
    max-width: 1440px;
    flex-direction: row;
    align-items: flex-start;
    gap: 62px;
    padding: 0 var(--container-padding);
    margin: 0 auto;
  }

  .case__intro {
    width: 318px;
    flex: 0 0 auto;
    position: sticky;
    top: 140px;
  }

  .case__panels {
    width: auto;
    flex: 1 1 auto;
  }
}