/* Blog „Inspiracje i porady” (home/templates/home/blog_index_page.html), styl marki 2026-09.
   Ladowany z bloku content, PO nowa.css. Zmienne (--nieb, --granat, --chlod, --linia...),
   .btn/.etyk/.link/.shell sa w nowa.css. Wszystko jest zawezone do .page-blog-index,
   zeby nie ruszyc stron artykulow (premium-article.css) ani innych podstron.
   Stare style listy (.p-article-card*, .article-grid w premium-2026.css / premium-pages.css)
   zostaja nietkniete: ten szablon ich juz nie uzywa. */

.page-blog-index #main{padding:0}
.page-blog-index h1,.page-blog-index h2,.page-blog-index h3,.page-blog-index p{margin:0}
.page-blog-index .etyk{display:block}
.page-blog-index img{width:100%}

/* ---------- hero: jasny, dwie kolumny (tekst | zdjecie) ---------- */
.bl-hero{background:#fff;border-bottom:1px solid var(--linia);padding:64px 0 56px}
.bl-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.bl-hero h1{color:var(--granat);font-family:Poppins,Arial,sans-serif;font-weight:700;font-size:clamp(36px,4.2vw,58px);line-height:1.06;letter-spacing:-.015em;margin:10px 0 18px;max-width:15ch;text-wrap:balance}
.bl-lead{font-size:18px;line-height:1.55;color:var(--szary);max-width:52ch}
.bl-hero-meta{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--linia)}
.bl-licznik{font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:14px;color:var(--granat)}
.bl-hero-meta .link{display:inline-flex;align-items:center;gap:8px}
.bl-hero-obraz{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--chlod)}
.bl-hero-obraz img{width:100%;height:100%;object-fit:cover}
.bl-hero-obraz:after{content:'';position:absolute;left:0;bottom:0;width:104px;height:6px;background:var(--nieb)}
/* wariant z grafika kreskowa: biale tlo, cala kompozycja widoczna (contain), bez kadrowania i akcentu */
.bl-hero-rysunek{aspect-ratio:16/9;background:#fff}
.bl-hero-rysunek img{width:100%;height:100%;object-fit:contain;display:block}
.bl-hero-rysunek:after{display:none}

/* ---------- wspolne drobiazgi kart ---------- */
.bl-data{font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:13px;letter-spacing:.03em;color:var(--szary)}
.bl-zajawka{color:var(--szary);font-size:16px;line-height:1.6}
.bl-czytaj{display:inline-flex;align-items:center;gap:10px;font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:15px;color:var(--nieb)}
.bl-czytaj span{transition:transform .18s var(--ease)}

/* ---------- wyrozniony (najnowszy) artykul ---------- */
.bl-wyroz{background:var(--chlod);padding:56px 0 60px}
.bl-wyroz-karta{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);background:#fff;border:1px solid var(--linia);align-items:stretch;transition:border-color .18s var(--ease),box-shadow .25s var(--ease)}
.bl-wyroz-karta:hover{border-color:#b9c4ce;box-shadow:0 16px 40px rgba(23,27,43,.08)}
.bl-wyroz-obraz{overflow:hidden;aspect-ratio:3/2;background:var(--chlod)}
.bl-wyroz-obraz img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.bl-wyroz-karta:hover .bl-wyroz-obraz img{transform:scale(1.04)}
.bl-wyroz-tresc{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(28px,3.2vw,52px)}
.bl-znak{color:var(--nieb)}
.bl-wyroz-tresc h2{color:var(--granat);font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:clamp(24px,2.6vw,34px);line-height:1.16;letter-spacing:-.015em;text-wrap:balance;transition:color .18s var(--ease)}
.bl-wyroz-karta:hover .bl-wyroz-tresc h2{color:var(--nieb)}
.bl-wyroz-tresc .bl-zajawka{font-size:17px;max-width:52ch}
.bl-wyroz-tresc .bl-czytaj{margin-top:8px}
.bl-wyroz-karta:hover .bl-czytaj span{transform:translateX(4px)}

/* ---------- siatka pozostalych artykulow ---------- */
.bl-lista{background:#fff;padding:64px 0 84px}
.bl-lista-gora{display:flex;align-items:center;gap:24px;margin-bottom:32px}
.bl-lista-gora h2{color:var(--granat);font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.015em;white-space:nowrap}
.bl-lista-linia{flex:1;height:1px;background:var(--linia)}
.bl-siatka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.bl-karta{display:flex;background:#fff;border:1px solid var(--linia);transition:border-color .18s var(--ease),box-shadow .25s var(--ease)}
.bl-karta:hover{border-color:#b9c4ce;box-shadow:0 14px 34px rgba(23,27,43,.07)}
.bl-karta-link{display:flex;flex-direction:column;width:100%}
.bl-karta-obraz{aspect-ratio:3/2;overflow:hidden;background:var(--chlod)}
.bl-karta-obraz img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.bl-karta:hover .bl-karta-obraz img{transform:scale(1.05)}
.bl-karta-tresc{display:flex;flex-direction:column;gap:10px;flex:1;padding:22px 24px 24px}
.bl-karta-tytul{color:var(--granat);font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:20px;line-height:1.28;letter-spacing:-.01em;text-wrap:balance;transition:color .18s var(--ease)}
.bl-karta:hover .bl-karta-tytul{color:var(--nieb)}
.bl-karta .bl-zajawka{font-size:15.5px}
.bl-karta .bl-czytaj{margin-top:auto;padding-top:14px}
.bl-karta:hover .bl-czytaj span{transform:translateX(4px)}
.bl-pusto{color:var(--szary);font-size:17px}

/* focus widoczny na calej karcie (klawiatura) */
.page-blog-index a:focus-visible{outline:2px solid var(--nieb);outline-offset:3px}

/* ---------- blok CTA ze StreamFielda: granat + przyciski w wersji jasnej ---------- */
.bl-stream{background:#fff}
.bl-stream .cta-section{padding:0 0 88px}
.bl-stream .cta-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--granat);color:#fff;border:0;border-radius:0;min-height:0;padding:0;box-shadow:none;overflow:hidden}
.bl-stream .cta-panel-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:clamp(34px,4vw,64px);align-self:center;max-width:none}
.bl-stream .cta-panel-copy .eyebrow{font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7fc0ea;margin:0}
.bl-stream .cta-panel h2{color:#fff;font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:clamp(26px,2.8vw,38px);line-height:1.14;letter-spacing:-.015em;margin:0;max-width:18ch;text-wrap:balance}
.bl-stream .cta-panel p:not(.eyebrow){color:#c9d3dc;font-size:17px;line-height:1.6;max-width:46ch;margin:0}
.page-blog-index .bl-stream .cta-panel .button{display:inline-flex;align-items:center;gap:12px;margin-top:10px;padding:16px 26px;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:15px;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.page-blog-index .bl-stream .cta-panel .button:hover{background:#fff;color:var(--granat);border-color:#fff}
.bl-stream .cta-panel-media{min-height:0;overflow:hidden}
.bl-stream .cta-panel-media img{width:100%;height:100%;min-height:0;object-fit:cover;transition:transform .6s var(--ease)}
.bl-stream .cta-panel:hover .cta-panel-media img{transform:scale(1.03)}

/* ---------- responsywnosc ---------- */
@media (max-width:1100px){
  .bl-hero{padding:52px 0 44px}
  .bl-hero-in{grid-template-columns:1fr;gap:32px}
  .bl-hero h1{max-width:18ch}
  .bl-hero-obraz{aspect-ratio:16/9}
  .bl-wyroz{padding:44px 0 48px}
  .bl-wyroz-karta{grid-template-columns:1fr}
  .bl-lista{padding:52px 0 68px}
  .bl-siatka{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .bl-stream .cta-section{padding:0 0 68px}
  .bl-stream .cta-panel{grid-template-columns:1fr}
  .bl-stream .cta-panel-media{aspect-ratio:16/9}
}
@media (max-width:640px){
  .bl-hero{padding:40px 0 34px}
  .bl-hero h1{margin:8px 0 14px}
  .bl-lead{font-size:16.5px}
  .bl-hero-meta{margin-top:22px;padding-top:18px;gap:10px 20px}
  .bl-wyroz{padding:32px 0 36px}
  .bl-wyroz-tresc{gap:10px}
  .bl-wyroz-tresc .bl-zajawka{font-size:16px}
  .bl-lista{padding:40px 0 52px}
  .bl-lista-gora{margin-bottom:22px}
  .bl-siatka{grid-template-columns:1fr;gap:18px}
  .bl-karta-tytul{font-size:19px}
  .bl-stream .cta-section{padding:0 0 48px}
  .page-blog-index .bl-stream .cta-panel .button{width:100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .bl-wyroz-obraz img,.bl-karta-obraz img,.bl-czytaj span,.bl-stream .cta-panel-media img{transition:none}
  .bl-wyroz-karta:hover .bl-wyroz-obraz img,
  .bl-karta:hover .bl-karta-obraz img,
  .bl-karta:hover .bl-czytaj span,
  .bl-wyroz-karta:hover .bl-czytaj span,
  .bl-stream .cta-panel:hover .cta-panel-media img{transform:none}
}