/* ===== Рамка iPhone 13 Pro для скріншотів (чорний титан) =====
   Використання:  <div class='iphone'><img src='screen.jpg' alt=''></div>
   Розмір задається висотою (або шириною) блоку .iphone — решта масштабується сама.
   Сама рамка — картинка css/iphone-frame.svg (корпус, металевий край, кнопки, Dynamic Island),
   вона накладається поверх скріншота. Тут лише розміри й позиції у відсотках —
   однаково працює в Safari, Chrome, Firefox.
   Пропорції завжди як у iPhone 13 Pro (екран 1170×2532): ширший скріншот підганяється
   по висоті, а зайве по ширині обрізається; вужчий — по ширині, обрізається низ.
   Скріншоти можуть бути .jpg або .png (див. js/shots.js). */

.iphone{
  position:relative;display:block;
  aspect-ratio:1273 / 2650;
  width:auto;
  --pf-shadow:drop-shadow(0 8px 14px rgba(0,0,0,.45));
  filter:var(--pf-shadow);
}
/* екран (координати з SVG: 47.2 / 1273 і 47.2 / 2650) */
.iphone > img{
  position:absolute;left:3.708%;top:1.781%;
  width:92.584%;height:96.438%;
  object-fit:cover;object-position:center top;display:block;
  border-radius:14% / 6.46%;
  background:#000;
}
/* рамка поверх скріншота (бокові кнопки трохи виступають за межі блоку) */
.iphone::after{
  content:'';position:absolute;top:0;bottom:0;left:-1.1%;right:-1.1%;
  pointer-events:none;
  background:url('iphone-frame.svg') center / 100% 100% no-repeat;
}

/* ---- де використовується на сайті ---- */
/* сторінки проєктів: розмір береться з висоти .shot; без фіолетового світіння */
.shot.iphone,.shot.center.iphone{max-width:none;filter:var(--pf-shadow)}
/* карусель на головній */
.slide.framed{border:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
.slide.framed[data-pos]{box-shadow:none}
.slide.framed > .iphone{position:absolute;top:0;left:50%;height:100%;transform:translateX(-50%)}
/* блок ARWorld на головній */
.feature-shots .fs.iphone{border:0;border-radius:0;box-shadow:none;height:auto}
.feature-shots .fs.center.iphone{filter:var(--pf-shadow)}
.feature-shots .fs.left.iphone,.feature-shots .fs.right.iphone{filter:var(--pf-shadow) brightness(.7)}
.feature-shots .fs.left.iphone:hover,.feature-shots .fs.right.iphone:hover{filter:var(--pf-shadow) brightness(.95)}
/* блок «Скріншоти» (горизонтальна стрічка): запас місця, щоб тінь не обрізалась */
.gallery{padding:16px 14px 30px;gap:18px}
.gallery .iphone{height:380px;flex:0 0 auto;scroll-snap-align:start;transition:transform .25s}
.gallery .iphone:hover{transform:translateY(-6px)}
@media (max-width:900px){.gallery .iphone{height:320px}}
@media (max-width:600px){.gallery .iphone{height:280px}}
/* скидаємо старі стилі .gallery img зі style.css (обведення, фіолетова тінь, зсув при наведенні),
   щоб скріншот не виїжджав з рамки — при наведенні піднімається вся рамка разом зі скріншотом */
.gallery .iphone > img,
.gallery .iphone > img:hover{height:96.438%;width:92.584%;border:0;box-shadow:none;transform:none;transition:none;scroll-snap-align:none}