/* ==========================================================================
   VIVID — CATEGORIES
   --------------------------------------------------------------------------
   The hierarchy page. Four parent LINES, each a substantial image-led panel
   that carries its children as real links, plus a rail of the seven bag
   structures on the ink band and a made-to-order close on the red band.

   Everything reusable (.phead, .crumbs, .section-head, .stile, .rail, .btn)
   comes from components.css. Only what is unique to this page lives here.
   Logical properties only — the whole page mirrors in RTL.
   ========================================================================== */


/* ==========================================================================
   0. THE SLIM PAGE HEADER.
   The shape is .phead--slim from components.css — this only handles the one
   thing that is page-specific: on a narrow screen the aside CTA wraps onto its
   own row and doubles the masthead's height (189px), which defeats the whole
   point of a slim header. Below 768 it is dropped: the quote CTA is already the
   most prominent thing in the drawer, every line panel below carries its own,
   and the page closes on a full red quote band. Nothing is lost, and the
   content starts immediately.
   ========================================================================== */
@media (max-width: 767px) {
  [data-page="categories"] .phead--slim .phead__aside { display: none; }
}


/* ==========================================================================
   1. LINE INDEX — the ink strip under the page header.
   A real table of contents: four boxes, count included, jumping to the
   panels below. Slim, dense, and it puts the dark band up front.
   ========================================================================== */
.lidx__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-end: var(--sp-6);
}
.lidx__title {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  color: var(--text-on-ink);
}
.lidx__note {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-ink-subtle);
}

.lidx {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-4);
  list-style: none;
}

.lidx__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  block-size: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-ink-soft);
  border: var(--bw-hair) solid var(--line-on-ink);
  border-radius: var(--r-md);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}
/* The hover border must read against the BAND, not the page: --surface is the
   card colour and in dark it is DARKER than the band, so it would vanish.
   --text-on-ink is white in both themes, which is what the band wants. */
.lidx__item:hover,
.lidx__item:focus-visible {
  background: var(--surface-ink-card);
  border-color: var(--text-on-ink);
  transform: translate(-3px, -3px);
  box-shadow: var(--hard-red-sm);
}

.lidx__n {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  color: var(--brand-on-ink);
}
.lidx__name {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--text-on-ink);
}
.lidx__count {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-ink-muted);
}


/* ==========================================================================
   2. THE LINE PANEL — the photo is half the panel. Hard 2px border, solid
   red count badge, children as real links, a chunky quote action.
   ========================================================================== */
.lines {
  display: grid;
  gap: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  margin-block-start: var(--sp-10);
}

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  scroll-margin-block-start: calc(var(--hdr-h) + var(--sp-8));
  background: var(--surface);
  border: var(--bw) solid var(--line-bold);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.line:hover,
.line:focus-within {
  transform: translate(-4px, -4px);
  box-shadow: var(--hard-ink);
}

@media (min-width: 900px) {
  .line { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
  /* Alternate the photo side down the page — the rhythm of the stack. */
  .line--flip .line__media { order: 2; }
}

/* ---- media --------------------------------------------------------------- */
.line__media {
  position: relative;
  display: block;
  overflow: hidden;
  min-block-size: 260px;
  aspect-ratio: 4 / 3;
  /* The plate the photograph loads onto — NOT --invert-bg, which flips to a
     bright light block in dark and flashes white behind every image. */
  background: var(--media-bed);
  border-block-end: var(--bw) solid var(--line-bold);
}
@media (min-width: 900px) {
  .line__media {
    aspect-ratio: auto;
    min-block-size: 380px;
    border-block-end: 0;
    border-inline-end: var(--bw) solid var(--line-bold);
  }
  .line--flip .line__media {
    border-inline-end: 0;
    border-inline-start: var(--bw) solid var(--line-bold);
  }
}

.line__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.line:hover .line__img { transform: scale(1.05); }

/* Readability scrim for the two overlay badges — flat, from the edges. */
.line__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(8, 9, 13, 0.72) 0%,
    rgba(8, 9, 13, 0.28) 30%,
    rgba(8, 9, 13, 0.00) 58%);
  pointer-events: none;
}

.line__n {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--sp-4);
  inset-inline-start: var(--sp-4);
  padding: 6px var(--sp-3);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  color: var(--invert-fg);
  background: var(--invert-bg);
  border-radius: var(--r-xs);
}
.line__count {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-4);
  padding: 6px var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-on-red);
  background: var(--surface-red);
  border-radius: var(--r-xs);
}

/* ---- the specimen media: Labels & Sleeves has no honest photograph, so the
   panel draws a die-line sheet instead of borrowing someone else's product
   shot. Same language as .ccard--spec in components.css. ------------------- */
