/* ==========================================================================
   BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION"
   pages/categories.css — categories.html ONLY.
   --------------------------------------------------------------------------
   Everything reusable (buttons, sec-head, ccard, pcard, spec, ticker, tags,
   cta-band, specstrip, note, empty) lives in components.css and is used as-is.
   This file holds only what is genuinely unique to the category index:

     · .cats-specs   the technical spec strip under the SLIM page header
     · .cats-jump    the hairline anchor bar
     · .cline        THE page's signature: a full-width production-line panel
                     (photo + description + the real parent_id child tree)
     · .cats-index   the "category table, as stored" spec sheet

   Every box-model property is logical. Every corner is square.
   EVERY colour resolves through a token in tokens.css, so the page is correct
   on graphite AND on paper. The ONLY literal colours left in this file are the
   ones painted ON TOP OF A PHOTOGRAPH (.cline__media) — that plate is a dark
   photographic plate in BOTH modes, exactly like a photo plate pasted onto a
   drawing sheet, so its overlays are anchored to the photo, not to the page.
   ========================================================================== */


/* ==========================================================================
   01. HEAD — the SLIM page header (.page-head--slim, from components.css)
       plus the four-fact spec strip immediately under it.
   ========================================================================== */

/* The page header already draws the hairline under itself — the strip must not
   double it up into a 2px rule. */
.cats-specs { position: relative; }
.cats-specs .specstrip { border-block-start: 0; }


/* ==========================================================================
   02. JUMP BAR — hairline anchor rail under the ticker.
   ========================================================================== */
.cats-jump {
  display: flex;
  align-items: stretch;
  gap: 0;
  /* A toned band in BOTH modes: bone-200 on paper, ink-950 on graphite. */
  background-color: var(--surface-inset);
  border-block-end: var(--bw-hair) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.cats-jump::-webkit-scrollbar { display: none; }

.cats-jump__label {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding-inline: var(--gutter) var(--s-5);
  color: var(--fg-muted);   /* --fg-subtle would drop under 4.5:1 on the band */
  border-inline-end: var(--bw-hair) solid var(--line);
}
.cats-jump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  min-block-size: 52px;
  padding-inline: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  color: var(--fg-muted);
  border-inline-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.cats-jump__link:last-child { border-inline-end: 0; }
.cats-jump__link:hover {
  color: var(--fg-strong);
  background-color: var(--surface-3);
}
.cats-jump__n { color: var(--accent); font-variant-numeric: tabular-nums; }
[dir="rtl"] .cats-jump__link { text-transform: none; letter-spacing: 0; }


/* ==========================================================================
   03. .cline — THE PRODUCTION-LINE PANEL
   --------------------------------------------------------------------------
   One panel per ROOT category. Photo + copy + the genuine parent_id children,
   listed as a hairline link grid with their own product counts.
   ========================================================================== */
.cats-lines {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s-7), 3.5vw, var(--s-10));
}

.cline {
  /* --- THE PHOTO PLATE -----------------------------------------------------
     The media half of the panel is a dark photographic plate in BOTH modes —
     a photo pasted onto the drawing sheet. Everything printed on top of it is
     therefore anchored to the PHOTO, not to the page: it must stay legible
     whether the sheet around it is bone or graphite. On paper the plate is
     lifted slightly (the print is less inky) and the veil is lightened to
     match, but white type and the LIT red still clear AA on it.             */
  --plate-img:        grayscale(0.42) contrast(1.06) brightness(0.80);
  --plate-img-hover:  grayscale(0) contrast(1) brightness(0.92);
  --plate-veil-bot:   rgba(5, 6, 7, 0.82);
  --plate-veil-mid:   rgba(5, 6, 7, 0.20);
  --plate-veil-top:   rgba(5, 6, 7, 0.44);
  --plate-hatch:      rgba(255, 255, 255, 0.05);
  --plate-chip-bg:    rgba(5, 6, 7, 0.78);
  --plate-chip-line:  rgba(255, 255, 255, 0.20);
  --plate-fg:         #F4F4F2;   /* white-ish type ON the photo             */
  --plate-fg-2:       #9AA1AC;   /* the decorative "/ " tick               */
  --plate-accent:     #FF2A32;   /* the LIT red: 5.2:1 on the dark plate    */

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
  transition: border-color var(--dur-2) var(--ease);
}
:root[data-theme="dark"] .cline {
  --plate-img:        grayscale(0.5) contrast(1.08) brightness(0.74);
  --plate-img-hover:  grayscale(0) contrast(1) brightness(0.86);
  --plate-veil-bot:   rgba(5, 6, 7, 0.86);
  --plate-veil-mid:   rgba(5, 6, 7, 0.22);
  --plate-veil-top:   rgba(5, 6, 7, 0.42);
}
/* No-JS fallback, mirroring §14 of tokens.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cline {
    --plate-img:        grayscale(0.5) contrast(1.08) brightness(0.74);
    --plate-img-hover:  grayscale(0) contrast(1) brightness(0.86);
    --plate-veil-bot:   rgba(5, 6, 7, 0.86);
    --plate-veil-mid:   rgba(5, 6, 7, 0.22);
    --plate-veil-top:   rgba(5, 6, 7, 0.42);
  }
}
.cline:hover,
.cline:focus-within { border-color: var(--line-contrast); }

/* Mirror every other panel so the page reads as an editorial column, not a
   list. `order` is direction-agnostic: in RTL the grid already flows the
   other way, so this keeps the alternation intact. */
