/* ============================================================
   klasyk.pl — lista marek (/modele) i strona marki (/modele/{marka})
   BDS etap 3, wdrożenie 2. Pole strony: .w-browse, na stronie marki
   .split + .rail. Części wspólne: okruszki, .ghead, .sec-more, .chip,
   .fld, .btn, .empty, .lrow, .gc, .r-row, .brand. Tu: rejestr marek,
   tabela modeli marki, plansza median marki.
   ============================================================ */
.mk{ padding-bottom:var(--sp-8); }
.mk h1{ margin:0; font-size:var(--fs-title); line-height:var(--lh-title); font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.mk-lead{ margin:var(--sp-3) 0 0; max-width:40rem; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--lead); }
.mk-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); }
.mk-note{ margin:var(--sp-3) 0 0; max-width:40rem; font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--meta); }
.mk-sec{ margin-top:var(--sp-7); }
.mk-sec > .ghead, .mk-main > section > .ghead{ margin-bottom:var(--sp-4); }
.mk-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); }
.mk-after span a, .mk-found a, .mk-desc a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ---------- lista marek ---------- */
.mk-head{ margin-top:var(--sp-4); }
.mk-tools{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-5); }
.mk-search{ position:relative; flex:0 1 26rem; color:var(--meta); }
.mk-search[hidden]{ display:none; }
.mk-search .ic{ position:absolute; left:14px; top:14px; pointer-events:none; }
.mk-search .fld{ padding-left:44px; }
.mk-count{ margin:0; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--meta); font-variant-numeric:tabular-nums; }
.mk-count b{ font-weight:700; color:var(--ink); }
.mk-jump{ display:flex; flex-wrap:wrap; gap:0 var(--sp-5); margin-top:var(--sp-4); }
.mk-jump[hidden]{ display:none; }
.mk-jump a{ display:inline-flex; align-items:center; min-height:2.75rem; font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; color:var(--meta-strong); }
.mk-jump a:hover{ color:var(--accent); }
.mk-reg{ columns:5; column-gap:var(--sp-6); margin-top:var(--sp-4); }
.mk-grp{ padding-top:var(--sp-5); scroll-margin-top:var(--sp-5); }
.mk-grp > .ghead{ break-inside:avoid; break-after:avoid; flex-direction:column; align-items:flex-start; gap:0; margin-bottom:var(--sp-2); }
.mk-grp ul{ list-style:none; margin:0; padding:0; }
.mk-grp li{ break-inside:avoid; }
.mk-grp[hidden], .mk-grp li[hidden]{ display:none; }
.mk-b{ display:flex; align-items:center; gap:var(--sp-3); min-height:2.75rem; font-size:var(--fs-text); line-height:var(--lh-text); font-weight:600; color:var(--ink); }
.mk-b:hover{ color:var(--accent); }
.mk > .empty{ margin-top:var(--sp-5); }
.mk > .empty[hidden]{ display:none; }
.mk-next{ margin-top:var(--sp-8); }
.mk-next-g{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--sp-5); }
.mk-next-g .lrow{ border-bottom:1px solid var(--line); color:var(--meta); }

/* ---------- strona marki: nagłówek i opis marki z bazy ---------- */
.mk-bhead{ margin-top:var(--sp-4); }
.mk-btitle{ display:flex; align-items:center; gap:var(--sp-4); margin-top:var(--sp-3); }
.mk-desc{ max-width:40rem; margin-top:var(--sp-3); font-size:var(--fs-text); line-height:var(--lh-text); color:var(--text); }
.mk-desc > *{ margin:var(--sp-3) 0 0; }
.mk-desc > p:first-child{ margin-top:0; font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--lead); }
.mk-desc :is(h2,h3){ margin-top:var(--sp-5); font-size:var(--fs-card); line-height:var(--lh-card); font-weight:700; color:var(--ink); }
.mk-desc :is(ul,ol){ padding-left:1.25rem; }
.mk-desc table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:var(--fs-small); line-height:var(--lh-small); font-variant-numeric:tabular-nums; }
.mk-desc :is(th,td){ padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom:1px solid var(--line); text-align:left; }
.mk-split{ margin-top:var(--sp-6); }
.mk-main{ min-width:0; }
.mk-main > .mk-sec:first-child{ margin-top:0; }

