/* ============================================================
   klasyk.pl — strona modelu jako dossier (/modele/{marka}/{model},
   model z kartą) · BDS etap 3, wdrożenie 3, wzorzec „Model-03”.
   Szkielet: .w-read, .split + .rail. Części wspólne: okruszki, .ghead,
   .sec-more, .tabs, .btn, .lrow, .rail-card, .rail-grp, .pcard, .gc,
   .r-row, .brand. Tu: nagłówek, plansza z rysunkiem i wymiarami, lista
   dossier, tabela nadwozi, oś czasu, relacje, listy, opis z bazy.
   Skala rysunku: --k px na metr auta, --len = długość w metrach.
   Arkusz bez wyjątków bramki tokenów.
   ============================================================ */
.md-page{ padding-bottom:var(--sp-8); }
.md-kicker{ margin:0; font-size:var(--fs-kicker); line-height:var(--lh-kicker); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; font-feature-settings:"case"; color:var(--meta-strong); }
.md-sec{ margin-top:var(--sp-7); }
.md-page section[id]{ scroll-margin-top:5rem; } /* cel kotwicy pod belką serwisu */
.md-page .ghead{ margin-bottom:var(--sp-4); }
.md-after{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-5); margin:var(--sp-4) 0 0;
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--meta-strong); }
.md-after span a, .md-about a, .md-nl div div a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.md-about a:hover{ color:var(--accent-hover); }

/* rozwinięcie na telefonie: <details>; od 700 px otwarte i bez przycisku (reguła na dole) */
.md-fold > summary{ display:flex; margin-top:var(--sp-4); list-style:none; cursor:pointer; }
.md-fold > summary::-webkit-details-marker{ display:none; }
.md-fold[open] > summary{ margin-bottom:var(--sp-2); }

/* ---------- nagłówek ---------- */
.md-top{ display:grid; grid-template-columns:minmax(0,1fr) 23rem; column-gap:var(--sp-7); align-items:start; margin-top:var(--sp-4); }
.md-top--one{ grid-template-columns:minmax(0,1fr); }
.md-top h1{ margin:var(--sp-2) 0 0; font-size:var(--fs-title); line-height:var(--lh-title); font-weight:700; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.md-years{ margin:var(--sp-2) 0 0; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--meta-strong); font-variant-numeric:tabular-nums; }
.md-lead{ margin:var(--sp-3) 0 0; max-width:40rem; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--lead); text-wrap:pretty; }
.md-brand{ display:inline-flex; align-items:center; gap:var(--sp-3); min-height:2.75rem; margin-top:var(--sp-3); font-size:var(--fs-small); line-height:var(--lh-small);
  font-weight:600; color:var(--ink); }
.md-brand:hover{ color:var(--accent); }

/* ---------- plansza: rysunek z wymiarami i liczby ---------- */
.md-hero{ --k:124px; display:grid; grid-template-columns:minmax(0,1fr) 22rem; column-gap:var(--sp-6); align-items:center; margin-top:var(--sp-6);
  padding:var(--sp-6); background:var(--surface); border-radius:var(--r-card); }
.md-fig{ display:grid; grid-template-columns:auto auto; grid-template-areas:"car dh" "dl ."; justify-content:start; column-gap:var(--sp-3); row-gap:var(--sp-2); margin:0; min-width:0; }
.md-fig-car{ grid-area:car; display:block; border-bottom:1px solid var(--tick); }
.md-fig-car img{ display:block; width:calc(var(--len) * var(--k)); max-width:100%; height:auto; }
.md-dim-h{ grid-area:dh; display:flex; align-items:center; border-left:1px solid var(--meta); padding-left:var(--sp-2); }
.md-dim-l{ grid-area:dl; display:flex; justify-content:center; border-top:1px solid var(--meta); padding-top:var(--sp-1); }
.md-dim-h i, .md-dim-l i{ font-style:normal; font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--meta-strong); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* kolumny auto: data z dniem w jednym wierszu; gdy się złamie, podpisy rzędu trzyma margin-top:auto */
.md-hero-f{ display:grid; grid-template-columns:auto auto; gap:var(--sp-5) var(--sp-4); margin:0; }
.md-hero-f div{ display:flex; flex-direction:column; }
.md-hero-f dt{ order:2; margin-top:auto; font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--meta); }
.md-hero-f dd{ margin:0; font-size:var(--fs-block); line-height:var(--lh-block); font-weight:700; letter-spacing:-.015em; color:var(--ink); font-variant-numeric:tabular-nums; }
.md-hero--s{ --k:52px; grid-template-columns:auto minmax(0,1fr); padding:var(--sp-5) var(--sp-6); }
.md-hero--none{ grid-template-columns:minmax(0,1fr); }
.md-hero--s .md-hero-f, .md-hero--none .md-hero-f{ grid-template-columns:repeat(4, auto); }
.md-nav{ margin-top:var(--sp-5); overflow-x:auto; scrollbar-width:none; }

