/* ═══════════════════════════════════════════════════════════
   HERO BANNER SLIDER  — css/banner-slider.css  v4
   Full above-the-fold layout: slider + hero title visible
   without scrolling on first load.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   SLIDER WRAPPER
   Height is calibrated so slider + hero title fit in 100vh.
   Navbar (68px) + notif-bar (~44px) + slider (320px) then
   hero overlaps by 160px → hero content starts at ~272px
   from top of viewport, leaving ~500px for title + CTA.
───────────────────────────────────────────────────────── */
#heroBannerSlider {
  position:   relative;
  width:      100%;
  height:     340px;
  overflow:   hidden;
  background: #080c16;
  display:    block;
  margin-top: var(--navbar-h);          /* flush under fixed navbar */

  /* Bottom mask: image fades into the dark hero bg — no hard line */
  -webkit-mask-image: linear-gradient(to bottom, black 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 52%, transparent 100%);
}

/* Notification banner also visible → shift slider down */
body.has-notifications #heroBannerSlider {
  margin-top: calc(var(--navbar-h) + var(--notif-banner-h, 44px));
}

/* ─────────────────────────────────────────────────────────
   HERO SECTION — pulled up to overlap the slider's fade zone
   The negative margin brings the hero's dark background
   under the fading bottom of the slider, so they merge
   seamlessly.  z-index: 2 keeps text above the slider.
───────────────────────────────────────────────────────── */
body.has-banner-slider .hero {
  padding-top:    0 !important;
  margin-top:    -155px !important;
  padding-bottom: var(--space-2xl) !important;
  min-height:     520px !important;     /* enough room for terminal to centre */
  position:       relative;
  z-index:        2;
}

/* Hero content: enough top padding so text clears the image */
body.has-banner-slider .hero-content {
  padding-top:    3rem !important;
  padding-bottom: 1rem !important;
}

/* Tighten element spacing so everything fits above the fold */
body.has-banner-slider .hero-badge      { margin-bottom: 1rem !important; }
body.has-banner-slider .hero-title      { margin-bottom: 0.75rem !important; }
body.has-banner-slider .hero-subtitle   { margin-bottom: 1rem !important; }
body.has-banner-slider .hero-cta        { margin-bottom: 1.25rem !important; }
body.has-banner-slider .hero-stats      { gap: 1.5rem !important; }

/* Particles start inside the hero's own visual area */
body.has-banner-slider #heroParticles,
body.has-banner-slider .hero-grid-overlay,
body.has-banner-slider .hero-scan-line  { top: 155px; }

/* ─────────────────────────────────────────────────────────
   TABLET  (768px – 1024px)
───────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  #heroBannerSlider                               { height: 300px; }
  body.has-banner-slider .hero                    { margin-top: -130px !important; }
  body.has-banner-slider #heroParticles,
  body.has-banner-slider .hero-grid-overlay,
  body.has-banner-slider .hero-scan-line          { top: 130px; }
}

/* ─────────────────────────────────────────────────────────
   MOBILE  (≤ 768px)
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #heroBannerSlider {
    height: 220px;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  }
  body.has-banner-slider .hero {
    margin-top:    -90px !important;
    padding-bottom: var(--space-xl) !important;
  }
  body.has-banner-slider .hero-content  { padding-top: 2rem !important; }
  body.has-banner-slider #heroParticles,
  body.has-banner-slider .hero-grid-overlay,
  body.has-banner-slider .hero-scan-line { top: 90px; }
  .banner-arrow { display: none; }
}

@media (max-width: 480px) {
  #heroBannerSlider                          { height: 180px; }
  body.has-banner-slider .hero               { margin-top: -70px !important; }
  body.has-banner-slider #heroParticles,
  body.has-banner-slider .hero-grid-overlay,
  body.has-banner-slider .hero-scan-line     { top: 70px; }
}

/* ─────────────────────────────────────────────────────────
   TRACK  (flex row: clone-last … slides … clone-first)
───────────────────────────────────────────────────────── */
#bannerTrack {
  display:     flex;
  height:      100%;
  will-change: transform;
  /* transition set dynamically by JS */
}

/* ─────────────────────────────────────────────────────────
   INDIVIDUAL SLIDE
───────────────────────────────────────────────────────── */
.banner-slide {
  flex:       0 0 100%;
  position:   relative;
  overflow:   hidden;
  background: #080c16;
}

.banner-slide img {
  width:              100%;
  height:             100%;
  object-fit:         cover;
  background:         #080c16;
  object-position:    center 25%;   /* show upper focal area of image */
  display:            block;
  user-select:        none;
  -webkit-user-drag:  none;
  image-rendering:    auto;
  /* High-quality downscaling hint for browsers that support it */
  -webkit-font-smoothing: antialiased;
}

.banner-slide a {
  display: block;
  height:  100%;
}

/* Top vignette only — bottom handled by CSS mask */
.banner-slide::after {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    180deg,
    rgba(8,12,22,0.55)  0%,
    rgba(8,12,22,0.15) 30%,
    rgba(8,12,22,0.0)  55%,
    rgba(8,12,22,0.0) 100%
  );
  pointer-events: none;
}

/* Left / right edge fades */
#heroBannerSlider::before,
#heroBannerSlider::after {
  content:        '';
  position:       absolute;
  top: 0; bottom: 0;
  width:          100px;
  z-index:        5;
  pointer-events: none;
}
#heroBannerSlider::before {
  left:       0;
  background: linear-gradient(to right, rgba(8,12,22,0.6), transparent);
}
#heroBannerSlider::after {
  right:      0;
  background: linear-gradient(to left, rgba(8,12,22,0.6), transparent);
}

