/*
 * Silent Heroes — Promo Boxes (silentheroes.pro blog)
 * 4 sloty: in-content-top, in-content-btf, sidebar, blog-index.
 */

.sh-promo {
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sh-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.12);
}

.sh-promo-link {
  display: block;
  text-decoration: none;
  position: relative;
}

.sh-promo picture {
  display: block;
}

.sh-promo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Badge "Promocja" — corner label */
.sh-promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(17, 17, 17, 0.75);
  color: var(--sh-offwhite);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* ===== Slot: in-content-top (po 2 akapicie) — box 360×300 ===== */

.sh-promo-in-content-top {
  margin: 32px auto;
  max-width: 360px;
}

.sh-promo-in-content-top img {
  aspect-ratio: 6 / 5; /* 360 × 300 */
  object-fit: cover;
}

/* ===== Slot: in-content-btf (przed końcem) ===== */

.sh-promo-in-content-btf {
  margin: 32px auto;
  max-width: 100%;
}

.sh-promo-in-content-btf img {
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* ===== Slot: sidebar ===== */

.sh-promo-sidebar {
  margin: 24px 0;
  max-width: 320px;
}

.sh-promo-sidebar img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Sticky sidebar promo na desktop */
@media (min-width: 1024px) {
  .sh-promo-sidebar {
    position: sticky;
    top: 100px;
  }
}

/* ===== Slot: blog-index (między wpisami w archive) ===== */

.sh-promo-blog-index {
  grid-column: span 1;
  margin: 0;
}

.sh-promo-blog-index img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* W grid sh-grid-3 (3 kolumny) promo zajmuje 1 kolumnę, taki sam rozmiar jak post card */
.sh-grid-3 > .sh-promo-blog-index {
  grid-column: span 1;
}

@media (max-width: 768px) {
  .sh-promo-blog-index {
    grid-column: 1 / -1;
  }
}

/* ===== Dedykowane kreacje desktop+mobile (klasa .sh-promo--has-mobile) =====
   Gdy admin dostarcza osobne pliki (desktop + mobile przez <picture>), każdy
   wyświetlamy w jego NATURALNYCH proporcjach: bez wymuszania ratio slotu i bez
   object-fit:cover, więc nic nie jest przycinane. width:100% + height:auto
   (z .sh-promo img) skaluje obraz do szerokości kolumny, wysokość proporcjonalnie.
   Reguła celowo NA KOŃCU pliku — równa specyficzność jak `.sh-promo-<slot> img`
   oraz `.sh-promo-<slot>`, wygrywa kolejnością źródła. Działa na każdej szerokości;
   <picture> sam podmienia plik (≤768px = mobile, inaczej desktop). */

/* Boks: zdejmij cap szerokości slotu — kreacja desktop ma zająć pełną szerokość
   kontenera (kolumna treści na desktopie, kolumna ekranu na mobile). */
.sh-promo--has-mobile {
  max-width: 100%;
}

/* Obraz: naturalne proporcje, bez wymuszania ratio slotu i bez object-fit:cover. */
.sh-promo--has-mobile img {
  aspect-ratio: auto;
  object-fit: fill;
  max-width: 100%;
}