/* Dodatak za video ponude (60za300, 100reelsfor1000): tri telefona u heroju i kartice sa reelsima. Ostalo je u styles.css. */

/* Hero: tri telefona, srednji veci i ispred */
.reel-stage { position: relative; display: flex; justify-content: center; align-items: center; gap: 0; width: 100%; max-width: 900px; margin: 1rem auto 3.5rem; perspective: 1500px; }
.reel-stage .device-ring { inset: -24px 8% -24px; }
.rphone { position: relative; flex: none; width: 230px; aspect-ratio: 9 / 19.5; background: #000; border: 6px solid #1a1a1a; border-radius: 38px; overflow: hidden; box-shadow: 0 0 0 2px rgba(var(--acc-rgb), .2), 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 40px rgba(var(--acc-rgb), .1); }
.rphone video, .rphone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rphone .phone-notch { height: 20px; width: 36%; }
.rphone.side { width: 200px; opacity: .85; filter: saturate(.85) brightness(.8); }
.rphone.left { transform: translateX(40px) rotate(-7deg) translateY(24px); z-index: 1; }
.rphone.right { transform: translateX(-40px) rotate(7deg) translateY(24px); z-index: 1; }
.rphone.center { z-index: 3; width: 260px; }
.rphone.center .corner { width: 26px; height: 26px; }
.reel-frame { position: relative; z-index: 3; }
.reel-frame .corner.tl { top: -14px; left: -14px; }
.reel-frame .corner.tr { top: -14px; right: -14px; }
.reel-frame .corner.bl { bottom: -14px; left: -14px; }
.reel-frame .corner.br { bottom: -14px; right: -14px; }
.reel-stage:hover .reel-frame .corner { width: 36px; height: 36px; opacity: 1; box-shadow: 0 0 20px rgba(var(--acc-rgb), .6); }
.reel-stage:hover .reel-frame .corner.tl { top: -20px; left: -20px; }
.reel-stage:hover .reel-frame .corner.tr { top: -20px; right: -20px; }
.reel-stage:hover .reel-frame .corner.bl { bottom: -20px; left: -20px; }
.reel-stage:hover .reel-frame .corner.br { bottom: -20px; right: -20px; }

/* Telefon u koracima pusta video */
.phone-screen video.pshot { object-fit: cover; }

/* Primeri: reelsi 9:16 koji se pustaju na klik */
.reel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.reel-card { position: relative; padding: 0; text-align: left; cursor: pointer; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(15, 15, 15, .6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transform: translateY(40px); transition: opacity .7s ease-out, transform .7s ease-out, border-color .3s ease; transition-delay: calc(var(--i) * .08s), calc(var(--i) * .08s), 0s; }
.is-visible .reel-card { opacity: 1; transform: none; }
.reel-card:hover, .reel-card.playing { border-color: rgba(var(--acc-rgb), .4); }
.reel-vid { position: relative; aspect-ratio: 9 / 16; background: #0a0a0a; overflow: hidden; }
.reel-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .35); transition: background .3s, opacity .3s; }
.reel-play span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 1.4rem; background: rgba(var(--acc-rgb), .92); box-shadow: 0 0 30px rgba(var(--acc-rgb), .5); transition: transform .25s var(--spring), box-shadow .25s; }
.reel-play span::before { content: ""; position: absolute; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(var(--acc-rgb), .5); animation: playRing 2s ease-out infinite; }
@keyframes playRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.reel-card:hover .reel-play span { transform: scale(1.1); box-shadow: 0 0 50px rgba(var(--acc-rgb), .7); }
.reel-card.playing .reel-play { opacity: 0; }
.reel-label { position: absolute; left: 12px; top: 12px; padding: 4px 12px; border-radius: 50px; font-size: .75rem; font-weight: 600; letter-spacing: .5px; color: #fff; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reel-sound { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 50px; font-size: .7rem; color: #fff; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .2); }
.reel-card.playing .reel-sound { display: none; }
.reel-foot { padding: .9rem 1.1rem; }
.reel-name { font-size: .85rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.reel-style { margin-top: .2rem; font-size: .8rem; color: var(--acc-l); }

@media (max-width: 1024px) {
  .reel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .reel-stage { margin-bottom: 2.5rem; }
  .rphone.center { width: 190px; border-radius: 30px; border-width: 5px; }
  .rphone.side { width: 140px; border-radius: 24px; border-width: 4px; }
  .rphone.left { transform: translateX(34px) rotate(-7deg) translateY(18px); }
  .rphone.right { transform: translateX(-34px) rotate(7deg) translateY(18px); }
  .reel-grid { gap: .8rem; }
  .reel-play span, .reel-play span::before { width: 52px; height: 52px; }
}
@media (max-width: 400px) {
  .rphone.center { width: 170px; }
  .rphone.side { width: 120px; }
}