/* ============================================================
   Product specifications. Ported from the mockup's .specblock /
   .specblock--striped + .spec-rows (styles/product.css).

   The container owns the grid and the gap; a group carries no margin. Four
   presets, because the same table has to sit on white, on the mist band and on
   a dark section — `striped` is the mockup's and the default.

   Child selectors where anything meets the skeleton: WordPress inlines a
   block's style.css BEFORE the theme's sheets, so a block rule that only ties
   on specificity LOSES. See BLOCKS.md trap 2.
   ============================================================ */
.vt-specs {
  display: grid;
  gap: 18px;
  /* Cards hug their content. The mockup could leave this at the grid default
     because every group in it happened to have exactly four rows; the real
     product has 4 / 5 / 4 / 4 / 1, and stretching left the four-row card with a
     blank strip below its last zebra stripe that reads as a rendering fault.
     Ragged bottoms between grid ROWS are honest; a hole inside a card is not. */
  align-items: start;
  /* The block spans its column. Not optional: a section's content stack is a
     flex column with align-items: flex-start, so without this the grid
     collapses to a single min-content track. See BLOCKS.md trap 9. */
  width: 100%;
}
.vt-specs--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-specs--cols-1 { grid-template-columns: minmax(0, 1fr); }

.vt-specs__group { min-width: 0; }

.vt-specs__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* dark purple, not the mockup's light purple: at 12px uppercase that measures
     4.11:1 on the mist band and fails AA, where dark purple is 7.4:1. The same
     fix the split and simple sections make to their eyebrows.

     Stated outright rather than through a --vt-* fallback: there is no
     "strong foreground" in the skeleton's variable contract, and a fallback to
     an undefined variable would have quietly painted dark purple on the dark
     surface too. The dark case is a real rule further down. */
  color: var(--color-dark-purple);
}

.vt-specs__rows { margin: 0; }

.vt-specs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
}
.vt-specs__term {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  /* muted, not subtle: the mockup's own product.css made exactly this fix
     ("muted 5.7:1 — WCAG AA (subtle 2.8:1 failed)") */
  color: var(--vt-fg-muted, var(--color-text-muted));
}
.vt-specs__value {
  margin: 0;                       /* <dd> carries a UA margin-inline-start */
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--vt-fg, var(--color-text));
  text-align: right;
  text-wrap: pretty;
}
/* The note is a second line under the value, never a tooltip: it has to be in
   the HTML a crawler reads, and a hover is not available on a phone. */
.vt-specs__note {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--vt-fg-muted, var(--color-text-muted));
}

/* ---- preset: carded, zebra rows (the mockup, and the default) ---- */
.vt-specs--striped .vt-specs__group,
.vt-specs--boxed .vt-specs__group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 6px 0 8px;
  overflow: hidden;
}
.vt-specs--striped .vt-specs__label,
.vt-specs--boxed .vt-specs__label {
  padding: 14px 20px 11px;
  border-bottom: 1px solid var(--color-divider);
}
.vt-specs--striped .vt-specs__row,
.vt-specs--boxed .vt-specs__row { padding: 11px 20px; }
/* zebra — the same tone as the lens table, so the two read as one surface */
.vt-specs--striped .vt-specs__row:nth-child(even) { background: var(--color-surface-alt); }

/* ---- preset: carded, ruled rows ---- */
.vt-specs--boxed .vt-specs__row { border-bottom: 1px solid var(--color-divider); }
.vt-specs--boxed .vt-specs__row:last-child { border-bottom: 0; }

/* ---- preset: ruled rows, no card (the mockup's own base .specblock) ---- */
.vt-specs--rules { gap: 36px 56px; }
.vt-specs--rules .vt-specs__label { margin-bottom: 8px; }
.vt-specs--rules .vt-specs__row {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.vt-specs--rules .vt-specs__row:last-child { border-bottom: 0; }

/* ---- preset: no card, no rules ---- */
.vt-specs--plain { gap: 32px 56px; }
.vt-specs--plain .vt-specs__label { margin-bottom: 6px; }
.vt-specs--plain .vt-specs__row { padding: 7px 0; }

/* On a dark section the white card becomes a whisper of white and the zebra
   inverts, the same way the cards and key figures do. `.vt-section.is-dark`
   out-specifies the base rules whatever order WordPress inlines the sheets in. */
.vt-section.is-dark .vt-specs--striped .vt-specs__group,
.vt-section.is-dark .vt-specs--boxed .vt-specs__group {
  border-color: color-mix(in srgb, #ffffff 14%, transparent);
  background: color-mix(in srgb, #ffffff 4%, transparent);
}
.vt-section.is-dark .vt-specs--striped .vt-specs__row:nth-child(even) {
  background: color-mix(in srgb, #ffffff 4%, transparent);
}
.vt-section.is-dark .vt-specs__label {
  /* the label is the one colour that cannot be derived — dark purple on ink is
     unreadable, so on a dark surface it takes the surface's own foreground */
  color: var(--vt-fg);
  border-color: color-mix(in srgb, #ffffff 12%, transparent);
}
.vt-section.is-dark .vt-specs__row,
.vt-section.is-dark .vt-specs--boxed .vt-specs__row {
  border-color: color-mix(in srgb, #ffffff 12%, transparent);
}

/* Phones: one column, and the label/value pair stacks — 15px of value pushed
   right of a 15px term on a 350px screen leaves neither enough room. */
@container vt-section (max-width: 860px) {
  .vt-specs,
  .vt-specs--cols-2 { grid-template-columns: minmax(0, 1fr); }
}
@container vt-section (max-width: 600px) {
  .vt-specs .vt-specs__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .vt-specs .vt-specs__value { text-align: left; }
}