/* tabela modeli marki; skala rysunku: --k px na metr auta */
.mk-models{ --k:30px; width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.mk-models th{ padding:0 var(--sp-3) 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; white-space:nowrap; }
.mk-models td{ padding:var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom:1px solid var(--line); vertical-align:middle; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--text); }
.mk-models .r{ text-align:right; }
.mk-models tbody tr{ position:relative; }
.mk-models tbody tr:hover{ background:var(--surface); }
.mk-models .c-art{ width:calc(6 * var(--k) + var(--sp-4)); padding-right:var(--sp-4); }
.mk-rys{ display:flex; align-items:flex-end; height:calc(1.7 * var(--k)); border-bottom:1px solid var(--tick); }
.mk-rys img{ display:block; flex:none; width:calc(var(--len) * var(--k)); max-width:100%; height:auto; }
.mk-mname{ display:block; font-size:var(--fs-card); line-height:var(--lh-card); font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.mk-mname::after{ content:""; position:absolute; inset:0; }
.mk-models tr:hover .mk-mname{ color:var(--accent); }
.mk-models .c-yr{ white-space:nowrap; color:var(--meta-strong); }
.mk-models td.c-med{ font-size:var(--fs-price); line-height:var(--lh-price); font-weight:700; letter-spacing:-.015em; color:var(--ink); white-space:nowrap; }
.mk-models .c-half, .mk-models .c-of{ display:none; white-space:nowrap; }
.mk-models .c-go{ width:1.5rem; padding-right:0; color:var(--meta); }
.mk-dash{ color:var(--meta); font-weight:400; }
.mk-cl{ display:none; }

/* plansza median marki: oś logarytmiczna 1 tys.–1 mln zł */
.mk-idx{ padding:1.25rem; background:var(--surface); border-radius:var(--r-card); }
.mk-idx ul{ list-style:none; margin:0; padding:0; }
.mk-idx li + li{ border-top:1px solid var(--line); }
.mk-idx li a, .mk-idx-ax{ display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr) 2.5rem; column-gap:var(--sp-3); align-items:center; }
.mk-idx li a{ min-height:2.75rem; color:var(--text); }
.mk-idx b{ font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; color:var(--ink); }
.mk-idx li a:hover b{ color:var(--accent); }
.mk-idx-ax{ margin-top:var(--sp-3); padding-bottom:var(--sp-1); border-bottom:1px solid var(--line); font-size:var(--fs-kicker); line-height:var(--lh-kicker); color:var(--meta); }
.mk-idx-ax > span:last-child{ text-align:right; }
.mk-idx-sc{ position:relative; display:block; height:1rem; }
.mk-idx-sc i{ position:absolute; top:0; transform:translateX(-50%); font-style:normal; white-space:nowrap; }
.mk-idx-sc i + i{ transform:translateX(-.6em); }
.mk-idx li .mk-idx-sc{ background:linear-gradient(var(--tick), var(--tick)) 33.33% 0 / 1px 100% no-repeat, linear-gradient(var(--tick), var(--tick)) 66.67% 0 / 1px 100% no-repeat; }
.mk-bar{ position:absolute; inset:0; }
.mk-bar i{ position:absolute; top:50%; display:block; transform:none; }
.mk-bar .iq{ left:var(--a); width:calc(var(--b) - var(--a)); height:.5rem; margin-top:-.25rem; border-radius:var(--r-bar); background:var(--ink); }
.mk-bar .md{ left:var(--m); width:2px; height:.875rem; margin:-.4375rem 0 0 -1px; background:var(--ink); box-shadow:0 0 0 1.5px var(--surface); }
.mk-idx-d{ text-align:right; font-size:var(--fs-small); line-height:var(--lh-small); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.mk-idx > .sec-more{ margin-top:var(--sp-3); }

/* szpalta: wydarzenia, firmy, newsletter (część add-category-to-newsletter) */
.mk-ev{ list-style:none; margin:0; padding:0; }
.mk-ev li{ display:grid; grid-template-columns:4.75rem minmax(0,1fr); column-gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--line);
  font-size:var(--fs-small); line-height:var(--lh-small); }
.mk-ev span{ color:var(--meta-strong); font-variant-numeric:tabular-nums; }
.mk-ev :is(a,b){ font-weight:600; color:var(--ink); }
.mk-ev a:hover{ color:var(--accent); }
.mk-biz li{ grid-template-columns:minmax(0,1fr); }
.mk-biz span{ font-size:var(--fs-meta); line-height:var(--lh-meta); color:var(--meta); }
.mk-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); }
.mk-nl p{ margin:0; }
.mk-nl p a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.mk-nl .add-category-to-newsletter > .btn{ align-self:flex-start; margin-top:var(--sp-1); }