/* ---------- dossier i szpalta ---------- */
.md-split{ margin-top:var(--sp-6); }
.md-split > section, .md-split > div{ min-width:0; }
.md-dl{ margin:0; }
.md-dl > div{ display:grid; grid-template-columns:11rem minmax(0,1fr); column-gap:var(--sp-5); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
.md-dl dt{ font-size:var(--fs-small); line-height:var(--lh-text); color:var(--meta); }
.md-dl dd{ margin:0; font-size:var(--fs-text); line-height:var(--lh-text); color:var(--text); text-wrap:pretty; font-variant-numeric:tabular-nums; }
.md-dl dd span{ display:block; }
.md-dl dd b{ font-weight:700; color:var(--ink); }
.md-seek{ display:flex; flex-direction:column; gap:var(--sp-2); background:var(--surface); border-color:transparent; }
.md-seek h2{ margin:0 0 var(--sp-2); font-size:var(--fs-block); line-height:var(--lh-block); font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.md-seek p:last-child{ margin:var(--sp-2) 0 0; font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--meta); }
.md-page .rail-grp .lrow{ padding-left:0; border-bottom:1px solid var(--line); color:var(--meta); }
.md-page .rail-grp .lrow:hover{ background:none; }
.md-page .rail-grp .lrow:hover .lrow-title{ color:var(--accent); }

/* ---------- nadwozia ---------- */
.md-tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.md-tbl thead th{ padding:0 var(--sp-4) var(--sp-2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-kicker); line-height:var(--lh-kicker); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; font-feature-settings:"case"; color:var(--meta-strong); text-align:left; }
.md-tbl td, .md-tbl tbody th{ padding:var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom:1px solid var(--line); font-size:var(--fs-text); line-height:var(--lh-text); color:var(--text); text-align:left; }
.md-tbl tbody th{ font-weight:700; color:var(--ink); }
.md-tbl tbody th span{ margin-left:var(--sp-1); font-weight:400; color:var(--meta); }
.md-tbl .r{ text-align:right; padding-right:0; }
.md-tbl td.r{ font-weight:700; color:var(--ink); }

/* ---------- oś czasu ---------- */
.md-tl{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--sp-5) var(--sp-4); list-style:none; margin:0; padding:0; }
.md-tl li{ display:flex; flex-direction:column; gap:var(--sp-1); padding-top:var(--sp-3); border-top:2px solid var(--ink); }
.md-tl b{ font-size:var(--fs-card); line-height:var(--lh-card); font-weight:700; letter-spacing:-.015em; color:var(--ink); font-variant-numeric:tabular-nums; }
.md-tl span{ font-size:var(--fs-small); line-height:var(--lh-small); color:var(--text); text-wrap:pretty; }

