/* ═══════════════════════════════════════════════════════════════════════════
   WIDOKI PRÓBNE — wczytywane WYŁĄCZNIE gdy w adresie jest ?podglad=…
   ?podglad=szeryf        nagłówki szeryfowe (EB Garamond), tekst dalej Montserrat
   ?podglad=karta         odwrócona hierarchia karty: tytuł na pierwszym planie,
                          miniatura jako mały ornament z boku
   ?podglad=szeryf,karta  obie rzeczy naraz
   ?podglad=off           powrót do wersji produkcyjnej
   Bez parametru ten plik w ogóle się nie ładuje — produkcja jest nietknięta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAFIA SZERYFOWA ────────────────────────────────────────────── */
body.podglad-szeryf h1,
body.podglad-szeryf h2,
body.podglad-szeryf h3,
body.podglad-szeryf h4,
body.podglad-szeryf .blog-v2-archive__title,
body.podglad-szeryf .blog-v2-featured__title,
body.podglad-szeryf .blog-v2-grid-card__title,
body.podglad-szeryf .article-card__title,
body.podglad-szeryf .pub-article__title,
body.podglad-szeryf .pub-box__category,
body.podglad-szeryf .home-v2-hero .left .title h1,
body.podglad-szeryf .home-v2-about__title,
body.podglad-szeryf .home-v2-owner__title {
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
}

/* antykwa ma mniejszą wysokość x niż Montserrat — bez korekty wygląda drobniej */
body.podglad-szeryf h1,
body.podglad-szeryf .blog-v2-archive__title { font-size: 1.12em; font-weight: 600; }
body.podglad-szeryf h2 { font-size: 1.08em; font-weight: 600; }
body.podglad-szeryf h3,
body.podglad-szeryf h4 { font-size: 1.06em; font-weight: 600; }

/* wersaliki w antykwie robią się rozstrzelone — lekko je ściągamy */
body.podglad-szeryf .blog-v2-archive__title,
body.podglad-szeryf .blog-v2-featured__title,
body.podglad-szeryf .home-v2-publications__title,
body.podglad-szeryf .home-v2-articles__title { letter-spacing: 0; }

/* ── 2. ODWRÓCONA HIERARCHIA KARTY ──────────────────────────────────────── */

/* 2a. Kafel na liście publikacji (i archiwach kategorii).
   Przy tytule na pierwszym planie trzy kolumny są za wąskie — schodzimy do dwóch. */
