/* static/css/reels.css */

* { margin: 0; padding: 0; box-sizing: border-box; }

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background: linear-gradient(135deg, #111 0%, #000 100%);
  background-attachment: fixed;
  color: #fff;
  overflow-x: hidden;
}

.section{ padding: 5rem 0; }
.section-title{ font-size: 3rem; font-weight: 700; text-align: center; margin-bottom: 1rem; }
.section-subtitle{ font-size: 1.2rem; color: #ddd; text-align: center; margin-bottom: 3rem; }

.glass-card{
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 1rem;
  padding: 1rem;
}

/* Scroll animation (optional) */
.animate-on-scroll{ opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.animate-on-scroll.animated{ opacity: 1; transform: translateY(0); }

/* ===== Reel layout ===== */
.reel-card{
  max-width: 520px;   /* شكل ريلز عمودي */
  margin: 0 auto;
}

.reel-frame{
  width: 100%;
  border-radius: 0.8rem;
  overflow: hidden;
  background: #000;

  /* الارتفاع الافتراضي: متوازن على الديسكتوب */
  height: clamp(420px, 72vh, 680px);
}

.reel-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

/* ===== Laptop fix (الشاشات القصيرة 1366x768 وغيرها) ===== */
@media (min-width: 992px) and (max-height: 820px){
  .reel-frame{
    height: clamp(360px, 62vh, 520px);
  }
}

/* ===== Big screens (شاشات كبيرة) ===== */
@media (min-width: 1400px){
  .reel-frame{
    height: clamp(520px, 83vh, 760px);
  }
}

/* ===== Mobile/Tablet ===== */
@media (max-width: 768px){
  .section-title{ font-size: 2.2rem; }
  .reel-card{ max-width: 92%; }
  .reel-frame{ height: clamp(360px, 60vh, 520px); }
}