.cline--flip .cline__media { order: 2; }

@media (max-width: 899px) {
  .cline { grid-template-columns: 1fr; }
  .cline--flip .cline__media { order: 0; }
}

/* -- Media ---------------------------------------------------------------- */
.cline__media {
  position: relative;
  overflow: hidden;
  min-block-size: 18rem;
  background-color: var(--media-bed);
  border-inline-end: var(--bw-hair) solid var(--line);
}
.cline--flip .cline__media {
  border-inline-end: 0;
  border-inline-start: var(--bw-hair) solid var(--line);
}
@media (max-width: 899px) {
  .cline__media,
  .cline--flip .cline__media {
    aspect-ratio: 16 / 10;
    min-block-size: 0;
    border-inline: 0;
    border-block-end: var(--bw-hair) solid var(--line);
  }
}

.cline__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Pull the packaging photography toward graphite. The red is ours to spend. */
  filter: var(--plate-img);
  transition: transform var(--dur-5) var(--ease), filter var(--dur-4) var(--ease);
}
.cline:hover .cline__img,
.cline:focus-within .cline__img {
  transform: scale(1.04);
  filter: var(--plate-img-hover);
}

/* Blueprint hatch over the photograph — the device that turns a product shot
   into a technical drawing. */
.cline__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to top,
      var(--plate-veil-bot) 0%,
      var(--plate-veil-mid) 62%,
      var(--plate-veil-top) 100%),
    repeating-linear-gradient(to right,  var(--plate-hatch) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, var(--plate-hatch) 0 1px, transparent 1px 30px);
  pointer-events: none;
}

.cline__index {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--s-5);
  inset-inline-start: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--plate-accent);
  font-variant-numeric: tabular-nums;
}
.cline__index::before { content: "/ "; color: var(--plate-fg-2); }

.cline__glyph {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--s-5);
  inset-inline-end: var(--s-5);
  inline-size: 58px;
  block-size: 58px;
  object-fit: contain;
  background: none;
  opacity: 0.3;
  filter: brightness(0) invert(1);   /* force the flat PNG to a white glyph */
  transition: opacity var(--dur-3) var(--ease);
  pointer-events: none;
}
.cline:hover .cline__glyph { opacity: 0.55; }

.cline__badge {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--s-5);
  inset-inline-end: var(--s-5);
  padding: 5px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--plate-fg);
  background-color: var(--plate-chip-bg);
  border: var(--bw-hair) solid var(--plate-chip-line);
  white-space: nowrap;
}
/* --accent-solid, NOT --accent-brand: this is 10px mono, and white on #ED1C24
   is only 4.39:1. The plate red (#D31219) carries white at 5.4:1. */
.cline__badge--accent {
  color: var(--accent-fg);
  background-color: var(--accent-solid);
  border-color: var(--accent-solid);
}
[dir="rtl"] .cline__badge { letter-spacing: 0; }

/* -- Body ----------------------------------------------------------------- */
.cline__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-inline-size: 0;
  padding: clamp(var(--s-6), 2.4vw, var(--s-8));
}

.cline__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--fg-strong);
  margin-block-end: var(--s-4);
}
[dir="rtl"] .cline__title { text-transform: none; line-height: 1.3; }
.cline__title a:hover { color: var(--accent); }

.cline__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-inline-size: var(--measure);
}

/* -- The child tree (parent_id, made visible) ----------------------------- */
.cline__kids-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block-end: var(--s-3);
  margin-block-end: var(--s-4);
  border-block-end: var(--bw-hair) solid var(--line);
}
.cline__kids-n { color: var(--fg-muted); font-variant-numeric: tabular-nums; }

