/* ==========================================================================
   CALLA — Pillar "Usługi": wstęp + siatka kart usług
   (template-pillar-uslugi.php)

   Desktop (>=1140px): 2 kolumny.
   - Kolumna 1 (.services-teaser__col--left): wstęp + karta 1 ("Opieka nad
     zielenią"), naturalny stos (flex column) — zdjęcie karty 1 16:9.
   - Kolumna 2 (.services-teaser__col--right): karta 2 ("Projekty") SAMA,
     rozciągnięta (align-items:stretch na gridzie) na CAŁĄ wysokość kolumny
     1 — jej zdjęcie ma flex:1 (wypełnia całą dostępną wysokość, nie sztywne
     1:1) — na wyraźne życzenie Mike'a: "blok ma się zaczynać równo i
     wypełnić całą przestrzeń".
   - Karta 3 i kolejne (.services-teaser__card--full): pełna szerokość obu
     kolumn, zdjęcie 21:9.
   Mobile: wszystko jeden stos w naturalnej kolejności DOM (wstęp, karta 1,
   karta 2, karta 3+) — kolumny znikają, "1 pod 2" zamiast obok siebie.

   Każda karta = zdjęcie NAD treścią (nie obok, inaczej niż .pillar-teaser
   w Rozwiązaniach) — stąd osobny komponent, nie reużycie pillar-teaser.css.
   Typografia tytułu/pigułek/opisu/przycisku identyczna z .pillar-teaser
   (te same klasy), więc te reguły NIE są tu duplikowane — plik ładowany
   razem z pillar-teaser.css (patrz inc/enqueue.php).
   ========================================================================== */

.services-teaser {
  padding-block: var(--section-spacing);
}

.services-teaser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.services-teaser__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.services-teaser__intro-heading {
  font-family: 'Jost', var(--font-heading);
  margin-bottom: var(--space-4);
}

.services-teaser__intro-description {
  max-width: 480px;
  margin: 0;
  color: var(--color-text-muted);
}

.services-teaser__card {
  display: flex;
  flex-direction: column;
}

.services-teaser__card-media {
  overflow: hidden;
  border-radius: 20px;
  margin-bottom: var(--space-5);
}

.services-teaser__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.services-teaser__card:hover .services-teaser__card-media img {
  transform: scale(1.08);
}

/* Opis (.pillar-teaser__description, reużyty z pillar-teaser.css) ma tam
   max-width:750px i typografię .lead-text (16-20px/1.8) — tutaj: 100%
   szerokości boksu karty (bywają dużo szersze, karta 3+ na całą siatkę) i
   inna typografia wg specyfikacji z Figmy od Mike'a: Plus Jakarta Sans
   Light 16px/1.5/1%, kolor pełny (nie muted) — --fs-body już jest
   clamp(14,...,16), dokładnie ten docelowy rozmiar. */
.services-teaser__card .pillar-teaser__description {
  max-width: 100%;
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* Karta 1 (kolumna lewa): 16:9. Domyślnie też baza dla mobile/tablet, gdzie
   kolumny znikają i wszystkie karty (poza kartą 3+, patrz niżej) dostają tę
   samą proporcję. */
.services-teaser__card-media {
  aspect-ratio: 16 / 9;
}

/* Karta 3+ — pełna szerokość, panoramiczne 21:9, na każdej szerokości. */
.services-teaser__card--full .services-teaser__card-media {
  aspect-ratio: 21 / 9;
}

@media (min-width: 1140px) {
  .services-teaser__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-10);
    row-gap: var(--space-8);
    /* Kolumna prawa rozciąga się do wysokości kolumny lewej — bez tego
       "stretch" (domyślne align-items gridu) karta 2 miałaby tylko tyle
       wysokości ile potrzebuje jej własna treść. */
    align-items: stretch;
  }

  .services-teaser__col--right {
    /* Karta 2 wypełnia całą wysokość kolumny. */
    height: 100%;
  }

  .services-teaser__col--right .services-teaser__card {
    height: 100%;
  }

  /* Zdjęcie karty 2 rośnie i wypełnia CAŁĄ dostępną wysokość kolumny (nie
     sztywne 1:1) — dokładnie życzenie Mike'a "wypełnił całą przestrzeń".
     min-height:0 na flex-childzie, inaczej flex nie pozwoli mu skurczyć
     się poniżej naturalnej wysokości obrazka w niektórych przeglądarkach. */
  .services-teaser__col--right .services-teaser__card-media {
    flex: 1;
    min-height: 0;
    aspect-ratio: auto;
  }

  .services-teaser__card--full {
    grid-column: 1 / -1;
  }
}