/* Artykuły bazy wiedzy: czytanie na jasnym dniu w wąskiej kolumnie (ok. 68ch), spis treści obok na dużym ekranie.
   Tylko tokeny z main.css; bez nowych animacji. Wspólny dla /baza-wiedzy/jvc-nz7-vs-sony-xw5000es/ i /baza-wiedzy/dolby-atmos-vs-dtsx/. */

.page-head + .art { padding-top: 0; }

.art__grid { display: grid; gap: var(--sp-3) var(--sp-5); align-items: start; }
.art__by { grid-column: 1 / -1; margin: 0; padding-top: var(--sp-2); border-top: 2px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); max-width: none; }
.art__body { min-width: 0; max-width: 68ch; }
.art__body > p { color: var(--ink); }
.art__body > p + p { margin-top: 0; }

/* Spis treści: zwykła lista linków; na telefonie nad tekstem, na dużym ekranie przyklejony z prawej. */
.art__toc { font-size: var(--fs-small); }
.art__toc-h { font-weight: 650; margin-bottom: .5rem; color: var(--ink); }
.art__toc ol { list-style: none; display: grid; gap: .1rem; border-left: 2px solid var(--line); }
.art__toc a { display: block; padding: .4rem 0 .4rem 1rem; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.art__toc a:hover { color: var(--ink); text-decoration: underline; }
@media (min-width: 64rem) {
  .art__grid { grid-template-columns: minmax(0, 68ch) minmax(14rem, 1fr); }
  .art__toc { grid-column: 2; grid-row: 2; position: sticky; top: 6rem; }
  .art__body { grid-column: 1; grid-row: 2; }
}

/* Nagłówki pytań: mniejsze niż H2 sekcji strony, więcej miejsca nad niż pod. */
.art__h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); line-height: 1.15; letter-spacing: -.01em;
  margin: var(--sp-5) 0 var(--sp-2); max-width: 30ch; scroll-margin-top: 6rem;
}
.art__body > .art__h2:first-child, .art__fig + .art__h2 { margin-top: var(--sp-4); }
.art__body > .art__fig:first-child { margin-top: var(--sp-2); }

/* Zdjęcie w ramie ekranu; pionowe zdjęcie węższe, żeby nie zajmowało całego ekranu telefonu. */
.art__fig { margin: var(--sp-3) 0 var(--sp-4); }
.art__fig--portrait { max-width: 20rem; }

/* Tabela porównawcza: prawdziwa tabela z podpisem; na wąskim ekranie przewija się w swojej ramce, nie strona. */
.art__table { margin: var(--sp-3) 0 var(--sp-4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art__table:focus-visible { outline-offset: 4px; }
.art__table table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.art__table caption { caption-side: top; text-align: left; font-weight: 650; color: var(--ink); padding-bottom: .75rem; line-height: 1.4; }
.art__table th, .art__table td { text-align: left; vertical-align: top; padding: .7rem .9rem .7rem 0; }
.art__table thead th { font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); border-bottom: 2px solid var(--line); white-space: nowrap; }
.art__table tbody th { font-weight: 550; color: var(--ink-2); width: 34%; }
.art__table tbody tr + tr > * { border-top: 1px solid var(--line); }
.art__table td { color: var(--ink); }
@media (max-width: 30rem) {
  .art__table table { font-size: .95rem; }
  .art__table th, .art__table td { padding-right: .6rem; }
  .art__table thead th { white-space: normal; }
}

/* Listy „jeśli...”: dwie kolumny od średniego ekranu. */
.art__groups { display: grid; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); }
.art__group .h3 { margin-bottom: .75rem; }
.art__group .ticks { margin-bottom: 0; }
@media (min-width: 48rem) { .art__groups { grid-template-columns: 1fr 1fr; } }

/* Źródła na końcu tekstu. */
.art__h2--src { font-size: var(--fs-h3); }
.art__src-lead { color: var(--ink-2); font-size: var(--fs-small); }
.art__src { padding-left: 1.4rem; display: grid; gap: .5rem; font-size: var(--fs-small); color: var(--ink-2); }
.art__src a { color: var(--ink); overflow-wrap: anywhere; }

/* Przejścia tonów po tekście: FAQ (popołudnie), CTA (zmierzch), formularz (noc). */
.art + .faq { padding-top: var(--sp-section); }
.art-cta .lead-txt { max-width: 46ch; }
.art-cta + .form-scene { padding-top: var(--sp-section); }

/* Nazwy modeli w nagłówku nie łamią się na łączniku. */
.nw { white-space: nowrap; }

/* Na telefonie: pionowe zdjęcie mniejsze, linki spisu treści wyższe (cel dotyku). */
@media (max-width: 47.99rem) {
  .art__fig--portrait { max-width: 15rem; }
  .art__toc a { padding-block: .65rem; }
}

/* Pionowe zdjęcie obok tekstu na szerszym ekranie (tekst opływa je z lewej). */
@media (min-width: 48rem) {
  .art__fig--portrait { float: right; width: 15rem; margin: .4rem 0 var(--sp-3) var(--sp-4); }
  .art__h2, .art__groups, .art__table { clear: both; }
}