/* ---------- Blog: listing i artykuł ---------- */

/* nagłówek listingu */
.b-hero{padding:clamp(150px,22vh,230px) 0 clamp(40px,6vh,70px)}
.b-hero .sub-h{margin-top:18px}

/* listing: wiersze redakcyjne w jednej ramie, rozdzielone linią */
.b-list{padding:0 clamp(28px,3vw,48px);background:rgba(13,14,18,.5);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
.b-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.4vw,60px);align-items:center;padding:clamp(28px,4vh,44px) 0;color:inherit}
.b-row+.b-row{border-top:1px solid rgba(255,255,255,.1)}
.b-img{display:block;overflow:hidden;aspect-ratio:3/2;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.b-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.b-meta{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mut)}
.b-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}
.b-row h2{margin-top:14px;font-size:clamp(24px,2vw,32px);line-height:1.15;letter-spacing:-.02em;transition:color .4s}
.b-lead{margin-top:14px;font-size:clamp(15px,1vw,16.5px);line-height:1.55;color:rgba(243,243,245,.78);max-width:36em}
.b-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14.5px;color:#fff;padding-bottom:4px;background:linear-gradient(90deg,#8D3FF2,#44D4EC) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.b-more .ar{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.b-row:hover .b-more{background-size:100% 1px}
.b-row:hover .b-more .ar{transform:translateX(4px)}

/* artykuł: nagłówek */
.a-hero{padding:clamp(140px,20vh,210px) 0 clamp(36px,5vh,56px)}
.a-hero h1{max-width:20em}
.a-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut);transition:color .3s}
.a-back:hover{color:#fff}
.a-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.a-back:hover svg{transform:translateX(-3px)}
.a-hero .b-meta{margin-top:30px}
.a-hero h1{margin-top:16px}
.a-hero .sub-h{margin-top:20px;max-width:38em}
.a-cover{aspect-ratio:21/9;overflow:hidden;background:rgba(13,14,18,.66);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}

/* artykuł: treść na ciemnym tle, spis treści z boku */
.a-body{display:grid;grid-template-columns:minmax(0,3.4fr) minmax(0,8.6fr);gap:clamp(32px,4vw,72px);align-items:start;margin-top:clamp(28px,4vh,44px);
  padding:clamp(44px,6vh,72px) clamp(28px,3vw,48px) clamp(52px,7vh,84px);background:rgba(13,14,18,.66);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1)}
