/* S1 Hero v10 (04.10): zdjęcie ekipy na rusztowaniu na cały kafel, granatowy gradient od lewej pod tekstem, biały nagłówek,
   karta „Komplet gotowy” po prawej na zdjęciu. Telefon: zdjęcie przyciemnione mocniej, karta pod tekstem.
   Poprzednia forma (karta wyjazdu): strona/archiwum-v9-hero/. */
.s01 { padding-top: 8px; }
.s01-kafel { position: relative; isolation: isolate; overflow: hidden; margin: 0 var(--cr-m); padding: 48px var(--cr-p) 48px; border-radius: var(--cr-r-m); background: var(--cr-marka); color: var(--cr-biel); }
.s01-tlo { position: absolute; inset: 0; z-index: -2; }
.s01-tlo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.s01-kafel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cr-marka) 82%, transparent) 0%, color-mix(in srgb, var(--cr-marka) 92%, transparent) 100%);
}
.s01-kafel > .kontener { width: min(var(--cr-max), 100%); }
.s01-g { display: grid; gap: 32px; align-items: end; }

.s01-et { margin-bottom: 18px; color: var(--cr-na-glebi-2); }
.s01-h1 { color: var(--cr-biel); text-wrap: balance; }
.s01-lead { margin-top: 16px; max-width: 44ch; color: color-mix(in srgb, var(--cr-na-glebi-2) 40%, var(--cr-biel)); }
.s01-akcje { margin-top: 28px; }
.s01-drugi .i { margin-left: -4px; }
.s01-kafel .btn--drugi { --btn-tlo: transparent; --btn-tekst: var(--cr-biel); --btn-obrys: var(--cr-biel); }
.s01-kontakt { margin-top: 14px; font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--cr-na-glebi-2); max-width: 48ch; }

/* karta „Komplet gotowy” na zdjęciu */
.s01-karta { justify-self: start; width: min(100%, 320px); padding: 18px 20px; border-radius: var(--cr-r-m); background: var(--cr-tlo); color: var(--cr-tekst); box-shadow: 0 24px 60px rgba(14, 26, 43, .35); }
.s01-karta__gora { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--cr-linia-2); }
.s01-karta__ik { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--cr-st-zatw); color: var(--cr-biel); }
.s01-karta__ik .i { width: 22px; height: 22px; stroke-width: 2.5; }
.s01-karta__gora > span:last-child { display: grid; line-height: 1.25; }
.s01-karta__gora b { font-family: var(--cr-f-nagl); font-size: 1.25rem; font-weight: 700; color: var(--cr-marka); }
.s01-karta__gora > span:last-child > span { font-size: .875rem; color: var(--cr-tekst-2); }
.s01-karta__lista { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.s01-karta__lista li { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.s01-karta__lista span { color: var(--cr-tekst-2); }
.s01-karta__lista b { font-weight: 600; color: var(--cr-marka); text-align: right; }

@media (min-width: 1024px) {
  .s01-kafel { display: grid; align-items: center; min-height: min(calc(100svh - var(--cr-nagl-h) - 24px), 760px); padding-top: 64px; padding-bottom: 64px; }
  .s01-kafel::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--cr-marka) 96%, transparent) 0%, color-mix(in srgb, var(--cr-marka) 88%, transparent) 38%, color-mix(in srgb, var(--cr-marka) 30%, transparent) 70%, color-mix(in srgb, var(--cr-marka) 10%, transparent) 100%),
      linear-gradient(0deg, color-mix(in srgb, var(--cr-glebia) 45%, transparent) 0%, transparent 40%);
  }
  .s01-g { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .s01-tekst { grid-column: 1 / span 6; }
  .s01-karta { grid-column: 9 / span 4; justify-self: end; align-self: end; margin-bottom: -8px; }
  .s01-h1 { font-size: clamp(3.25rem, 4.8vw, 4.5rem); line-height: 1.03; }
  .s01-lead { font-size: 1.25rem; }
  .s01-akcje { flex-wrap: wrap; gap: 12px; }
  .s01-akcje .btn { min-width: 0; padding-left: 20px; padding-right: 20px; white-space: nowrap; }
}