/* ==========================================================================
   CALLA — komponent "Hero" (ACF flexible content, layout "hero")
   ========================================================================== */

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

/* Odstęp od menu na mobile ujednolicony na 48px we wszystkich sekcjach typu
   hero w serwisie (hero/pillar-hero/cooperation-hero/contact-hero) — na
   życzenie Mike'a, --section-spacing (64px na mobile) był za duży tuż pod
   fixed headerem. Dotyczy tylko GÓRNEGO paddingu, dół zostaje bez zmian. */
@media (max-width: 639px) {
  .hero {
    padding-top: 48px;
  }
}

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

/* .hero__eyebrow — typografia w global.css. */

.hero__heading {
  /* Jost, nie Plus Jakarta Sans jak reszta nagłówków — potwierdzone. */
  font-family: 'Jost', var(--font-heading);
  max-width: 420px;
  margin-bottom: var(--space-5);
}

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

.hero__description {
  max-width: 620px;
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  /* Mobile 18px, nie 16px jak --fs-lead — osobny clamp tylko tutaj. */
  font-size: clamp(18px, calc(0.13vw + 17.51px), 20px);
  line-height: var(--lh-lead);
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0 0 var(--space-7);
}

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

@media (max-width: 639px) {
  .hero__description {
    max-width: 100%;
  }
}

@media (min-width: 640px) and (max-width: 1139px) {
  .hero__description {
    max-width: 75%;
  }
}

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