/* giełda marki, zaproszenie */
.mk-ads{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-5); }
.mk-ads > div{ display:grid; min-width:0; }
.mk-ads > div:nth-child(n+5){ display:none; }
.mk-invite{ padding:1.25rem; background:var(--surface); border-radius:var(--r-card); }
.mk-invite p{ margin:0 0 var(--sp-3); max-width:40rem; font-size:var(--fs-text); line-height:var(--lh-text); color:var(--text); }
/* mały rysunek serii obok zaproszenia, do 699 px nad tekstem */
.mk-invite--art{ display:grid; grid-template-columns:minmax(0,40rem) auto; justify-content:start; column-gap:2rem; }
.mk-invite--art > .il{ grid-column:2; grid-row:1 / span 2; align-self:center; display:block; width:auto; height:7rem; }

/* artykuły marki: wiersz .r-row w dwóch kolumnach, stronicowanie .pager z pomocnika pager */
.mk-found{ margin:0 0 var(--sp-3); font-size:var(--fs-small); line-height:var(--lh-small); color:var(--meta-strong); }
.mk-found b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.mk-arts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--sp-7); }
.mk-arts .r-row{ grid-template-columns:11rem minmax(0,1fr); grid-template-areas:"th hd" "th bd"; grid-template-rows:auto 1fr; gap:var(--sp-1) var(--sp-4); padding:var(--sp-4) 0; }
.mk-arts .r-row:nth-child(-n+2){ border-top:0; }
.mk-arts .r-hd, .mk-arts .r-bd{ grid-column:2; }
.mk-arts .r-tt{ font-size:var(--fs-card); line-height:var(--lh-card); font-weight:700; letter-spacing:-.015em; }
.mk-arts .r-te{ font-size:var(--fs-small); line-height:var(--lh-small); }
.mk-others{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.mk-others .chip{ gap:var(--sp-2); padding:0 14px 0 10px; color:var(--ink); }


/* ---------- szerokości ---------- */
@media (min-width:1680px){
  .mk-reg{ columns:7; }
  .mk-models .c-half, .mk-models .c-of{ display:table-cell; }
  .mk-ads{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .mk-ads > div:nth-child(n+5){ display:grid; }
}
@media (max-width:999px){
  .mk-reg{ columns:3; }
  .mk-arts{ grid-template-columns:minmax(0,1fr); }
  .mk-arts .r-row:nth-child(2){ border-top:1px solid var(--line); }
  .mk-ads{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:699px){
  .mk{ padding-bottom:var(--sp-7); }
  .mk-tools{ flex-direction:column; align-items:stretch; gap:var(--sp-2); }
  .mk-search{ flex:none; }
  .mk-jump{ flex-wrap:nowrap; margin-inline:-1.125rem; padding-inline:1.125rem; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
  .mk-reg{ columns:1; }
  .mk-grp ul{ columns:2; column-gap:var(--sp-3); }
  .mk-next-g{ grid-template-columns:minmax(0,1fr); }
  .mk-invite--art{ grid-template-columns:minmax(0,1fr); }
  .mk-invite--art > .il{ grid-column:1; grid-row:auto; justify-self:start; height:4.5rem; margin-bottom:var(--sp-3); }
  /* tabela modeli: rysunek | nazwa i mediana | lata i artykuły */
  .mk-models{ --k:22px; display:block; }
  .mk-models thead{ display:none; }
  .mk-models tbody{ display:block; }
  .mk-models tbody tr{ display:grid; grid-template-columns:calc(5.2 * var(--k)) minmax(0,1fr) auto; grid-template-areas:"art model med" "art meta meta"; gap:0 var(--sp-3);
    align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }
  .mk-models td{ display:block; padding:0; border:0; }
  .mk-models .c-art{ grid-area:art; width:auto; padding:0; }
  .mk-rys{ overflow:hidden; }
  .mk-models .c-model{ grid-area:model; }
  .mk-models td.c-med{ grid-area:med; }
  .mk-models .c-yr{ grid-area:meta; font-size:var(--fs-meta); }
  .mk-models .c-n{ grid-area:meta; justify-self:end; font-size:var(--fs-meta); color:var(--meta-strong); }
  .mk-models .c-go, .mk-models .c-n .mk-dash{ display:none; }
  .mk-cl{ display:inline; }
  .mk-ads{ gap:var(--sp-4) var(--sp-3); }
  .mk-arts .r-row{ grid-template-columns:6.5rem minmax(0,1fr); grid-template-areas:"th hd"; }
  .mk-arts .r-bd{ display:none; }
  .mk-arts .r-tt{ font-size:var(--fs-text); line-height:var(--lh-text); }
  .mk-others{ flex-wrap:nowrap; margin-inline:-1.125rem; padding-inline:1.125rem; overflow-x:auto; scrollbar-width:none; }
  .mk-others .chip{ flex:none; }
}