/* Style bloga: treść artykułu, karty listy, okruszek.
 *
 * UWAGA: beopur.css nadaje gołym znacznikom skalę nagłówkową (h2 = 3rem, h3 = 2.5rem),
 * bo na stronie głównej wszystkie nagłówki mają klasy .heading-style-*. W treści
 * artykułu, która przychodzi z API bez klas, trzeba to sprowadzić do skali czytelniczej.
 *
 * Celowo NIE rozszerzamy istniejącej klasy .text-rich-text — używają jej regulamin.html
 * i polityka-prywatnosci.html, więc zmiana działałaby wstecz na dwie strony prawne.
 */

/* ---------- treść artykułu ---------- */

.article-body {
  font-family: Hind, sans-serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-color--text-primary);
}

.article-body h2 {
  font-family: Montserrat, sans-serif;
  font-size: 1.875rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--base-color-brand--brand);
  margin: 2.5rem 0 .75rem;
}

.article-body h3 {
  font-family: Montserrat, sans-serif;
  font-size: 1.375rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--base-color-brand--brand);
  margin: 2rem 0 .5rem;
}

.article-body h2:first-child,
.article-body h3:first-child { margin-top: 0; }

.article-body p { margin: 0 0 1.25rem; }

.article-body ul,
.article-body ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }

.article-body li { margin: .375rem 0; padding-left: .25rem; }
.article-body li::marker { color: var(--base-color-brand--accent); }
.article-body ul ul,
.article-body ol ol { margin-top: .375rem; margin-bottom: 0; }

.article-body a {
  color: var(--base-color-brand--accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.article-body a:hover { text-decoration-thickness: 2px; }

.article-body strong { font-weight: 700; color: var(--base-color-brand--brand); }

.article-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 2rem 0;
}

.article-body blockquote {
  border-left: .25rem solid var(--base-color-brand--accent);
  margin: 2rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  font-style: italic;
}

/* ---------- tabele ----------
 * normalize.css ustawia tylko border-collapse. Opakowanie .article-table-wrap
 * dokłada Function wokół każdej <table>, żeby szeroka tabela przewijała się
 * we własnym pudełku zamiast rozpychać stronę na telefonie. */

.article-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
  border: 1px solid #ccc;
  border-radius: .75rem;
}

.article-body table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .95rem;
  margin: 0;
}

.article-body thead th {
  background: var(--base-color-brand--brand);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  text-align: left;
}

