/* Ekran logowania. Uklad naglowka fizjolady.pl: najpierw nazwa wielka i
   ciasno zbita, pod nia jedno zdanie, a fotografia wchodzi od dolu.

   Fotografia jest wycieta z tla, a nie wpuszczona pod ciemna zaslone, bo
   znak marki jest jasny: zielen i kosc sloniowa.

   Na telefonie ekran powitalny wczesniej po prostu znikal i zostawal goly
   formularz na pustym tle. Teraz zostaje, tylko nizszy: to pierwszy ekran,
   ktory widzi klientka, wiec ma pokazywac, czyja to aplikacja. */
.log{min-height:100dvh;display:flex;flex-direction:column}

.log-obraz{
  position:relative;overflow:hidden;background:var(--zielen-jasna);
  display:flex;align-items:flex-end;justify-content:center;
  min-height:min(46vh,360px);
}

/* Kolo zieleni marki za sylwetka. Bez niego wycinanka wisi w pustce,
   z nim panel ma srodek ciezkosci i kolor marki wchodzi na ekran. */
.log-obraz::before{
  content:'';position:absolute;left:50%;bottom:-18%;transform:translateX(-50%);
  width:min(420px,88%);aspect-ratio:1;border-radius:50%;
  background:var(--zielen-marka);opacity:.3;
}

/* Wysokosc, nie szerokosc: to ona decyduje, czy sylwetka wejdzie na napis.
   Odjete piksele to miejsce na nazwe ze zdaniem, wiec na niskim ekranie
   zdjecie samo sie zmniejsza zamiast zachodzic na tekst. */
.log-foto{
  position:relative;z-index:1;height:min(calc(46vh - 118px),240px);width:auto;max-width:86%;
  object-fit:contain;object-position:bottom center;margin-bottom:-1px;
}

.log-obraz-tresc{position:absolute;left:0;right:0;top:0;padding:26px 22px 0;z-index:0}
.log-slowo{
  font-family:var(--tytul);font-weight:500;font-size:clamp(40px,11.5vw,78px);
  line-height:.92;letter-spacing:-.05em;color:var(--zielen);white-space:nowrap;
}
.log-cytat-pod{margin-top:10px;font-size:14.5px;color:var(--atrament-2);max-width:26ch}

.log-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 20px 44px}
.log-panel-srodek{width:100%;max-width:390px}

.log-stopka{display:flex;flex-direction:column;gap:6px}
.log-strona{font-size:13px;color:var(--zielen);font-weight:500}
.log-strona:hover{text-decoration:underline}
.log-autor{color:var(--atrament-2);font-weight:500;text-decoration:underline}
.log-autor:hover{color:var(--atrament)}

/* Od 900 px ekran powitalny wraca na bok formularza i rosnie do pelnej
   wysokosci okna. */
@media(min-width:900px){
  .log{display:grid;grid-template-columns:1.05fr .95fr}
  .log-obraz{min-height:100dvh}
  .log-obraz::before{width:min(500px,84%);bottom:-16%}
  .log-foto{height:min(calc(100dvh - 235px),660px);max-width:82%}
  .log-obraz-tresc{padding:40px 34px 0}
  .log-slowo{font-size:clamp(46px,5.8vw,78px)}
  .log-cytat-pod{margin-top:14px;font-size:15px}
  .log-panel{padding:32px 20px 48px}
}