/* Case review · September 2026. Keep the shared system, size copy by its column. */
.case-shell :is(section[id], h2[id], h3[id]) {
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.case-shell :is(.case-copy, .case-facts, .case-lead, .xp-copy-card, .bba-copy-card) {
  min-width: 0;
}

.case-shell :is(.case-copy, .xp-copy-card, .bba-copy-card) {
  container-type: inline-size;
}

.case-shell :is(.xp-copy-card, .bba-copy-card) {
  min-height: min-content;
  overflow: visible;
  padding: clamp(28px, 3.5vw, 52px);
  justify-content: center;
}

.case-shell :is(.case-editorial-grid > .case-copy, .case-split > .case-copy) {
  min-height: auto;
}

.case-shell :is(.case-copy, .xp-copy-card, .bba-copy-card) h2 {
  max-width: 20ch;
  font-size: clamp(30px, 10cqw, 48px);
  line-height: 1.08;
  overflow-wrap: break-word;
}

.case-shell :is(.case-copy, .xp-copy-card, .bba-copy-card) p {
  overflow-wrap: break-word;
}

.case-shell :is(.xp-tile, .bba-tile) figcaption {
  color: #fff;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.45;
}

.case-shell :is(.xp-tile, .bba-tile)::after {
  height: 42%;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 80%));
}

@media (min-width: 901px) {
  .xp-bento--context { grid-template-rows: repeat(2, minmax(320px, auto)); }
  .xp-bento--system { grid-template-rows: minmax(440px, auto) 360px; }
  .xp-bento--scale { grid-template-rows: minmax(400px, auto) minmax(300px, auto) 380px; }
  .xp-bento--live {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    grid-template-areas:
      "copy operator operator"
      "desks desks score"
      "trader participant championship";
    grid-template-rows: minmax(440px, auto) 440px 340px;
  }
  .xp-bento--community {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "copy copy"
      "speaker-a speaker-b"
      "awards show"
      "final final";
    grid-template-rows: auto auto 380px auto;
  }
  .xp-bento--community .xp-copy-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 20px 56px;
    align-content: center;
  }
  .xp-bento--community .xp-chapter { grid-column: 1 / -1; margin: 0; }
  .xp-bento--community .xp-copy-card h2 { grid-row: 2 / span 2; margin: 0; max-width: 16ch; }
  .xp-bento--community .xp-copy-card > p:not(.xp-chapter) { grid-column: 2; margin: 0; }
  .xp-bento--community :is(.xp-tile--community-speaker-a, .xp-tile--community-speaker-b) {
    aspect-ratio: 3 / 2;
  }
  .bba-bento { grid-template-rows: repeat(2, minmax(340px, auto)); }
}

.xp-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.xp-documentary {
  min-width: 0;
  margin: 0;
}

.xp-documentary img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.xp-documentary figcaption {
  max-width: 64ch;
  padding: 16px 4px 0;
  color: #bdbdb7;
  font-size: 14px;
  line-height: 1.55;
}

.xp-backstage {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(24px, 2.5vw, 32px);
  border-top: 1px solid var(--line);
}

.xp-backstage > .case-copy {
  max-width: 860px;
  margin-bottom: clamp(24px, 2.5vw, 32px);
}

.xp-backstage-intro span {
  display: block;
  text-wrap: balance;
}

