/* ==============================
   CASE STUDY PAGE — Teresa Grinberg
   Editorial long-form layout. Desktop mirrors Figma (1440 frame);
   responsive rules live in responsive.css.
============================== */

.case {
  padding-top: 136px;
}

/* ── HERO TITLE BLOCK ── */
.case-hero-head {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 58px;
}
.case-eyebrow {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #000;
  margin-bottom: 10px;
}
.case-title {
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.96px;
  line-height: 1.1;
  color: #000;
  margin-bottom: 42px;
}
.case-subtitle {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000;
}

/* ── IMAGE PRIMITIVES ── */
.case-figure {
  position: relative;
  margin: 0 20px;
  border-radius: 20px;
  overflow: hidden;
  background: #ece9e4; /* graceful empty state before asset loads */
}
.case-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-figure--full { height: 592px; }
.case-figure--living {
  margin: 0 auto;
  max-width: 1112px;
  height: 503px;
}
.case-figure--square { height: 1398px; }
.case-figure--pendant {
  margin: 0 auto;
  max-width: 699px;
  height: 623px;
}
.case-figure--ipad { height: 786px; background: #f6f3ee; }
.case-figure--slide { height: 786px; }
.case-figure--boxes { height: 788px; }
.case-figure--envelope {
  margin: 0 auto;
  max-width: 1075px;
  height: 605px;
}

/* Wordmark overlays (serif, letter-spaced) */
.case-wordmark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Times New Roman", Georgia, serif;
  color: #fff;
  letter-spacing: 0.5em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.case-wordmark--hero {
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 26px;
}
.case-wordmark--living {
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  letter-spacing: 0.3em;
}
.case-wordmark--sm {
  bottom: 28px;
  font-size: 13px;
}
.case-wordmark--sm.left {
  left: 40px;
  transform: none;
  text-align: left;
  letter-spacing: 0.35em;
  line-height: 1.5;
}

/* ── TEXT BLOCKS ── */
.case-text {
  max-width: 1084px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
}
.case-text--lead { max-width: 1081px; }
.case-tags {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #000;
}

/* ── DUO (ring | bracelet) ── */
.case-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 20px;
}
.case-duo .case-cell {
  position: relative;
  height: 694px;
  overflow: hidden;
  background: #ece9e4;
}
.case-duo .case-cell:first-child { border-radius: 20px 0 0 20px; }
.case-duo .case-cell:last-child { border-radius: 0 20px 20px 0; }
.case-duo .case-cell img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ── TRIO (logo constructions, navy) ── */
.case-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
  margin: 0 20px;
}
.case-trio .case-cell {
  position: relative;
  height: 694px;
  border-radius: 20px;
  overflow: hidden;
  background: #0a1a3f; /* navy fallback */
}
.case-trio .case-cell img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ── VERTICAL RHYTHM ── */
.case-block { margin-top: 57px; }
.case-block--tight { margin-top: 19px; }
.case-block--tags { margin-top: 28px; }
.case-foot-gap { margin-bottom: 160px; }

/* ==============================
   CURA CASE — page-specific figures
============================== */
.case-figure--love {
  margin-left: auto;
  margin-right: auto;
  max-width: 1123px;
  height: 655px;
}
.case-video {
  width: 704px;
  max-width: calc(100% - 40px);
  height: 844px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #000;
}
.case-figure--band {
  margin-left: auto;
  margin-right: auto;
  max-width: 1259px;
  height: 524px;
}
.case-figure--pattern {
  margin-left: auto;
  margin-right: auto;
  max-width: 1259px;
  height: 709px;
}
.case-trio--tags {
  max-width: 1259px;
  margin-left: auto;
  margin-right: auto;
  gap: 8px;
}
.case-trio--tags .case-cell {
  height: 624px;
  background: #ece9e4;
}
.case-figure--wide {
  margin-left: auto;
  margin-right: auto;
  max-width: 1081px;
  height: 720px;
}
.case-duo--looks {
  max-width: 1082px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 533fr 537fr;
  gap: 12px;
}
.case-duo--looks .case-cell,
.case-duo--looks .case-cell:first-child,
.case-duo--looks .case-cell:last-child {
  height: 807px;
  border-radius: 20px;
}
.case-duo--events {
  gap: 17px;
}
.case-duo--events .case-cell,
.case-duo--events .case-cell:first-child,
.case-duo--events .case-cell:last-child {
  height: 863px;
  border-radius: 20px;
}

