/* kits-page.css : kits.html only (lane 2026-10-07-kits-newspaper, issue #850).
   Nothing here is shared: site.css owns every other page. Colors come from
   the brand board only (garnet-3, gold, gold-soft, cream). */

/* ---- Hero: copy capped so the toolbox art in the right band carries no text ---- */
.kits-hero .splash-copy { max-width: 52%; }
.kits-hero .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
.kits-hero .splash-note { max-width: 44rem; margin-top: 2.4rem; }
@media (max-width: 900px) {
  .kits-hero .splash-copy { max-width: 100%; }
}

/* ---- Row-rhythm grid (Rico 2026-10-08: "one wide with the marketing panel,
   then three wide with three of them, then two wide, and then three wide ...
   so that it literally breaks up the vertical lines that go all the way
   through"). 6 columns at >=1100px; cards in a row are EQUAL width and the
   COUNT changes per row:
     row 1  01 alone        row 2  02 03 04
     row 3  05 06           row 4  07 08 09
     row 5  10 11
   3-up rows break at 1/3 and 2/3, 2-up rows at 1/2, so no interior vertical
   line continues into the next row. No card is bigger than its row share:
   Document Factory (03) is an ordinary 3-up card (Rico: "enormous").
   Cards in a row share height (grid stretch, no min-height override). */
.kit-bento {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}
.kit-bento > .kit-card:nth-child(1)  { grid-column: span 6; }
.kit-bento > .kit-card:nth-child(2)  { grid-column: span 2; }
.kit-bento > .kit-card:nth-child(3)  { grid-column: span 2; }
.kit-bento > .kit-card:nth-child(4)  { grid-column: span 2; }
.kit-bento > .kit-card:nth-child(5)  { grid-column: span 3; }
.kit-bento > .kit-card:nth-child(6)  { grid-column: span 3; }
.kit-bento > .kit-card:nth-child(7)  { grid-column: span 2; }
.kit-bento > .kit-card:nth-child(8)  { grid-column: span 2; }
.kit-bento > .kit-card:nth-child(9)  { grid-column: span 2; }
.kit-bento > .kit-card:nth-child(10) { grid-column: span 3; }
.kit-bento > .kit-card:nth-child(11) { grid-column: span 3; }

/* 761-1099px: rows alternate 2-up and 1-up; 01 always alone. */
@media (max-width: 1099px) {
  .kit-bento > .kit-card:nth-child(1)  { grid-column: span 6; }
  .kit-bento > .kit-card:nth-child(2)  { grid-column: span 3; }
  .kit-bento > .kit-card:nth-child(3)  { grid-column: span 3; }
  .kit-bento > .kit-card:nth-child(4)  { grid-column: span 6; }
  .kit-bento > .kit-card:nth-child(5)  { grid-column: span 3; }
  .kit-bento > .kit-card:nth-child(6)  { grid-column: span 3; }
  .kit-bento > .kit-card:nth-child(7)  { grid-column: span 6; }
  .kit-bento > .kit-card:nth-child(8)  { grid-column: span 3; }
  .kit-bento > .kit-card:nth-child(9)  { grid-column: span 3; }
  .kit-bento > .kit-card:nth-child(10) { grid-column: span 3; }
  .kit-bento > .kit-card:nth-child(11) { grid-column: span 3; }
}
@media (max-width: 760px) {
  .kit-bento { grid-template-columns: minmax(0, 1fr); }
  .kit-bento > .kit-card { grid-column: 1 / -1 !important; }
}

.kit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  color: var(--gold-soft);
  text-decoration: none;
  background: var(--garnet-3);
  border: 1px solid oklch(90% .07 82 / .2);
  border-radius: 16px;
  transform: translateZ(0);
  /* Slow, silky hover (motion spec 2026-10-07): nothing under .6s. */
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), border-color .6s cubic-bezier(.22, 1, .36, 1);
}

/* ---- No text over art, anywhere (#850, 2026-10-07) ----
   Stacked card: 16/10 art band on top, type on solid garnet-3 below.
   ONE OWNER PER ELEMENT (2026-10-08, the jarring hover pop): .kit-art is the
   clipping frame GSAP animates clip-path on, .kit-art-inner is the hover layer
   GSAP never touches, and the img is GSAP's alone (entry scale + scrubbed
   parallax, both written as inline `transform`). The img is 112% tall so the
   parallax never exposes an edge. */
.kit-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  overflow: hidden;
  /* Entry reveal target. JS animates clip-path; CSS holds the closed state
     only once .kit-motion-ready is set, so no-JS shows the image. */
}
.kit-art-inner {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform: scale(1);
  transform-origin: center;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.kit-art img {
  position: absolute;
  left: 0; top: -6%;
  width: 100%; height: 112%;
  object-fit: cover;
}

/* Row-1 card (01, full width): art left ~55%, type right on solid garnet-3.
   Still no text over the image. */
@media (min-width: 761px) {
  .kit-card-wide { flex-direction: row; align-items: stretch; }
  .kit-card-wide .kit-art { width: 55%; aspect-ratio: auto; align-self: stretch; min-height: 260px; }
  .kit-card-wide .kit-body { flex: 1 1 0; align-self: center; }
  .kit-card-wide .kit-name { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
}

.kit-body { position: relative; z-index: 1; display: block; padding: clamp(1.2rem, 2vw, 1.8rem); }
.kit-num {
  display: block;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  color: var(--gold);
}
.kit-name {
  display: block;
  margin-top: .5rem;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 700; line-height: 1.08;
  color: #fff;
}
/* Word mask reveal: outer span clips, inner span moves. */
.kit-name .kit-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kit-name .kit-word-i { display: inline-block; }
.kit-desc {
  display: block;
  max-width: 48ch;
  margin-top: .7rem;
  font-size: .92rem; line-height: 1.5;
  color: var(--gold-soft);
}
.kit-card .arrow { display: block; margin-top: .9rem; font-size: 1.1rem; color: var(--gold); }

/* A gold rule draws left to right on hover/focus. */
.kit-card::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.kit-card:hover, .kit-card:focus-visible { transform: translateY(-6px); border-color: var(--gold); }
.kit-card:hover::before, .kit-card:focus-visible::before { transform: scaleX(1); }
.kit-card:hover .kit-art-inner, .kit-card:focus-visible .kit-art-inner { transform: scale(1.04); }

/* Motion entry state. JS adds .kit-motion-ready to <html> before it animates,
   so no-JS and a failed GSAP load both leave every card visible and static. */
.kit-motion-ready .kit-card .kit-body { opacity: 0; }
.kit-motion-ready .kit-card .kit-art { clip-path: inset(100% 0 0 0); }
.kit-motion-ready .kit-card.is-in .kit-body { opacity: 1; }