/* ==========================================================================
   BAURAD – Blog (komponent Blog, część frontowa)
   Style charakterystyczne tylko dla bloga: wyszukiwarka w hero, pasek
   kategorii, układ featured/side/grid, układ wpisu (hero + baner + sidebar
   sticky), panel CTA, podobne artykuły i strona autora.
   Bazujemy na tokenach i klasach z css/tokens.css + css/general.css;
   tu dokładamy wyłącznie rzeczy specyficzne dla bloga (prefiks br-blog-*).
   ========================================================================== */

/* --- Strona główna bloga: hero ------------------------------------------
   Makieta (Wissen.dc.html): baner na pełną szerokość — zdjęcie 100% z
   poziomym przejściem w papier na całej wysokości, tytuł w foncie szeryfowym
   (--text-hero-editorial, waga 600), lead --text-body-lg i wyszukiwarka
   w kontenerze. Rytm: sekcja 6.5rem / 4.5rem, wnętrze tylko padding boczny
   (makieta: `.br-hero-body`, `padding: 0 --space-4`).
   Poniżej 864px makieta przechodzi w kolumnę: treść u góry, a zdjęcie POD
   nią jako blok 16:10 (jak hero listy projektów). */
.br-blog-hero { padding: 6.5rem 0 4.5rem; }
.br-blog-hero .br-hero__img {
  top: -10%;
  bottom: auto;
  left: 0;
  right: 0;
  width: 100%;
  height: 120%;
  background-position: 66% 46%;
}
.br-blog-hero .br-hero__fade {
  inset: 0;
  left: 0;
  width: auto;
  background: linear-gradient(90deg, var(--color-paper) 0%, rgba(247, 243, 232, 0.82) 34%, rgba(247, 243, 232, 0.4) 58%, rgba(247, 243, 232, 0) 82%);
}
.br-blog-hero .br-hero__inner { z-index: 2; padding: 0 var(--space-4); }
.br-blog-hero .br-hero__copy { max-width: none; }
.br-blog-hero__eyebrow { margin: 0 0 var(--space-3); line-height: var(--text-body-lh); }
.br-blog-hero__title {
  font-family: var(--font-serif);
  font-size: var(--text-hero-editorial);
  font-weight: 600;
  line-height: var(--text-hero-editorial-lh);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  max-width: 40rem;
  text-wrap: pretty;
}
.br-blog-hero__intro {
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  color: var(--color-ink-2);
  margin: 0;
  max-width: 35rem;
}

/* Mobile (makieta: @media max-width 864px): hero jako kolumna — treść
   (order 1), zdjęcie pod nią (order 2) w proporcji 16:10, winieta znika,
   tytuł schodzi do --text-h2, wyszukiwarka ma mniejszy odstęp górny. */
@media (max-width: 864px) {
  .br-blog-hero {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    padding: var(--space-5) 0 var(--space-6);
  }
  .br-blog-hero .br-hero__inner {
    order: 1;
    width: 100%;
    padding: 0 var(--space-4);
  }
  .br-blog-hero .br-hero__img {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-top: var(--space-5);
    transform: none !important;
  }
  .br-blog-hero .br-hero__fade { display: none; }
  .br-blog-hero__title { font-size: var(--text-h2); }
  .br-blog-hero .br-blog-search { margin-top: var(--space-4); }
}

/* --- Wyszukiwarka w hero --- */
.br-blog-search { position: relative; max-width: 62.5rem; margin: var(--space-12) auto 0; }
.br-blog-search__field {
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-search);
  padding: var(--space-15) var(--space-15) var(--space-15) var(--space-4);
}
.br-blog-search__icon { display: inline-flex; flex-shrink: 0; }
.br-blog-search__icon .br-icon { opacity: 0.7; }
.br-blog-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  color: var(--color-ink);
  padding: var(--space-2) 0;
}
.br-blog-search__clear {
  border: none;
  background: none;
  color: var(--color-ink-3);
  font-size: var(--text-h3);
  line-height: 1;
  padding: var(--space-1) var(--space-05);
  cursor: pointer;
}
.br-blog-search__clear:hover { color: var(--color-ink); }
.br-blog-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: var(--btn-height);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-bg);
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.br-blog-search__submit:hover { background: var(--color-action-hover); }
.br-blog-search__submit .br-icon { filter: brightness(0) invert(1); }

/* --- Podpowiedzi wyszukiwarki --- */
.br-blog-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
}
.br-blog-suggest__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-15) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--color-surface);
  background: none;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
}
.br-blog-suggest__item:last-child { border-bottom: 0; }
.br-blog-suggest__item:hover { background: var(--color-surface); }
.br-blog-suggest__kind {
  flex-shrink: 0;
  font-size: var(--text-badge);
  font-weight: 600;
  letter-spacing: var(--text-badge-track);
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* --- Pasek kategorii (filtry) --- */
.br-blog-cats {
  max-width: var(--container);
  margin: var(--space-8) auto 0;
  padding-inline: var(--space-page);
}
.br-blog-cats__row { display: flex; flex-wrap: wrap; gap: var(--space-15); }
.br-blog-chip {
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-15) var(--space-25);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.br-blog-chip:hover { border-color: var(--color-action); }
.br-blog-chip.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-bg); }
.br-blog-count { margin-top: var(--space-3); font-size: var(--text-body-sm); color: var(--color-ink-3); }

