/* ==========================================================================
   Sekcja: Oferta - domkniecie
   Stopka strony ma juz ciemny pas z wezwaniem, wiec ten blok nie moze byc
   drugim takim samym gestem. Jest wiec jasny (--panel-soft), plaski i szeroki:
   pytanie po lewej, odpowiedz i pigulka po prawej, na wspolnej dolnej krawedzi.
   Dwa wezwania z rzedu roznia sie wtedy temperatura, a nie glosnoscia.
   ========================================================================== */

/* Bez border-top: lista uslug zamyka sie wlasnym hairline'em kilkadziesiat
   pikseli wyzej, wiec kreska na krawedzi panelu dawalaby dwie rownolegle linie
   w jednym oddechu. Zmiana powierzchni wystarczy za granice. */
.oferta-cta {
  --oferta-pad: clamp(1.5rem, 3.4vw, 3.5rem);

  background: var(--panel-soft);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.oferta-cta__in {
  display: grid;
  row-gap: clamp(1.75rem, 3.4vw, 2.75rem);
}

.oferta-cta__eyebrow {
  color: var(--purple);
  letter-spacing: 0.24em;
}

.oferta-cta__h {
  font-size: clamp(2.05rem, 1.35rem + 3vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* Na tej podstronie kazdy wiersz tresci wisi na hairline'ie - siedem uslug
   powyzej i spis w naglowku. Odpowiedz koncowa tez, zeby domkniecie nalezalo
   do tego samego jezyka, a nie plywalo samo w pustym polu. */
.oferta-cta__rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.oferta-cta__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.4vw, 1.85rem);
}

/* Odpowiedz idzie sansem, mimo ze skalowo prosilaby sie o serif. Serif jest w
   tym bloku podpisem naglowka ("dokladnie potrzebujesz?") i drugi krok dalej,
   tuz pod nim, odbieralby mu range. Pytanie mowi dwoma glosami, odpowiedz
   jednym. */
.oferta-cta__p {
  max-width: 24ch;
  font: 300 clamp(1.15rem, 0.95rem + 0.85vw, 1.6rem)/1.35 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  /* Blok domykajacy powtarza uklad naglowka podstrony, tylko o oktawe nizej:
     pytanie idzie przez cala szerokosc, a odpowiedz startuje na kolumnie 7 -
     tej samej osi, na ktorej stoi akapit pod H1 i kazdy opis uslugi. Strona
     otwiera sie i zamyka tym samym gestem, wiec domkniecie czyta sie jak
     klamra, a nie jak kolejna sekcja.

     Pytanie NIE dostaje wlasnej polowki: przy 615 px lamalo sie na trzy
     wiersze i traci wtedy cala sile. Pelna szerokosc daje mu dwa wiersze przy
     pelnym stopniu i nadal trzyma je na kolumnie 1. */
  .oferta-cta__in {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
  }

  .oferta-cta__eyebrow { grid-column: 1 / -1; }
  .oferta-cta__h       { grid-column: 1 / -1; }
  .oferta-cta__rule    { grid-column: 1 / -1; }

  .oferta-cta__aside {
    grid-column: 7 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding-inline-end: var(--oferta-pad);
  }

  /* W poziomie odpowiedz nie potrzebuje juz waskiej miary - jest zdaniem, nie
     kolumna tekstu. Pigulka domyka wiersz po prawej, na osi konca akapitow. */
  .oferta-cta__p { max-width: 22ch; }

  /* Bez tego flex sciska pigulke i "Umow wizyte" lamie sie na dwa wiersze. */
  .oferta-cta__btn { flex: none; white-space: nowrap; }
}