/* CarbonPWR - landing pages per body (/carbon-bmw-m3-g80 ...) and guides (/poradnik-..., /poradniki).
   Loaded after landing.css and shop.css; only adds .art* classes. Page frame, crumbs, .pcard2, .faq, .pill come from the shop CSS. */
.art{overflow-wrap:break-word}
.art-head{margin:0 0 clamp(40px,6vw,72px)}
.art-head .eyebrow{margin-bottom:16px}
.art-head h1{font-size:clamp(32px,5.4vw,68px);line-height:1;max-width:18ch;margin:0 0 24px}
.art-intro,.art-lead{max-width:720px}
.art-intro p,.art-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink);font-weight:400}
.art-intro p+p{margin-top:14px}
.art-lead{color:var(--muted);font-weight:500}
.art-meta{margin-top:16px;font-size:13px;font-weight:600;color:var(--muted)}
.art a:not(.pill):not(.art-card):not(.crumbs a):not(.pcard2 a){color:var(--violet);font-weight:600;text-underline-offset:3px}
.art a:not(.pill):not(.art-card):not(.crumbs a):not(.pcard2 a):hover{color:var(--ink)}
.art .crumbs a{color:var(--muted)}

/* three quick facts under the intro */
.art-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;margin:36px 0 0;border-top:1px solid var(--line)}
.art-facts li{padding:16px 0;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--line)}
.art-facts span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.art-facts strong{font-size:16px;font-weight:600;line-height:1.35}

/* zones and cards of the model pages */
.art-zone{margin:0 0 clamp(40px,6vw,72px)}
.art h2{font-size:clamp(26px,3.6vw,44px);line-height:1.05;margin:0 0 20px;scroll-margin-top:110px}
.art h3{font-size:20px;line-height:1.25;font-weight:600;margin:32px 0 14px}
.art-zone h3{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:16px}
.art-grid .pcard2 h4{font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.015em;overflow-wrap:anywhere}
.art-grid .pcard2 h4 a{display:block;color:var(--ink);text-decoration:none;font-weight:700}
.art-grid .pcard2 h4 a>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.art-grid .pcard2 h4 a::after{content:"";position:absolute;inset:0;z-index:1}
.art-grid .pcard2 h4 a:focus-visible{outline:0}
.art-grid .pcard2:has(h4 a:focus-visible){outline:3px solid var(--pink);outline-offset:3px}
.art-grid .pcard2 .pc-price b{font-weight:600}

/* call box ("Brak tu części, której szukasz?") and the set line */
.art-call{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(24px,4vw,40px);margin:0 0 clamp(40px,6vw,72px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.art-call h3{margin:0;color:#fff;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em}
.art-call p{max-width:60ch;color:var(--mute-d);font-weight:500}
.art-call a:not(.pill){color:#fff!important;text-decoration:underline}
.art-call .pill.dark{background:#fff;color:var(--ink)}
.art-set{margin:0 0 clamp(40px,6vw,72px);max-width:760px}
.art-set p{font-size:17px;line-height:1.6}
.art-set details{margin-top:12px;border-top:1px solid var(--line)}
.art-set summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;list-style:none}
.art-set summary::-webkit-details-marker{display:none}
.art-set summary::after{content:"+";margin-left:12px;color:var(--pink2);font-size:24px;font-weight:400;line-height:1}
.art-set details[open] summary::after{content:"\2212"}
.art-set strong{font-weight:700;white-space:nowrap}

/* text of the guides */
.art-body{margin:0 0 clamp(40px,6vw,72px)}
.art-body>p,.art-body>ul,.art-body>ol,.art-body>h2,.art-body>h3{max-width:760px}
.art-body h2{margin-top:clamp(40px,6vw,64px)}
.art-body>h2:first-child{margin-top:0}
.art-body p,.art-list li{font-size:17px;line-height:1.65;font-weight:400}
.art-body p{margin:0 0 14px}
.art-list{margin:0 0 18px;padding-left:22px}
.art-list li{margin:0 0 8px;padding-left:4px}
.art-note{padding:14px 18px;background:var(--bg2);border-radius:var(--r)}

/* tables: scroll never leaks to the page; on phones every row becomes a card */
.art-tablewrap{margin:8px 0 28px;border-top:1px solid var(--ink);max-width:100%;overflow-x:auto}
.art-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.art-table th,.art-table td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);font-weight:500}
.art-table thead th{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.art-table tbody th{font-weight:700;min-width:150px}
.art-table td b,.art-table td strong{font-weight:700;white-space:nowrap}
.art-table td:last-child,.art-table thead th:last-child{text-align:right;padding-right:0}
@media (max-width:700px){
  .art-tablewrap{border-top:0;overflow:visible}
  .art-table,.art-table tbody{display:block}
  .art-table thead{display:none}
  .art-table tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;margin:0 0 12px}
  .art-table th,.art-table td{display:block;padding:10px 0;border-bottom:1px solid var(--line);min-width:0!important;text-align:left!important}
  .art-table tr>*:last-child{border-bottom:0}
  .art-table tbody th{font-size:16px}
  .art-table td{display:flex;justify-content:space-between;gap:16px}
  .art-table td::before{content:attr(data-label);flex:none;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:2px}
  .art-table td>*{text-align:right}
}

/* FAQ, related links, hub cards */
.art-faq,.art-more,.art-section{margin:0 0 clamp(40px,6vw,72px)}
.art-faq .faq{margin:20px 0 0;max-width:860px}
.art-faq .faq summary{font-size:17px;line-height:1.35}
.art-more h3{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:24px 0 12px}
.art-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.art-cards-big{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.art-card{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:border-color .2s}
.art-card b{font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.art-card span{font-size:14px;line-height:1.4;color:var(--muted);font-weight:500}
.art-cards-big .art-card{padding:22px 22px 24px;min-height:120px}
.art-sub{max-width:720px;font-size:17px;line-height:1.6;margin:0 0 20px}
@media (hover:hover){.art-card:hover{border-color:var(--ink)}}

/* phones */
@media (max-width:900px){
  .art-facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .art-head h1{max-width:none}
  /* part cards: image left, text right, so eleven parts do not make a page of eleven squares */
  .art-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .art-grid .pcard2{flex-direction:row;align-items:stretch;min-height:104px}
  .art-grid .pcard2 .ph{width:104px;flex:none;aspect-ratio:1}
  .art-grid .pcard2 .body{padding:12px 14px;gap:3px;justify-content:center}
  .art-grid .pcard2 h4{font-size:16px}
  .art-grid .pcard2 .pc-price b{font-size:19px}
  .art-call .pill{width:100%}
}
@media print{.art-call,.art-more{display:none}}