/* --- Wyniki: featured + side + siatka --- */
.br-blog-results { margin-top: var(--space-4); }
.br-blog-results__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-page);
}
.br-blog-feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.br-blog-side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.br-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-8);
}

/* --- Karta wpisu (kafle) --- */
.br-blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.2s ease;
}
.br-blog-card:hover { color: var(--color-ink); transform: translateY(-4px); }
.br-blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background-color: var(--color-surface);
  background-size: cover;
  background-position: 50% 52%;
  margin-bottom: var(--space-25);
  transition: box-shadow 0.2s ease;
}
.br-blog-card:hover .br-blog-card__media { box-shadow: var(--shadow-card-hover); }
.br-blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  margin-bottom: var(--space-15);
}
.br-blog-card__cat { font-size: var(--text-caption); font-weight: 600; color: var(--color-ink-2); }
.br-blog-card__dot { font-size: var(--text-badge); color: var(--color-ink-3); }
.br-blog-card__time { font-size: var(--text-badge); color: var(--color-ink-3); }
.br-blog-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-teaser-title);
  font-weight: 600;
  line-height: var(--text-teaser-title-lh);
}
.br-blog-card__date { margin-top: var(--space-1); font-size: var(--text-caption); color: var(--color-ink-3); }

/* Warianty: duży (pierwszy wpis) oraz średnie kafle obok */
.br-blog-card--featured { margin-bottom: var(--space-6); }
.br-blog-card--featured .br-blog-card__media { border-radius: var(--radius-field); margin-bottom: var(--space-3); }
.br-blog-card--featured .br-blog-card__meta { margin-bottom: var(--space-2); }
.br-blog-card--featured .br-blog-card__cat,
.br-blog-card--featured .br-blog-card__time { font-size: var(--text-body-sm); }
.br-blog-card__title--xl {
  font-size: var(--text-h2);
  line-height: var(--text-h2-lh);
  max-width: 35rem;
  margin-bottom: var(--space-2);
}
.br-blog-card__lead {
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-lh);
  color: var(--color-ink-2);
  margin-bottom: var(--space-2);
}
.br-blog-card--side { margin-bottom: var(--space-4); }

/* --- „Załaduj więcej” --- */
.br-blog-more { display: flex; justify-content: center; margin-top: var(--space-8); }
.br-blog-end { margin-top: var(--space-6); text-align: center; font-size: var(--text-body-sm); color: var(--color-ink-3); }
.br-blog-empty { max-width: 32.5rem; margin: var(--space-8) auto 0; text-align: center; font-family: var(--font-serif); font-size: var(--text-body-lg); color: var(--color-ink); }

@media (max-width: 900px) {
  .br-blog-feat { grid-template-columns: 1fr; }
  .br-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .br-blog-grid { grid-template-columns: 1fr; }
  .br-blog-side { grid-template-columns: 1fr; }
  .br-blog-card--side { margin-bottom: 0; }
}

/* ==========================================================================
   Pojedynczy wpis
   ========================================================================== */

/* --- Hero wpisu (tytuł + tekst przed znacznikiem „read more”) --- */
.br-post-header { background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.br-post-header__inner {
  max-width: 51.5rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-7);
  text-align: center;
}
.br-post-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-ink-2);
  text-decoration: none;
}
.br-post-back:hover { color: var(--color-action); }
.br-post-tag { font-size: var(--text-body); font-weight: 600; color: var(--color-ink-2); margin-bottom: var(--space-25); }
.br-post-title {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--text-h1-lh);
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-3);
}
.br-post-standfirst {
  max-width: 39rem;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  color: var(--color-ink-2);
}
.br-post-herotext {
  max-width: 45rem;
  margin: var(--space-5) auto 0;
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  color: var(--color-ink);
}

/* --- Baner (obraz pełnej szerokości) --- */
.br-article-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 39rem;
  overflow: hidden;
  background-color: var(--color-surface);
}
.br-article-hero__img {
  position: absolute;
  left: 0;
  right: 0;
  top: -9%;
  height: 118%;
  background-size: cover;
  background-position: 50% 54%;
  will-change: transform;
}

/* --- Treść + sidebar sticky --- */
.br-post-body { max-width: 62.5rem; margin: 0 auto; padding: var(--space-8) var(--space-4) 0; }
.br-post-grid { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-6); align-items: start; }
.br-post-side { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: var(--space-3); }
.br-post-side__item { display: flex; flex-direction: column; gap: var(--space-05); }
.br-post-side__label {
  font-size: var(--text-badge);
  font-weight: 600;
  letter-spacing: var(--text-nav-track);
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.br-post-side__value { font-size: var(--text-body-sm); color: var(--color-ink); }

.br-post-share { position: relative; margin-top: var(--space-05); }
.br-post-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  height: var(--btn-height-sm);
  padding: 0 var(--space-25);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-ink-2);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.br-post-share__btn:hover { border-color: var(--color-action); color: var(--color-action); }
