/* ================= AKTUALNOŚCI BACh =================

   Arkusz własny wtyczki, żeby kafelki wyglądały tak samo także tam, gdzie „Treści strony"
   nie są wczytane — na przykład na stronie zbudowanej wyłącznie z bloków WordPressa.
   Kolory pokrywają się z paletą strony; gdy oba arkusze są obecne, nic się nie gryzie,
   bo nazwy klas są tu własne.

   Zdjęcia pokazujemy W CAŁOŚCI. To było wprost życzenie: żadnego przycinania, nawet
   kosztem pasów przy zdjęciu pionowym. Stąd `object-fit: contain` zamiast `cover`
   i stała wysokość kadru — bez niej kafelki w rzędzie miałyby różną wysokość
   i rząd rozjeżdżałby się przy każdym zdjęciu o innych proporcjach.                    */

.bach-akt-siatka{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:22px;
}

.bach-akt-kafelek{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #DCE7F2;
  border-radius:16px;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.bach-akt-kafelek:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(19,36,51,.12);}

/* Tło kadru: jasny błękit z palety, nie biel. Przy zdjęciu pionowym pasy po bokach mają
   wyglądać na część kafelka, a nie na brakujący fragment obrazka. */
.bach-akt-kafelek__media{
  display:block;
  background:#EAF4FD;
  border-bottom:1px solid #DCE7F2;
}
.bach-akt-kafelek__obraz{
  display:block;
  width:100%;
  height:210px;
  object-fit:contain;
  margin:0;
}

.bach-akt-kafelek__tresc{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 20px 20px;
}

.bach-akt-kafelek__data{
  font-size:13px;
  color:#7C8B99;
  margin-bottom:6px;
}

.bach-akt-kafelek h3{
  font-size:19px;
  line-height:1.3;
  margin:0 0 8px;
}
.bach-akt-kafelek h3 a{color:#132433;text-decoration:none;}
.bach-akt-kafelek h3 a:hover{color:#1D67CD;}

.bach-akt-kafelek p{
  margin:0;
  color:#3E4C5A;
  font-size:16px;
  line-height:1.6;
}

/* Przycisk dosunięty do dna, żeby stał w jednej linii we wszystkich kafelkach rzędu
   niezależnie od długości tekstu nad nim. */
.bach-akt-kafelek__cta{
  margin-top:auto;
  padding-top:14px;
  align-self:flex-start;
}

.bach-akt-wiecej{
  display:flex;
  justify-content:center;
  margin-top:22px;
}

.bach-akt-pusto{
  text-align:center;
  padding:36px 20px;
  color:#3E4C5A;
  background:#fff;
  border:1px dashed #DCE7F2;
  border-radius:16px;
}

/* ---------- PEŁNA TREŚĆ ---------- */

.bach-akt-pelny{
  max-width:820px;
  margin:0 auto;
}

.bach-akt-powrot{
  display:inline-block;
  margin-bottom:16px;
  color:#1D67CD;
  text-decoration:none;
  font-weight:600;
  font-size:14.5px;
}
.bach-akt-powrot:hover{text-decoration:underline;}

.bach-akt-pelny__tytul{
  font-size:clamp(24px,3vw,34px);
  line-height:1.25;
  color:#132433;
  margin:0 0 18px;
}

.bach-akt-pelny__media{
  background:#EAF4FD;
  border:1px solid #DCE7F2;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:22px;
}

/* W pełnym widoku zdjęcie ma się mieścić bez przycinania i bez rozciągania w pionie
   ponad rozsądek — stąd ograniczenie wysokości zamiast stałego kadru. */
.bach-akt-pelny__obraz{
  display:block;
  width:100%;
  max-height:520px;
  object-fit:contain;
  margin:0 auto;
}

.bach-akt-pelny__tekst{
  color:#3E4C5A;
  font-size:17.5px;
  line-height:1.7;
}
.bach-akt-pelny__tekst p{margin:0 0 1em;}
.bach-akt-pelny__tekst a{color:#1D67CD;}
.bach-akt-pelny__tekst img{max-width:100%;height:auto;border-radius:12px;}

@media (max-width:600px){
  .bach-akt-kafelek__obraz{height:180px;}
}