/* ---------- poprzednik i następca, rywale ---------- */
.md-fam, .md-rel ul, .md-list{ list-style:none; margin:0; padding:0; }
.md-fam{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--sp-7); }
.md-fam li{ display:flex; align-items:center; gap:var(--sp-4); min-width:0; padding-bottom:var(--sp-3); border-bottom:1px solid var(--line); }
.md-rys{ --k:26px; flex:none; display:flex; align-items:flex-end; width:calc(5.2 * var(--k)); border-bottom:1px solid var(--tick); }
.md-rys img{ display:block; width:calc(var(--len) * var(--k)); height:auto; }
.md-fam-n{ min-width:0; display:flex; flex-direction:column; font-size:var(--fs-card); line-height:var(--lh-card); }
.md-fam-n small{ font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--meta); }
.md-fam-n :is(a,b), .md-rel li :is(a,b), .md-list :is(a,b){ font-weight:600; color:var(--ink); }
.md-fam-n a, .md-rel li a{ text-decoration:underline; text-decoration-color:var(--tick); text-underline-offset:3px; }
.md-fam-n a:hover, .md-rel li a:hover, .md-list a:hover{ color:var(--accent); }
.md-rel{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--sp-7); align-items:start; }
.md-rel ul{ margin-top:var(--sp-2); }
.md-rel li{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--line);
  font-size:var(--fs-text); line-height:var(--lh-text); }
.md-rel li span{ flex:none; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--meta-strong); font-variant-numeric:tabular-nums; }

/* ---------- przewodniki: wiersz .r-row w układzie strony ---------- */
.md-guides{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--sp-7); }
.md-guides .r-row{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"hd go" "bd go"; gap:var(--sp-1) var(--sp-4); align-items:center; padding:var(--sp-4) 0; border-top:1px solid var(--line); }
.md-guides:not(.md-guides--more) .r-row:nth-child(-n+2){ border-top:0; padding-top:0; }
.md-guides .r-row > .ic{ grid-area:go; color:var(--meta); }
/* wiersz ze zdjęciem: miniatura 3:2 z lewej, bez strzałki */
.md-guides .r-row:has(.r-th){ grid-template-columns:11rem minmax(0,1fr); grid-template-areas:"th hd" "th bd"; grid-template-rows:auto 1fr; align-items:start; }
.md-guides .r-th ~ .ic{ display:none; }
.md-guides .r-bd{ grid-area:bd; margin-top:0; }
.md-guides .r-tt{ font-size:var(--fs-card); line-height:var(--lh-card); font-weight:700; letter-spacing:-.015em; }
.md-guides .r-te{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:var(--fs-small); line-height:var(--lh-small); }

/* ---------- giełda, warsztaty, wydarzenia ---------- */
.md-ads{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-5); }
.md-ads > div{ display:grid; min-width:0; }
.md-two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--sp-7); margin-top:var(--sp-7); }
.md-two--one{ grid-template-columns:minmax(0,1fr); }
.md-two > section{ min-width:0; }
.md-list li{ display:grid; grid-template-columns:minmax(0,1fr); padding:var(--sp-3) 0; border-bottom:1px solid var(--line);
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--meta-strong); }
.md-list :is(a,b){ font-size:var(--fs-text); line-height:var(--lh-text); }
.md-list--ev li{ grid-template-columns:5.5rem minmax(0,1fr); column-gap:var(--sp-3); align-items:baseline; }
.md-list--ev span{ font-variant-numeric:tabular-nums; }

/* ---------- opis modelu (treść z bazy), pytania, newsletter ---------- */
.md-bottom{ margin-top:var(--sp-7); }
.md-about{ max-width:44rem; font-size:var(--fs-text); line-height:var(--lh-art); color:var(--text); }
.md-about > :first-child{ margin-top:0; }
.md-about :is(p,ul,ol,table){ margin:0 0 var(--sp-4); }
.md-about :is(ul,ol){ padding-left:1.25rem; }
.md-about li{ margin-bottom:var(--sp-2); }
.md-about :is(h2,h3){ margin:var(--sp-6) 0 var(--sp-3); font-size:var(--fs-block); line-height:var(--lh-block); font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.md-about h3{ font-size:var(--fs-card); line-height:var(--lh-card); }
.md-about strong{ color:var(--ink); }
.md-about table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); line-height:var(--lh-small); }
.md-about td{ padding:var(--sp-2) var(--sp-4) var(--sp-2) 0; border-bottom:1px solid var(--line); vertical-align:top; }
.md-faq details{ border-bottom:1px solid var(--line); }
.md-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:3.5rem; padding:var(--sp-3) 0; list-style:none; cursor:pointer;
  font-size:var(--fs-text); line-height:var(--lh-text); font-weight:600; color:var(--ink); }
