/* ==========================================================================
   figure.css — drawing frames and the gallery band
   This is where the reference's idea lives: the frame is silent, the work
   inside it carries everything. READING.md §"The one thing".
   ========================================================================== */

.drawing {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.drawing__frame {
  position: relative;

  overflow: hidden;

  background-color: var(--surface);

  border: var(--border-w) solid var(--rule);
  border-radius: var(--radius-lg);
}

/* `contain`, not `cover`. A technical drawing must never be cropped — losing
   the edge of a detail loses the information the drawing exists to carry.
   The frame keeps its aspect ratio and the drawing letterboxes inside it on
   white, which reads like a drawing on a sheet. */
.drawing__frame img {
  width: 100%;
  height: 100%;
  padding: var(--space-3);

  background-color: var(--surface);
  object-fit: contain;
}

/* Placeholder state — used until real drawing samples land. It is honest
   about being empty rather than pretending to be a photograph.
   See assets/MANIFEST.md. */
.drawing__frame--placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;

  /* A drafting grid, drawn in CSS. No image request, no layout shift. */
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 16px 16px;
}

.drawing__frame--placeholder span {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);

  background-color: var(--surface);

  color: var(--text-muted);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;

  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
}

.drawing__caption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;

  color: var(--text-muted);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-button);
}

.drawing__sheet {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* --- Aspect variants — set here so HTML never carries a literal ---------- */

.drawing--sheet     .drawing__frame { aspect-ratio: 4 / 3; }
.drawing--tall      .drawing__frame { aspect-ratio: 3 / 4; }
.drawing--wide      .drawing__frame { aspect-ratio: 16 / 9; }
.drawing--panorama  .drawing__frame { aspect-ratio: 21 / 9; }
.drawing--square    .drawing__frame { aspect-ratio: 1 / 1; }

/* --- Gallery band --------------------------------------------------------
   A horizontally scrollable rail on narrow screens, a grid when there's
   room. Scrolls inside itself — the page body never scrolls sideways.     */

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 22rem);
  gap: var(--space-5);

  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;

  padding-block-end: var(--space-4);
  /* Let cards reach the viewport edge while scrolling, then pad back in. */
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
}

.gallery > * { scroll-snap-align: start; }

@media (min-width: 64rem) {
  /* Asymmetric on purpose. Three equal 400px cards render a technical drawing
     too small to read, which undercuts the section's whole claim. The lead
     drawing runs the full height of the band at roughly 800px wide, with the
     two supporting drawings stacked beside it. DESIGN.md §5. */
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: 1.7fr 1fr;
    align-items: start;
    gap: var(--space-6);

    overflow-x: visible;

    padding-inline: 0;
    margin-inline: 0;
  }

  .gallery > :first-child { grid-row: span 2; }

  /* Frame aspects matched to each drawing's own proportions, so letterboxing
     stays minimal and the linework fills the frame. */
  .gallery > :first-child  .drawing__frame { aspect-ratio: 16 / 10; }
  .gallery > :nth-child(2) .drawing__frame { aspect-ratio: 16 / 9; }
  .gallery > :nth-child(3) .drawing__frame { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery { scroll-snap-type: none; }
}

/* --- Portrait ------------------------------------------------------------
   A photograph, unlike a drawing, may be cropped — so this one uses `cover`
   with a fixed 4:5 frame. */

.portrait {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 26rem;
  margin: 0;
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;

  background-color: var(--surface-sunken);

  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: 50% 20%;      /* keep the face out of the centre crop */
}

.portrait__caption {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* --- Logo rail (client marks) -------------------------------------------- */

.logo-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-10);
  justify-content: center;

  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-rail li {
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}