/* PHONE CONTAINERS */
.phone-graphic {
    position: relative;
    justify-items: center;
    /* width: 334px; */
    margin: auto;
    margin-top: 0;
    margin-bottom: 30px;
    perspective: 800px;
}
.phone-case {
  box-shadow: inset 3px 3px 8px #82dcff, inset 0 0 3px #082049, inset -3px -3px 8px 0px #002094, 10px 10px 15px #b8b8b8;
  border-radius: 50px;
  background: #138ac9;
  width: 334px;
  padding: 10px;
  transform-style: preserve-3d;
  transform: rotateX(25deg) scale(0.7);
  transform-origin: center top;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (max-width: 1280px) {
  .phone-case {
    transform: rotateX(25deg) scale(0.6);
  }
  .phone-graphic:not(.phone-zoomed) .phone-case:hover {
    transform: rotateX(0deg) scale(0.7) !important;
  }
}
@media (max-width: 980px) {
  .phone-case {
    transform: rotateX(25deg) scale(0.5);
  }
  .phone-graphic:not(.phone-zoomed) .phone-case:hover {
    transform: rotateX(0deg) scale(0.6) !important;
  }
  #post-1642 .has-medium-font-size {
    font-size: 99% !important;
  }
}
@media (max-width: 782px) {
  .phone-case {
    transform: rotateX(25deg) scale(0.7);
  }
}
.phone-case:hover {
  transform: rotateX(0deg) scale(0.8);
}
.phone-case:before {
    content: '';
    position: absolute;
    background: #138ac9;
    width: 5px;
    height: 30px;
    left: -5px;
    top: 140px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: inset 4px 0px 2px #45b1ea;
}
.phone-case:after {
    content: '';
    position: absolute;
    background: #138ac9;
    width: 5px;
    height: 70px;
    left: 332px;
    top: 150px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: inset 1px 0 4px #052152, inset -2px 3px 5px #2c9fdc, 10px 10px 15px #b8b8b8;
}

.phone-container-outer {
  position:relative;
  font-family:helvetica;
  font-size:.8rem;
  border:1px solid #8f8f8f;
  border-radius:40px;
  box-shadow: inset 1px 1px 10px #ddd, inset 1px 1px 3px #8f8f8f, 0 0 6px #1059a5;
  background-color:#000;
}
.phone-container-inner {
  position:relative;
  background:#fff;
  margin:13px;
  border-radius:30px;
  overflow:hidden;
}
.phone-container-outer:after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:304px;
  height:659px;
  background:linear-gradient(130deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0) 25%);
  z-index:5;
  border-radius:40px;
}
.phone-container-inner:before {
  content:'';
  position:fixed;
  top:22px;
  background-color:#212121;
  width:49px;
  height:10px;
  left: calc(50% - 22px);
  border-radius:0 0 20px 20px;
  z-index:2;
}
.phone-header {
  position:relative;
  width:100%;
  height:100%;
  top:0;
  background-color:#f4f4f4;
}
.phone-header img {
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0;
    left:0;
}

/* I DELETED THOSE CSS INTENTIONALLY */

/* PHONE ZOOM (click to play video) */
.phone-graphic.phone-zoomed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  perspective: none;
}
.phone-graphic.phone-zoomed .phone-case {
  box-shadow: inset 1px 0 4px #052152, inset -2px 3px 5px #2c9fdc, 10px 10px 15px #b8b8b800;
  transform: scale(var(--phone-zoom-scale, 1.3));
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: flat;
}
/* .phone-graphic.phone-zoomed .phone-case:hover {
  transform: scale(var(--phone-zoom-scale, 1.3)) !important;
} */
.phone-graphic.phone-zoomed .phone-case:before {
    box-shadow: none;
}   
.phone-graphic.phone-zoomed .phone-case:after {
    box-shadow: inset 1px 0 4px #052152, inset -2px 3px 5px #2c9fdc, 10px 10px 15px #b8b8b800;
}
.phone-graphic.phone-zoomed .phone-header {
  width: 101%;
}


/* VIDEO ELEMENT INSIDE .phone-header */
.phone-video {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 108%;
  object-fit: fill;
  z-index: 3;
}

/* VOLUME SLIDER (middle-right of the zoomed video)

   Markup to paste inside .phone-header, after the </picture>:

     <span class="phone-volume">
       <input type="range" class="phone-volume-input" min="0" max="100"
              step="1" value="70" aria-label="Volume">
     </span>

   The <input> stays a native horizontal range and is rotated -90deg, which
   keeps the real thumb, hit area, keyboard and a11y behaviour intact instead
   of reimplementing a vertical slider. rotate(-90deg) puts the input's left
   edge at the bottom, so the minimum is down and the maximum is up.

   The bar itself is drawn with .phone-volume :before (track) and :after
   (fill, height driven by --phone-volume). Both are inset by half a thumb,
   which is exactly the range the native thumb travels, so the fill and the
   thumb line up at every value. */
