/* ==========================================================================
   ANKIETA CV - dwie kolumny: pisze sie z lewej, podglad z prawej.
   Na telefonie podglad WCHODZI NAD formularz, bo to jedyna rzecz, ktora
   mowi, czy warto pisac dalej. Kolory ida Z MOTYWU (to ekran portalu),
   inaczej niz w samym arkuszu CV, ktory oglada obcy i drukuje na papierze.
   ========================================================================== */

.cvank{display:grid;gap:18px}
.cvank-g h1{margin:0 0 4px}

@media (min-width:1000px){
  /* Podglad stoi PRZYPIETY: czlowiek pisze i widzi, co z tego wychodzi,
     bez przewijania w gore. */
  .cvank{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
  .cvank-g{grid-column:1 / -1}
  .cvank-podglad{position:sticky;top:76px}
}

.cvank-sek{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px;margin:0 0 12px;
}
.cvank-sek h2{margin:0 0 10px;font-size:15px}
.cvank-lab{
  display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink2);margin:12px 0 6px;
}
.cvank-sek>.cvank-lab:first-of-type{margin-top:0}
.cvank-hint{display:block;margin:6px 0 0;font-size:12px;color:var(--ink2);font-style:normal}

.cvank-pole{display:block;margin:0 0 12px}
.cvank-pole input,.cvank-pole textarea{width:100%}
.cvank-pole-krotkie input{max-width:140px}

/* ------------------------------------------------------------ uklady */
/*
 | CZLOWIEK WYBIERA UKLAD OCZAMI, a nie po nazwie: "pas" i "kolumna" nic
 | nie znacza, dopoki sie ich nie zobaczy. Dlatego kazdy kafel ma MALY
 | RYSUNEK ukladu - trzy paski ulozone tak, jak wyglada arkusz.
 */
/* DWA NA DWA, A NIE CZTERY W RZEDZIE - i to jest liczone, nie wybrane
   dla wygladu. Kafelek pokazuje dzis PRAWDZIWA kartke CV; na telefonie
   390 px cztery kolumny daja po 88 px na kartke, czyli A4 w skali 0,11 -
   plame, z ktorej nie poznasz szablonu. Dwie kolumny daja po 180 px
   i wtedy widac zdjecie, pasek koloru i uklad tresci, czyli wszystko,
   po co ten kafelek jest. Na szerokim ekranie miejsca jest dosc, wiec
   wracaja cztery w rzedzie. */
.cvank-uklady{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 10px;align-items:start}

@media (min-width:640px){
  .cvank-uklady{grid-template-columns:repeat(4,1fr);gap:10px}
}
.cvank-uklad{cursor:pointer;text-align:center;display:grid;gap:5px;justify-items:center}
.cvank-uklad input{position:absolute;opacity:0;pointer-events:none}
.cvank-uklad b{font-size:11px;font-weight:600;color:var(--ink2)}
/* ================================================ WZOR CV W KAFELKU

   Ramka trzyma PRAWDZIWA kartke (`/konto/cv/wzor/{uklad}`), a nie jej
   rysunek - wiec kafelek nie moze rozjechac sie z szablonem. Rysowane
   miniaturki (`.cvank-mini*`) sa skasowane w calosci: martwy kawalek
   wrocilby przy pierwszej przebudowie tej strony.
   ------------------------------------------------------------------ */
.cvank-wzor{
  display:block;width:100%;aspect-ratio:210/297;border:1px solid var(--line);
  border-radius:8px;background:#fff;overflow:hidden;position:relative;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* DOTKNIECIE NALEZY DO KAFELKA, NIE DO DOKUMENTU. Bez tego palec trafia
   w `<iframe>`, ktory jest osobna strona - czyli stukniecie w podglad
   NIE WYBIERA ukladu i kafelek wyglada na zepsuty. */
.cvank-wzor iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;background:#fff;
}

/* Kartka w ramce jest mala, wiec zaznaczenie musi byc widoczne z metra:
   zlota obwodka PLUS jasniejsza nazwa pod spodem. Zloto jest PLASKIE
   (`--yl`) - `--gold` to gradient, a `border` gradientu nie przyjmuje
   i przegladarka odrzuca wtedy cala deklaracje, bez sladu w logu. */
.cvank-uklad input:checked+.cvank-wzor{
  border-color:var(--yl);box-shadow:0 0 0 2px var(--yl),0 8px 22px rgba(0,0,0,.45);
}

