/* Case page blocks — 1600 px content inside a 1930 px desktop frame.
   Every size is expressed in --u (1/1930 of the section width), so a block
   renders identically on the site, in the editor canvas and in thumbnails. */

.cb-page {
  --cb-ink: #111111;
  --cb-accent: #FF9271;
  --cb-slot: #F3F3F3;
  --cb-pill: #F9F8F6;
  --cb-line: #DFDCD6;
  background: #ffffff;
  color: var(--cb-ink);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cb-page *,
.cb-page *::before,
.cb-page *::after {
  box-sizing: border-box;
}

.cb-sec {
  position: relative;
  container-type: inline-size;
  background: #ffffff;
}

.cb-in {
  --u: calc(100cqw / 1930);
  position: relative;
}

.cb-page h1,
.cb-page h2,
.cb-page h3,
.cb-page p {
  margin: 0;
}

.cb-multiline {
  white-space: pre-line;
}

/* Shield blocks from page-level element styles (site h1 width, list dashes). */
.cb-page h1 {
  max-width: none;
}

.cb-page li {
  overflow-wrap: normal;
}

.cb-page li::before {
  content: none;
}

/* Title — "Naming" 155:3405 */
.cb-title .cb-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(30 * var(--u));
  padding: calc(100 * var(--u)) calc(165 * var(--u));
}

