/*
 * Ramecek telefonu: JEDEN vzhled pro cely produkt.
 *
 * Pouziva ho zivy nahled v editoru flow (view/admin/flow_editor.latte),
 * marketingovy web (view/marketing/**) a kazde dalsi misto, kde se ukazuje
 * zakaznicka obrazovka. Driv mel kazdy z nich vlastni obdelnik: editor mel
 * telo s ostruvkem a stavovym radkem, marketing jen zaobleny obdelnik se
 * starym vyrezem. Vedle sebe to vypadalo jako dva ruzne produkty.
 *
 * Rozmery odpovidaji iPhonu 15/16: obrazovka 390x844 bodu, rohy 55, telo
 * 412x866 s rohy 66, ostruvek 125x37 jedenact bodu od horni hrany obrazovky,
 * indikator gesta 140x5. Vsechno je CSS a inline SVG, zadny externi obrazek:
 * hlavicka Content-Security-Policy povoluje jen vlastni zdroje.
 *
 * Velikost se meni JEDINOU promennou --kf-phone-scale na .kf-phone (nebo na
 * jeho predkovi). Obsah uvnitr se VZDY layoutuje na 390 bodu a teprve vysledek
 * se zmensi transformem; kdyby se misto toho zmensoval samotny iframe, text by
 * se lamal jinak nez na telefonu a ukazka by lhala (nameren rozdil: pri sirce
 * sloupce 233 px se nadpis lamal o dve slova driv).
 */

/* Jeviste drzi MISTO v rozvrzeni. Telefon je zmenseny transformem a ten
   velikost v layoutu nemeni, takze bez dopoctenych rozmeru jeviste by kolem
   nej zustala mezera jako pro telefon v plne velikosti (412x866). Pocita se
   v CSS, ne skriptem: rozmery jsou pevne a scale je znamy dopredu. */
.kf-phone-stage {
  position: relative;
  width: calc(412px * var(--kf-phone-scale, 1));
  height: calc(866px * var(--kf-phone-scale, 1));
  flex: 0 0 auto;
}
.kf-phone-stage > .kf-phone { position: absolute; top: 0; left: 0; }

.kf-phone {
  /* POZOR: --kf-phone-scale se tu NEDEKLARUJE. Vlastni deklarace na prvku
     prebije hodnotu zdedenou z rodice, takze telefon zustal v plne velikosti
     412x866 i tam, kde jeviste nastavilo 0.72 (nameřeno na marketingovem webu).
     Vychozi hodnota patri do fallbacku ve var(). */
  position: relative;
  width: 412px;
  height: 866px;
  transform: scale(var(--kf-phone-scale, 1));
  transform-origin: top left;
  border-radius: 66px;
  background: linear-gradient(150deg, #48484c 0%, #1c1c1e 18%, #2c2c2e 52%, #1c1c1e 82%, #45454a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px -12px rgba(0, 0, 0, .45);
}

/* Bocni tlacitka. Ctyri, ruzne dlouha: ztlumeni a dve hlasitosti vlevo,
   zapinani vpravo. Proto samostatne prvky, ne ::before/::after. */
.kf-phone-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #55555a, #303035);
}
.kf-phone-btn--mute   { left: -3px;  top: 118px; height: 32px; }
.kf-phone-btn--vol-up { left: -3px;  top: 178px; height: 63px; }
.kf-phone-btn--vol-dn { left: -3px;  top: 252px; height: 63px; }
.kf-phone-btn--power  { right: -3px; top: 205px; height: 100px; }

.kf-phone-screen {
  position: absolute;
  top: 11px; left: 11px;
  width: 390px;
  height: 844px;
  border-radius: 55px;
  overflow: hidden;   /* jen tady, na tele nikdy - uriznulo by bocni tlacitka */
  /* Cerna, ne bila: kdyz obsah obrazovku nevyplni uplne (jiny pomer, odsazeni),
     bila plocha prosvita jako lem kolem ukazky a vypada jako vada. */
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9);
}
.kf-phone-screen > iframe,
.kf-phone-screen > img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* Ostruvek, stavovy radek a indikator gesta lezi NAD obsahem: zakaznicka
   stranka o zadnem telefonu nevi a vedet nema. */
.kf-phone-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 125px; height: 37px; border-radius: 18.5px; background: #000;
  z-index: 3; pointer-events: none;
}
.kf-phone-status {
  position: absolute; top: 0; left: 0; right: 0; height: 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 27px 0;
  font: 600 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .2px;
  z-index: 2; pointer-events: none;
  /* Cas a ikony lezi nad obsahem, ktery muze byt tmava fotka i bila karta.
     Vychozi je svetly; kdo vi, ze pod nim je svetlo, prida .is-light-screen. */
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, .35);
}
.kf-phone.is-light-screen .kf-phone-status { color: #000; text-shadow: 0 0 6px rgba(255, 255, 255, .45); }
.kf-phone-status svg { display: block; }
.kf-phone-status-icons { display: flex; align-items: center; gap: 6px; }

.kf-phone-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 5px; border-radius: 2.5px; background: #fff; opacity: .5;
  z-index: 3; pointer-events: none;
}
.kf-phone.is-light-screen .kf-phone-home { background: #000; opacity: .35; }