/* ==========================================================================
   CALLA — Pillar "Rozwiązania": Hero (template-pillar.php)
   Mobile: eyebrow+H1, opis pod nim. Desktop (>=1140px): dwie kolumny obok
   siebie (eyebrow+H1 po lewej, opis po prawej). Zdjęcie zawsze pod tekstem,
   pełnej szerokości kontenera — inaczej niż .hero (page_sections), gdzie
   zdjęcie stoi obok tekstu.
   ========================================================================== */

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

/* Odstęp od menu na mobile ujednolicony na 48px — patrz hero.css. */
@media (max-width: 639px) {
  .pillar-hero {
    padding-top: 48px;
  }
}

.pillar-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.pillar-hero__heading {
  /* Jost, jak pozostałe H1 motywu (hero.css, story.css). W referencyjnym
     zrzucie słowo "jutra" ma inny, italikowy krój — motyw go nie ma
     (docs/design-tokens.md go nie zawiera), więc CAŁY nagłówek jednym
     krojem do czasu ustalenia z Mikiem (patrz session-log). */
  font-family: 'Jost', var(--font-heading);
  margin-top: var(--space-3);
  max-width: 620px;
}

.pillar-hero__description {
  /* .lead-text (global.css) nie zeruje marginesu <p> — domyślny margines
     przeglądarki (1em góra/dół) dokładał się do gridowego gap i nachodził
     na kolejne elementy na mobile. Odstępy ma dawać wyłącznie grid gap. */
  margin: 0;
  max-width: 100%;
}

.pillar-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-primary-dark) 12%, transparent);
}

@media (min-width: 1140px) {
  .pillar-hero__inner {
    /* Proporcja fr (719:945), NIE minmax(0,1fr) minmax(0,945px) — ten
       drugi wariant dawał prawej kolumnie pierwszeństwo do pełnych 945px
       (fixed max), więc lewa (1fr) była ściskana niemal do zera już przy
       ~1140-1400px, łamiąc "Architektura jutra"/eyebrow na krzywo. Fr-fr
       dzieli miejsce proporcjonalnie na całej szerokości, a .container
       (max-width 1920px) na .pillar-hero__inner i tak ogranicza to do
       dokładnie 945px na referencyjnej szerokości z Figmy i szerszych. */
    grid-template-columns: minmax(0, 719fr) minmax(0, 945fr);
    align-items: start;
    column-gap: var(--space-10);
  }

  .pillar-hero__media img {
    aspect-ratio: 21 / 9;
  }
}