/* ==============================
   LL+DM CASE — page-specific figures
============================== */
.case-text--wide { max-width: 1360px; }
.case-figure--dimensions {
  margin-left: auto;
  margin-right: auto;
  max-width: 1066px;
  height: 715px;
}
.case-figure--bleed {
  margin: 57px 0 0;
  border-radius: 0;
  height: 429px;
}
.case-figure--slide169 { height: 790px; }
.case-figure--deck {
  margin-left: auto;
  margin-right: auto;
  max-width: 1129px;
  height: 635px;
}
.case-figure--endorse {
  margin-left: auto;
  margin-right: auto;
  max-width: 1129px;
  height: 375px;
}
.case-figure--inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1072px;
  height: 603px;
}
.case-duo--bags {
  grid-template-columns: 684fr 710fr;
  gap: 10px;
}
.case-duo--bags .case-cell,
.case-duo--bags .case-cell:first-child,
.case-duo--bags .case-cell:last-child {
  height: 686px;
  border-radius: 20px;
}

/* ==============================
   DECÍ CASE — page-specific figures
============================== */
.case-block--xtight { margin-top: 8px; }
.case-figure--panel {
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
  height: 439px;
}
.case-duo--deci {
  gap: 7px;
}
.case-duo--deci .case-cell,
.case-duo--deci .case-cell:first-child,
.case-duo--deci .case-cell:last-child {
  height: 549px;
  border-radius: 20px;
}
.case-duo--blur {
  gap: 19px;
}
.case-duo--blur .case-cell,
.case-duo--blur .case-cell:first-child,
.case-duo--blur .case-cell:last-child {
  height: 578px;
  border-radius: 20px;
}
.case-caption-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px;
  margin: 22px 20px 0;
}
.case-caption {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
  max-width: 651px;
}
.case-figure--deck1107 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1107px;
  height: 623px;
}
.case-figure--gift {
  margin-left: auto;
  margin-right: auto;
  max-width: 1137px;
  height: 639px;
}
.case-figure--pair {
  margin-left: auto;
  margin-right: auto;
  max-width: 1136px;
  height: 710px;
}

/* ==============================
   CASA IKIGAI CASE — page-specific figures
============================== */
.case-figure--voltar {
  margin-left: auto;
  margin-right: auto;
  max-width: 782px;
  height: 561px;
}
.case-figure--sign {
  margin-left: auto;
  margin-right: auto;
  max-width: 937px;
  height: 527px;
}
.case-figure--board {
  margin-left: auto;
  margin-right: auto;
  max-width: 885px;
  height: 498px;
}
.case-figure--board500 {
  margin-left: auto;
  margin-right: auto;
  max-width: 885px;
  height: 500px;
}
.case-duo--cards {
  max-width: 885px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 436fr 442fr;
  gap: 7px;
}
.case-duo--cards .case-cell,
.case-duo--cards .case-cell:first-child,
.case-duo--cards .case-cell:last-child {
  height: 392px;
  border-radius: 20px;
}
.case-duo--ik {
  gap: 9px;
}
.case-duo--ik .case-cell,
.case-duo--ik .case-cell:first-child,
.case-duo--ik .case-cell:last-child {
  border-radius: 20px;
}
.case-duo--ik.ik-391 .case-cell { height: 391px; }
.case-duo--ik.ik-389 .case-cell { height: 389px; }
.case-duo--ik.ik-780 .case-cell { height: 780px; }
.case-duo--ik.ik-385 .case-cell { height: 385px; }

/* ── NEXT PROJECT footer CTA ── */
.case-next {
  text-align: center;
  margin: 92px 20px;
}
.case-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 235px;
  height: 62px;
  border: 1px solid #000;
  background: #fff;
  font-size: 20px;
  color: #000;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.case-next-btn:hover {
  background: #0014ff;
  border-color: #0014ff;
  color: #fff;
}
.case-next-title {
  font-size: 72px;
  font-weight: 400;
  letter-spacing: -1.44px;
  line-height: 1.1;
  color: #000;
  margin-top: 42px;
}
.case-next-sub {
  font-size: 20px;
  line-height: 1.4;
  color: #000;
  max-width: 460px;
  margin: 10px auto 0;
}
.case-next-tags {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #000;
  margin-top: 20px;
}

