/* =============================================================================
   UNIMIS – blogfeed.css   (moduł: unimisblogfeed)
   -----------------------------------------------------------------------------
   Sekcja "Najnowsze na blogu" na stronie głównej (child theme: unimis_theme →
   parent: hummingbird, marka UNIQPETS). Wzorzec: dolina-noteci.pl — 3 minimalne
   karty obok siebie.

   Arkusz ładowany jako zwykły (NIElayerowy) CSS modułu, więc stylizuje WYŁĄCZNIE
   własne klasy .unimis-blog__* (nie polegamy na nadpisywaniu utility Bootstrapa).
   Tokeny marki z :root (themes/unimis_theme/assets/css/custom.css) z fallbackami:
     --unimis-brand #ea5e25 • --unimis-brand-rgb 234,94,37 • --unimis-brand-dark
     #c94e1d • --unimis-accent #f7b139 • --unimis-heading #0e332f • --unimis-radius
     10px • --unimis-gradient (pomarańcz→złoto).
   Breakpointy jak w Bootstrapie/Hummingbird: 992px (tablet→2 kol.), 576px (mobile→1 kol.).
   Strategia: desktop-first (bazowo 3 kolumny, media (max-width) zawężają).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Sekcja + kontener o stałej szerokości
   --------------------------------------------------------------------------- */
.unimis-blog{
  padding-block:3.5rem;
}
.unimis-blog__inner{
  max-width:1320px;
  margin:0 auto;
  padding-inline:1rem;
}

/* ---------------------------------------------------------------------------
   2. Nagłówek sekcji — spójny z .section-title motywu (Poppins Bold, wyśrodkowany)
   --------------------------------------------------------------------------- */
.unimis-blog__title{
  font-family:'Poppins',"Inter",sans-serif;
  font-weight:700;
  color:var(--unimis-heading,#0e332f);
  text-align:center;
  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1.2;
  margin:0 0 2rem;
}

/* ---------------------------------------------------------------------------
   3. Siatka kart — 3 kolumny (desktop)
   --------------------------------------------------------------------------- */
.unimis-blog__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

/* ---------------------------------------------------------------------------
   4. Karta wpisu
   --------------------------------------------------------------------------- */
.unimis-blog__card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:var(--unimis-radius,10px);
  overflow:hidden;
  transition:box-shadow .15s ease, transform .15s ease;
}
.unimis-blog__card:hover,
.unimis-blog__card:focus-within{
  box-shadow:0 10px 26px rgba(14,51,47,.10);
  transform:translateY(-3px);
}

/* ---------------------------------------------------------------------------
   5. Obraz — klikalne opakowanie + stała proporcja, placeholder przy braku zdjęcia
   --------------------------------------------------------------------------- */
.unimis-blog__media{
  display:block;
  line-height:0;
  overflow:hidden;
}
.unimis-blog__img{
  display:block;
  width:100%;
  height:200px;
  object-fit:cover;
}
.unimis-blog__img--placeholder{
  /* blok o tej samej wysokości; ignoruje width/height z <img> (to <span>) */
  width:100%;
  height:200px;
  background:var(--unimis-gradient,linear-gradient(110deg,#ea5e25 30%,#f7b139 93%));
  opacity:.9;
}

/* ---------------------------------------------------------------------------
   6. Treść karty — flex column, by „Czytaj więcej" lądowało na dole
   --------------------------------------------------------------------------- */
.unimis-blog__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:1rem 1.1rem 1.2rem;
}

/* Data */
.unimis-blog__date{
  display:block;
  color:#a5a5a5;
  font-size:.75rem;
  margin-bottom:.4rem;
}

/* Tytuł wpisu — do 2 linii */
.unimis-blog__post-title{
  font-family:'Poppins',"Inter",sans-serif;
  font-weight:700;
  font-size:1.05rem;
  line-height:1.3;
  margin:0 0 .5rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.unimis-blog__post-title a{
  color:#212121;
  text-decoration:none;
  transition:color .15s ease;
}
.unimis-blog__post-title a:hover,
.unimis-blog__card:hover .unimis-blog__post-title a{
  color:var(--unimis-brand,#ea5e25);
}

/* Zajawka — do 3 linii */
.unimis-blog__excerpt{
  font-size:.8125rem;
  color:#757575;
  line-height:1.45;
  margin:0 0 .9rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* „Czytaj więcej" — przypięte do dołu karty */
.unimis-blog__more{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin-top:auto;
  color:var(--unimis-brand,#ea5e25);
  font-weight:600;
  font-size:.875rem;
  text-decoration:none;
  transition:color .15s ease;
}
.unimis-blog__more:hover{
  color:var(--unimis-brand-dark,#c94e1d);
}
.unimis-blog__arrow{
  transition:transform .15s ease;
}
.unimis-blog__more:hover .unimis-blog__arrow,
.unimis-blog__card:hover .unimis-blog__arrow{
  transform:translateX(3px);
}

/* ---------------------------------------------------------------------------
   7. Dostępność — widoczny focus na linkach
   --------------------------------------------------------------------------- */
.unimis-blog__media:focus-visible,
.unimis-blog__post-title a:focus-visible,
.unimis-blog__more:focus-visible{
  outline:2px solid var(--unimis-brand,#ea5e25);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .unimis-blog__card,
  .unimis-blog__post-title a,
  .unimis-blog__more,
  .unimis-blog__arrow{
    transition:none;
  }
}

/* ---------------------------------------------------------------------------
   8. Responsywność — Tablet (<992px): 2 kolumny • Mobile (<576px): 1 kolumna
   --------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .unimis-blog__grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:575.98px){
  .unimis-blog{
    padding-block:2.75rem;
  }
  .unimis-blog__grid{
    grid-template-columns:1fr;
  }
}