.cb-back {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin-block: calc(15 * var(--u));
  padding: calc(15 * var(--u)) calc(20 * var(--u));
  background: var(--cb-pill);
  border-radius: 999px;
  color: var(--cb-ink);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.cb-back svg {
  width: calc(9 * var(--u));
  height: calc(8 * var(--u));
  flex: none;
}

.cb-heading-1 {
  font-size: calc(132 * var(--u));
  font-weight: 700;
  line-height: calc(108.24 * var(--u));
  letter-spacing: calc(-2 * var(--u));
}

.cb-heading-1 > span {
  display: block;
}

.cb-heading-1 .cb-gradient {
  width: max-content;
  max-width: 100%;
  color: transparent;
  background: linear-gradient(137deg, #D0ACC8 1%, #D0ACC8 18%, #FF916C 32%, #FFD1B9 52%, #FFD1B9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  /* Line height is tighter than the font, so extend the painted box to keep descenders (y, g, p). */
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}

.cb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  margin: 0;
  padding: calc(15 * var(--u)) 0;
  list-style: none;
}

.cb-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: var(--cb-pill);
  border-radius: 50px;
  color: var(--cb-ink);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.cb-tag.is-dark {
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
}

/* Overview — "The Challenge" 27:2569 and text — "Final" 27:2163 */
.cb-overview .cb-in {
  padding: calc(100 * var(--u)) calc(165 * var(--u));
}

.cb-text .cb-in {
  padding: calc(188 * var(--u)) calc(165 * var(--u));
}

.cb-two {
  display: flex;
  align-items: flex-start;
  gap: calc(56 * var(--u));
}

.cb-kicker {
  flex: none;
  width: calc(182 * var(--u));
  padding-top: calc(10 * var(--u));
  color: var(--cb-accent);
  font-size: calc(13 * var(--u));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.cb-facts {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: calc(56 * var(--u));
  min-width: 0;
  font-size: calc(71 * var(--u));
  font-weight: 800;
  line-height: calc(76 * var(--u));
}

.cb-facts .is-accent {
  color: var(--cb-accent);
}

.cb-statement {
  flex: 1 0 0;
  min-width: 0;
  font-size: calc(34 * var(--u));
  font-weight: 700;
  line-height: calc(36 * var(--u));
}

.cb-text .cb-in > .cb-statement {
  width: calc(842 * var(--u));
  max-width: 100%;
}

.cb-text[data-align="center"] .cb-in > .cb-statement { margin-inline: auto; }
.cb-text[data-align="right"] .cb-in > .cb-statement { margin-left: auto; }

/* Media grids — "Images + text" / "Image + text" */
.cb-grid .cb-in {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(55 * var(--u)) calc(165 * var(--u));
}

/* Hero image is edge-to-edge at the top of its frame. Other grid templates keep the Figma inset. */
.cb-grid[data-preset="hero"] .cb-in {
  padding-top: 0;
}

.cb-grid + .cb-grid .cb-in,
.cb-grid + .ed-gap + .cb-grid .cb-in {
  padding-top: calc(110 * var(--u));
}

.cb-row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: calc(10 * var(--u));
  height: calc(var(--h) * var(--u));
}

/* Uploaded media keeps its fixed 1600px source width and natural height instead of being cropped into a preset row. */
.cb-row.is-fluid {
  height: auto;
}

.cb-row.is-fluid > .cb-media {
  height: auto;
  aspect-ratio: auto;
}

.cb-row.is-fluid > .cb-media > img,
.cb-row.is-fluid > .cb-media > video,
.cb-row.is-fluid > .cb-media > object {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.cb-row > * {
  min-width: 0;
}

.cb-media,
.cb-card {
  position: relative;
  overflow: hidden;
  background: var(--cb-slot);
  border-radius: calc(26 * var(--u));
}

.cb-media > img,
.cb-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image + text uses the same two equal columns as two images, so every slot in a block is one size.
   Text keeps its Figma width and sits on the outer edge of its column. */
.cb-row.is-split {
  align-items: center;
}

.cb-row.is-split:not(.is-fluid) > .cb-media {
  width: 100%;
  height: 100%;
}

.cb-row.is-fluid.is-split > .cb-media {
  width: 100%;
  height: 100%;
}

/* The two-column Figma slots are 795 × 840 in the 1930 px frame. */
.cb-row:not(.is-single) {
  height: calc(var(--h) * var(--u));
}

.cb-row:not(.is-single) > :is(.cb-media, .cb-card) {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.cb-row:not(.is-single) > .cb-media > :is(img, video, object) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cb-row.is-split > .cb-media + .cb-copy {
  justify-self: end;
  margin-left: 0;
  margin-right: calc(100 * var(--u));
}

.cb-copy {
  display: flex;
  width: calc(530 * var(--u));
  height: calc(260 * var(--u));
  flex-direction: column;
  justify-content: center;
  gap: calc(26 * var(--u));
}

.cb-row.is-split > .cb-copy:first-child {
  justify-self: start;
  margin-left: calc(100 * var(--u));
}

.cb-h {
  font-size: calc(34 * var(--u));
  font-weight: 700;
  line-height: calc(36 * var(--u));
}

.cb-body {
  font-size: calc(18 * var(--u));
  font-weight: 550;
  line-height: calc(23.13 * var(--u));
}

.cb-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(16 * var(--u));
  padding: calc(60 * var(--u));
}

.cb-icon {
  position: absolute;
  top: calc(60 * var(--u));
  left: calc(60 * var(--u));
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  overflow: hidden;
  border-radius: calc(27 * var(--u));
}

.cb-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cb-sec[data-align="center"] :is(.cb-copy, .cb-card, .cb-two),
.cb-sec[data-align="center"] .cb-statement { text-align: center; }
.cb-sec[data-align="right"] :is(.cb-copy, .cb-card, .cb-two),
.cb-sec[data-align="right"] .cb-statement { text-align: right; }
.cb-sec[data-align="center"] .cb-icon { left: 50%; transform: translateX(-50%); }
.cb-sec[data-align="right"] .cb-icon { right: calc(60 * var(--u)); left: auto; }

.cb-page:not(.is-edit) [data-key]:empty,
.cb-page:not(.is-edit) .cb-tags:empty {
  display: none;
}

/* Floating project links */
.cb-links {
  position: fixed;
  z-index: 40;
  right: clamp(16px, 2vw, 40px);
  bottom: clamp(16px, 2vw, 40px);
  display: grid;
  gap: 10px;
}

.cb-link {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 999px;
  color: #111111;
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
}

.cb-link:hover {
  background: #111111;
  color: #ffffff;
}

.cb-link svg {
  width: 21px;
  height: 21px;
}

/* Public case-to-case navigation, shown only after the cover. */
.cb-case-side-nav {
  position: fixed;
  z-index: 35;
  inset: 50% 0 auto;
  height: 52px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.cb-case-side-nav.is-visible {
  opacity: 1;
  visibility: visible;
}

.cb-case-side-link {
  position: absolute;
  top: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #dfdcd6;
  border-radius: 26px;
  background: rgba(255, 255, 255, .9);
  color: #111;
  pointer-events: auto;
  text-decoration: none;
}

.cb-case-side-link.is-left { left: clamp(12px, 2vw, 40px); }
.cb-case-side-link.is-right { right: clamp(12px, 2vw, 40px); }
.cb-case-side-link:hover,
.cb-case-bottom-link:hover,
.cb-case-top:hover { background: #111; color: #fff; }

.cb-case-side-link svg,
.cb-case-bottom-link svg,
.cb-case-top svg { width: 20px; height: 20px; flex: none; }

.cb-case-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 48px clamp(16px, 8.55%, 165px) 80px clamp(20px, 2.6vw, 40px);
  font-size: 14px;
  font-weight: 700;
}

.cb-case-bottom-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cb-case-bottom-link,
.cb-case-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid #dfdcd6;
  border-radius: 26px;
  background: #fff;
  color: #111;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.cb-case-side-link:focus-visible,
.cb-case-bottom-link:focus-visible,
.cb-case-top:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* The 1930px frame scales uniformly through --u; compositions do not reflow. */

@media (max-width: 640px) {
  .cb-links { gap: 8px; }
  .cb-link { width: 46px; height: 46px; }
  .cb-case-side-nav { height: 42px; }
  .cb-case-side-link { width: 42px; height: 42px; border-radius: 26px; }
  .cb-case-bottom-nav { align-items: stretch; flex-direction: column; margin: 32px 16px 48px; }
  .cb-case-bottom-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-case-side-nav { transition: none; }
}

.cb-page:not(.is-edit) .cb-icon.is-empty {
  display: none;
}