/* Highlight page specific styles */
.highlight-card {
  scroll-margin-top: 120px; /* Account for fixed navigation */
}

/* Highlight media content styling */
.highlight-image {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: hsl(var(--muted));
}

.highlight-image img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.highlight-image:hover img {
  transform: scale(1.02);
}

/* YouTube video container */
.highlight-video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border-radius: 0.5rem;
  overflow: hidden;
  background: hsl(var(--muted));
}

.highlight-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.5rem;
}

/* Multiple images gallery */
.highlight-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 90%;

}

.highlight-gallery img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  border-radius: 0.5rem;
  transition: var(--transition-smooth);
}

.highlight-gallery img:hover {
  transform: scale(1.02);
}

/* Single image with caption */
.highlight-image-caption {
  position: relative;
  margin-bottom: 1rem;
}

.highlight-image-caption img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  border-radius: 0.5rem;
  transition: var(--transition-smooth);
}

.highlight-image-caption:hover img {
  transform: scale(1.02);
}

/* Media grid for multiple content types */
.highlight-media-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  width: 90%;
 
}

.highlight-media-grid .highlight-video,
.highlight-media-grid .highlight-image-caption {
  margin-bottom: 0;
}

/* Downward Arrow Button */
.down-arrow-button {
  background: hsl(var(--accent) / 0.1);
  border: 2px solid hsl(var(--accent));
  cursor: pointer;
  padding: 1.5rem;
  border-radius: 50%;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  min-width: 4rem;
  min-height: 4rem;
}

.down-arrow-button:hover {
  background: hsl(var(--accent) / 0.15);
  border-color: hsl(var(--accent));
  transform: translateY(2px);
  box-shadow: 0 4px 12px hsl(var(--accent) / 0.25);
}

.down-arrow-button:focus {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
  background: hsl(var(--accent) / 0.1);
  border-color: hsl(var(--accent));
}

.down-arrow-button svg {
  transition: var(--transition-smooth);
}

.down-arrow-button:hover svg {
  transform: translateY(2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .highlight-image img,
  .highlight-image-caption img,
  .highlight-gallery img {
    height: 12rem;
  }
  
  .down-arrow-button {
    margin-top: 1.5rem;
  }
}