/**
 * Growth Bakers — sekcja Blog, uklad 1a z projektu „Sekcja Blog".
 *
 * Wartosci przepisane z makiety. Dwa miejsca celowo odbiegaja i sa opisane
 * przy nich: kolor kategorii i meta (kontrast) oraz wysokosc chipa (cel dotykowy).
 */
@layer sections {
  /* szare tlo sekcji — w makiecie #f4f4f2 */
  .blogsec { background: var(--grey); }

  .blogsec .bs-head h2 { max-width: 14em; }
  .blogsec .bs-head .lead { max-width: 620px; margin-top: 20px; }

  /* ---- filtr kategorii ---- */
  .blogsec .bs-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 34px;
  }
  .blogsec .bs-tag {
    display: inline-flex;
    align-items: center;
    /* makieta ma sam padding 10px 20px; 44px to wymog celu dotykowego
       z brand booka — roznica optyczna kilku pikseli */
    min-height: 44px;
    padding: 0 20px;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
    background: var(--paper);
    border: 2px solid var(--grey-line);
    color: var(--ink);
    transition: border-color .25s ease, transform .25s ease;
  }
  .blogsec .bs-tag:hover { border-color: var(--accent-text); }
  .blogsec .bs-tag:active { transform: scale(.97); }

  /* jeden aktywny filtr — bez tego nie widac, ktory jest wlaczony */
  .blogsec .bs-tag.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--mint);
  }
  .blogsec .bs-tag.is-on:hover { border-color: var(--ink); }

  /* ---- siatka: zawsze trzy rowne karty ---- */
  .blogsec .bs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
  }

  .blogsec .bs-card {
    display: block;
    background: var(--paper);
    border: 2px solid var(--rule);
    border-radius: 20px;
    padding: 18px 18px 24px;
    color: var(--fg-1);
    transition: border-color .3s ease, transform .3s ease;
  }
  .blogsec .bs-card:hover,
  .blogsec .bs-card:focus-visible {
    border-color: var(--accent-text);
    transform: translateY(-6px);
  }

  .blogsec .bs-thumb {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: clip;
    background: oklch(93% 0.002 106);
  }
  .blogsec .bs-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blogsec .bs-body { display: block; padding: 20px 8px 0; }

  /* mikroetykieta kategorii. Makieta ma #00ca92, ale ten kolor daje na bieli
     2.13:1 przy wymogu 4.5:1 — uzywamy przyciemnionego wariantu tego odcienia */
  .blogsec .bs-cat {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 10px;
  }

  /* NOWY WZORZEC z projektu: tytul wpisu to jedyny naglowek karty pisany
     zwykla wielkoscia liter — dlugie zdania w wersalikach sa nieczytelne */
  .blogsec .bs-title {
    display: block;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.2px;
    text-wrap: pretty;
  }

  .blogsec .bs-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: .8rem;
    font-weight: 500;
    /* makieta: #8a8a8a (3.03:1) — podnosimy do progu AA */
    color: var(--fg-4);
  }
  .blogsec .bs-meta i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    flex: none;
  }

  /* ---- domkniecie ---- */
  .blogsec .bs-more {
    display: flex;
    justify-content: center;
    margin-top: 44px;
  }

  @media (max-width: 900px) {
    .blogsec .bs-grid { grid-template-columns: 1fr; gap: 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .blogsec .bs-card, .blogsec .bs-tag { transition: none; }
    .blogsec .bs-card:hover { transform: none; }
  }
}