/* ==========================================================================
   Zaproszenie od wlascicielki (.zaproszenie)

   Jedyna sekcja serwisu pisana w PIERWSZEJ OSOBIE. Cala reszta strony mowi
   "my" - ta mowi "ja". Skoro glos jest inny, powierzchnia tez musi byc inna,
   inaczej zdanie "Zapraszam Cie" czyta sie jak kolejny blok marketingu.

   POWIERZCHNIA: --panel (#EAE7E0), czyli ta sama plaszczyzna, na ktorej stoja
   grafik badania, pas uslug i kontakt-strip. Bylo tu --purple-tint (#F1ECF5)
   i to byl blad: caly serwis idzie ciepla biela, a #F1ECF5 jest CHLODNY
   lawendowy: ma wiecej niebieskiego niz czerwonego (R241 G236 B245), podczas
   gdy kazdy inny odcien serwisu ma odwrotnie (--paper 253/251/246,
   --panel 234/231/224). Na pelnej szerokosci czytalo sie to jak kolor z innej
   strony, a nie jak zmiana rejestru. --purple-tint zostaje tam, gdzie ma sens:
   w malych polach notek na /polityka-prywatnosci i w formularzu kontaktu.
   Rejestr niesie teraz uklad i typografia, a fiolet wraca do roli sygnatury -
   w etykiecie, w roli pod nazwiskiem i w kolku CTA.

   Uklad jest listem, nie sekcja: kolumna tekstu po lewej, pionowy kadr po
   prawej na pelna wysokosc listu. Podpis stoi osobno, pod hairlinem, zlozony
   stopniem naglowkowym - bo to on jest puenta.
   ========================================================================== */

.zaproszenie {
  background: var(--panel);
  padding-block: clamp(4rem, 8vw, 8rem);

  /* Nadpisujemy globalny --hairline lokalnie, tak samo jak robi to
     kontakt-strip.css - zamiast wprowadzac trzecia konwencje nazw.
     Powod: #E0DDD5 na --panel ma 1.09:1, czyli linia praktycznie znika,
     wiec na tym tle musi byc pochodna atramentu, nie papieru. */
  --hairline: color-mix(in srgb, var(--ink) 16%, transparent);
}

/* Etykieta i rola ida fioletem - to jedyne dwa miejsca koloru w tej sekcji
   poza kolkiem CTA. Na --panel to 7.66:1, wiec kolor jest tu trescia,
   nie dekoracja. */
.zaproszenie .label { color: var(--purple); }

/* --- Kolumna tekstu ------------------------------------------------------ */
.zaproszenie__eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* Naglowek jest o stopien mniejszy niz globalne .h2 i to jest decyzja, nie
   niedopatrzenie. Przy 5rem linia serifowa "do mojego salonu." nie miesci sie
   w waskiej kolumnie listu i lamie sie na trzy wiersze - a wtedy znika
   sygnatura dwuwierszowa sans + serif, czyli caly sens tego naglowka.
   4.4rem to najwiekszy stopien, przy ktorym obie linie trzymaja sie
   w jednym wierszu na calym pasmie dwukolumnowym. Wartosc jest sprzezona
   z szerokoscia toru kadru w media query na dole pliku - jesli kiedys
   poszerzysz kadr, zmierz naglowek przy 768 px, bo to tam jest najciasniej. */
.zaproszenie__h { font-size: clamp(2.1rem, 1.05rem + 4.3vw, 4.4rem); }

/* Akapity o stopien wieksze od body i z luzniejszym interlinem - to ma sie
   czytac jak list, a nie jak opis uslugi. */
/* 54ch, nie 46ch. Przy 46ch wiersz konczyl sie okolo 590 px, czyli daleko
   przed krawedzia kolumny - kolumna tekstu miala 40rem, a tekst zajmowal
   ledwie trzy czwarte tego, przez co po prawej stronie listu stala pionowa
   dziura na cala jego wysokosc. 54ch (~690 px) dobija do sufitu kolumny
   i nadal miesci sie w zakresie czytelnosci (45-75 znakow). */
.zaproszenie__p {
  max-width: 54ch;
  margin-top: clamp(1.35rem, 2.4vw, 1.9rem);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  line-height: 1.78;
  text-wrap: pretty;
}
.zaproszenie__p:first-of-type { margin-top: clamp(2rem, 4vw, 3.2rem); }

/* --- Kadr: portret wlascicielki ----------------------------------------- */
/* To miejsce jest z zalozenia PIONOWE i takie zostaje na kazdej szerokosci.
   Wczesniej ponizej 1024 px splaszczalo sie do 4:3 - czyli dokladnie tam,
   gdzie wiekszosc ludzi te strone zobaczy, portretu by nie bylo. Format
   jest juz dobrany pod zdjecie osoby, wiec podmiana pliku nie ruszy ukladu. */
