/* ==========================================================================
   CALLA — Pillar "Rozwiązania": karty rozwiązań (template-pillar.php)
   Mobile: zdjęcie nad tekstem, jedna kolumna. Desktop (>=1140px): dwie
   kolumny obok siebie, naprzemiennie lewo/prawo wg parzystości indeksu
   (.pillar-teaser__item--reverse), wzorem .timeline__item--right/--left.
   ========================================================================== */

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

.pillar-teaser__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.pillar-teaser__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.pillar-teaser__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* Mobile (<1140px): zdjęcie zawsze NA KOŃCU karty (pod tekstem), niezależnie
   od --reverse (ten modyfikator ma znaczenie dopiero >=1140px, patrz niżej) —
   i proporcja 3:4 zamiast 4:3. Na życzenie Mike'a. Reguła MUSI być po
   .pillar-teaser__media img (wyżej), inaczej kolejność w kaskadzie nadpisze
   ten override poza media query. */
@media (max-width: 1139.98px) {
  .pillar-teaser__media {
    order: 2;
  }

  .pillar-teaser__content {
    order: 1;
  }

  .pillar-teaser__media img {
    aspect-ratio: 3 / 4;
  }
}

.pillar-teaser__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pillar-teaser__title {
  /* Jost Light + pierwsze słowo "regular" (<strong>, patrz .hero__heading
     strong) — wytyczne z Figmy od Mike'a, fluid tą samą metodą co
     .audience__heading (24px mobile -> 36px desktop). */
  margin: 0 0 var(--space-4);
  font-family: 'Jost', var(--font-heading);
  font-weight: var(--fw-light);
  font-size: clamp(24px, calc(0.78vw + 21.08px), 36px);
  line-height: 1.78;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.pillar-teaser__title strong {
  font-weight: var(--fw-regular);
}

.pillar-teaser__pills {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2); /* = 8px */
}

.pillar-teaser__pill {
  /* Jost Light, kolor #264045 (=--color-primary-dark) — wytyczne z Figmy.
     text-transform:uppercase zostaje: treść w ACF jest zapisana małymi
     literami, w Figmie tekst był już wpisany wersalikami. */
  font-family: 'Jost', var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-primary-dark);
  background-color: color-mix(in srgb, var(--color-accent-green) 5%, transparent);
  border-radius: 50px;
  padding: var(--space-2) var(--space-4);
}

.pillar-teaser__description {
  /* Typografia teraz = .lead-text (global.css: Plus Jakarta Sans Light,
     --fs-lead 16->20px, --lh-lead 1.8) — dokładnie wytyczne z Figmy, klasa
     "lead-text" dodana w template-pillar.php. Tu tylko layout. */
  max-width: 750px;
  margin: 0 0 var(--space-6);
}

.pillar-teaser__button {
  align-self: flex-start;
}

@media (max-width: 639px) {
  .pillar-teaser__button {
    align-self: stretch;
    width: 100%;
  }
}

@media (min-width: 1140px) {
  .pillar-teaser__item {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: var(--space-10);
  }

  .pillar-teaser__item--reverse .pillar-teaser__media {
    order: 2;
  }

  .pillar-teaser__item--reverse .pillar-teaser__content {
    order: 1;
  }
}