@media (min-width: 992px) {
  body.podglad-karta .blog-v2-archive__grid .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
/* karty w jednym rzędzie kończą się na tej samej wysokości — inaczej linie oddzielające
   po lewej i po prawej stronie rozjeżdżają się o kilkanaście pikseli */
body.podglad-karta .blog-v2-archive__grid .row > [class*="col-"] { display: flex; }
body.podglad-karta .blog-v2-archive__grid .row > [class*="col-"] > a.blog-v2-grid-card { flex: 1 1 auto; }


body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  background: #fff;
  border-bottom: 1px solid #E5E2DC;
  box-shadow: none;
  padding: 22px 0 26px;
  margin-bottom: 0;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card:hover { box-shadow: none; transform: none; }

/* miniatura = ornament: stała proporcja, stała szerokość, nigdy nie rośnie */
/* miniatura po lewej: stała szerokość i proporcja, nigdy nie dyktuje wysokości karty */
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__image {
  order: 1;
  flex: 0 0 220px;
  width: 220px;
  aspect-ratio: 16 / 10;
  height: auto;
  overflow: hidden;
  margin: 3px 0 0;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__image img {
  width: 100%;
  height: 100%;      /* produkcja ma tu sztywne 222px / 200px */
  min-height: 0;
  object-fit: cover;
  display: block;
}

/* treść: tytuł → zajawka → data i kategoria */
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__body {
  order: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: #14191D;
  padding: 0;
  /* KLUCZOWE: wersja produkcyjna ma tu sztywne height:200px (i 240px w jednym breakpoincie),
     przez co przy trzech liniach tytułu „czytaj więcej" wychodziło poza kartę i nachodziło
     na kafel poniżej. W tym układzie wysokość ma wynikać z treści. */
  height: auto;
  min-height: 0;
  overflow: visible;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__body::before { display: none; }

body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__title {
  order: 1;
  color: #14191D;
  font-size: 1.45rem;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 8px;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__excerpt {
  order: 2;
  display: block;
  color: #3B3B3B;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 10px;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__date {
  order: 3;
  color: var(--zloto-tekst);
  font-size: 0.8rem;
  margin: 0;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__more {
  order: 5;
  color: var(--zloto-tekst);
  align-self: flex-start;
  text-align: left;
  /* w wersji produkcyjnej link ma margin-left:auto i odjeżdża na prawą krawędź karty */
  margin: 12px auto 0 0;
  width: auto;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__kategoria {
  order: 4;
  color: #6E6A63;
  font-size: 0.8rem;
  margin: 2px 0 0;
}
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__kategoria strong {
  color: var(--zloto-tekst);
  font-weight: 600;
}

/* na telefonie miniatura schodzi pod tytuł i zwęża się */
@media (max-width: 992px) {
  body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card { gap: 18px; padding: 18px 0 22px; }
  body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__image { flex-basis: 170px; width: 170px; }
}
@media (max-width: 576px) {
  body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card { gap: 14px; }
  body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__image { flex-basis: 116px; width: 116px; }
  body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__title { font-size: 1.2rem; }
}

/* tablet (577–991 px): dwie kolumny z miniaturą 170 px nie mieszczą się — prawa kolumna
   wystawała ~21 px poza ekran (pomiar 28.09.2026 przy 768 px). Jedna kolumna jak na telefonie. */
@media (min-width: 577px) and (max-width: 991.98px) {
  body.podglad-karta .blog-v2-archive__grid .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}
/* tekst karty może się zwężać — bez tego długie słowa rozpychają kartę poza kolumnę */
body.podglad-karta .blog-v2-archive__grid a.blog-v2-grid-card .blog-v2-grid-card__body { min-width: 0; overflow-wrap: anywhere; }

/* 2b. Karuzela „Polecane artykuły" — CELOWO BEZ ZMIAN.
   W slajdzie szerokim na ~280 px odwrócona hierarchia się nie broni (miniatura nad tytułem
   wyglądała gorzej niż stan obecny), więc karuzela zostaje dokładnie taka jak na produkcji.
   Podgląd „karta" dotyczy wyłącznie kafli na liście publikacji i w archiwach kategorii. */

/* ── 3. PASEK INFORMACYJNY — żeby było wiadomo, że to widok próbny ─────── */
.ks-podglad-pasek {
  position: fixed;
  z-index: 99999;
  left: 0; right: 0; bottom: 0;
  background: #14191D;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 8px 16px;
  text-align: center;
}
.ks-podglad-pasek a { color: #E4D6AE; text-decoration: underline; }
.ks-podglad-pasek strong { color: #E4D6AE; }

/* ─────────────────────────────────────────────────────────────
   Automatyczny box CTA pod treścią wpisu (?podglad=cta)
   Wygląd zgodny z blokiem „CTA box" z elastycznego szablonu:
   złota linia z lewej, ciemny przycisk. Style trzymamy tutaj,
   bo produkcyjne reguły są zawężone do section.page-post-acf.
   ───────────────────────────────────────────────────────────── */
.ks-cta {
  border-left: 5px solid var(--zloto, #ad9961);
  padding: 10px 40px;
  margin: 50px 0 10px;
}
.ks-cta__tresc {
  font-size: 18px;
  color: #555;
  margin: 0 0 28px;
  line-height: 1.65;
  white-space: pre-line;
}
.ks-cta__przycisk {
  display: inline-block;
  background: #322C2C;
  color: #fff;
  padding: 17px 45px;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}
.ks-cta__przycisk:hover,
.ks-cta__przycisk:focus {
  background: #1a1616;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 767px) {
  .ks-cta { padding: 10px 20px; margin: 34px 0 6px; }
  .ks-cta__tresc { font-size: 16px; margin-bottom: 20px; }
  .ks-cta__przycisk { padding: 14px 28px; font-size: 17px; }
}

/* Nagłówek boxa CTA — nazwa usługi (decyzja klientki 08.09.2026).
   Celowo <p>, nie nagłówek: box jest doklejany do treści wpisu,
   a nagłówki z treści zbiera spis treści i dane strukturalne. */
.ks-cta__naglowek {
  font-size: 24px;
  line-height: 1.3;
  color: #322C2C;
  font-weight: 600;
  margin: 0 0 14px;
}
@media (max-width: 767px) {
  .ks-cta__naglowek { font-size: 20px; margin-bottom: 10px; }
}