.phone-volume {
  display: none;
}
.phone-graphic.phone-zoomed .phone-volume {
  --bar-thickness: 5px;
  --bar-length: 120px;
  --bar-hit: 26px;
  --bar-thumb: 13px;
  display: block;
  position: absolute;
  right: 12px;
  /* Bar centre sits a quarter of the way up from the bottom edge */
  top: 75%;
  transform: translateY(-50%);
  width: var(--bar-hit);
  height: var(--bar-length);
  z-index: 6;
  -webkit-tap-highlight-color: transparent;
}
.phone-graphic.phone-zoomed .phone-volume::before,
.phone-graphic.phone-zoomed .phone-volume::after {
  content: '';
  position: absolute;
  left: 50%;
  width: var(--bar-thickness);
  transform: translateX(-50%);
  border-radius: 3px;
  pointer-events: none;
}
.phone-graphic.phone-zoomed .phone-volume::before {
  top: calc(var(--bar-thumb) / 2);
  bottom: calc(var(--bar-thumb) / 2);
  background: rgba(255, 255, 255, 0.25);
}
.phone-graphic.phone-zoomed .phone-volume::after {
  /* --phone-volume is a bare number (0-100) written by phone-zoom.js.
     Multiplied by the travel length so the fill tip sits under the thumb. */
  bottom: calc(var(--bar-thumb) / 2);
  height: calc(var(--phone-volume, 70) * (100% - var(--bar-thumb)) / 100);
  background: rgba(255, 255, 255, 0.9);
}
/* Every focus/active state the control can land in must stay decoration-free.
   The parent theme ships `input:focus, textarea:focus { border-color:
   var(--inspiro-primary-color) }` and the UA paints its own blue focus ring
   and tap highlight on a range input, so all of them are reset here. */
.phone-graphic.phone-zoomed .phone-volume,
.phone-graphic.phone-zoomed .phone-volume-input,
.phone-graphic.phone-zoomed .phone-volume-input:hover,
.phone-graphic.phone-zoomed .phone-volume-input:focus,
.phone-graphic.phone-zoomed .phone-volume-input:focus-visible,
.phone-graphic.phone-zoomed .phone-volume-input:active {
  border: 0;
  outline: 0;
  outline-style: none;
  box-shadow: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
  cursor: pointer;
}
.phone-graphic.phone-zoomed .phone-volume-input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bar-length);
  height: var(--bar-hit);
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.phone-graphic.phone-zoomed .phone-volume-input::-webkit-slider-runnable-track {
  height: var(--bar-thickness);
  border: 0;
  background: transparent;
}
.phone-graphic.phone-zoomed .phone-volume-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--bar-thumb);
  height: var(--bar-thumb);
  margin-top: calc((var(--bar-thickness) - var(--bar-thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease;
}
.phone-graphic.phone-zoomed .phone-volume-input::-moz-range-track {
  height: var(--bar-thickness);
  border: 0;
  background: transparent;
}
.phone-graphic.phone-zoomed .phone-volume-input::-moz-range-thumb {
  width: var(--bar-thumb);
  height: var(--bar-thumb);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease;
}
/* Keyboard focus is shown by the growing thumb, not by a ring around the bar */
.phone-graphic.phone-zoomed .phone-volume-input:focus-visible::-webkit-slider-thumb {
  transform: scale(1.3);
}
.phone-graphic.phone-zoomed .phone-volume-input:focus-visible::-moz-range-thumb {
  transform: scale(1.3);
}

/* Match photo aspect ratio to video (288:512 = 9:16) and final display size.
   Higher specificity overrides inline CSS in the Custom HTML module. */
.phone-graphic .phone-header {
  height: 512px;
}
.phone-graphic .phone-header img {
  width: 100%;
  height: 108%;
  object-fit: fill;
  position: absolute;
  top: -19px;
  left: 0;
}

/* MOBILE (< 440px): video fills entire screen instead of scaled phone */
@media (max-width: 440px) {
  .phone-case:hover {
  transform: none!important;
  }
  .phone-graphic {
    transform: scale(0.7);
    transform-origin: center center;  
  }
  .phone-graphic.phone-zoomed {
    transform: scale(1);  
    justify-content: unset;
  }
  .phone-graphic.phone-zoomed .phone-case,
  .phone-graphic.phone-zoomed .phone-container-outer,
  .phone-graphic.phone-zoomed .phone-container-inner {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transform: none;
  }
  .phone-graphic.phone-zoomed .phone-case:before,
  .phone-graphic.phone-zoomed .phone-case:after,
  .phone-graphic.phone-zoomed .phone-container-outer:after,
  .phone-graphic.phone-zoomed .phone-container-inner:before {
    display: none;
  }
  .phone-graphic.phone-zoomed .phone-header {
    width: 100vw;
    height: calc(100vw * 512 / 288);
  }
}

/* CLICKSCREEN PULSE */
.clickscreen {
  animation: clickPulse 2s ease-in-out infinite;
  cursor: pointer;
  user-select: none;
}

@keyframes clickPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.05); }
}

.phone-graphic.phone-zoomed .clickscreen {
  animation: none;
  opacity: 0;
  pointer-events: none;
}