.spotlight-section {
  position: relative;
  background-color: #fff;
  overflow: hidden;
  width: 100vw;
  max-width: 100%;
}

/* Premium Spotlight Header */
.spotlight-header-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 4rem 0 3rem 0;
  gap: 2rem;
}

.spotlight-badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 185, 25, 0.1);
  border: 1px solid rgba(232, 185, 25, 0.3);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background-color: var(--lpu-orange, #ff6b00);
  border-radius: 50%;
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 107, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}

.spotlight-badge {
  color: var(--lpu-orange, #ff6b00);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.spotlight-title {
  font-size: 3.5rem;
  font-family: var(--font-heading);
  line-height: 1.1;
  color: #111;
  margin-bottom: 15px;
}

.spotlight-title .highlight-text {
  background: linear-gradient(90deg, #ff6b00, #ffb300);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.spotlight-subtitle {
  color: #555;
  font-size: 1.15rem;
  max-width: 600px;
  line-height: 1.6;
}

.spotlight-header-actions .btn-glow {
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transform: translateY(0);
  transition: all 0.3s ease;
}

.spotlight-header-actions .btn-glow:hover {
  box-shadow: 0 15px 35px rgba(255, 107, 0, 0.3);
  transform: translateY(-3px);
}

@media (max-width: 900px) {
  .spotlight-header-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .spotlight-title {
    font-size: 2.5rem;
  }
}
.related-links-tab {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px 10px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
  border-radius: 0 5px 5px 0;
  transition: background 0.3s;
}

.related-links-tab:hover {
  background-color: var(--lpu-orange, #ff6b00);
  color: #fff;
}

/* Marquee Container */
.spotlight-marquee-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}

.marquee-row {
  width: 100%;
  overflow: hidden;
  display: flex;
}

.marquee-content {
  display: flex;
  width: max-content;
  gap: 0;
}

.marquee-item {
  position: relative;
  width: 25vw; /* Increased width: 4 items per row visible */
  height: 400px; /* Increased height */
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  background-color: #000; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
}

.marquee-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease;
  color: transparent; /* Hides alt text when image fails if desired, but we'll leave it out to help debug. Wait, actually we can hide raw alt text and just let the title overlay do it */
}

.marquee-item:hover .marquee-img {
  transform: scale(1.05);
}

.marquee-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.marquee-item:hover .marquee-info {
  transform: translateY(0);
  opacity: 1;
}

.marquee-info h4 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  line-height: 1.2;
}

.marquee-info p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
  margin: 0;
  white-space: normal;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animations */
.marquee-left {
  animation: scroll-left 40s linear infinite;
}

.marquee-right {
  animation: scroll-right 40s linear infinite;
}

.marquee-row:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% / 3)); }
}

@keyframes scroll-right {
  0% { transform: translateX(calc(-100% / 3)); }
  100% { transform: translateX(0); }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .marquee-item {
    width: 33.333vw; /* 3 items visible */
    height: 250px;
  }
}

@media (max-width: 768px) {
  .spotlight-title {
    font-size: 2rem;
  }

  .spotlight-subtitle {
    font-size: 1rem;
  }

  .spotlight-header-container {
    padding: 2.5rem 0 2rem;
  }

  .related-links-tab {
    display: none;
  }

  .marquee-item {
    width: 70vw;
    height: 200px;
  }

  /* Extra bottom padding for mobile nav */
  .spotlight-section {
    padding-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .marquee-item {
    width: 85vw;
    height: 200px;
  }

  .spotlight-title {
    font-size: 1.7rem;
  }

  .marquee-info h4 {
    font-size: 1.1rem;
  }
}