/* ===========================================================================
   KHAWLA — LAYOUT PATCH v1.1
   Fixes content clipping at narrow widths. Load AFTER khawla-tokens.css.

   ROOT CAUSE — the CSS Grid minimum-content trap.

   `grid-template-columns: 1fr auto` does not do what it looks like it does.
   A `1fr` track will not shrink below the intrinsic minimum width of its
   content, so a long unbreakable string inflates the track, the row grows
   past its container, and everything to the right is clipped instead of
   wrapping. The cure is `minmax(0, 1fr)`, which permits the track to shrink.

   Compounding it: `white-space: nowrap` on the metadata column. That was my
   error in the specimen sheet. It made an already-unshrinkable track hold a
   single 40-character line, which is why "135 ×" vanished off the left of the
   caption and "ROSE IV" is cut in half.
   =========================================================================== */

/* --- 1. Global blowout guard --------------------------------------------- */

*,
*::before,
*::after { min-width: 0; }          /* nothing may inflate its own track */

body { overflow-x: hidden; }        /* belt and braces, not the actual fix */


/* --- 2. Metadata must wrap ----------------------------------------------- */

.meta,
.work__meta {
  white-space: normal;              /* was nowrap. this was the bug. */
  overflow-wrap: break-word;
}

/* Uppercase letter-spaced text leaves a trailing space on the last glyph of
   each line, which reads as a ragged right edge. Trim it back optically. */
.meta { margin-right: -0.1em; }


/* --- 3. Display type wraps, never clips ---------------------------------- */

.banner,
.title {
  overflow-wrap: break-word;
  hyphens: none;                    /* a didone must never hyphenate */
}


/* --- 4. Work rows: stack far earlier ------------------------------------- */

.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2.5rem;
  align-items: end;
  padding: 1.75rem 0;
}

/* 900px, not 720. A 52px didone title beside a 40-character object label
   needs far more room than a phone breakpoint assumes. */
@media (max-width: 900px) {
  .work {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
  .work__meta { text-align: left; }
}


/* --- 5. Specimen rows --------------------------------------------------- */

.spec { grid-template-columns: 9rem minmax(0, 1fr); }

@media (max-width: 900px) {
  .spec {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
  .spec__label { padding-top: 0; }
}


/* --- 6. Nav: the wordmark gets its own row before it ever wraps ---------- */

.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(1.5rem, 6vw, 4rem);    /* the collision was a missing gap */
  flex-wrap: wrap;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--hairline);
}

.nav__mark {
  flex: 0 0 auto;                   /* never compressed by its neighbours */
  white-space: nowrap;              /* the ONE place nowrap is correct */
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a { white-space: nowrap; }

/* Below 780px the two cannot share a line. Give each its own row rather than
   letting the wordmark fracture into "KHAWLA / ABU / SALEH". */
@media (max-width: 780px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .nav__links { justify-content: flex-start; }
}


/* --- 7. Plates never crop ----------------------------------------------- */

.plate img { object-fit: contain; }             /* default: show the work */
.plate--banner img { object-fit: cover; }       /* opt-in, banner rows only */

.plate--hover img { transition: transform var(--motion); }
.plate--hover:hover img { transform: scale(1.015); }


/* --- 8. Container queries where supported -------------------------------
   Component previews render at arbitrary widths that have nothing to do with
   the viewport, so viewport breakpoints misfire inside them. Where container
   queries are available, let the component respond to its own box. */

@supports (container-type: inline-size) {
  .works-index { container-type: inline-size; }

  @container (max-width: 900px) {
    .work { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .work__meta { text-align: left; }
  }
  @container (max-width: 780px) {
    .nav { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .nav__links { justify-content: flex-start; }
  }
}