.line__web {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4);
  transform: rotate(-9deg) scale(1.3);
  transform-origin: 50% 45%;
  transition: transform var(--dur-4) var(--ease);
}
.line__web i {
  border: var(--bw) dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
}
.line__web i:nth-child(4) {
  background: var(--red-brand);
  border-color: var(--red-brand);
  border-style: solid;
}
.line__web i:nth-child(8) {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.34);
  border-style: solid;
}
.line:hover .line__web { transform: rotate(-9deg) scale(1.36); }
[dir="rtl"] .line__web { transform: rotate(9deg) scale(1.3); }
[dir="rtl"] .line:hover .line__web { transform: rotate(9deg) scale(1.36); }

/* The specimen plate rides the BAND token, so it is the ink slab in light and
   the lifted graphite slab in dark. Either way it is dark enough to carry the
   white dashed die-lines above, and it stays clearly distinct from the card
   surface it sits inside. */
.line__media--spec { background: var(--surface-ink); }

/* The specimen is already dark — the scrim only has to protect the badges. */
.line__media--spec::after {
  background: linear-gradient(to top,
    rgba(8, 9, 13, 0.86) 0%,
    rgba(8, 9, 13, 0.35) 34%,
    rgba(8, 9, 13, 0.00) 62%);
}

/* ---- body ---------------------------------------------------------------- */
.line__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-inline-size: 0;
  padding: clamp(1.375rem, 0.9rem + 1.8vw, 2.25rem);
}

.line__title {
  font-family: var(--font-head);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text);
}
.line__title a { color: inherit; transition: color var(--t-fast); }
.line__title a:hover { color: var(--brand-text); }

.line__desc {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line__kids { min-inline-size: 0; }
.line__kids-h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.line__kids-h::after {
  content: '';
  flex: 1 1 auto;
  block-size: var(--bw-hair);
  background: var(--line);
}

.kidlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  list-style: none;
}

.kidlink {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  padding-inline: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text);
  background: var(--surface-sunken);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--r-sm);
  transition:
    transform var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease);
}
.kidlink:hover,
.kidlink:focus-visible {
  background: var(--surface);
  border-color: var(--line-bold);
  transform: translate(-2px, -2px);
  box-shadow: var(--hard-ink-sm);
}
.kidlink__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.kidlink__n {
  flex: none;
  padding: 2px 7px;
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-heavy);
  color: var(--invert-fg);
  background: var(--invert-bg);
  border-radius: var(--r-xs);
  transition: background-color var(--t-fast), color var(--t-fast);
}
/* On hover the chip turns red — so its text has to be forced WHITE. In dark
   --invert-fg is near-black, and near-black on #DA1920 is only 3.6:1. */
.kidlink:hover .kidlink__n {
  color: var(--text-on-red);
  background: var(--surface-red);
}
.kidlink__go {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  color: var(--text-subtle);
  transition: transform var(--dur-2) var(--ease), color var(--t-fast);
}
[dir="rtl"] .kidlink__go { transform: scaleX(-1); }
.kidlink:hover .kidlink__go { color: var(--text); transform: translateX(3px); }
[dir="rtl"] .kidlink:hover .kidlink__go { transform: scaleX(-1) translateX(3px); }

/* The honest empty state — a line we make but have not photographed. */
.line__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: var(--bw) dashed var(--line-strong);
  border-radius: var(--r-md);
}
.line__note svg {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  color: var(--brand-text);
}

.line__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
}


/* ==========================================================================
   3. STRUCTURES RAIL — the seven children of Ready-Made Bags, on the ink
   band, where the packaging photography pops hardest. (.stile + .rail do the
   work; this only spaces the head.)
   ========================================================================== */
.structs__head { margin-block-end: var(--sp-8); }
.structs .rail__track { padding-block: var(--sp-1); }


/* ==========================================================================
   4. MADE-TO-ORDER — the closing red band.
   ========================================================================== */
.mto__grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 960px) {
  .mto__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

.mto__title {
  font-family: var(--font-head);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-snug);
  color: var(--text-on-red);
  max-inline-size: 20ch;
}
.mto__body {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relax);
  color: var(--text-on-red);
  max-inline-size: 56ch;
}
.mto__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}
.mto__note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-on-red);
}
.mto__note svg { inline-size: 16px; block-size: 16px; flex: none; }

/* The facts card — a hard white-ruled block on the red. No blur, no gradient.
   The rule is --text-on-red (white in BOTH themes): --surface would paint a
   near-black hairline onto the red band in dark, and the block would vanish. */
.mto__facts {
  display: grid;
  gap: var(--sp-1);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  background: var(--red-600);
  border: var(--bw) solid var(--text-on-red);
  border-radius: var(--r-lg);
  list-style: none;
}
.mto__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.mto__fact + .mto__fact { border-block-start: var(--bw-hair) solid var(--line-on-red); }
.mto__fact-k {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-on-red);
}
.mto__fact-v {
  font-family: var(--font-num);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-head);
  line-height: 1;
  color: var(--text-on-red);
}