.zaproszenie__figure { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.zaproszenie__media {
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--ink) 6%, var(--panel));
}

/* Zrodlo ma dokladnie proporcje ramki na telefonie. Na desktopie ramka jest
   wyzsza, wiec object-fit przycina boki i zachowuje twarz w osi kadru. */

/* --- Podpis -------------------------------------------------------------- */
/* Podpis nie powtarza gestu z sekcji "O nas" (mala fioletowa kreska nad
   nazwiskiem). Tam podpis jest przypisem, tu jest puenta: hairline przez
   cala szerokosc, nazwisko stopniem naglowkowym, CTA na drugim koncu
   tego samego wiersza. Dzieki temu dwa podpisy na jednej stronie czyta sie
   jako dwa rozne gesty, a nie jako powtorke. */
.zaproszenie__stopka {
  margin-top: clamp(2.75rem, 5.5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: baseline;
}

.zaproszenie__name {
  font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.85rem);
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Nazwisko i rola jako flex, a nie tekst z wcieciem.
   Wczesniej rola miala margin-left: 0.5em, wiec przy zawinieciu do nowego
   wiersza zostawala z tym wcieciem i podpis czytal sie jak zle zlamany akapit.
   Byl na to osobny media query na 639 px - ale zawiniecie zdarza sie takze
   w pasmie 768-830 px, gdzie kolumna nazwiska dzieli tor z przyciskiem CTA.
   Flex z row-gap robi to samo bez zgadywania progu: dopoki sie miesci, rola
   stoi obok nazwiska, a gdy nie - schodzi nizej, rowno do lewej. */
.zaproszenie__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5em;
  row-gap: 0.45rem;
}

.zaproszenie__rola {
  font-size: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
  color: var(--purple);
  white-space: nowrap;
}

/* --- Dwie kolumny: od tabletu w gore ------------------------------------- */
/* Prog stoi na 768 px, nie na 1024 px, i to jest poprawka po recenzji.
   Przy ukladzie jednokolumnowym kadr byl ograniczony sufitem szerokosci
   (zeby nie stal sie najciezszym zdjeciem strony), wiec obok niego zostawalo
   martwe pole --panel na calej jego wysokosci: 355 px przy 768 px okna
   i az 630 px przy 1023 px. Zdjecie wpuszczone w tekst zabiera to pole
   i jednoczesnie zdejmuje sufit - w dwoch kolumnach kadr nie moze urosnac,
   bo trzyma go tor siatki. */
@media (min-width: 768px) {
  /* Bylo: 20rem na kadr i az 7rem rynny, przy kolumnie tekstu zatrzymanej na
     40rem. Przy 1440 px zostawialo to ~256 px martwego pola po prawej
     stronie tekstu PLUS cala wysokosc nad zdjeciem (kadr byl wyrownany do
     dolu) - czyli sekcja, ktora miala byc oddechem, byla po prostu pusta
     w prawym gornym rogu. Teraz kolumna tekstu siega 46rem, rynna schodzi
     do 5.5rem, a kadr rosnie od 15rem na tablecie do 24rem na desktopie
     i idzie na PELNA wysokosc listu.
     Tor kadru jest zwezony na tablecie swiadomie: przy 768 px kolumna tekstu
     ma wtedy ~420 px, czyli tyle, ile serifowa linia naglowka potrzebuje,
     zeby nie rozbic sie na dwa wiersze. */
  .zaproszenie__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15rem, 24vw, 24rem));
    column-gap: clamp(2rem, 5vw, 5.5rem);
  }

  .zaproszenie__list   { grid-column: 1; grid-row: 1; max-width: 46rem; }

  /* Kadr zaczyna sie na wysokosci etykiety i konczy na dolnej linii ostatniego
     akapitu - jeden pion domykajacy list z prawej strony. Wysokosc bierze
     z tekstu, wiec proporcja waha sie miedzy 5:7 a 1:2 zaleznie od szerokosci
     okna: zawsze pionowa, nigdy przypadkowo kwadratowa. */
  .zaproszenie__figure {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }
  .zaproszenie__media {
    flex: 1;
    aspect-ratio: auto;   /* wysokosc dyktuje kolumna tekstu, nie proporcja */
    min-height: 24rem;    /* bezpiecznik, gdyby tekst kiedys sie skrocil */
  }

  .zaproszenie__stopka {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 5rem);
  }

  .zaproszenie__act { justify-self: end; }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Kadr zostaje pionowy (4:5 z reguly bazowej) - to jest slot na portret,
     a portret splaszczony do 4:3 przestaje byc portretem.
     Sufit szerokosci dotyczy juz tylko malych tabletow w pionie (640-767 px),
     zeby zdjecie nie staralo sie zajac calego toru. Ponizej 640 px sufit
     jest i tak wyzszy niz tor, wiec telefon nic na tym nie traci. */
  .zaproszenie__figure { max-width: 22rem; }
}