/* 85 Specs (#parametry): the 13 rows on a lifted sheet; below 600 px they stack into label/value pairs. */

.ar-specs { padding-block-end: var(--wp--preset--spacing--60); }

.ar-specs__sheet {
  margin-block-start: var(--wp--preset--spacing--40);
  padding: 0.5rem clamp(1rem, 3vw, 2rem) 0.75rem;
  border: 1px solid var(--ar-line);
  background-color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
}

.ar-specs__table { width: 100%; border-collapse: collapse; }
.ar-specs__table :is(th, td) { padding: 0.75rem 1.5rem 1.05rem 0; text-align: start; vertical-align: baseline; }
.ar-specs__table td { color: var(--ar-fg); font-size: var(--wp--preset--font-size--large); }
.ar-specs__table tbody th { width: 32%; }

/* Each row hangs from a hairline, its first 1.5 rem lit (as in .ar-readout) */
.ar-specs__table tbody tr {
  background:
    linear-gradient(var(--ar-fg-muted), var(--ar-fg-muted)) 0 0 / 1.5rem 1px no-repeat,
    linear-gradient(var(--ar-line), var(--ar-line)) 0 0 / 100% 1px no-repeat;
}

.ar-specs__note { margin-block-start: 1.25rem; }

@media (max-width: 599.98px) {
  .ar-specs__sheet { padding-block-start: 0; }
  .ar-specs__table,
  .ar-specs__table :is(tbody, tr, th, td) { display: block; }
  /* the column headings are redundant once rows stack, but stay for assistive tech */
  .ar-specs__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ar-specs__table :is(th, td) { padding: 0; }
  .ar-specs__table tbody tr { padding-block: 0.75rem 1.05rem; }
  .ar-specs__table tbody th { width: auto; margin-block-end: 0.35rem; }
}