/* =========================================================================
   Code Snippets — /Code-Snippets
   Figma: CW / 1898:1540 (1600 × 13047)

   Fifteen cards, all 1440 × 760, all drawn at one width, so the unit is the
   card rather than the viewport — the same device the UI Video Snippets page
   uses, and for the same reason:

       --u: calc(1cqw / 14.4)

   1cqw is a hundredth of the card, so at 1440 the unit is 1px and
   `calc(48 * var(--u))` is the frame's 48. Below 1440 the whole block scales
   as one drawing instead of each value drifting against the others.

   The five treatments differ only in colour and in what the panel is framed
   in; the geometry is identical in all fifteen, so it is written once and the
   .code--gN classes carry nothing but a palette.
   ========================================================================= */

.page-code {
  background: var(--code-page);
  color: var(--code-ink);

  --code-page:  #272727;   /* the artboard the cards sit on */
  --code-dark:  #111511;   /* treatment 1 — the near-black card */
  --code-blue:  #1e3fdf;   /* treatment 2 — the copy half */
  --code-ink:   #02030b;   /* Text/primary, on the light treatments */
  --code-fill:  #0541e9;   /* the filled button where the ground is light */
}

/* ------------------------------------------------------------- the page -- */
/* The frame gives the cards an 80 gutter and 100 between them, and a little
   more where a group starts. */
.codes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding: 160px var(--gutter) 200px;
}

.codes__title,
.codes__num {
  width: min(1440px, 100%);
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(30px, 3.334vw, 48px);
  line-height: 1.084;
  color: var(--white);
  text-box: trim-both cap alphabetic;
}

/* Same arrangement as the video page: the number belongs to the card under
   it, so the flex gap gives it 100 above and the -30 takes it to 70 below.
   --group is the first of each three and carries the air between treatments;
   1a follows the title and needs none of it. */
.codes__num               { margin: 0 0 -30px; }
.codes__num--group        { margin-top: 200px; }
.codes__num:first-of-type { margin-top: 40px; }

/* ------------------------------------------------------------- the card -- */
/* A container cannot query itself, so the card's own box is set without --u
   and the unit is declared here only for its descendants. */
.code {
  container-type: inline-size;
  --u: calc(1cqw / 14.4);

  width: min(1440px, 100%);
  display: flex;
  align-items: stretch;
  aspect-ratio: 1440 / 760;
  overflow: clip;
  font-family: var(--sans);
}

.code__copy {
  flex: 0 0 50%;
  min-width: 0;
  position: relative;
  background: var(--half);
}

/* Held at half the card rather than at the width of its own column, so the
   line breaks are the frame's wherever the card is measured. */
.code__copy-in {
  position: absolute;
  left: calc(40 * var(--u));
  top:  calc(40 * var(--u));
  width: calc(640 * var(--u));
  max-width: calc(50cqw - 80 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

.code__eyebrow {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--u));
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(12 * var(--u));
  line-height: calc(18 * var(--u));
}

.code__eyebrow span { text-box: trim-both cap alphabetic; }

.code__eyebrow img {
  width:  calc(10 * var(--u));
  height: calc(10 * var(--u));
  flex: none;
  /* The export is drawn in the ink colour; the dark treatments need it the
     other way up rather than a second file. */
  filter: var(--diamond, none);
}

.code__h {
  width: calc(600 * var(--u));
  max-width: 100%;
  font-weight: 600;
  font-size: calc(48 * var(--u));
  line-height: calc(52 * var(--u));
  text-box: trim-both cap alphabetic;
}

.code__p {
  width: calc(500 * var(--u));
  max-width: 100%;
  font-weight: 400;
  font-size: calc(20 * var(--u));
  line-height: calc(28 * var(--u));
  text-box: trim-both cap alphabetic;
}

/* ---------------------------------------------------------- the buttons -- */
.code__btns {
  display: flex;
  gap: calc(20 * var(--u));
}

/* The frame draws the stroke as a stroke, which does not grow the box it is
   on; a CSS border would. An inset shadow keeps the button on its 44. */
.cbtn {
  height: calc(44 * var(--u));
  padding: 0 calc(24 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(2 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  letter-spacing: -.02em;
  white-space: nowrap;
  text-decoration: none;
}

.cbtn--fill {
  background: var(--fill-bg);
  color: var(--fill-ink);
  font-weight: 600;
}

.cbtn--line {
  color: inherit;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

/* ------------------------------------------------------------ the panel -- */
/* Exactly the half it fills, so the image is placed rather than fitted. */
.code__panel {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: clip;
  background: var(--panel-bg, transparent);
}

.code__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------ the five palettes -- */
/* 1 — one near-black ground, and the panel simply carries on across it. */
.code--g1 {
  --half: var(--code-dark);
  --panel-bg: var(--code-dark);
  --fill-bg: var(--white);
  --fill-ink: var(--code-ink);
  --diamond: invert(1);
  color: var(--white);
}

/* 2 — the copy takes the brand blue, the panel stays black. */
.code--g2 {
  --half: var(--code-blue);
  --panel-bg: #000;
  --fill-bg: var(--white);
  --fill-ink: var(--code-ink);
  --diamond: invert(1);
  color: var(--white);
}

/* 3 to 5 — the copy is on white and the ink turns over with it. What changes
   between them is inside the panel image, not here: black behind a dark
   window, then the mesh behind the same window, then the window itself light. */
.code--g3,
.code--g4,
.code--g5 {
  --half: var(--white);
  --fill-bg: var(--code-fill);
  --fill-ink: var(--white);
  color: var(--code-ink);
}

.code--g3 { --panel-bg: #000; }
.code--g4,
.code--g5 { --panel-bg: #dfe4ef; }

/* ------------------------------------------------------------------ small -- */
/* Below 1024 the unit is retired — a 1440 layout scaled to a phone puts the
   heading at 13px — and the two halves stack, the panel keeping its own 720
   by 760 shape rather than being cropped to a strip. */
@media (max-width: 1023px) {
  .codes { gap: 60px; padding: 100px var(--gutter) 120px; }
  .codes__num               { margin: 0 0 -20px; }
  .codes__num--group        { margin-top: 100px; }
  .codes__num:first-of-type { margin-top: 20px; }

  .code {
    --u: 1px;
    flex-direction: column;
    aspect-ratio: auto;
  }

  .code__copy { flex: none; }

  .code__copy-in {
    position: static;
    width: auto;
    max-width: none;
    padding: var(--pad-48) var(--gutter);
    gap: 24px;
  }

  .code__h {
    width: auto;
    font-size: var(--fs-h1);
    line-height: 1.084;
  }

  .code__p {
    width: auto;
    font-size: var(--fs-lede);
    line-height: 1.5;
  }

  .code__panel {
    flex: none;
    width: 100%;
    aspect-ratio: 720 / 760;
  }

  .code__btns { margin-top: 0; flex-wrap: wrap; }
}