.a-side{position:sticky;top:110px}
.a-side-h{font-size:13px;color:var(--mut2);letter-spacing:.02em}
.a-toc{display:flex;flex-direction:column;margin-top:14px;border-left:1px solid rgba(255,255,255,.12)}
.a-toc a{position:relative;padding:9px 0 9px 16px;font-size:14.5px;line-height:1.35;color:var(--mut);transition:color .35s}
.a-toc a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:linear-gradient(#8D3FF2,#44D4EC);transform:scaleY(0);transition:transform .45s var(--ease)}
.a-toc a:hover{color:#fff}
.a-toc a.on{color:#fff}
.a-toc a.on::before{transform:none}
.a-back-s{margin-top:28px}
.a-text{max-width:42em;font-size:clamp(16px,1.08vw,17.5px);line-height:1.72;color:rgba(243,243,245,.88)}
.a-text>*+*{margin-top:1.1em}
.a-text h2{margin-top:2.1em;font-size:clamp(24px,1.9vw,30px);line-height:1.2;letter-spacing:-.02em;color:#fff;scroll-margin-top:110px}
.a-text h2+*{margin-top:.8em}
.a-text b,.a-text strong{font-weight:500;color:#fff}
.a-text a{color:#fff;background:linear-gradient(90deg,#8D3FF2,#44D4EC) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:background-size .4s}
.a-text a:hover{background-size:100% 2px}
.a-text ul,.a-text ol{list-style:none;display:grid;gap:.5em}
.a-text li{position:relative;padding-left:1.5em}
.a-text li::before{content:"";position:absolute;left:.2em;top:.72em;width:.42em;height:.42em;border-radius:.1em;background:#45D5ED}
.a-text li:nth-child(3n+2)::before{background:#F84D88}
.a-text li:nth-child(3n)::before{background:#8D3FF2}

/* czytaj także */
.a-next-sec{padding-bottom:0}
.a-next{margin-top:16px;padding:clamp(24px,3.4vh,36px) clamp(28px,3vw,48px);border:1px solid rgba(255,255,255,.14);background:rgba(13,14,18,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* okładki robione kodem: elementy Taagly na rozmytych górach, ruch w blog.js */
.cv{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;container-type:inline-size;font-family:Lato,sans-serif}
/* tło okładki to ta sama rozmyta warstwa co pod tekstem, nie kopia zdjęcia */
.cv-in{transition:transform 1.2s var(--ease)}
.b-row:hover .cv-in{transform:scale(1.03)}
.cv-in{position:relative;display:flex;align-items:center;justify-content:center;gap:1.4em;width:100%;font-size:clamp(9px,2.55cqw,19px);line-height:1.3}
.cv-panel,.cv-modes{background:rgba(36,37,43,.8);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cv-panel{display:flex;flex-direction:column;gap:.25em;width:14.5em;padding:.9em;border-radius:.6em;box-shadow:0 1.6em 3em -1.5em rgba(0,0,0,.85)}
.cv-h{text-align:center;color:#fff;font-size:.95em;padding-bottom:.45em}
.cv-seg{display:flex;padding:2px;border-radius:999px;border:1px solid rgba(255,255,255,.14);margin-bottom:.45em;font-size:.76em}
.cv-seg span{flex:1;text-align:center;padding:.38em 0;border-radius:999px;color:#c9cad0}
.cv-seg .on{background:rgba(255,255,255,.12);color:#fff}
.cv-tag{display:flex;align-items:center;gap:.55em;padding:.42em .5em;border-radius:.35em;color:#e6e6e8;font-size:.86em;transition:background .5s}
.cv-tag i,.cv-chips i{display:grid;place-items:center;font-style:normal;font-weight:700;color:#fff;flex:none}
.cv-tag i{width:1.65em;height:1.65em;border-radius:.3em;font-size:.66em}
.cv-tag b{margin-left:auto;font-weight:400;color:#9a9ca1;font-size:.9em}
.cv-tag.on{background:rgba(125,50,231,.6)}
.cv-side{display:flex;flex-direction:column;gap:.45em;width:17.5em}
.cv-modes{position:relative;display:flex;padding:3px;border-radius:999px;font-size:.78em;margin-bottom:.35em}
.cv-modes span{position:relative;z-index:1;flex:1;text-align:center;padding:.48em 0;color:#c9cad0;transition:color .45s}
.cv-modes span.on{color:#fff}
.cv-modes i{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:999px;background:#7230E4;transform:translateX(calc(var(--m,0) * 100%));transition:transform .6s var(--ease)}
.cv-task{display:flex;align-items:center;gap:.6em;padding:.58em .65em;border-radius:.32em;background:rgba(98,99,105,.62);border-left:.22em solid var(--pc);color:#f1f1f2;font-size:.84em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .55s,filter .55s}
.cv-task .cb{width:1em;height:1em;border:1px solid #9a9ca1;border-radius:.15em;flex:none}
.cv-task .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-chips{display:flex;gap:.25em}
.cv-chips i{width:1.55em;height:1.55em;border-radius:.25em;font-size:.62em}
.cv-task.off{opacity:.2;filter:saturate(.2)}
.cv-svg{position:relative;width:80%;height:auto;overflow:visible}
.cv-svg .q.t{fill:rgba(255,255,255,.5);transform-box:fill-box;transform-origin:center;transform:translate(var(--dx),var(--dy)) rotate(var(--r));transition:transform 1.2s var(--ease) var(--d),fill .8s var(--d)}
.cv-chaos.ord .q.t{transform:none;fill:rgba(255,255,255,.82)}
.cv-win .win{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1}
.cv-win rect.win{fill:rgba(36,37,43,.55)}
.cv-win{opacity:.3;transition:opacity .9s}
.cv-win .mk{opacity:0;transition:opacity .6s .5s}
.cv-chaos.ord .cv-win,.cv-chaos.ord .mk{opacity:1}
@media (prefers-reduced-motion:reduce){.cv *{transition:none!important}}

/* WordPress: okładki wpisów to zdjęcia (obrazek wyróżniający), treść z edytora, strony bez spisu treści, kolejne strony listy */
.b-img img,.a-cover img{display:block;width:100%;height:100%;object-fit:cover}
.a-body-solo{grid-template-columns:minmax(0,1fr)}
.a-body-solo .a-text{margin:0 auto}
.a-text figure{margin-left:0;margin-right:0}
.a-text img{display:block;max-width:100%;height:auto;border:1px solid rgba(255,255,255,.08)}
.a-text table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92em;-webkit-overflow-scrolling:touch}
.a-text th,.a-text td{padding:.6em .8em;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;vertical-align:top}
.a-text th{color:#fff;font-weight:500}
.a-text h3{margin-top:1.8em;font-size:clamp(19px,1.4vw,23px);line-height:1.25;color:#fff}
.b-pag{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:clamp(24px,3vh,36px) 0;border-top:1px solid rgba(255,255,255,.1)}
.b-pag a,.b-pag span{min-width:42px;padding:10px 14px;text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--mut);transition:color .3s,border-color .3s}
.b-pag a:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.b-pag span{color:#fff;border-color:#8D3FF2}