/* ==============================
   MOBILE (≤ 767px) — all case pages
   Images keep their natural (design) ratio: height auto.
============================== */
@media (max-width: 767px) {
  .case { padding-top: 96px; }

  .case-hero-head { margin-bottom: 32px; }
  .case-eyebrow { font-size: 13px; margin-bottom: 8px; }
  .case-title {
    font-size: 30px;
    letter-spacing: -0.6px;
    margin-bottom: 18px;
    text-wrap: balance;
  }
  .case-subtitle { font-size: 13px; letter-spacing: 0.02em; }

  .case-figure {
    margin: 0 12px;
    border-radius: 14px;
    height: auto !important;
  }
  .case-figure img { height: auto; }
  .case-figure--bleed { margin: 36px 0 0; border-radius: 0; }

  .case-video {
    width: calc(100% - 24px);
    height: 440px;
    border-radius: 14px;
    font-size: 16px;
  }

  .case-duo,
  .case-trio {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 12px;
    max-width: none;
  }
  .case-duo .case-cell,
  .case-trio .case-cell,
  .case-duo .case-cell:first-child,
  .case-duo .case-cell:last-child {
    height: auto !important;
    border-radius: 14px !important;
  }
  .case-duo .case-cell img,
  .case-trio .case-cell img { height: auto; }

  .case-text {
    font-size: 17px;
    line-height: 1.45;
    padding: 0 16px;
  }
  .case-tags { font-size: 12px; padding: 0 16px; letter-spacing: 0.06em; }

  .case-caption-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 16px 0;
  }
  .case-caption { font-size: 16px; max-width: 100%; }

  .case-wordmark--living { font-size: 20px; letter-spacing: 0.25em; }

  .case-block { margin-top: 36px; }
  .case-block--tight { margin-top: 12px; }
  .case-block--xtight { margin-top: 8px; }
  .case-block--tags { margin-top: 20px; }
  .case-foot-gap { margin-bottom: 80px; }

  .case-next { margin: 64px 16px; }
  .case-next-btn { width: 160px; height: 38px; font-size: 12px; }
  .case-next-title { font-size: 38px; letter-spacing: -0.8px; margin-top: 32px; }
  .case-next-sub { font-size: 15px; }
  .case-next-tags { font-size: 12px; }
}

/* ==============================
   CMS-DRIVEN CASES — natural image ratios
   (the exported crops already match the design heights)
============================== */
.case-figure--auto { height: auto; }
.case-figure--auto img { height: auto; }
.case-figure--bleed-auto { margin: 57px 0 0; border-radius: 0; }

.case-duo--auto .case-cell,
.case-duo--auto .case-cell:first-child,
.case-duo--auto .case-cell:last-child {
  height: auto;
  border-radius: 20px;
}
.case-duo--auto .case-cell img { height: auto; }

.case-trio--auto .case-cell {
  height: auto;
  background: none;
}
.case-trio--auto .case-cell img { height: auto; }

@media (max-width: 767px) {
  .case-figure--bleed-auto { margin: 36px 0 0; border-radius: 0; }
}

/* Real video block (uploaded MP4 or embed).
   Standalone classes — they must NOT inherit .case-video (the grey
   placeholder box), otherwise its fixed height letterboxes the video. */
.case-video--file,
.case-video--embed {
  display: block;
  width: 704px;
  max-width: calc(100% - 40px);
  height: auto;            /* follows the file's own ratio: no bars, no crop */
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  overflow: hidden;
  background: none;
}
.case-video--embed {
  aspect-ratio: 16 / 9;
  width: 1084px;
}
.case-video--embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .case-video--file,
  .case-video--embed {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    height: auto;
    border-radius: 14px;
  }
}

/* Centered blocks with a max width (CMS "centrada" + largura máxima).
   Uses a class + custom property instead of inline margins so the
   mobile side margins below can still win. */
.case-centered {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  /* never touch the screen edges: keep the 12px gutters */
  .case-centered { max-width: calc(100% - 24px); }
}