/* Podstrony bloga Pawła Kuligi. Korzysta z tokenów i przycisków z brand.css. */
.art{padding:clamp(28px,5vw,56px) 0 var(--pad); color:var(--tusz)}
.art__kol{max-width:760px; margin:0 auto; padding:0 clamp(16px,4vw,24px)}
.art__kol--szeroka{max-width:1040px}
.okruszki{font-size:14px; color:var(--szary); margin:0 0 20px}
.okruszki a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.okruszki a:hover{color:var(--amber-ink)}
.art__glowa .kicker{margin-bottom:10px}
.art h1{font-size:clamp(32px,5.4vw,54px); line-height:1.1; margin:0 0 14px; letter-spacing:-.01em; color:var(--tusz); hyphens:auto; overflow-wrap:break-word}
.art__meta{font-size:14px; color:var(--szary); margin:0 0 22px}
.art__lead{font-size:clamp(18px,2.2vw,21px); line-height:1.6; margin:22px 0 8px}
.art h2{font-size:clamp(24px,3.2vw,32px); line-height:1.2; margin:44px 0 12px; color:var(--tusz)}
.art p{margin:0 0 16px}
.art ul{margin:0 0 18px; padding-left:22px}
.art li{margin:0 0 8px}
.art a{color:var(--amber-ink)}
.art .btn{color:var(--fg); text-decoration:none}
figure.art__zdj{position:static; margin:26px 0; overflow:hidden; border-radius:var(--r); box-shadow:var(--cien); background:var(--noc)}
.art__zdj img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.art__zdj figcaption{padding:12px 16px; font-size:14px; line-height:1.45; color:var(--szary); background:#fff}
.art__ramka{margin:28px 0; padding:18px 20px; background:#fff; border:1px solid var(--lod-2); border-left:4px solid var(--amber); border-radius:var(--r-s)}
.art__ramka p{margin:0}
.art__lista{list-style:none; padding:0}
.art__lista li{position:relative; padding-left:30px}
.art__lista li::before{content:""; position:absolute; left:2px; top:.45em; width:16px; height:9px; border-left:3px solid var(--amber); border-bottom:3px solid var(--amber); transform:rotate(-45deg)}
.art__tab{overflow-x:auto; margin:0 0 18px; border:1px solid var(--lod-2); border-radius:var(--r-s); background:#fff}
.art__tab table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
.art__tab th,.art__tab td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--lod)}
.art__tab th{background:var(--lod); font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.art__tab tr:last-child td{border-bottom:0}

.art-cta{margin:48px 0 0; padding:clamp(22px,4vw,34px); background:#fff; border:1px solid var(--lod-2); border-radius:var(--r); box-shadow:var(--cien)}
.art-cta h2{margin-top:0}
.art-cta__przyciski{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.art-cta .btn--ghost{--fg:var(--tusz); border-color:var(--lod-2)}

.art-wiecej{margin-top:48px}
.art-wiecej h2{margin-top:0}
.blog-siatka{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.blog-karta{display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid var(--lod-2); border-radius:var(--r); text-decoration:none; color:var(--tusz); box-shadow:var(--cien); transition:transform .2s}
.blog-karta:hover{transform:translateY(-3px)}
.blog-karta img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.blog-karta__t{display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px}
.blog-karta__t b{font-family:var(--f-d); font-size:22px; line-height:1.2}
.blog-karta__t span{font-size:15px; color:var(--szary)}
.blog-karta__t i{font-style:normal; font-weight:700; font-size:14px; color:var(--amber-ink)}
.art--lista .blog-siatka{margin-top:26px}
.art--lista .art-cta{margin-top:48px}

.art-kontakt{margin-top:48px; border-radius:var(--r); background:var(--noc); color:#fff; box-shadow:var(--cien); overflow:hidden}
.art-kontakt__in{padding:clamp(26px,5vw,48px); text-align:center; display:flex; flex-direction:column; align-items:center}
.art .art-kontakt h2{color:#fff; margin:0 0 12px}
.art .art-kontakt p{color:var(--szary-j)}
.art-kontakt .kontakt__trzy{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; margin-top:20px}
.art-kontakt .btn{color:var(--fg)}
.art-kontakt__mail{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin:22px 0 22px; padding:12px 24px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.08)}
.art-kontakt__mail .ic{width:20px; height:20px; color:var(--amber-2)}
.art .art-kontakt__mail a{color:#fff; text-decoration:none; font-size:17px; overflow-wrap:anywhere}
.art-kontakt .soc{justify-content:center; gap:12px}
@media (max-width:560px){
  .art-kontakt .kontakt__trzy{grid-template-columns:1fr}
  .art-cta__przyciski .btn{width:100%; justify-content:center}
  .art .art-kontakt__mail a{font-size:15px}
}
@media (max-width:759px){ body{padding-bottom:78px} }

/* poprawki po obejrzeniu renderu */
.naglowek, .naglowek--dalej{background:var(--noc)}
.art .blog-karta{color:var(--tusz)}
.art .blog-karta__t b{color:var(--tusz)}
.art .art-kontakt__mail{margin:24px 0 22px}
.art .soc a{color:#fff; text-decoration:none}
.art-kontakt h2{text-wrap:balance}
/* tabela cen na telefonie: karty zamiast przewijania w bok */
@media (max-width:600px){
  .art__tab{overflow:visible; border:0; background:none}
  .art__tab table{min-width:0; display:block}
  .art__tab thead{position:absolute; left:-9999px}
  .art__tab tbody{display:grid; gap:12px}
  .art__tab tr{display:block; padding:14px 16px; background:#fff; border:1px solid var(--lod-2); border-radius:var(--r-s)}
  .art__tab td{display:flex; justify-content:space-between; gap:14px; padding:5px 0; border:0; text-align:right}
  .art__tab td::before{content:attr(data-l); font-weight:700; color:var(--szary); text-align:left}
  .art__tab td:first-child{display:block; text-align:left; font-weight:700; font-size:17px; padding-bottom:8px}
  .art__tab td:first-child::before{content:none}
}
/* strony tras i lista bloga */
.art h3{font-size:19px; line-height:1.3; margin:26px 0 6px; color:var(--tusz)}
.art__fakty{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:1px; margin:26px 0 8px; background:var(--lod-2); border:1px solid var(--lod-2); border-radius:var(--r-s); overflow:hidden}
.art__fakty div{background:#fff; padding:14px 16px}
.art__fakty dt{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--szary); font-weight:700; margin:0 0 4px}
.art__fakty dd{margin:0; font-weight:600; line-height:1.4}
.art .blog-sekcja{margin:34px 0 4px; font-size:clamp(22px,2.8vw,28px)}
@media (min-width:700px){.blog-siatka--2{grid-template-columns:repeat(2,1fr)}}

/* ===== runda 53 ===== */
/* naglowek jest fixed (77 px), wiec tresc musi zaczynac sie pod nim, inaczej okruszki chowaja sie pod szklem */
.art{padding-top:clamp(96px,11vw,124px)}
.art--po-hero{padding-top:clamp(28px,4vw,48px)}

/* CTA "Wybierzcie trasę i termin": kolumna na środku */
.art-cta{text-align:center; background:linear-gradient(180deg,#fff 0%,#FBF6EC 100%); border-top:4px solid var(--amber)}
.art-cta p{max-width:560px; margin-inline:auto}
.art-cta__przyciski{justify-content:center; margin-top:18px}

/* hero listy bloga: zdjecie z napisem na zdjeciu */
.blog-hero{position:relative; isolation:isolate; color:#fff; background:var(--noc); overflow:hidden}
.blog-hero__img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 62%}
.blog-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(7,15,34,.62) 0%,rgba(7,15,34,.38) 38%,rgba(7,15,34,.88) 100%)}
.blog-hero__in{max-width:1040px; margin:0 auto; padding:clamp(120px,15vw,190px) clamp(16px,4vw,24px) clamp(44px,6vw,80px)}
.blog-hero .okruszki{color:rgba(255,255,255,.78)}
.blog-hero .okruszki a:hover{color:var(--amber-2)}
.blog-hero .kicker{color:var(--amber-2)}
.blog-hero h1{color:#fff; font-size:clamp(34px,6vw,64px); max-width:18ch; margin-bottom:16px; text-wrap:balance}
.blog-hero .art__lead{color:rgba(255,255,255,.9); max-width:600px; margin:0}
@media (min-width:700px){ .blog-hero h1{hyphens:manual; -webkit-hyphens:manual} }

/* "Czytajcie dalej" / "Zobaczcie też": karuzela ze strzalkami */
.art-wiecej .blog-siatka{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 32px; margin:0 -2px -14px; scrollbar-width:none}
.art-wiecej .blog-siatka::-webkit-scrollbar{display:none}
.art-wiecej .blog-karta{flex:0 0 calc((100% - 18px)/2); scroll-snap-align:start}
@media (max-width:699px){ .art-wiecej .blog-karta{flex-basis:84%} }
.art-kar__glowa{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px}
.art-wiecej .art-kar__glowa h2{margin:0}
.art-kar__str{display:flex; gap:10px; flex:none}
.art-kar__str[hidden]{display:none}