/* /intrebari/cat-costa-un-divort/ — only what site.css + answer.css cannot do. */

/* Comparison table: column rhythm of design/reference/03 (252 / 340 / 320 / rest of 1248). */
@media (min-width: 1200px) {
  .cost-table { table-layout: fixed; }
  .cost-table thead th:nth-child(1) { width: 20%; }
  .cost-table thead th:nth-child(2) { width: 28%; }
  .cost-table thead th:nth-child(3) { width: 26%; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* Four columns leave ~200px per text cell here: keep the stacked cards of the phone layout. */
  .cost-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cost-table, .cost-table tbody, .cost-table tr, .cost-table th, .cost-table td { display: block; width: 100%; }
  .cost-table tr { border-top: 1px solid var(--ink); padding: 18px 0 6px; }
  .cost-table tbody tr:last-child { border-bottom: 1px solid var(--ink); }
  .cost-table th, .cost-table td { padding: 0 0 14px; border: 0; max-width: var(--measure); }
  .cost-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
}
.cost-table td > * + * { margin-top: 12px; }
.cost-table__practice { color: var(--ink); }
.cost-table__amount { display: block; }
.cost-table__amount + .cost-table__amount,
.cost-table .figure .cost-table__amount + small { margin-top: 14px; }

/* Court-fee table: row headers are descriptions, not names — body type instead of the serif. */
.fee-table tbody th { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); padding-block: 18px; }
.fee-table tbody td { padding-block: 18px; }
.fee-table tbody th small { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.fee-table td.figure { white-space: nowrap; width: 1%; }

/* Phones: the two-column fee table stacks — description, then the amount under it. */
@media (max-width: 599px) {
  .fee-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fee-table, .fee-table tbody, .fee-table tr, .fee-table tbody th, .fee-table tbody td { display: block; width: auto; }
  .fee-table tbody tr { border-bottom: 1px solid var(--rule); padding-block: 16px; }
  .fee-table tbody tr:first-child { border-top: 1px solid var(--ink); }
  .fee-table tbody tr:last-child { border-bottom-color: var(--ink); }
  .fee-table tbody th, .fee-table tbody td { padding: 0; border: 0; }
  .fee-table tbody td.figure { margin-top: 6px; width: auto; }
}

/* Preview only: keep gate markers from touching the next stacked label. */
.cost-table td > .gate { margin-bottom: 8px; }