/* ==========================================================================
   MERITUM · nowe klocki, blog, artykuł, baner produktu
   (bazują na tokenach z site.css: --ink, --gold, --paper, --f, --fb …)
   ========================================================================== */

/* --- wspólne --- */
.blk-narrow{max-width:860px}
.blk-head{max-width:860px;margin-bottom:40px}
.blk-head-row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.blk-body{max-width:68ch}
.blk-body a,.art-body a{color:var(--gold-d);text-decoration:underline;text-underline-offset:3px}
section.dark .blk-body a{color:var(--gold-2)}
.blk-text.is-center .blk-narrow{margin:0 auto;text-align:center}
.blk-text.is-center .blk-body{margin-left:auto;margin-right:auto}
.blk-text.dark,.blk-ti.dark,.blk-tiles.dark,.blk-quote.dark{background:radial-gradient(120% 90% at 10% 0%,#1d5d5d 0%,var(--ink) 42%,var(--ink-2) 100%);color:#fff}
.blk-text.dark .lead,.blk-ti.dark .lead,.blk-tiles.dark .lead{color:rgba(255,255,255,.78)}
.blk-tiles.dark .eyebrow,.blk-text.dark .eyebrow,.blk-ti.dark .eyebrow{color:var(--gold-2)}

/* --- tekst + obraz --- */
.blk-ti-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,80px);align-items:center}
.blk-ti.img-left .blk-ti-grid>figure{order:-1}
.blk-ti-img{margin:0;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:var(--paper-deep);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.blk-ti-img img{width:100%;height:100%;object-fit:cover}
.blk-ti .hero-actions{margin-top:28px}

/* --- kafelki --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tile{background:var(--white);border:1px solid rgba(20,72,72,.08);border-radius:22px;padding:26px 24px;box-shadow:0 20px 50px -34px rgba(20,72,72,.4);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.tile:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(20,72,72,.45)}
.tile-ic{width:46px;height:46px;border-radius:14px;background:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.tile-ic svg{width:22px;height:22px;color:var(--gold-2)}
.tile h3{font-family:var(--f);font-weight:900;text-transform:uppercase;font-size:.9rem;letter-spacing:.06em;color:var(--ink);margin-top:20px}
.tile p{margin-top:10px;font-size:.94rem;color:var(--ink-soft);line-height:1.6}
.blk-tiles.dark .tile{background:rgba(255,255,255,.05);border-color:rgba(227,196,159,.18);box-shadow:none}
.blk-tiles.dark .tile h3{color:#fff}.blk-tiles.dark .tile p{color:rgba(255,255,255,.7)}
.blk-tiles.dark .tile-ic{background:rgba(227,196,159,.14)}

/* --- cytat --- */
.blk-quote{text-align:center}
.blk-quote figure{margin:0 auto;position:relative}
.blk-q-mark{display:block;font-family:var(--f);font-weight:900;font-size:6rem;line-height:.6;color:var(--gold);opacity:.55;height:.45em}
.blk-quote blockquote{margin:0;font-family:var(--f);font-weight:300;font-style:italic;font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.3;color:var(--ink)}
.blk-quote blockquote em{font-weight:700;color:var(--gold-d)}
.blk-quote figcaption{margin-top:26px;display:flex;flex-direction:column;gap:4px;font-size:.86rem;color:var(--txt)}
.blk-quote figcaption b{font-family:var(--f);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--ink)}
.blk-quote.dark blockquote{color:#fff}.blk-quote.dark blockquote em{color:var(--gold-2)}.blk-quote.dark figcaption,.blk-quote.dark figcaption b{color:rgba(255,255,255,.75)}

/* --- wezwanie do działania --- */
.blk-cta{padding-top:clamp(50px,7vw,90px);padding-bottom:clamp(50px,7vw,90px)}
.blk-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.blk-cta .section-title{font-size:clamp(1.6rem,3.6vw,2.7rem)}
.blk-cta .lead{margin-top:12px}
.blk-cta.dark{background:radial-gradient(120% 200% at 0% 0%,#1d5d5d 0%,var(--ink) 45%,var(--ink-2) 100%);color:#fff}
.blk-cta.dark .lead{color:rgba(255,255,255,.78)}
.blk-cta:not(.dark){background:linear-gradient(135deg,#fbf6ee,#f3e7d6)}

/* --- baner produktu (Czyste i Gotowe Spółki) --- */
.blk-promo{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.promo-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,5vw,60px);align-items:center;
  padding:clamp(30px,5vw,56px);border-radius:30px;color:#fff;
  background:radial-gradient(130% 140% at 0% 0%,#1d5d5d,var(--ink) 50%,var(--ink-2));box-shadow:0 40px 80px -40px rgba(20,72,72,.75)}
.promo-card:before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:1px solid rgba(227,196,159,.18)}
.promo-card:after{content:"";position:absolute;right:-60px;bottom:-160px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(196,155,116,.25),transparent 65%)}
.promo-card .eyebrow{color:var(--gold-2)}
.promo-card .section-title{color:#fff;font-size:clamp(1.7rem,4vw,3rem)}
.promo-card .section-title em{background:linear-gradient(120deg,#f3dcc0,var(--gold-2) 40%,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.promo-card .lead{color:rgba(255,255,255,.82);margin:16px 0 26px}
.promo-url{display:block;margin-top:14px;font-family:var(--f);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.promo-side{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.promo-big b{display:block;font-family:var(--f);font-weight:900;font-size:clamp(4rem,10vw,7.5rem);line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(160deg,#fbe8cf,var(--gold-2) 35%,var(--gold) 65%,#8b6643);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.promo-big span{display:block;margin-top:8px;font-family:var(--f);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.promo-img{margin:0;max-width:220px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.06)}
.promo-img img{display:block;width:100%;height:auto}
.promo-ph{display:block;padding:26px 20px;font-size:.78rem;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.3);border-radius:20px}
.promo-card.light{background:linear-gradient(135deg,#fbf6ee,#f3e7d6);color:var(--ink);box-shadow:0 30px 60px -36px rgba(20,72,72,.4)}
.promo-card.light .section-title{color:var(--ink)}.promo-card.light .lead{color:var(--ink-soft)}.promo-card.light .eyebrow{color:var(--gold-d)}
.promo-card.light .promo-url{color:var(--txt)}.promo-card.light .promo-big span{color:var(--gold-d)}

/* --- blog: karty --- */
.blk-blog{background:var(--paper-soft)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bcard{display:flex;flex-direction:column;background:var(--white);border:1px solid rgba(20,72,72,.08);border-radius:22px;overflow:hidden;
  box-shadow:0 20px 50px -34px rgba(20,72,72,.45);transition:transform .35s var(--ease),box-shadow .35s var(--ease);position:relative;color:inherit}
a.bcard:hover{transform:translateY(-5px);box-shadow:0 34px 60px -30px rgba(20,72,72,.5)}
.bc-cover{display:block;aspect-ratio:16/9;background:var(--paper-deep);position:relative;overflow:hidden}
.bc-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a.bcard:hover .bc-cover img{transform:scale(1.04)}
.bc-cover.bc-media{background:linear-gradient(135deg,#fbf6ee,#efe1cc)}
.bc-cover.bc-article{background:radial-gradient(120% 120% at 0 0,#1d5d5d,var(--ink) 55%,var(--ink-2))}
.bc-cover.bc-webinar{background:radial-gradient(120% 120% at 0 0,#24413f,#0e2a2a)}
.bc-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bc-mono svg{width:58px;height:58px;color:var(--gold);opacity:.75}
.bc-article .bc-mono svg{color:var(--gold-2)}
.bc-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 10px rgba(196,155,116,.2);transition:transform .3s var(--ease)}
.bc-play:after{content:"";position:absolute;left:26px;top:21px;border-left:16px solid #10302f;border-top:11px solid transparent;border-bottom:11px solid transparent}
a.bcard:hover .bc-play{transform:scale(1.1)}
.bc-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.bc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-family:var(--f);font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--txt)}
.bc-kind{color:#10302f;background:var(--gold-2);padding:4px 9px;border-radius:999px}
.bk-article .bc-kind{background:var(--ink);color:#fff}
.bc-title{font-family:var(--f);font-weight:800;font-size:1.04rem;line-height:1.3;color:var(--ink)}
.bc-lead{font-size:.9rem;color:var(--ink-soft);line-height:1.55}
.bc-more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d)}
.bc-more svg{width:14px;height:14px;transition:transform .3s var(--ease)}
a.bcard:hover .bc-more svg{transform:translateX(4px)}
.blog-empty{grid-column:1/-1;color:var(--txt)}

/* --- blog: strona listy --- */
.blog-hero{padding-top:clamp(150px,16vw,200px);padding-bottom:30px;background:linear-gradient(180deg,var(--paper),var(--paper-soft))}
.blog-hero .section-title{font-size:clamp(2rem,5vw,3.8rem);max-width:22ch}
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.bf{border:1px solid rgba(20,72,72,.2);border-radius:999px;padding:10px 16px;font-family:var(--f);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);transition:.25s var(--ease)}
.bf i{font-style:normal;opacity:.55;margin-left:4px}
.bf:hover{border-color:var(--ink);color:var(--ink)}
.bf.on{background:var(--ink);border-color:var(--ink);color:#fff}
.blog-list{padding-top:20px;background:var(--paper-soft)}
.bcard.hide{display:none}

/* --- artykuł --- */
.art-head{padding-top:clamp(140px,15vw,190px);padding-bottom:20px}
.art-narrow{max-width:780px}
.art-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin-bottom:26px}
.art-back svg{width:14px;height:14px;transform:rotate(180deg)}
.art-title{font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;text-transform:none;letter-spacing:-.02em}
.art-lead{font-size:clamp(1.08rem,1.9vw,1.3rem)}
.art-author{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:.84rem;color:var(--txt)}
.art-author svg{width:18px;height:18px;color:var(--gold)}
.art-cover{margin:30px 0 10px;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/8;background:var(--paper-deep);display:flex;align-items:center;justify-content:center}
.art-cover img{width:100%;height:100%;object-fit:cover}
.art-cover-ph{font-size:.85rem;color:var(--txt)}
.art-body{font-family:var(--fb);font-size:1.12rem;line-height:1.8;color:#22302f;padding:30px 0}
.art-body>*+*{margin-top:1.1em}
.art-body h2{font-family:var(--f);font-weight:900;font-size:1.6rem;line-height:1.2;color:var(--ink);margin-top:1.8em}
.art-body h3{font-family:var(--f);font-weight:800;font-size:1.2rem;color:var(--ink);margin-top:1.5em}
.art-body ul,.art-body ol{padding-left:1.3em}
.art-body li+li{margin-top:.4em}
.art-body li::marker{color:var(--gold)}
.art-body blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:3px solid var(--gold);font-family:var(--f);font-style:italic;font-weight:300;font-size:1.35rem;line-height:1.45;color:var(--ink)}
.art-body figure{margin:1.8em 0}
.art-body figure img{width:100%;border-radius:18px}
.art-body figcaption{margin-top:10px;font-size:.84rem;color:var(--txt);text-align:center}
.art-body hr{border:0;height:1px;background:var(--line);margin:2em 0}
.art-body b{color:var(--ink)}
.art-share{display:flex;flex-wrap:wrap;gap:12px;padding:20px 0 70px;border-top:1px solid var(--line)}
.art-more{padding-top:60px}

@media(max-width:1000px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .blk-ti-grid,.promo-card{grid-template-columns:1fr}
  .blk-ti.img-left .blk-ti-grid>figure{order:0}
}
@media(max-width:660px){
  .blog-grid{grid-template-columns:1fr}
  .art-body{font-size:1.04rem}
  .promo-side{flex-direction:row;justify-content:flex-start;text-align:left}
}

/* --- poprawki układu po dodaniu edycji (opakowania list nie mogą psuć siatki) --- */
.kd-cards{display:contents}
.dpair+.dpair{margin-top:20px}

/* ---------- Pytania i odpowiedzi (FAQ) ---------- */
.blk-faq{padding:clamp(70px,9vw,120px) 0;background:var(--paper-soft)}
.faq-wrap{max-width:920px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid rgba(20,72,72,.09);border-radius:20px;box-shadow:0 18px 44px -36px rgba(20,72,72,.45);transition:border-color .25s,box-shadow .25s}
.faq-item[open],.faq-item.is-open{border-color:rgba(196,155,116,.45);box-shadow:0 24px 54px -34px rgba(20,72,72,.5)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;cursor:pointer;list-style:none;font-weight:700;font-size:1.02rem;line-height:1.4;color:var(--ink)}
.faq-q::-webkit-details-marker{display:none}
.faq-q:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:20px}
.faq-pm{position:relative;flex:0 0 30px;height:30px;border-radius:50%;background:rgba(196,155,116,.16)}
.faq-pm:before,.faq-pm:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--gold-d);border-radius:2px;transition:transform .3s}
.faq-pm:after{transform:rotate(90deg)}
.faq-item[open] .faq-pm:after,.faq-item.is-open .faq-pm:after{transform:rotate(0)}
.faq-a{padding:0 26px 24px;color:var(--ink-soft);line-height:1.7;max-width:760px}
.cms-edit .faq-q{cursor:text}
@media (max-width:600px){.faq-q{padding:18px 18px;font-size:.96rem}.faq-a{padding:0 18px 20px}}

/* Ochrona siatki bloga: rozszerzenia przeglądarki (np. menedżery pobierania) wstawiają
   własne ikonki obok linków do YouTube — w siatce zajmowały całe komórki. */
.blog-grid>*:not(.bcard):not(.blog-empty):not(.cms-add){display:none!important}
.bcard{min-width:0}