/**
 * Slider strony glownej - gniazdo o proporcji PLIKU, nie o stalej wysokosci.
 *
 * ⚠ Natywny slider ma tu `object-fit: cover` przy stalej wysokosci (320 px ponizej lg,
 *   240 px ponizej md), wiec kreacja jest przycinana - zmierzone na tym sklepie: przy
 *   oknie 390 px z grafiki 1602x668 widac srodkowe 1086x668, czyli UCIEKA 32% szerokosci.
 *   Tutaj gniazdo bierze proporcje z rzeczywistych wymiarow kreacji (`--absl-ar`, ustawiane
 *   w szablonie), wiec nie ma czego przycinac i grafik nie musi zgadywac bezpiecznego obszaru.
 */
.ababink-slider {
  /* ⚠ Wartosci awaryjne na wypadek slajdu bez wymiarow w bazie. Obie ustawia SZABLON,
     z prawdziwych wymiarow pliku - i obie osobno, bo `--absl-ar-mobile: var(--absl-ar)`
     zadeklarowane tutaj rozwijaloby sie w kontekscie TEGO elementu, czyli braloby
     wartosc domyslna zamiast tej ustawionej inline na figurze dziecka. */
  --absl-ar: 3.6;
  --absl-ar-mobile: 3.6;
}

.ababink-slider__figure {
  position: relative;
  margin: 0;
  aspect-ratio: var(--absl-ar);
}

.ababink-slider__figure img {
  display: block;
  width: 100%;
  height: 100%;
  /* Zapas na wypadek kreacji o proporcji innej niz gniazdo - bez niego obraz bylby
     rozciagniety, a `cover` co najwyzej przytnie kilka pikseli krawedzi. */
  object-fit: cover;
}

.ababink-slider__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ababink-slider__caption {
  color: var(--bs-light);
  background-color: rgba(var(--bs-dark-rgb), 0.5);
  border-radius: var(--bs-border-radius);
  backdrop-filter: blur(10px);
}

.ababink-slider__caption p { margin-block-end: 0; }

/* ⚠ Prog 768 px musi byc zgodny z `AbabinkSlide::MOBILE_BREAKPOINT` i z atrybutem
   `media` w szablonie. Rozjazd znaczy, ze gniazdo ma proporcje jednej kreacji,
   a przegladarka pobiera druga - czyli kreacja jest przycinana mimo calego mechanizmu. */
@media (max-width: 767px) {
  .ababink-slider__figure { aspect-ratio: var(--absl-ar-mobile); }
}

/* ── Blok treści na kreacji ───────────────────────────────────────────────────
 * Nagłówek, opis i przycisk jako TEKST, a nie piksele wypalone w grafice.
 *
 * ⚠ Powód jest ten sam, co przy pasku informacyjnym: tekst w obrazku nie przechodzi
 *   przez tłumaczenia (ten moduł jedzie na sześć sklepów rodziny), nie ma go czym
 *   przeczytać czytnikowi ekranu, nie skaluje się z ustawieniem wielkości pisma,
 *   a każda zmiana napisu wymaga grafika.
 */
.ababink-slider__caption {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  padding: clamp(1rem, 4vw, 3rem);
  color: #fff;
  /* Cień pod tekstem, nie pod całym blokiem - działa też bez przyciemnienia,
     na kreacji, która ma jasne i ciemne miejsca naraz. */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.ababink-slider__figure--left .ababink-slider__caption { align-items: flex-start; text-align: start; }
.ababink-slider__figure--center .ababink-slider__caption { align-items: center; text-align: center; }
.ababink-slider__figure--right .ababink-slider__caption { align-items: flex-end; text-align: end; }

/* ⚠ Przyciemnienie jest WARSTWĄ POD tekstem i musi mieć `pointer-events: none`:
   przykrywa całą figurę, a przy przycisku z `stretched-link` klikalny jest cały slajd -
   nakładka przechwytująca zdarzenia zabrałaby ten klik. */
.ababink-slider__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--absl-overlay, 0));
  pointer-events: none;
}

/* ⚠ Stopnie pisma z `clamp()`, a nie stałe: ten sam blok stoi w gnieździe szerokim
   na 1920 px i na 390 px, czyli pięć razy węższym. Wartość stała jest czytelna
   w jednym z tych dwóch przypadków - tę samą lekcję odrobił generator banera promocji. */
.ababink-slider__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.ababink-slider__desc {
  margin: 0;
  font-size: clamp(0.9rem, 1.5vw, 1.5rem);
  line-height: 1.3;
}

.ababink-slider__desc p { margin-block-end: 0; }

.ababink-slider__cta {
  /* Cel dotykowy: WCAG 2.5.8 wymaga 24 px, my dajemy 44 px - tak jak reszta
     przycisków tego sklepu. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: clamp(1rem, 2vw, 2rem);
  font-size: clamp(0.85rem, 1.1vw, 1.125rem);
  text-shadow: none;
}

/* ⚠ Na telefonie blok bywa wyższy niż gniazdo (293 px przy kreacji 4:3), więc opis
   schodzi, a zostaje nagłówek i przycisk - czyli to, co niesie decyzję. Ukrycie
   przez `display: none`, a nie zmniejszanie: tekst poniżej progu czytelności jest
   gorszy niż jego brak (zmierzone przy banerze promocji: 9 px CSS to pasek plam). */
@media (max-width: 575px) {
  .ababink-slider__desc { display: none; }
  .ababink-slider__caption { gap: 0.6rem; }
}