.md-faq summary::-webkit-details-marker{ display:none; }
.md-faq summary .ic{ flex:none; color:var(--meta); transition:transform var(--dur-2) var(--ease-out); }
.md-faq details[open] summary .ic{ transform:rotate(180deg); }
.md-faq summary:hover{ color:var(--accent); }
.md-nl .add-category-to-newsletter{ display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-small); line-height:var(--lh-small); color:var(--text); }
.md-nl :is(.button, button){ display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; margin-top:var(--sp-1); padding:0 var(--sp-4);
  border:1px solid var(--tick); border-radius:var(--r-control); background:none; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; }
.md-nl :is(.button, button):hover{ border-color:var(--ink); }

/* ---------- szerokości ---------- */
@media (min-width:700px){
  .md-fold[open] > summary{ display:none; }
}
@media (max-width:1099px){
  .md-hero{ --k:96px; grid-template-columns:minmax(0,1fr); row-gap:var(--sp-5); }
  .md-hero--s{ --k:52px; }
  .md-hero-f{ grid-template-columns:repeat(4, auto); }
}
@media (max-width:999px){
  .md-top{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-5); }
  .md-tl{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .md-guides{ grid-template-columns:minmax(0,1fr); }
  .md-guides:not(.md-guides--more) .r-row:nth-child(2){ border-top:1px solid var(--line); padding-top:var(--sp-4); }
  .md-ads{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .md-two{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-7); }
}
@media (max-width:699px){
  /* telefon: kolejność jak w kodzie – nazwa → karta mediany → plansza */
  .md-page{ padding-bottom:var(--sp-7); }
  .md-hero{ --k:58px; margin-top:var(--sp-5); padding:var(--sp-4); }
  .md-hero--s{ --k:42px; }
  .md-hero-f, .md-hero--s .md-hero-f, .md-hero--none .md-hero-f{ grid-template-columns:auto auto; gap:var(--sp-4) var(--sp-3); }
  .md-dim-h{ padding-left:var(--sp-1); }
  .md-dl > div{ grid-template-columns:minmax(0,1fr); row-gap:2px; }
  .md-tbl thead{ display:none; }
  .md-tbl, .md-tbl tbody{ display:block; }
  .md-tbl tr{ display:grid; grid-template-columns:1fr auto; gap:2px var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
  .md-tbl td, .md-tbl tbody th{ display:block; padding:0; border:0; }
  .md-tbl td{ font-size:var(--fs-small); line-height:var(--lh-small); }
  .md-tbl td[data-l]{ grid-column:1 / -1; }
  .md-tbl td[data-l]::before{ content:attr(data-l) ": "; color:var(--meta); }
  .md-tbl td.r{ grid-column:2; grid-row:1; font-size:var(--fs-text); }
  .md-tl{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-4) var(--sp-3); }
  .md-fam, .md-rel{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-3); }
  .md-rel{ row-gap:var(--sp-5); }
  .md-guides .r-bd{ display:none; }
  .md-guides .r-row{ grid-template-areas:"hd go"; }
  .md-guides .r-row:has(.r-th){ grid-template-columns:6.5rem minmax(0,1fr); grid-template-areas:"th hd"; align-items:center; }
  .md-guides .r-row, .md-guides:not(.md-guides--more) .r-row:nth-child(2){ padding:var(--sp-3) 0; }
  .md-guides .r-tt{ font-size:var(--fs-text); line-height:var(--lh-text); }
  .md-ads{ gap:var(--sp-4) var(--sp-3); }
}

/* Przejście rysunku między stronami median i stroną modelu: animuje się tylko
   rysunek z tego samego pliku (nazwa: ModelLineArtAsset::transitionName),
   reszta strony podmienia się od razu. Opis: design-system-komponenty.md. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-new(*):only-child{ animation:none; }
  ::view-transition-old(*):only-child{ display:none; }
  ::view-transition-group(*){ animation-duration:var(--dur-3); animation-timing-function:var(--ease-out); }
}