/* ===== KAFELKI OFERTY ZE ZDJĘCIAMI – Strony z Sercem ===== */
.offer-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.offer-card { padding: 0 2rem 2rem; }

/* Zdjęcie na górze kafelka (bez zmian w HTML – element flex o kolejności -1) */
.offer-card::after {
  content: ''; order: -1; position: relative; z-index: 1;
  display: block; margin: 0 -2rem 1.6rem;
  aspect-ratio: 16 / 10;
  background-color: #ece9f5;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 0.7s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s;
}
.offer-card:hover::after { transform: scale(1.03); filter: brightness(1.06); }

/* Ikona jako okrągła plakietka nachodząca na zdjęcie */
.offer-icon {
  width: 54px; height: 54px; margin: -68px auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; font-size: 1.2rem;
  color: #7c3aed; position: relative; z-index: 3;
  box-shadow: 0 8px 22px rgba(15,27,61,0.18);
  border: 2px solid rgba(124,58,237,0.12);
  transition: transform 0.4s, box-shadow 0.4s;
}
.offer-card:hover .offer-icon { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 28px rgba(124,58,237,0.25); }
.offer-card.zaproszenie .offer-icon { border-color: rgba(212,175,55,0.2); }

/* Zdjęcia przypisane do kafelków po adresie linku */
a[href="urodziny.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/urodziny.webp");
}
a[href="walentynki.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/walentynki.webp");
}
a[href="rocznica.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/rocznica.webp");
}
a[href="wesele.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/wesele.webp");
}
a[href="pogrzeb.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/pogrzeb.webp");
}
a[href="narodziny.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/narodziny.webp");
}
a[href="imieniny.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/imieniny.webp");
}
a[href="firmowa.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/firmowa.webp");
}
a[href="zaproszenie-wesele.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/zaproszenie-wesele.webp");
}
a[href="zaproszenie-firmowe.html"]::after {
  background-image: linear-gradient(to top, rgba(15,27,61,.38) 0%, rgba(15,27,61,0) 60%), url("https://img.stronyzsercem.pl/przyklady/kafelki/zaproszenie-firmowe.webp");
}

/* Telefony: 2 kolumny, mniejsze zdjęcia i plakietki */
@media (max-width: 700px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .offer-card { padding: 0 1rem 1.4rem; }
  .offer-card::after { margin: 0 -1rem 1.2rem; }
  .offer-icon { width: 40px; height: 40px; font-size: 0.95rem; margin: -36px auto 0.9rem; }
  .offer-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
  .offer-card p { font-size: 0.82rem; }
  .offer-cta { font-size: 0.72rem; padding: 0.5rem 0.9rem; }
}