.article-body th,
.article-body td {
  padding: .75rem 1rem;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.article-body tbody tr:nth-child(2n) { background: #f7f7f7; }
.article-body tbody tr:last-child td { border-bottom: 0; }

/* ---------- okładka i metadane ---------- */

.article-cover {
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #f0f0f0;
  margin-bottom: 2rem;
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-meta { color: #6b7280; }

.article-cta {
  border: 1px solid #ddd;
  border-left: .25rem solid var(--base-color-brand--accent);
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fafafa;
}
.article-cta p { margin: 0 0 1rem; }

/* ---------- okruszek ---------- */

.okruszek { margin-bottom: 1.5rem; color: #6b7280; }
.okruszek a { color: inherit; text-decoration: none; }
.okruszek a:hover { color: var(--base-color-brand--accent); text-decoration: underline; }
.okruszek__sep { margin: 0 .5rem; }

/* ---------- siatka kart ---------- */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover { box-shadow: 0 24px 48px -12px #0000002e; transform: translateY(-2px); }

/* aspect-ratio zamiast width/height: API nie podaje wymiarów okładki,
   a pudełko o stałych proporcjach i tak zeruje przeskoki układu. */
.blog-card__media { aspect-ratio: 16 / 9; background: #f0f0f0; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; flex: 1; }
.blog-card__meta { font-size: .8125rem; color: #6b7280; }
.blog-card__title {
  font-family: Montserrat, sans-serif;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--base-color-brand--brand);
  margin: 0;
}
.blog-card__excerpt { font-size: .9375rem; line-height: 1.6; margin: 0; color: var(--text-color--text-primary); }

/* ---------- responsywność ---------- */

@media screen and (max-width: 991px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-body { font-size: 1.0625rem; }
  .article-body h2 { font-size: 1.5rem; margin-top: 2rem; }
  .article-body h3 { font-size: 1.25rem; }
  .article-body img { border-radius: .75rem; margin: 1.5rem 0; }
  .article-table-wrap { border-radius: .5rem; }
  .article-body table { font-size: .875rem; min-width: 28rem; }
  .article-body th,
  .article-body td { padding: .625rem .75rem; }
}


/* ---------- nawigacja i pasek mobilny ----------
 * Skopiowane z inline <style> w index.html. Strony bloga używają tej samej
 * nawigacji (wycinanej przez functions/_lib/shell.js), więc potrzebują tych
 * samych reguł responsywności. Przy zmianie na stronie głównej trzeba
 * zaktualizować także tę sekcję.
 */
  /* NAVBAR — skalowanie plynne.
     Navbar to grid .375fr 1fr .375fr, wiec szerokie menu sciska boczne kolumny i potrafi
     zgniesc logo do zera albo zlamac etykiety na dwa wiersze. Zamiast wycinac pozycje,
     skalujemy typografie i odstepy razem z szerokoscia okna. Dolna granica clamp()
     odpowiada 992 px (tam Webflow przechodzi na hamburger), gorna okolicom 1600 px. */
  .logo-full {
    /* Naturalna szerokosc logo to ok. 134 px. Kolumna .375fr sciskala je nizej nawet wtedy,
       gdy w navbarze byl wolny zapas, wiec ustawiamy twarda dolna granice. */
    min-width: 8.375rem;
  }

  @media screen and (min-width: 992px) {
    .navbar_container {
      grid-column-gap: clamp(.5rem, -1.6rem + 2.1vw, 1.5rem);
    }

    .navbar-menu {
      gap: clamp(.125rem, -.65rem + .78vw, .5rem);
    }

    .navbar-menu .navbar-link {
      font-size: clamp(.875rem, .571rem + .49vw, 1rem);
      padding-left: clamp(.5rem, -.715rem + 1.96vw, 1rem);
      padding-right: clamp(.5rem, -.715rem + 1.96vw, 1rem);
      white-space: nowrap;
    }

    .navbar_container .navbar-tel {
      font-size: clamp(.875rem, .571rem + .49vw, 1rem);
      gap: clamp(.375rem, .22rem + .25vw, .5rem);
      padding-left: clamp(.5rem, .2rem + .49vw, .75rem);
      padding-right: clamp(.5rem, .2rem + .49vw, .75rem);
    }

    .navbar_container .button.is-navbar-btn {
      font-size: clamp(.875rem, .571rem + .49vw, 1rem);
      padding-left: clamp(.9rem, -.55rem + 2.35vw, 1.5rem);
      padding-right: clamp(.9rem, -.55rem + 2.35vw, 1.5rem);
      white-space: nowrap;
    }
  }

  /* Klasa .hide-desktop ma w CSS Webflow regule tylko dla .button. Link telefoniczny
     w rozwijanym menu ma sie pojawiac dopiero tam, gdzie znika .navbar-tel. */
  .navbar-link.hide-desktop { display: none; }

  @media screen and (max-width: 991px) {
    .navbar-link.hide-desktop { display: block; }
  }

  /* Telefon w navbarze */
  .navbar-tel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    font-weight: 600;
    color: var(--base-color-brand--brand);
    text-decoration: none;
    padding: .5rem .75rem;
  }

  .navbar-tel:hover {
    color: var(--base-color-brand--accent);
  }

  @media screen and (max-width: 991px) {
    .navbar-tel { display: none; }
  }

  /* Pasek akcji na telefonie */
  .mobile-cta-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    gap: .5rem;
    padding: .5rem calc(.5rem + env(safe-area-inset-left)) calc(.5rem + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: 0 -2px 14px #0000001f;
  }

  .mobile-cta-bar > a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    border-radius: .75rem;
    font-weight: 600;
    font-size: .95rem;
    text-align: center;
    text-decoration: none;
  }

  .mobile-cta-bar__call {
    background: var(--base-color-brand--accent);
    color: #fff;
  }

  .mobile-cta-bar__quote {
    background: var(--base-color-brand--brand);
    color: #fff;
  }

  /* Pasek pokazujemy w calym zakresie, w ktorym navbar jest zwiniety do hamburgera
     (<=991 px). Inaczej na tablecie telefon bylby schowany w menu i niewidoczny. */
  @media screen and (max-width: 991px) {
    .mobile-cta-bar { display: flex; }
    /* Zapas miejsca, zeby pasek nie zaslanial konca strony */
    .footer-component { padding-bottom: 4.5rem; }
  }

/* ---------- paginacja i kategorie ---------- */

.kategorie {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}

.kategorie__chip {
  display: inline-block;
  padding: .375rem .875rem;
  border: 1px solid #ddd;
  border-radius: 2rem;
  font-size: .875rem;
  text-decoration: none;
  color: var(--base-color-brand--brand);
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}

.kategorie__chip:hover {
  border-color: var(--base-color-brand--accent);
  color: var(--base-color-brand--accent);
}

.kategorie__chip.is-aktywna {
  background: var(--base-color-brand--brand);
  border-color: var(--base-color-brand--brand);
  color: #fff;
}

.paginacja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  margin-top: 3rem;
}

.paginacja__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 1px solid #ddd;
  border-radius: .5rem;
  font-size: .9375rem;
  text-decoration: none;
  color: var(--base-color-brand--brand);
  background: #fff;
}

.paginacja__link:hover {
  border-color: var(--base-color-brand--accent);
  color: var(--base-color-brand--accent);
}

.paginacja__link.is-aktywna {
  background: var(--base-color-brand--brand);
  border-color: var(--base-color-brand--brand);
  color: #fff;
}

.paginacja__luka { padding: 0 .25rem; color: #6b7280; }

@media screen and (max-width: 479px) {
  .paginacja__link { min-width: 2.5rem; padding: 0 .5rem; font-size: .875rem; }
}