/* ==========================================================================
   JAAQOB - tablet z przewijaną stroną (proces, kroki 2 i 3)
   Komponent: [data-jq-device-scroll]
   Wymiary liczone od szerokości urządzenia (cqw), więc tablet skaluje się
   płynnie do szerokości kolumny. Wariant ciemny: .jq-www-device--dark
   ========================================================================== */

.jq-www-device {
  /* Aluminium (krawędź obudowy) */
  --jq-dev-rim: linear-gradient(142deg,
      #ffffff 0%, #dcdde1 14%, #f4f5f7 30%, #c3c5ca 52%,
      #eceef1 70%, #b4b6bc 88%, #d9dbdf 100%);
  --jq-dev-rim-line: rgba(18, 20, 28, 0.22);
  /* Szkło frontu (ramka wokół ekranu) */
  --jq-dev-glass: linear-gradient(165deg, #ffffff 0%, #f8f8f9 45%, #f0f0f2 100%);
  --jq-dev-glass-line: rgba(18, 20, 28, 0.10);
  --jq-dev-panel-line: rgba(22, 23, 26, 0.55);
  /* Pasek Safari */
  --jq-dev-chrome-bg: #f4f4f6;
  --jq-dev-chrome-fg: #1c1c1e;
  --jq-dev-chrome-icon: #0a84ff;
  --jq-dev-field-bg: #e4e4e9;
  --jq-dev-field-fg: #3a3a3e;
  /* Przycisk */
  --jq-dev-btn: linear-gradient(180deg, #f2f3f5 0%, #c4c6cb 55%, #a9abb1 100%);
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0;
}

.jq-www-device--dark {
  --jq-dev-rim: linear-gradient(142deg,
      #6d6f75 0%, #2f3034 16%, #4a4c51 32%, #1f2023 54%,
      #45474c 72%, #1a1b1e 90%, #34363a 100%);
  --jq-dev-rim-line: rgba(0, 0, 0, 0.55);
  --jq-dev-glass: linear-gradient(165deg, #141416 0%, #0b0b0c 60%, #060607 100%);
  --jq-dev-glass-line: rgba(255, 255, 255, 0.07);
  --jq-dev-panel-line: #000000;
  --jq-dev-btn: linear-gradient(180deg, #5c5e63 0%, #2b2c30 60%, #1c1d20 100%);
}

/* --- Obudowa: aluminiowa krawędź i cień ------------------------------- */
.jq-www-device__shell {
  position: relative;
  padding: 0.5cqw;
  border-radius: 5.4cqw;
  background: var(--jq-dev-rim);
  box-shadow:
    0 0 0 0.5px var(--jq-dev-rim-line),
    0 1px 2px rgba(18, 20, 28, 0.12),
    0 6px 12px -6px rgba(18, 20, 28, 0.20),
    -8px 22px 36px -14px rgba(18, 20, 28, 0.22),
    -18px 48px 84px -30px rgba(18, 20, 28, 0.22);
}

/* Odblask światła na górnej krawędzi aluminium */
.jq-www-device__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0) 1.2cqw);
  pointer-events: none;
}
.jq-www-device--dark .jq-www-device__shell::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 1.2cqw);
}

/* Przyciski głośności na górnej krawędzi */
.jq-www-device__btn {
  position: absolute;
  top: -0.42cqw;
  z-index: -1;
  width: 4.6cqw;
  height: 0.9cqw;
  border-radius: 0.6cqw 0.6cqw 0.2cqw 0.2cqw;
  background: var(--jq-dev-btn);
  box-shadow:
    0 0 0 0.5px var(--jq-dev-rim-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.jq-www-device__btn--1 { right: 13.4cqw; }
.jq-www-device__btn--2 { right: 18.8cqw; }

/* --- Szkło frontu --------------------------------------------------- */
.jq-www-device__glass {
  position: relative;
  padding: 2.15cqw;
  border-radius: 4.9cqw;
  background: var(--jq-dev-glass);
  box-shadow:
    inset 0 0 0 0.5px var(--jq-dev-glass-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -0.3cqw 0.6cqw rgba(18, 20, 28, 0.05);
}
.jq-www-device--dark .jq-www-device__glass {
  box-shadow:
    inset 0 0 0 0.5px var(--jq-dev-glass-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Kamera przednia na lewej ramce */
.jq-www-device__cam {
  position: absolute;
  left: 0.85cqw;
  top: 50%;
  width: 0.62cqw;
  height: 0.62cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(140, 170, 230, 0.9) 0 9%, rgba(60, 80, 130, 0.6) 16%, transparent 30%),
    radial-gradient(circle, #0d1018 0 45%, #1d212b 62%, #3a3d45 78%, #9a9ca2 100%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  transform: translateY(-50%);
}

/* --- Wyświetlacz ---------------------------------------------------- */
.jq-www-device__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  aspect-ratio: 1.433;
  height: auto;
  min-height: 0;
  border-radius: 2.5cqw;
  background: #000000;
  isolation: isolate;
}

/* Pasek statusu + pasek narzędzi Safari.
   Safari barwi pasek kolorem górnej krawędzi strony - kolor podajemy
   zmienną --jq-dev-chrome-bg na <figure>, a przy ciemnej stronie dodajemy
   modyfikator .jq-www-device--tint-dark (jasne ikony i tekst). */
.jq-www-device__chrome {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: var(--jq-dev-chrome-bg);
  color: var(--jq-dev-chrome-fg);
  transition: background-color 0.35s ease, color 0.35s ease;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.14);
}

.jq-www-device__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5cqw;
  padding: 0.5cqw 2.3cqw 0;
  font-size: 1.12cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}
.jq-www-device__status-left,
.jq-www-device__status-right {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
}
.jq-www-device__status-left span + span { font-weight: 500; }
.jq-www-device__status svg {
  width: 1.45cqw;
  height: 1.45cqw;
}

/* Bateria */
.jq-www-device__battery {
  position: relative;
  width: 2.35cqw;
  height: 1.1cqw;
  border-radius: 0.32cqw;
  box-shadow: inset 0 0 0 0.09cqw color-mix(in srgb, currentColor 45%, transparent);
}
.jq-www-device__battery::before {
  content: "";
  position: absolute;
  inset: 0.18cqw;
  border-radius: 0.16cqw;
  background: currentColor;
}
.jq-www-device__battery::after {
  content: "";
  position: absolute;
  right: -0.26cqw;
  top: 50%;
  width: 0.16cqw;
  height: 0.42cqw;
  border-radius: 0 0.1cqw 0.1cqw 0;
  background: color-mix(in srgb, currentColor 45%, transparent);
  transform: translateY(-50%);
}

.jq-www-device__toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 4.1cqw;
  padding: 0 1.9cqw 0.35cqw;
  color: var(--jq-dev-chrome-icon);
  transition: color 0.35s ease;
}
.jq-www-device__tools {
  display: inline-flex;
  align-items: center;
  gap: 1.7cqw;
}
.jq-www-device__tools--right { justify-self: end; }
.jq-www-device__tools svg {
  width: 1.75cqw;
  height: 1.75cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jq-www-device__tools .is-off { opacity: 0.35; }

.jq-www-device__field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  width: 40cqw;
  height: 2.75cqw;
  border-radius: 0.95cqw;
  background: var(--jq-dev-field-bg);
  color: var(--jq-dev-field-fg);
  transition: background-color 0.35s ease, color 0.35s ease;
  font-size: 1.22cqw;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.jq-www-device__field svg {
  width: 1.15cqw;
  height: 1.15cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

.jq-www-device--tint-dark {
  --jq-dev-chrome-fg: #ffffff;
  --jq-dev-chrome-icon: rgba(255, 255, 255, 0.92);
  --jq-dev-field-bg: rgba(255, 255, 255, 0.13);
  --jq-dev-field-fg: rgba(255, 255, 255, 0.88);
}
.jq-www-device--tint-dark .jq-www-device__chrome { box-shadow: none; }

/* Strona z jasnym przyklejonym nagłówkiem: po przewinięciu pasek Safari
   przechodzi na kolor nagłówka (--jq-dev-chrome-scrolled, domyślnie biały) */
.jq-www-device--tint-dark.jq-www-device--scroll-light.is-scrolled {
  --jq-dev-chrome-fg: #1c1c1e;
  --jq-dev-chrome-icon: #0a84ff;
  --jq-dev-field-bg: #ececf0;
  --jq-dev-field-fg: #3a3a3e;
}
.jq-www-device--scroll-light.is-scrolled .jq-www-device__chrome {
  background: var(--jq-dev-chrome-scrolled, #ffffff);
}

/* Okno, w którym przewija się strona */
.jq-www-device__viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #f4f4f4;
}

.jq-www-device__page {
  display: block;
  width: calc(100% + 2px);
  max-width: none;
  height: auto;
  margin-left: -1px;
}

/* Warstwa GPU tylko w trakcie przewijania: w spoczynku zrzut renderuje się ostro */
.jq-www-device.is-playing .jq-www-device__page {
  will-change: transform;
}

/* Odbicie światła na szkle (nad ekranem i ramką) */
.jq-www-device__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background:
    linear-gradient(116deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.07) 22%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 72%,
      rgba(255, 255, 255, 0.04) 86%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* Przyklejony nagłówek strony - tworzy go JS z tego samego zrzutu */
.jq-www-device__sticky {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  will-change: transform;
  pointer-events: none;
}

/* Animację przewijania steruje jq-www-device-scroll.js (requestAnimationFrame).
   Długość cyklu: atrybut data-jq-duration w sekundach (domyślnie 24). */