/* ─────────────────────────────────────────────────────────
   DOT INDICATORS
───────────────────────────────────────────────────────── */
#bannerDots {
  position:  absolute;
  bottom:    28px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       7px;
  z-index:   7;
}

.banner-dot {
  width:          8px;
  height:         8px;
  border-radius:  50%;
  background:     rgba(255,255,255,0.3);
  border:         1px solid rgba(255,255,255,0.15);
  cursor:         pointer;
  padding:        0;
  transition:     background 0.35s, transform 0.25s, width 0.35s, border-radius 0.35s;
}
.banner-dot.active {
  background:    var(--accent, #00d4ff);
  transform:     scale(1.15);
  border-color:  var(--accent, #00d4ff);
  width:         24px;
  border-radius: 4px;
  box-shadow:    0 0 8px rgba(0,212,255,0.55);
}

/* ─────────────────────────────────────────────────────────
   PREV / NEXT ARROWS
───────────────────────────────────────────────────────── */
.banner-arrow {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         7;
  background:      rgba(8,12,22,0.55);
  border:          1px solid rgba(0,212,255,0.25);
  color:           rgba(255,255,255,0.85);
  width:           42px;
  height:          42px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       1.1rem;
  transition:      background 0.2s, border-color 0.2s, color 0.2s;
  user-select:     none;
  backdrop-filter: blur(6px);
}
.banner-arrow:hover {
  background:   rgba(0,212,255,0.18);
  border-color: var(--accent, #00d4ff);
  color:        #fff;
}
#bannerPrev { left:  18px; }
#bannerNext { right: 18px; }

/* ═══════════════════════════════════════════════════════════
   ADMIN BANNER MANAGEMENT PANEL
   ═══════════════════════════════════════════════════════════ */

.banner-admin-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:                   1.25rem;
  margin-top:            1.25rem;
}
.banner-admin-card {
  background:    var(--bg-card, #161b22);
  border:        1px solid var(--border, #30363d);
  border-radius: 10px;
  overflow:      hidden;
  transition:    border-color 0.2s, transform 0.2s;
  position:      relative;
}
.banner-admin-card:hover {
  border-color: var(--accent, #00d4ff);
  transform:    translateY(-2px);
}
.banner-admin-card img {
  width:       100%;
  height:      130px;
  object-fit:  cover;
  display:     block;
}
.banner-admin-card-body          { padding: 0.85rem 1rem; }
.banner-admin-card-body .banner-title {
  font-size: 0.82rem; color: var(--text,#e6edf3); font-weight: 600;
  margin-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.banner-admin-card-body .banner-meta {
  font-size: 0.72rem; color: var(--text-muted,#7d8590);
  font-family: var(--font-mono,monospace); margin-bottom: 0.65rem;
}
.banner-admin-card-actions        { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.banner-status-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.65rem; font-family: var(--font-mono,monospace);
  padding: 2px 8px; border-radius: 999px; font-weight: 700; letter-spacing: 0.05em;
}
.banner-status-badge.active   { background:rgba(107,203,119,0.18); color:#6bcb77; border:1px solid #6bcb77; }
.banner-status-badge.inactive { background:rgba(255,107,107,0.12); color:#ff6b6b; border:1px solid #ff6b6b; }

#bannerDropZone {
  border: 2px dashed var(--border,#30363d); border-radius: 10px;
  padding: 2rem; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s; margin-bottom: 1rem;
  color: var(--text-muted,#7d8590); font-size: 0.88rem;
}
#bannerDropZone:hover, #bannerDropZone.drag-over {
  border-color: var(--accent,#00d4ff); background: rgba(0,212,255,0.05);
  color: var(--text,#e6edf3);
}
#bannerUploadPreview {
  display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem;
}
#bannerUploadPreview .preview-thumb {
  position: relative; width: 90px; height: 60px;
  border-radius: 6px; overflow: hidden; border: 1px solid var(--border,#30363d);
}
#bannerUploadPreview .preview-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
#bannerUploadPreview .preview-thumb .remove-thumb {
  position:absolute; top:2px; right:2px; background:rgba(0,0,0,0.7); color:#fff;
  border:none; border-radius:50%; width:18px; height:18px;
  font-size:0.7rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ─────────────────────────────────────────────────────────
   LOCK HERO TITLE SIZE when banner slider is active
   Keeps "Master the Art of Cybersecurity" at the compact
   size it appears mid-animation — no grow on load settle.
───────────────────────────────────────────────────────── */
body.has-banner-slider .hero-title {
  font-size:    clamp(1.85rem, 4vw, 2.8rem) !important;
  margin-bottom: 0.5rem !important;
  line-height:  1.08 !important;
}

/* Subtitle slightly tighter too */
body.has-banner-slider .hero-subtitle {
  font-size:    clamp(0.9rem, 1.8vw, 1.05rem) !important;
  margin-bottom: 0.85rem !important;
}

/* Freeze the animation at its end state immediately —
   no perceived "pop" or grow after paint */
body.has-banner-slider .hero-title,
body.has-banner-slider .hero-badge,
body.has-banner-slider .hero-subtitle,
body.has-banner-slider .hero-cta,
body.has-banner-slider .hero-stats {
  animation-duration: 0.35s !important;
}

/* ─────────────────────────────────────────────────────────
   RE-ALIGN FLOATING TERMINAL when banner slider is active.
   The hero's top shifts up by the overlap amount (155px),
   so we nudge the terminal down by the same offset so it
   stays visually centred in the visible hero area.
───────────────────────────────────────────────────────── */
body.has-banner-slider .hero-terminal {
  top:       calc(50% + 78px) !important;   /* 155px overlap ÷ 2 */
  transform: translateY(-50%) !important;
}

@media (max-width: 1160px) {
  /* Terminal is hidden on this breakpoint in home.css anyway */
  body.has-banner-slider .hero-terminal { display: none; }
}