.cvank-uklad input:focus-visible+.cvank-wzor{outline:2px solid var(--yl);outline-offset:2px}

/* ------------------------------------------------------------ kolory */
.cvank-kolory{display:flex;flex-wrap:wrap;gap:8px}
.cvank-kolor{cursor:pointer;position:relative;display:block}
.cvank-kolor input{position:absolute;opacity:0;pointer-events:none}
.cvank-kolor span{
  display:block;width:30px;height:30px;border-radius:50%;
  box-shadow:0 0 0 1px var(--line);
}
.cvank-kolor input:checked+span{box-shadow:0 0 0 2px var(--yl),0 0 0 4px var(--card)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ------------------------------------------------------ kroj, wlaczniki */
.cvank-przel{display:flex;gap:6px;flex-wrap:wrap}
.cvank-przel label{cursor:pointer}
.cvank-przel input{position:absolute;opacity:0;pointer-events:none}
.cvank-przel span{
  display:inline-block;padding:8px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);font-size:14px;
}
.cvank-przel input:checked+span{border-color:var(--yl);box-shadow:inset 0 0 0 1px var(--yl)}
.cvank-kroj-display{font-family:var(--f-display);font-weight:800}
.cvank-kroj-body{font-family:var(--f-body)}
.cvank-kroj-szeryf{font-family:Georgia,serif}

.cvank-wl{display:flex;align-items:center;gap:11px;padding:9px 0;cursor:pointer}
.cvank-wl input{position:absolute;opacity:0;pointer-events:none}
.cvank-suwak{
  flex:0 0 auto;width:42px;height:24px;border-radius:999px;background:var(--line);
  position:relative;transition:background .16s;
}
.cvank-suwak:before{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .16s;
}
.cvank-wl input:checked+.cvank-suwak{background:var(--yl)}
.cvank-wl input:checked+.cvank-suwak:before{transform:translateX(18px)}
.cvank-wl-t{display:grid;gap:1px}
.cvank-wl-t b{font-weight:600;font-size:14px}
.cvank-wl-t i{font-size:12px;color:var(--ink2);font-style:normal}

/* ------------------------------------------------------------- listy */
.cvank-wiersz{
  display:grid;gap:7px;margin:0 0 9px;padding:0 0 9px;
  border-bottom:1px dashed var(--line);
}
.cvank-wiersz:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
.cvank-wiersz input,.cvank-wiersz textarea{width:100%}
@media (min-width:560px){
  .cvank-wiersz{grid-template-columns:1fr 1fr}
  .cvank-wiersz textarea{grid-column:1 / -1}
  .cvank-waskie{max-width:120px}
}

/* ----------------------------------------------------------- podglad */
.cvank-podglad{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;
}
.cvank-podglad iframe{
  display:block;width:100%;aspect-ratio:210/297;border:1px solid var(--line);
  border-radius:8px;background:#fff;
}
.cvank-akcje{display:grid;gap:8px;margin-top:11px}
.cvank-link{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);display:grid;gap:8px}
.cvank-adres{
  margin:0;font-size:11px;color:var(--ink2);word-break:break-all;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px;
}

.cvank-dol{position:sticky;bottom:calc(var(--dol,0px) + 8px);padding:8px 0;z-index:5}
.cvank-dol .btn{width:100%}

/* ==========================================================================
   GUZIK "ZROB CV" NA PROFILU - pod zdjeciami prac, tam gdzie zakreslila
   go Kateryna. Wyglada jak droga na glownej (`gl-droga`), bo robi to
   samo: prowadzi na jeden ekran i mowi, co tam jest.
   ========================================================================== */
.pcv{margin:14px 0 0}
.pcv a{
  display:flex;align-items:center;gap:13px;padding:14px;border-radius:16px;
  border:1px solid var(--yl);background:var(--card);text-decoration:none;color:var(--ink);
}
.pcv-z{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--gold,linear-gradient(135deg,#A6790F,#F2DC96 48%,#A6790F));color:#14130F;
}
.pcv-z svg{width:22px;height:22px}
.pcv-t{display:grid;gap:2px;min-width:0}
.pcv-t b{font-family:var(--f-display);font-weight:800;font-size:16px}
.pcv-t i{font-style:normal;font-size:12.5px;color:var(--ink2)}
.pcv-s{margin-left:auto;font-size:22px;line-height:1;color:var(--ink2)}
.cvank-uwaga{font-style:normal;font-size:10.5px;color:var(--ink2);opacity:.85;line-height:1.25}