/* ============================================================
   NJ Tech Repair — Cinematic Sections + Promo
   ============================================================ */

/* ════ VIDEO SECTION ════ */
.cine-section {
  position: relative; z-index: 1;
  min-height: clamp(540px, 72vh, 860px);
  overflow: hidden; background: #04050a;
  display: flex; align-items: center;
}
.cine-dark .cine-video { filter: brightness(.38) saturate(.65); }

.cine-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.44) saturate(.72);
  transform: scale(1.03);
  transition: filter 1.2s;
}
.cine-section:hover .cine-video { filter: brightness(.54) saturate(.88); }

/* Grain */
.cine-noise {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Vignette — left-heavy for text on left */
.cine-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to right,  rgba(4,5,10,.85) 0%, rgba(4,5,10,.3) 45%, transparent 70%),
    linear-gradient(to top,    rgba(4,5,10,.6)  0%, transparent 40%),
    linear-gradient(to bottom, rgba(4,5,10,.5)  0%, transparent 40%);
}
/* Right-heavy vignette for text on right */
.cine-vignette-r {
  background:
    linear-gradient(to left,   rgba(4,5,10,.85) 0%, rgba(4,5,10,.3) 45%, transparent 70%),
    linear-gradient(to top,    rgba(4,5,10,.6)  0%, transparent 40%),
    linear-gradient(to bottom, rgba(4,5,10,.5)  0%, transparent 40%);
}

/* Content */
.cine-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
  width: 100%;
  padding: clamp(48px,6vw,90px) clamp(20px,4vw,80px);
  max-width: 1600px; margin: 0 auto;
  left: 50%; transform: translateX(-50%);
}
.cine-inner { max-width: 560px; }
.cine-left  { margin-right: auto; }
.cine-right { margin-left: auto; text-align: right; }

/* Label */
.cine-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.cine-label::after { content: ''; width: 36px; height: 1px; background: rgba(200,255,0,.4); }
.cine-purple-label { color: var(--purple); }
.cine-purple-label::after { background: rgba(167,139,250,.4); }
.cine-right .cine-label::after  { display: none; }
.cine-right .cine-label::before { content: ''; width: 36px; height: 1px; background: rgba(167,139,250,.4); }

/* Title */
.cine-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(50px, 6.5vw, 104px);
  line-height: .9; letter-spacing: 1.5px; color: #fff;
  margin-bottom: 20px;
}
.cine-hi        { color: var(--accent); }
.cine-purple-hi { color: var(--purple); }

.cine-body {
  font-size: clamp(14px, 1.05vw, 17px);
  color: rgba(255,255,255,.42); font-weight: 300; line-height: 1.75;
}

/* Section border lines */
.cine-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(200,255,0,.18) 30%, rgba(167,139,250,.15) 70%, transparent);
}

/* ════ PROMO IMAGE SECTION ════ */
.promo-section {
  position: relative; z-index: 1;
  background: #030408;
  padding: clamp(32px,4vw,56px) 0;
  overflow: hidden;
}
.promo-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(20px,4vw,60px);
}
.promo-img-wrap {
  position: relative;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.promo-img {
  width: 100%; display: block; height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.promo-fade-l { display:none; }
.promo-fade-r { display:none; }
.promo-caption { display: none; }

/* ════ BOOKING SECTION — 2 column layout ════ */
#booking { background: var(--bg2); }

.booking-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(40px,5vw,80px);
  align-items: start;
}

/* Booking left side mini-video or ambient */
.booking-info { position: relative; }

/* ════ RESPONSIVE ════ */
@media(max-width:900px) {
  .cine-inner  { max-width: 100%; }
  .cine-right  { margin-left: 0; text-align: left; }
  .cine-right .cine-label::before { display: none; }
  .cine-right .cine-label::after  { display: inline-block; }
  .cine-title  { font-size: clamp(44px,10vw,72px); }
}
@media(max-width:680px) {
  .cine-section { height: clamp(360px,75vw,500px); }
  .booking-layout { grid-template-columns: 1fr; }
}