.xp-backstage-pair {
  display: grid;
  /* Source ratios align the full photographs at both edges without cropping. */
  grid-template-columns: minmax(0, .800285fr) minmax(0, .562778fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

/* Film embeds keep the source ratio on phones, not a portrait-shaped player. */
.case-shell--shell .shell-section--impacto {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto;
  align-items: stretch;
}
.case-shell--shell .shell-section--impacto > .case-copy {
  grid-column: 2;
  grid-row: 1;
}
.case-shell--shell .shell-section--impacto > .shell-results {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
.case-shell--shell .shell-section--impacto > .case-image {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: none;
  align-self: center;
  aspect-ratio: auto;
}
.case-shell--shell .shell-section--impacto > .case-image img {
  height: auto;
}
.case-shell--shell .shell-results div { padding: clamp(20px, 2vw, 32px); }
.case-shell--shell .shell-results dd { font-size: clamp(30px, 3.3vw, 48px); }

.case-shell--shell > header .case-hero-media,
.case-shell--vibra > header .case-hero-media,
.case-shell--futuro > header .case-hero-media {
  aspect-ratio: 16 / 9;
}

.case-shell--futuro {
  --editorial-radius: 20px;
}

.case-shell--futuro :is(.case-hero-media, .case-image, .case-video, .case-grid figure) {
  border-radius: var(--editorial-radius);
  clip-path: inset(0 round var(--editorial-radius));
}

.case-image--document img {
  height: auto;
  object-fit: contain;
}

.futuro-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.futuro-support-grid .case-video { aspect-ratio: 4 / 5; }
.futuro-support-grid iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Display references intact: print and interface artwork are not photo crops. */
.vibra-project-status {
  margin: 20px auto 0;
  color: #c7c7c1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  text-wrap: balance;
}

/* Compact editorial rhythm for the Descomplica case. */
.case-shell--nerds .case-section {
  margin-top: clamp(40px, 5vw, 72px);
}

.case-shell--nerds .case-intro {
  margin-block: clamp(40px, 5vw, 72px);
}

.case-shell--nerds :is(.case-editorial-grid > .case-copy, .case-split > .case-copy) {
  padding: clamp(24px, 3vw, 40px);
}

.case-shell--nerds .case-copy h2 {
  font-size: clamp(28px, 8cqw, 42px);
  line-height: 1.1;
  text-wrap: balance;
}

.case-shell--nerds .case-copy p {
  text-wrap: pretty;
}

/* Guaraná: media-led grids preserve every original square and portrait. */
.case-shell--guarana {
  --radius: 20px;
}

.case-shell--guarana :is(.case-section, .next-projects) {
  margin-top: clamp(48px, 6vw, 88px);
}

.case-shell--guarana .case-intro {
  margin-block: clamp(48px, 6vw, 88px);
}

.case-shell--guarana .case-hero-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-shell--guarana .guarana-section-head,
.case-shell--guarana .guarana-process-copy {
  max-width: none;
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius);
  background: #141416;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
  text-align: left;
}

.case-shell--guarana .guarana-section-head {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(16px, 2vw, 24px);
  align-items: center;
}

.case-shell--guarana .case-copy h2 {
  max-width: 18ch;
  margin: 0 0 20px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  text-align: left;
}

.case-shell--guarana .guarana-section-head h2 { margin: 0; }
.case-shell--guarana .case-copy p {
  max-width: 60ch;
  margin-inline: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  text-align: left;
  text-wrap: pretty;
}

.guarana-gallery,
.tiktok-making-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.guarana-gallery figure,
.guarana-portrait {
  min-width: 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #141416;
}

.guarana-gallery img,
.guarana-portrait img { display: block; width: 100%; height: auto; }
.guarana-gallery--identity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guarana-gallery--platform { grid-template-columns: minmax(0, 1.7794fr) minmax(0, .8fr); }
.guarana-gallery--memes,
.guarana-gallery--vertical { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiktok-making-grid { grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 3fr)); align-items: stretch; }
.case-shell--tiktok .guarana-process-copy { display: flex; flex-direction: column; justify-content: center; }
.case-shell--tiktok .guarana-process-copy h2 { font-size: clamp(28px, 8cqw, 40px); }

@media (max-width: 900px) {
  .case-shell--guarana .guarana-section-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .guarana-gallery--memes,
  .guarana-gallery--vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiktok-making-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiktok-making-grid > .guarana-process-copy { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .case-shell--guarana { --radius: 16px; }
  .guarana-gallery--identity,
  .guarana-gallery--platform,
  .guarana-gallery--memes,
  .guarana-gallery--vertical,
  .tiktok-making-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 901px) {
  .case-shell--nerds .nerds-copy-wide {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 16px clamp(32px, 4vw, 56px);
    align-content: center;
  }
  .case-shell--nerds .nerds-copy-wide h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: 18ch;
    margin: 0;
    font-size: clamp(30px, 3vw, 40px);
  }
  .case-shell--nerds .nerds-copy-wide p {
    grid-column: 2;
    max-width: 60ch;
    margin: 0;
  }
}

.case-shell--vibra .vibra-section--aquecimento > .case-image {
  align-self: center;
  aspect-ratio: auto;
}
.case-shell--vibra .vibra-section--aquecimento > .case-image img { height: auto; }

@media (min-width: 901px) and (max-width: 1100px) {
  .case-shell--vale .vale-feature--duo > .vale-media-duo,
  .case-shell--vale .vale-feature--landscape > .vale-media { grid-column: 1 / span 6; }
  .case-shell--vale .vale-feature--duo > .case-copy,
  .case-shell--vale .vale-feature--landscape > .case-copy { grid-column: 7 / -1; }
}

@media (max-width: 900px) {
  .case-shell--shell .shell-section--impacto { grid-template-columns: minmax(0, 1fr); }
  .case-shell--shell .shell-section--impacto > .case-copy,
  .case-shell--shell .shell-section--impacto > .shell-results,
  .case-shell--shell .shell-section--impacto > .case-image { grid-column: 1; grid-row: auto; }
  .case-shell--shell .shell-section--impacto > .case-image { width: min(100%, 560px); }
  .case-shell :is(.xp-copy-card, .bba-copy-card) { min-height: 0; }
  .case-shell .xp-bento--community { grid-template-rows: auto; }
  .case-shell .xp-tile--community-speaker-a,
  .case-shell .xp-tile--community-speaker-b,
  .case-shell .xp-tile--live-trader,
  .case-shell .xp-tile--live-participant { min-height: 0; aspect-ratio: 3 / 2; }
  .futuro-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .case-shell :is(.xp-copy-card, .bba-copy-card) { padding: 30px 24px; }
  .case-shell :is(.case-copy, .xp-copy-card, .bba-copy-card) p { max-width: none; }
  .xp-photo-pair, .xp-backstage-pair { grid-template-columns: minmax(0, 1fr); }
  .xp-documentary img { border-radius: 16px; }
  .futuro-support-grid { grid-template-columns: minmax(0, 1fr); }
  .case-shell--futuro { --editorial-radius: 16px; }
}