.cline__kid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  border-block-start: var(--bw-hair) solid var(--line);
  border-inline-start: var(--bw-hair) solid var(--line);
}
/* The <li> is the grid cell; the link must fill it or the hairlines break. */
.cline__kid-list > li { display: flex; min-inline-size: 0; }
.cline__kid {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-inline-size: 0;
  min-block-size: 52px;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--fg-muted);
  background-color: var(--surface-2);
  border-inline-end: var(--bw-hair) solid var(--line);
  border-block-end: var(--bw-hair) solid var(--line);
  transition: var(--t-color);
}
.cline__kid::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--bw-slab);
  background-color: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-2) var(--ease);
}
.cline__kid:hover,
.cline__kid:focus-visible {
  color: var(--fg-strong);
  background-color: var(--surface-3);
}
.cline__kid:hover::before,
.cline__kid:focus-visible::before { transform: scaleY(1); }

.cline__kid-n {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Arabic structure names are long — let them wrap rather than truncate. */
.cline__kid-name {
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.cline__kid-count {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* -- Foot ----------------------------------------------------------------- */
.cline__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--s-5);
  border-block-start: var(--bw-hair) solid var(--line);
}
.cline__count {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-muted);
}
.cline__count b {
  color: var(--accent);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .cline__count { letter-spacing: 0; }


/* ==========================================================================
   04. STRUCTURES GRID (the 7 real children, as photographic tiles)
   ========================================================================== */
.cats-structures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-5);
}
.cats-structures__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: var(--bw-hair) solid var(--line);
}
.cats-structures__note {
  max-inline-size: var(--measure);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}


/* ==========================================================================
   05. LEGACY LINE (machinery) — deliberately quieter than the packaging bands.
   ========================================================================== */
.cats-machines__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-5);
  margin-block-start: var(--s-7);
}
.cats-machines__note { margin-block-start: var(--s-7); }


/* ==========================================================================
   06. CATEGORY INDEX — the categories table, framed as a specification.
   ========================================================================== */
.cats-index {
  background-color: var(--surface);
  border: var(--bw-hair) solid var(--line);
}
.cats-index__table {
  inline-size: 100%;
  min-inline-size: 44rem;      /* below this it scrolls inside .table-scroll */
}
.cats-index__table thead th {
  padding: var(--s-3) var(--s-5);
  text-align: start;
  vertical-align: middle;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-subtle);
  white-space: nowrap;
  background-color: var(--surface-2);
  border-block-end: var(--bw-hair) solid var(--line);
}
.cats-index__table tbody tr {
  border-block-end: var(--bw-hair) solid var(--line);
  transition: background-color var(--dur-1) var(--ease);
}
.cats-index__table tbody tr:last-child { border-block-end: 0; }
.cats-index__table tbody tr:hover { background-color: var(--surface-3); }

.cats-index__table td,
.cats-index__table tbody th {
  padding: var(--s-3) var(--s-5);
  text-align: start;
  vertical-align: middle;
  font-size: var(--fs-sm);
  color: var(--fg);
}
.cats-index__table tbody th {
  inline-size: 1%;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--fg-subtle);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-inline-end: var(--bw-hair) solid var(--line);
}

/* Root rows carry the red slab; child rows are indented and get a tree elbow
   drawn from logical borders, so it mirrors correctly in Arabic. */
/* Specificity, not taste: `.cats-index__table tbody th` above is (0,1,2) and
   would otherwise beat a bare `.cats-index__row--root th` (0,1,1) — the root
   ref would silently paint --fg-subtle instead of the red. */
.cats-index__table tbody .cats-index__row--root th { color: var(--accent); }
.cats-index__name { display: inline-flex; align-items: center; gap: var(--s-3); }
.cats-index__row--root .cats-index__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--fg-strong);
}
[dir="rtl"] .cats-index__row--root .cats-index__name { text-transform: none; }
.cats-index__row--child td:first-of-type { padding-inline-start: var(--s-7); }
.cats-index__row--child .cats-index__name::before {
  content: "";
  flex: none;
  inline-size: 10px;
  block-size: 8px;
  margin-block-end: 6px;
  border-inline-start: var(--bw-hair) solid var(--line-contrast);
  border-block-end: var(--bw-hair) solid var(--line-contrast);
}
.cats-index__name a:hover { color: var(--accent); }

.cats-index__slug {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg-subtle);
}
.cats-index__count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.cats-index__count--zero { color: var(--accent); }

@media (max-width: 639px) {
  .cats-index__table td,
  .cats-index__table thead th,
  .cats-index__table tbody th { padding-inline: var(--s-4); }
}


/* ==========================================================================
   07. CLOSING CTA
   ========================================================================== */
.cats-cta { padding-block: var(--section-y); }
.cats-cta__meta { margin-block-end: var(--s-5); }
.cats-cta__mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: var(--track-none);
}
.cats-cta__mail svg { inline-size: 14px; block-size: 14px; color: var(--accent); }
.cats-cta__mail:hover { color: var(--accent); }