/* WT category tables. Site radius system: 0 structural, 6px controls/data,
   12px standalone panels, 50%/999px only for true circles and pills. */
.cats {
  --cats-red: #da2028;
  --cats-yellow: #fbb133;
  --cats-green: #28a456;
  --cats-blue: #213f99;
  --cats-black: #000;
  --cats-grey: #58585b;
  --cats-ink: #202733;
  --cats-muted: #667085;
  --cats-line: #d9dde5;
  --cats-surface: #fff;
  --cats-radius-item: 6px;
  --cats-radius-panel: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: clamp(16px, 2.4vw, 22px);
  overflow: hidden;
  border: 1px solid var(--cats-line);
  border-radius: var(--cats-radius-panel);
  background: var(--cats-surface);
  box-shadow: 0 12px 30px rgba(18, 32, 57, .08);
}

.cats + .cats { margin-top: 20px; }
.blk--image + .cats { margin-top: 24px; }

.cats__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 8px;
  table-layout: fixed;
  font-size: clamp(.82rem, 1.8vw, .95rem);
}

.cats__table + .cats__table { margin-top: 14px; }

.cats__head {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--cats-line);
  background: transparent;
  color: var(--cats-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  caption-side: top;
}

.cats__head::before { content: none !important; }

.cats__cell,
.cats__label,
.cats__code,
.cats__cell[data-i] {
  padding: 12px 10px;
  border: 0;
  border-radius: var(--cats-radius-item);
  background: var(--cats-surface);
  color: var(--cats-ink);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.cats .cats__cell[data-i="0"] { background: var(--cats-red); color: #fff; }
.cats .cats__cell[data-i="1"] { background: var(--cats-yellow); color: #111; }
.cats .cats__cell[data-i="2"] { background: var(--cats-green); color: #111; }
.cats .cats__cell[data-i="3"] { background: var(--cats-blue); color: #fff; }
.cats .cats__cell[data-i="4"] { background: var(--cats-black); color: #fff; }

.cats--weights .cats__cell {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.cats--five .cats__table { border-spacing: 5px 8px; }
.cats--five .cats__cell {
  padding-inline: 4px;
  font-size: .78rem;
}

.cats--rows .cats__table {
  border-spacing: 0 8px;
  table-layout: auto;
}

.cats--rows .cats__row {
  --cats-row-accent: var(--cats-grey);
}

.cats--rows .cats__row:nth-child(6n+1) { --cats-row-accent: var(--cats-red); }
.cats--rows .cats__row:nth-child(6n+2) { --cats-row-accent: var(--cats-yellow); }
.cats--rows .cats__row:nth-child(6n+3) { --cats-row-accent: var(--cats-green); }
.cats--rows .cats__row:nth-child(6n+4) { --cats-row-accent: var(--cats-blue); }
.cats--rows .cats__row:nth-child(6n+5) { --cats-row-accent: var(--cats-black); }

.cats--rows .cats__row .cats__label {
  border: 1px solid var(--cats-line);
  border-right: 0;
  border-radius: var(--cats-radius-item) 0 0 var(--cats-radius-item);
  color: var(--cats-ink) !important;
  background: #f7f8fa !important;
  font-weight: 600;
  text-align: left;
}

.cats--rows .cats__row .cats__code {
  width: 4.5rem;
  border-radius: 0 var(--cats-radius-item) var(--cats-radius-item) 0;
  color: #fff !important;
  background: var(--cats-row-accent) !important;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.cats--rows .cats__row:nth-child(6n+2) .cats__code,
.cats--rows .cats__row:nth-child(6n+3) .cats__code { color: #111 !important; }

.cats__meta {
  margin: 8px 8px 0;
  color: var(--cats-muted);
  font-size: .82rem;
  line-height: 1.45;
}

.class-cards { align-items: stretch; }
.class-card { box-sizing: border-box; min-width: 0; max-width: 100%; height: 100%; padding: 16px; overflow: hidden; border: 3px solid #0c4775; border-radius: var(--cats-radius-panel); background: #eaf7fb; box-shadow: 0 10px 24px rgba(12, 71, 117, .13); }
.class-card figure { margin: 0; }
.class-card img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--cats-radius-item); }
.class-card h3 { margin: 14px 0 7px; color: #123f68; }
.class-card p { margin: 0; }

@media (max-width: 720px) {
  .category-layout > * { grid-column: span 12 !important; }
}

@media (max-width: 640px) {
  .grid12 > * { min-width: 0; }

  .cats {
    padding: 14px;
    border-radius: var(--cats-radius-panel);
    box-shadow: 0 8px 22px rgba(18, 32, 57, .07);
  }

  .cats__head {
    padding-bottom: 10px;
    font-size: .94rem;
  }

  .cats:not(.cats--rows) .cats__table,
  .cats:not(.cats--rows) .cats__table tbody { display: block; }

  .cats:not(.cats--rows) .cats__table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cats:not(.cats--rows) .cats__head { display: block; }

  .cats:not(.cats--rows) .cats__cell {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    font-size: .875rem;
  }

  .cats:not(.cats--rows) tr > .cats__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cats.cats--five:not(.cats--rows) .cats__table tr { grid-template-columns: 1fr; }
  .cats.cats--five .cats__cell:last-child { grid-column: auto; }
  .cats--five .cats__cell { padding: 9px 6px; font-size: .8rem; }

  .cats--rows .cats__table { border-spacing: 0 7px; }
  .cats--rows .cats__row .cats__label { padding: 11px 10px; font-size: .875rem; line-height: 1.35; }
  .cats--rows .cats__row .cats__code { width: 3.9rem; padding: 11px 8px; font-size: .875rem; }
}

@media (max-width: 380px) {
  .cats { padding: 12px; }
  .cats--rows .cats__row .cats__label { font-size: .82rem; }
  .cats--rows .cats__row .cats__code { width: 3.55rem; padding-inline: 6px; }
}