.br-post-share__menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 20;
  min-width: 14.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
}
.br-post-share__menu a,
.br-post-share__menu button {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  width: 100%;
  padding: var(--space-15) var(--space-25);
  border: 0;
  border-bottom: 1px solid var(--color-surface);
  background: none;
  text-align: left;
  text-decoration: none;
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-body-sm);
  font-weight: 500;
  cursor: pointer;
}
.br-post-share__menu a:last-child,
.br-post-share__menu button:last-child { border-bottom: 0; }
.br-post-share__menu a:hover,
.br-post-share__menu button:hover { background: var(--color-surface); }

/* Proza treści wpisu */
.br-post-content { font-family: var(--font-serif); font-size: var(--text-body-lg); line-height: var(--text-body-lg-lh); color: var(--color-ink); }
.br-post-content > * + * { margin-top: var(--space-3); }
.br-post-content p { margin: 0; }
.br-post-content h2 {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--text-h3-lh);
  letter-spacing: -0.01em;
  margin-top: var(--space-6);
}
.br-post-content h3 { font-family: var(--font-ui); font-size: var(--text-h3); font-weight: 700; margin-top: var(--space-5); }
.br-post-content blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-action);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: var(--text-lead-lh);
}
.br-post-content ul,
.br-post-content ol { padding-left: var(--space-3); }
.br-post-content ul { list-style: disc; }
.br-post-content ol { list-style: decimal; }
.br-post-content li { margin-bottom: var(--space-1); }
.br-post-content img { border-radius: var(--radius-card-lg); margin: var(--space-4) 0; }
.br-post-content a { color: var(--color-action-text); }
.br-post-content hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-6) 0; }

/* ==========================================================================
   CTA pod wpisem + podobne artykuły
   ========================================================================== */
.br-post-cta { max-width: 62.5rem; margin: 4.5rem auto 0; padding: 0 var(--space-4); }
.br-cta-align { max-width: 54rem; margin: 0 auto 0 14.5rem; }
.br-cta-panel {
  max-width: 42.5rem;
  background: var(--color-ink);
  border-radius: var(--radius-card-lg);
  padding: var(--space-6);
  color: var(--color-bg);
}
.br-cta-panel__eyebrow {
  font-size: var(--text-badge);
  font-weight: 600;
  letter-spacing: var(--text-nav-track);
  text-transform: uppercase;
  color: #FF9E5C;
  margin-bottom: var(--space-2);
}
.br-cta-panel__title {
  font-family: var(--font-ui);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--text-h3-lh);
  margin: 0 0 var(--space-2);
}
.br-cta-panel__text {
  max-width: 32.5rem;
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--color-line);
  margin: 0 0 var(--space-3);
}
.br-cta-panel__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.br-cta-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.br-cta-panel__btn--primary { background: var(--color-action); color: var(--color-bg); }
.br-cta-panel__btn--primary:hover { background: var(--color-action-hover); color: var(--color-bg); transform: translateY(-1px); }
.br-cta-panel__btn--secondary { border-color: var(--color-ink-2); color: var(--color-bg); }
.br-cta-panel__btn--secondary:hover { border-color: var(--color-action); color: var(--color-bg); transform: translateY(-1px); }

/* --- Podobne artykuły --- */
.br-post-related { max-width: 62.5rem; margin: 5.5rem auto 0; padding: 0 var(--space-4) var(--space-10); }
.br-post-related__title {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--text-nav-track);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-bottom: var(--space-4);
}
.br-post-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.br-blog-card--related .br-blog-card__cat { margin-bottom: var(--space-1); }

/* ==========================================================================
   Strona autora
   ========================================================================== */
.br-author-header { background: var(--color-paper); border-bottom: 1px solid var(--color-line); }
.br-author-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-page);
}
.br-author-header__img {
  flex: 0 0 auto;
  width: 10rem;
  height: 10rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--color-surface);
}
.br-author-header__copy { max-width: 45rem; }

@media (max-width: 900px) {
  .br-post-grid { grid-template-columns: 1fr; }
  .br-post-side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(--space-2);
    border-bottom: 1px solid var(--color-line);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
  }
  .br-post-related__grid { grid-template-columns: 1fr; }
  .br-cta-align { margin-left: 0; max-width: 100%; }
  .br-post-grid > *,
  .br-post-related__grid > * { min-width: 0; }
}
@media (max-width: 640px) {
  .br-article-hero { aspect-ratio: 39 / 40; max-height: none; }
  .br-author-header__inner { flex-direction: column; align-items: flex-start; }
  .br-author-header__img { width: 7rem; height: 7rem; }
}