/* V2: karta hero (sections-v2/parts/hero-card.mjs). Prefiks .gs-hc-hero__.
   Karta wcięta 12 px (8 na mobile) od krawędzi okna, promień --v2-r-hero. Górny pas karty ma kolor paska
   wyróżników (pasek z nagłówka leży dokładnie na nim), a zdjęcie pod pasem ma własne zaokrąglone górne rogi,
   więc w rogach widać błękit pasa (jak desktronic). Wcięcie i wysokość pasa są te same co w header.css.
   Wysokość zdjęcia: prawie cały pierwszy ekran, spod karty wystaje początek następnej sekcji. */

.gs-hc-hero {
  --gs-hc-inset: 12px;
  --gs-hc-band: 38px;
  --gs-hc-hero-h: clamp(520px, calc(100svh - var(--gs-hc-inset) - var(--gs-hc-band) - 96px), 880px);
  padding: var(--gs-hc-inset) var(--gs-hc-inset) 0;
}

.gs-hc-hero__card {
  --gs-focus: var(--gs-bg);
  --gs-btn-primary-bg: var(--gs-bg);
  --gs-btn-primary-fg: var(--v2-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--gs-hc-band);
  border-radius: var(--v2-r-hero);
  background: var(--v2-band);
  color: var(--gs-bg);
}

.gs-hc-hero__media {
  position: relative;
  height: var(--gs-hc-hero-h);
  overflow: hidden;
  border-radius: var(--v2-r-hero) var(--v2-r-hero) 0 0;
  background: var(--v2-ink);
}

.gs-hc-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

/* Tekst w lewym dolnym rogu, na linii logo w pigułce nagłówka (szerokość pigułki, padding 24). */
.gs-hc-hero__inner {
  position: absolute;
  inset: auto 0 0;
  width: min(100% - 48px, 1440px);
  margin: 0 auto;
  padding: 0 24px clamp(48px, 8vh, 80px);
}

.gs-hc-hero__copy {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 40rem;
}

/* Przyciemnienie tylko pod tekstem: miękka elipsa przypięta do bloku tekstu. */
.gs-hc-hero__copy::before {
  content: '';
  position: absolute;
  inset: -70% -55% -60% -50%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--v2-ink) 60%, transparent) 0%,
    color-mix(in srgb, var(--v2-ink) 54%, transparent) 45%,
    color-mix(in srgb, var(--v2-ink) 38%, transparent) 62%,
    color-mix(in srgb, var(--v2-ink) 18%, transparent) 78%,
    color-mix(in srgb, var(--v2-ink) 5%, transparent) 92%,
    transparent 100%
  );
  pointer-events: none;
}

html.v2 .gs-hc-hero__title {
  max-width: 11em;
  color: inherit;
}

html.v2 .gs-hc-hero__lead {
  max-width: 30em;
  color: inherit;
  font-size: var(--v2-lead-size);
  line-height: 1.444;
}

.gs-hc-hero__cta {
  margin-top: 20px;
}

@media (max-width: 1023px) {
  .gs-hc-hero {
    --gs-hc-inset: 8px;
    --gs-hc-band: 32px;
    --gs-hc-hero-h: clamp(520px, calc(100svh - var(--gs-hc-inset) - var(--gs-hc-band) - 72px), 760px);
  }

  .gs-hc-hero__img {
    object-position: 46% 60%;
  }

  .gs-hc-hero__inner {
    width: 100%;
    padding: 0 20px 32px;
  }

  html.v2 .gs-hc-hero__lead {
    font-size: 16px;
  }

  .gs-hc-hero__cta {
    margin-top: 8px;
  }
}

/* ---------- Warianty paska wyróżników (?topbar=, css/v2/header.css) ----------
   top i none: karta bez górnego pasa, zdjęcie od samej góry karty. top: karta 24 px (mobile 16) pod paskiem
   na całą szerokość. Wysokość zdjęcia liczona tak, żeby dół karty wypadał tam, gdzie w wariancie hero
   (także przy górnym limicie wysokości: limit + wysokość pasa). */

html.v2:is([data-v2-topbar='top'], [data-v2-topbar='none']) .gs-hc-hero__card {
  padding-top: 0;
  background: var(--v2-ink);
}

html.v2[data-v2-topbar='top'] .gs-hc-hero {
  --gs-hc-hero-h: clamp(520px, calc(100svh - var(--gs-hc-band) - var(--v2-topbar-gap) - 96px), calc(880px + var(--gs-hc-band)));
  padding-top: calc(var(--gs-hc-band) + var(--v2-topbar-gap));
}

html.v2[data-v2-topbar='none'] .gs-hc-hero {
  --gs-hc-hero-h: clamp(520px, calc(100svh - var(--gs-hc-inset) - 96px), calc(880px + var(--gs-hc-band)));
}

/* Wyróżniki pod przyciskiem (wariant none): cienka linia, jeden rząd ikon z podpisami, jasne na zdjęciu. */
.v2-hero__usp {
  display: none;
}

html.v2[data-v2-topbar='none'] .v2-hero__usp {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--gs-bg) 32%, transparent);
  list-style: none;
}

.v2-hero__usp-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  white-space: nowrap;
}

.v2-hero__usp-item .gs-icon {
  flex: none;
  opacity: 0.9;
}

@media (max-width: 1023px) {
  html.v2[data-v2-topbar='top'] .gs-hc-hero {
    --gs-hc-hero-h: clamp(520px, calc(100svh - var(--gs-hc-band) - var(--v2-topbar-gap) - 72px), calc(760px + var(--gs-hc-band)));
  }

  html.v2[data-v2-topbar='none'] .gs-hc-hero {
    --gs-hc-hero-h: clamp(520px, calc(100svh - var(--gs-hc-inset) - 72px), calc(760px + var(--gs-hc-band)));
  }

  /* 390: trzy równe kolumny, ikona nad dwulinijkowym podpisem. */
  html.v2[data-v2-topbar='none'] .v2-hero__usp {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
    gap: 20px;
    margin-top: 16px;
    padding-top: 16px;
  }

  .v2-hero__usp-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    white-space: normal;
  }
}