/* ==========================================================================
   Wodzilla.pl — sekcja "blog": /blog/ (listing) i 3 wpisy (src/blog/post.njk).
   Wartosci przeniesione z produkcyjnego arkusza
   zrodla/css/a2ecf5e77c6e948e4a9efad2c7d5bebe.css (klasy .navigation-hero,
   .c-breadcrumb, .l-blog, .c-posts-single, .l-single-post, .recent-posts),
   ktorych nie ma jeszcze w public/styles.css (uzyte pierwszy raz na blogu).
   Ladowany TYLKO na stronach z src/blog/** (layout.njk -> extraCss), tak jak
   miasta.css/prawne.css dla swoich sekcji. Wzorowany na public/css/prawne.css
   (ta sama metodologia ekstrakcji).
   ========================================================================== */

/* -------------------------------------------------- siatka: brakujace klasy --- */
/* .row / .container / col-lg-2..7 juz sa w styles.css. Tresc artykulu uzywa
   dodatkowo col-lg-10, ktorego tam nie ma (patrz tez public/css/prawne.css). */
@media (min-width: 992px) {
  .row > .col-lg-10 { width: 83.3333333%; }
}

/* ------------------------------------------------------- navigation-hero --- */
.navigation-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.navigation-hero__bg-image { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; object-position: center; z-index: 1; }
.navigation-hero__wrapper {
  background: radial-gradient(56.12% 226.85% at 81.58% 103.92%, #054FC7 0%, #003FA5 100%);
  height: 369px; position: relative;
}
@media (max-width: 767.98px) {
  /* Ponizej 992px naglowek fabryki jest position:fixed - patrz komentarz w prawne.css. */
  .navigation-hero__wrapper { height: 250px; padding-top: 162px; box-sizing: border-box; }
}
.navigation-hero__wrapper .container { position: relative; height: 100%; z-index: 5; }
.navigation-hero__wrapper.is-bg-img::after { content: ""; position: absolute; inset: 0; background-color: rgb(0 0 0 / .37); z-index: 2; }
.navigation-hero__title {
  color: #fff; font-size: 46px; font-weight: 700; line-height: normal;
  white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis;
  padding: 0 16px; margin: 0; width: 100%; text-align: center; margin-bottom: 30px;
}
@media (max-width: 992px) { .navigation-hero__title { font-size: 30px; margin-bottom: 10px; } }
.navigation-hero__icon-bg { position: absolute; bottom: 0; right: 0; z-index: 3; font-size: 0; line-height: 1; }
.navigation-hero__icon-bg svg { width: 135px; height: auto; }
.navigation-hero__cutout-bg { position: absolute; bottom: 0; right: 100px; z-index: 3; font-size: 0; line-height: 1; }
.navigation-hero__cutout-bg svg { width: 50px; height: auto; }
@media (max-width: 767.98px) {
  .navigation-hero__cutout-bg { right: 15px; bottom: 0; }
  .navigation-hero__icon-bg { bottom: 0; }
}

/* -------------------------------------- navigation-hero wewnatrz .l-single-post --- */
.l-single-post .navigation-hero { align-items: flex-start; }
.l-single-post .navigation-hero__wrapper { height: 523px; }
.l-single-post .navigation-hero__wrapper.is-bg-img::after { background: linear-gradient(180deg, #fff0 0%, rgb(0 0 0 / .56) 100%); }
@media (max-width: 991.98px) { .l-single-post .navigation-hero__wrapper { height: 218px; } }
.l-single-post .navigation-hero__title {
  max-width: 647px; height: 100%; padding-bottom: 58px; display: flex; flex-direction: column;
  justify-content: flex-end; text-align: left; white-space: normal; margin: 0;
}
@media (max-width: 991.98px) { .l-single-post .navigation-hero__title { text-align: center; padding-bottom: 31px; } }
@media (max-width: 991.98px) {
  .l-single-post .navigation-hero__icon-bg, .l-single-post .navigation-hero__cutout-bg { display: none; }
}

/* --------------------------------------------------------- c-breadcrumb --- */
.c-breadcrumb {
  overflow-x: hidden; white-space: nowrap; font-size: 13px; font-weight: 400;
  line-height: normal; text-decoration: none; color: var(--navy); text-overflow: ellipsis;
}
.c-breadcrumb > a { transition: all .2s ease-out; color: #505050; text-decoration: none; }
.c-breadcrumb > a:hover { color: var(--navy); }
.c-breadcrumb__separate { display: inline-block; vertical-align: middle; padding: 0 4px; margin-bottom: 4px; }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb { color: #fff; }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb > a { color: #fff; }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb > a:hover { color: var(--blue); }
.c-breadcrumb__big-wrap.white-all .c-breadcrumb__separate { color: #fff; }

/* ------------------------------------------------------------- l-blog --- */
.l-blog__main { margin-top: 54px; margin-bottom: 100px; }
@media (max-width: 991.98px) { .l-blog__main { margin-top: 60px; margin-bottom: 60px; } }
.l-blog__row { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; row-gap: 50px; margin-bottom: 40px; }
@media (max-width: 991.98px) { .l-blog__row { grid-template-columns: 1fr; row-gap: 30px; } }
@media (min-width: 992px) { .l-blog__post-item:first-child { grid-column: span 2; } }
.l-blog__post-item:first-child .c-posts-single__post { height: 598px; position: relative; }
@media (max-width: 991.98px) { .l-blog__post-item:first-child .c-posts-single__post { height: 345px; } }
.l-blog__post-item:first-child .c-posts-single__thumbnail-wrapper { position: absolute; z-index: -1; width: 100%; height: 100%; }
.l-blog__post-item:first-child .c-posts-single__content {
  border-radius: 10px; width: 100%; height: 100%; padding: 56px 64px; display: flex;
  flex-direction: column; justify-content: flex-end; background: linear-gradient(180deg, #fff0 0%, rgb(0 0 0 / .56) 100%);
}
@media (max-width: 991.98px) { .l-blog__post-item:first-child .c-posts-single__content { padding: 30px; } }
.l-blog__post-item:first-child .c-posts-single__post-title { font-weight: 600; font-size: 30px; line-height: 100%; letter-spacing: -.02em; margin-bottom: 15px; color: #fff; max-width: 640px; }
@media (max-width: 991.98px) { .l-blog__post-item:first-child .c-posts-single__post-title { font-size: 22px; margin-bottom: 20px; } }
.l-blog__post-item:first-child .c-posts-single__excerpt { font-weight: 300; font-size: 16px; line-height: 24px; color: #fff; max-width: 490px; -webkit-line-clamp: 3; line-clamp: 3; }
@media (max-width: 991.98px) { .l-blog__post-item:first-child .c-posts-single__excerpt { margin-bottom: 20px; } }
.l-blog__post-item:first-child .c-posts-single__read { font-weight: 600; font-size: 16px; line-height: 100%; letter-spacing: -.02em; color: #fff; }

/* --------------------------------------------------------- c-posts-single --- */
.c-posts-single__post { display: flex; gap: 48px; text-decoration: none; }
@media (max-width: 991.98px) { .c-posts-single__post { flex-direction: column; gap: 10px; } }
.c-posts-single__content { padding-top: 20px; }
.c-posts-single__thumbnail-wrapper { width: 308px; height: 244px; overflow: hidden; border-radius: 10px; flex-shrink: 0; }
@media (max-width: 1399.98px) { .c-posts-single__thumbnail-wrapper { width: 50%; } }
@media (max-width: 991.98px) { .c-posts-single__thumbnail-wrapper { width: 100%; height: 190px; } }
.c-posts-single__thumbnail-wrapper img { object-fit: cover; object-position: top center; width: 100%; height: 100%; }
.c-posts-single__post-title {
  color: #0e1a23; font-weight: 600; font-size: 18px; line-height: 100%; letter-spacing: -.02em;
  margin-bottom: 17px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.c-posts-single__excerpt {
  color: #0e1a23; font-weight: 300; font-size: 16px; line-height: 24px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; margin-bottom: 24px;
}
.c-posts-single__read { color: #1a8fe3; display: flex; align-items: center; font-weight: 600; font-size: 16px; line-height: 100%; letter-spacing: -.02em; }

/* ------------------------------------------------------- l-single-post --- */
.l-single-post__content { margin-top: 60px; margin-bottom: 100px; margin-inline: auto; }
@media (max-width: 991.98px) { .l-single-post__content { margin-top: 40px; margin-bottom: 60px; } }
.l-single-post__pagination {
  position: relative; padding: 27px 0; border-radius: 10px; border: 1px solid #D8E0EC;
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 100px;
}
@media (max-width: 991.98px) { .l-single-post__pagination { flex-direction: column; align-items: flex-start; padding: 0; margin-bottom: 60px; } }
.l-single-post__author-container {
  position: relative; display: flex; gap: 19px; padding-top: 24px; padding-bottom: 34px;
  padding-left: 72px; padding-right: 64px; max-width: 492px;
}
.l-single-post__author-container::after { content: ""; position: absolute; height: 100%; width: 1px; right: 0; top: 0; background: #D8E0EC; }
@media (max-width: 991.98px) {
  .l-single-post__author-container { padding: 25px 20px; max-width: unset; width: 100%; }
  .l-single-post__author-container::after { height: 1px; width: calc(100% - 50px); right: 25px; top: unset; bottom: 0; }
}
.l-single-post__author-name { font-size: 15px; font-weight: 600; color: #202020; }
.l-single-post__author-description { font-weight: 300; font-size: 16px; line-height: 24px; color: #202020; }
.l-single-post__link-container { display: flex; gap: 72px; justify-content: flex-end; padding-right: 80px; padding-left: 80px; width: 100%; }
@media (max-width: 991.98px) { .l-single-post__link-container { gap: 21px; flex-direction: column; padding-right: 0; padding: 25px; padding-bottom: 44px; } }
.l-single-post__post-link { color: #202020; display: flex; flex-grow: 1; flex-shrink: 0; flex-basis: 0%; flex-direction: column; gap: 4px; text-align: right; transition: .3s color; text-decoration: none; }
.l-single-post__post-link svg path { fill: #202020; transition: .3s fill; }
.l-single-post__post-link div { justify-content: flex-end; }
@media (max-width: 991.98px) { .l-single-post__post-link:first-child div { text-align: left; justify-content: flex-start; } }
.l-single-post__post-link.right svg { rotate: 180deg; }
.l-single-post__post-link.right div { justify-content: flex-start; }
.l-single-post__post-link.right .l-single-post__link-name { text-align: left; }
.l-single-post__post-link:hover { color: #1a8fe3; }
.l-single-post__post-link:hover svg path { fill: #1a8fe3; }
.l-single-post__link-title { font-size: 15px; font-weight: 700; display: flex; gap: 11px; align-items: center; }
.l-single-post__link-name { font-weight: 300; font-size: 16px; line-height: 24px; }

/* ------------------------------------ prosa artykulu (bloki Gutenberga) --- */
.l-single-post__content .wp-block-heading { font-weight: 600; font-size: 20px; line-height: 25px; letter-spacing: -.02em; margin-top: 39px; margin-bottom: 0; color: #021431; }
@media (max-width: 991.98px) { .l-single-post__content .wp-block-heading { margin-top: 30px; } }
.l-single-post__content h2.wp-block-heading { font-size: 26px; line-height: 100%; }
@media (max-width: 991.98px) { .l-single-post__content h2.wp-block-heading { font-size: 20px; line-height: 25px; } }
.l-single-post__content p { font-weight: 300; font-size: 16px; line-height: 24px; margin: 0; margin-top: 4px; }
.l-single-post__content ul, .l-single-post__content ol { margin: 0; margin-top: 4px; padding-left: 24px; }
.l-single-post__content ul li::marker, .l-single-post__content ol li::marker { color: #0056D3; }
/* A5 (audyt axe 2026-09-03, link-in-text-block): kontrast #0056D3 na otaczajacym
   tekscie #021431 to 2,85:1 (ponizej wymaganych 3:1) - link w tresci artykulu musi
   wiec byc odrozniony inaczej niz samym kolorem, stad stale podkreslenie zamiast
   tylko na hover. */
.l-single-post__content a { color: #0056D3; text-decoration: underline; transition: .3s color; }
.l-single-post__content a:hover { text-decoration: underline; }
.l-single-post__content blockquote {
  margin: 0; margin-top: 80px; margin-bottom: 40px; padding: 50px 53px 37px 61px;
  border: 1px solid #D8E0EC; border-radius: 10px; position: relative;
}
@media (max-width: 991.98px) { .l-single-post__content blockquote { padding: 25px; padding-top: 63px; margin-top: 63px; margin-bottom: 43px; } }
.l-single-post__content blockquote cite { font-weight: 300; font-size: 16px; line-height: 24px; font-style: normal; }

/* Tabele/obrazki/podpisy Gutenberga (wp-block-table, wp-block-image) nie maja wlasnych regul
   w produkcyjnym arkuszu tematu - dziedzicza domyslne style rdzenia WP (block-library), ktore
   nie wchodza w sklad tego arkusza. Wartosci ponizej zweryfikowane na zywo (computed style)
   na https://wodzilla.pl/jak-dziala-dystrybutor-wody/ - to standardowe defaulty Gutenberga. */
.l-single-post__content figure { margin: 16px 0; }
.l-single-post__content figure img { max-width: 100%; height: auto; display: block; }
.l-single-post__content .wp-element-caption { color: #404040; font-size: 15.36px; margin-top: 8px; margin-bottom: 16px; }
.l-single-post__content .wp-block-table { margin: 16px 0; overflow-x: auto; }
.l-single-post__content table { border-collapse: collapse; width: 100%; }
.l-single-post__content table.has-fixed-layout { table-layout: fixed; }
.l-single-post__content th, .l-single-post__content td { border: 1px solid #404040; padding: 8px; text-align: left; font-size: 16px; font-weight: 300; }
.l-single-post__content thead th { font-weight: 600; }

/* ------------------------------------------------------------ FAQ (Yoast) --- */
/* .schema-faq / .schema-faq-section / .schema-faq-question / .schema-faq-answer nie maja
   wlasnych regul w produkcji (potwierdzone computed style na zywo) - dziedzicza zwykle
   .l-single-post__content strong/p powyzej. Celowo bez dodatkowych regul. */

/* --------------------------------------------------------------- recent-posts --- */
/* Karuzela pozioma zamiast statycznej siatki (dlug z komentarza ponizej - domkniety).
   .recent-posts pelni jednoczesnie role sekcji ORAZ .container (te same klasy na
   jednym divie w post.njk), wiec overflow: hidden i position: relative (punkt
   odniesienia dla .b-products__navigation position:absolute) leza na tym samym
   selektorze - dokladnie ta sama para regul co .b-products / .b-products .container
   w public/styles.css i .b-products-list / .b-products-list .container w produkt.css. */
.recent-posts { margin-top: 100px; margin-bottom: 100px; overflow: hidden; position: relative; }
@media (max-width: 991.98px) { .recent-posts { margin-top: 20px; margin-bottom: 60px; } }
.recent-posts__title { margin-top: 0; text-align: center; margin-bottom: 40px; font-weight: 600; font-size: 46px; line-height: 100%; letter-spacing: -.02em; color: #0e1a23; }
@media (max-width: 991.98px) { .recent-posts__title { margin-bottom: 15px; font-size: 26px; line-height: 43px; } }
/* .b-products__navigation/.b-products__arrow* (ksztalt, hover, rotate strzalki "next")
   sa juz w public/styles.css - wspoldzielone z b-products (strona glowna) i
   b-products-list (karta produktu). Tutaj tylko nadpisujemy szerokosc kafelka:
   domyslne .js-products-swiper .swiper-slide z styles.css zaklada 4,5 kafelka na
   ekran (siatka produktow), a "Podobne artykuly" ma szerokie, poziome karty
   (.c-posts-single__post, 308px miniatura + tresc) - potrzebne 2 na ekran >=992px,
   dokladnie jak w starej siatce 1fr 1fr z column-gap:72px ponizej. Na mobile
   (<=991.98px) dziala juz globalna regula .js-products-swiper .swiper-slide
   { width: calc(100% - 35px) } z styles.css - nie trzeba jej powielac. */
@media (min-width: 992px) {
  .recent-posts .js-products-swiper .swiper-wrapper { gap: 72px; }
  .recent-posts .js-products-swiper .swiper-slide { width: calc((100% + 72px) / 2 - 72px); }
}
/* Przycisk "Zobacz wiecej" (produkcja: .recent-posts .c-btn { margin-inline:auto; margin-top:40px },
   mobile margin-top:30px) - .c-btn/.c-btn--primary/.c-btn--light-bg juz w public/styles.css. */
.recent-posts .c-btn { margin-inline: auto; margin-top: 40px; display: flex; width: fit-content; }
@media (max-width: 991.98px) { .recent-posts .c-btn { margin-top: 30px; } }


/* Byline autora pod tytulem wpisu: zdjecie + podpis w jednej linii.
   Zdjecie ma stale width/height w HTML (56x56), zeby nie bylo przeskoku ukladu
   przy doladowaniu (CLS). srcset podaje wersje 2x dla ekranow o duzej gestosci.
   Na waskich ekranach zdjecie i tekst zostaja obok siebie - podpis jest krotki,
   wiec zawija sie pod samym soba, nie pod zdjeciem. */
.c-autor { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.c-autor__foto { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; display: block; }
.c-autor__tekst { margin: 0; font-size: 15px; line-height: 1.45; }