/* =============================================================
   Baldur.design — case study pages (shared by all case studies)
   Built on the same tokens + 12-column grid as the homepage.
   Sections: hero · content slice · media · image grids · device
   ============================================================= */

/* ---------- Page rhythm ----------
   Each Figma frame becomes a <section>; sections are direct children of
   .main, so the existing --gap-l rhythm separates them. */
.case-study .cs-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* ---------- Hero ---------- */
.cs-hero {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.cs-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--heading);
}

/* Grey stage holding the transparent hero composition (logo + devices). */
.cs-hero__figure {
  width: 100%;
  aspect-ratio: 1320 / 688;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(16px, 3vw, 40px);
  background-color: var(--thumbnail-bg);
  border-radius: var(--radius-standard);
}

.cs-hero__figure img {
  width: 82%;
  max-height: 88%;
  height: auto;
  object-fit: contain;
}

/* Full-bleed hero: the image already is the composed stage (e.g. Stund's
   purple lockup), so it fills the rounded frame edge to edge. */
.cs-hero__figure--full {
  padding: 0;
  background: transparent;
  aspect-ratio: auto;
  place-items: stretch;
}

.cs-hero__figure--full img {
  width: 100%;
  max-height: none;
}

.cs-hero__meta {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  align-items: start;
}

.cs-hero__info {
  grid-column: 1 / 5; /* columns 1–4 */
  display: grid;
  gap: var(--gap-xxs);
  margin: 0;
}

.cs-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-meta-item dt {
  font-size: 1rem; /* 16px eyebrow */
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--heading);
}

.cs-meta-item dd {
  margin: 0;
  font-size: var(--fs-paragraph);
  color: var(--text);
}

.cs-hero__intro {
  grid-column: 6 / -1; /* columns 6–12 */
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  font-size: var(--fs-paragraph);
  line-height: 1.5;
}

.cs-hero__intro p {
  text-wrap: pretty;
}

/* ---------- Content slice ----------
   Mirrors the Figma "Heading + Body Text" component: heading in the left
   third (cols 1–4), body text in the right two-thirds (cols 6–12). */
.slice {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  align-items: start;
}

.slice__heading {
  grid-column: 1 / 5;
  font-size: var(--fs-h2);
  font-weight: var(--weight-semibold);
  line-height: 1.4; /* Heading 2 token */
  letter-spacing: -0.01em;
  color: var(--heading);
  text-wrap: balance;
  /* Trim the half-leading so the cap-height — not the line box — defines the
     top edge, aligning the heading's cap-top with the body's text block.
     Mirrors Figma's text-box trim on the Heading 2 style. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.slice__heading--h3 {
  font-size: var(--fs-h3);
  letter-spacing: 0;
}

.slice__body {
  grid-column: 6 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxs);
  font-size: var(--fs-paragraph);
  line-height: 1.5;
  color: var(--text);
}

.slice__body p {
  text-wrap: pretty;
}

.slice__body strong {
  font-weight: var(--weight-semibold);
}

/* Bullet lists — Figma "Bullet" style (Medium weight). */
.slice__body ul {
  list-style: disc;
  padding-left: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: var(--weight-medium);
}

.slice__body li {
  padding-left: 6px;
}

/* Image-left variant (research findings beside the affinity map). */
.slice--image .slice__media {
  grid-column: 1 / 5;
  align-self: start;
  width: 100%;
  height: auto;
  display: block;
}

.slice--image .slice__body {
  justify-content: center;
}

/* ---------- Imagery ----------
   Images are shown as-is (no frame); placeholders/radius may come later. */
.cs-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Pull a tall image into the 40px (gap-xs) Figma rhythm instead of the
   section's default gap-s, so it reads as part of its surrounding content
   rather than a separate section. Negative block margins shrink the flex
   gap on both sides down to 40px. */
.cs-img--tight {
  margin-block: calc(var(--gap-xs) - var(--gap-s));
}

/* Square screenshot exports (no frame baked into the asset) get the same
   12px rounded corner + 20% black hairline as the design-system image
   containers. Don't add this to assets that already have it baked in. */
.cs-framed {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

/* Media inset to the body column (e.g. the typography specimen). */
.cs-media--inset {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
}

.cs-media--inset .cs-img {
  grid-column: 6 / -1;
}

/* ---------- Image groups ---------- */
/* Two-up: paper sketches + lo-fi wireframes. */
.cs-pair {
  display: grid;
  grid-template-columns: 538fr 617fr;
  gap: clamp(32px, 5vw, 131px);
  align-items: start;
}

/* Two-up: notification mockups (email beside SMS), sized to their ratio. */
.cs-pair--duo {
  grid-template-columns: 781fr 534fr;
  align-items: end;
}

/* Two-up equal: hand sketches and paired hi-fi screens of the same size. */
.cs-pair--even {
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}

/* Two-up uneven: logo lockup beside the narrower type specimen. Both are shown
   at their natural proportions (no stretch) and matched in height; the gap
   flexes so the logo sits flush against the left edge and the type specimen
   flush against the right edge of the container.
   Widths derive from the two assets' ratios (1176×538 logo, 348×540 specimen)
   so that equal display heights leave the remaining ~7% as the gap. */
.cs-pair--brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 24px);
}

.cs-pair--brand img {
  flex: 0 0 auto;
  width: auto;
}

.cs-pair--brand img:first-child {
  width: 71.82%;
}

.cs-pair--brand img:last-child {
  width: 21.18%;
}

/* Three-up: mobile screen sets (mid-fi, hi-fi). */
.cs-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3.5vw, 72px);
  align-items: start;
}

.cs-pair img,
.cs-trio img {
  width: 100%;
  height: auto;
  display: block;
}

/* A trio row with only two items leaves the third column empty, so the pair
   sits left-aligned at the same column width as a full three-up row. */

/* Phone mockups carry their iOS frame (4px stroke, 40px radius, 60% corner
   smoothing) baked into the transparent asset, so they take no .cs-framed. */
.cs-trio--phones {
  align-items: start;
}

/* Inline image held to its natural width and left-aligned (e.g. paper sketch). */
.cs-img--left {
  max-width: 540px;
}

/* ---------- Final result: video walkthroughs ---------- */
.cs-finals {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.cs-final {
  display: flex;
  gap: clamp(40px, 6vw, 120px);
  align-items: center;
}

.cs-final__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.cs-final__title {
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  line-height: 1.1;
  color: var(--heading);
}

.cs-final__text p {
  font-size: var(--fs-paragraph);
  line-height: 1.5;
}

/* The recordings already include their own device frame, so each video is
   shown as-is — no added bezel. */
.cs-video {
  flex: 0 0 auto;
  width: 300px;
  max-width: 70vw;
  height: auto;
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .slice,
  .cs-hero__meta,
  .cs-media--inset {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .slice__heading,
  .slice__body,
  .slice--image .slice__media,
  .cs-hero__info,
  .cs-hero__intro,
  .cs-media--inset .cs-img {
    grid-column: auto;
  }

  .cs-pair,
  .cs-trio {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* .cs-pair--brand is a flex row, so stack it explicitly on mobile. */
  .cs-pair--brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .cs-pair--brand img,
  .cs-pair--brand img:first-child,
  .cs-pair--brand img:last-child {
    width: 100%;
  }

  .cs-final {
    flex-direction: column;
    align-items: flex-start;
  }

  .cs-video {
    align-self: center;
  }
}