.discover-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.discover-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Modern aspect ratio property */
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio fallback */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
  background-color: #333;
}

.discover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.discover-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  background-color: #333;
}

/* Ensure videos maintain aspect ratio on browsers that support aspect-ratio */
@supports (aspect-ratio: 16 / 9) {
  .discover-card {
    padding-bottom: 0;
  }
}

.discover-info {
  --neon-color: var(--accent-color, #FFB6FF);
  --neon-color-rgb: 255, 182, 255;
  /* Accent color RGB */
  --neon-border-width: 2px;
  --neon-glow-size: 5px;

  /* Color variables for animation */
  --gray-1-rgb: 253, 254, 253;
  --accent-rgb: 255, 182, 255;
  /* From base.css --accent-color: #FFB6FF */
  --anchor-rgb: 212, 108, 219;
  /* From base.css --anchor-color: #D46CDB */

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1.5rem;
  z-index: 2;
  color: var(--gray-1);
  background: linear-gradient(235deg, rgba(11, 22, 16, 0.8), rgba(8, 17, 12, 0) 33%),
    linear-gradient(45deg, rgba(8, 17, 12, 0.8), rgba(5, 11, 8, 0) 33%),
    linear-gradient(rgba(5, 11, 8, 0.85));
  border-radius: 22px;
  text-align: center;
  backdrop-filter: blur(12px);
  width: 80%;
  max-width: 300px;
  min-width: 250px;
  min-height: 170px;
  position: relative;
}

/* Neon border effect */
.discover-info::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -2px;
  border-radius: inherit;
  border: var(--neon-border-width) solid var(--neon-color);

  /* Enhanced neon glow effect */
  box-shadow:
    0 0 var(--neon-glow-size) rgba(var(--neon-color-rgb), 0.8),
    0 0 calc(var(--neon-glow-size) * 2) rgba(var(--neon-color-rgb), 0.5),
    0 0 calc(var(--neon-glow-size) * 3) rgba(var(--neon-color-rgb), 0.2);

  /* Performance optimized animations */
  animation: neonColorCycle 12s ease-in-out infinite, neonFlicker 6s linear infinite;
  will-change: border-color, box-shadow, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;

  pointer-events: none;
}

/* All cards use the same neon color now */
.discover-card .discover-info {
  --neon-color: var(--accent-color, #FFB6FF);
  --neon-color-rgb: 255, 182, 255;
}

.discover-info h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.discover-info p {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #f1f1f1;
  margin: 0;
}

/* Color cycling animation - gray-1 to accent to anchor to accent to gray-1 */
@keyframes neonColorCycle {

  0%,
  100% {
    border-color: rgb(var(--gray-1-rgb));
    box-shadow:
      0 0 var(--neon-glow-size) rgba(var(--gray-1-rgb), 0.8),
      0 0 calc(var(--neon-glow-size) * 2) rgba(var(--gray-1-rgb), 0.5);
  }

  25% {
    border-color: rgb(var(--accent-rgb));
    box-shadow:
      0 0 var(--neon-glow-size) rgba(var(--accent-rgb), 0.8),
      0 0 calc(var(--neon-glow-size) * 2) rgba(var(--accent-rgb), 0.5);
  }

  50% {
    border-color: rgb(var(--anchor-rgb));
    box-shadow:
      0 0 var(--neon-glow-size) rgba(var(--anchor-rgb), 0.8),
      0 0 calc(var(--neon-glow-size) * 2) rgba(var(--anchor-rgb), 0.5);
  }

  75% {
    border-color: rgb(var(--accent-rgb));
    box-shadow:
      0 0 var(--neon-glow-size) rgba(var(--accent-rgb), 0.8),
      0 0 calc(var(--neon-glow-size) * 2) rgba(var(--accent-rgb), 0.5);
  }
}

/* Simplified flicker effect */
@keyframes neonFlicker {

  0%,
  92% {
    opacity: 1;
  }

  94%,
  96%,
  98% {
    opacity: 0.85;
  }
}

.discover {
  padding: 3rem 0;
  background: linear-gradient(to top,
      rgb(var(--gray-1-rgb)),
      rgb(var(--gray-10-rgb)));
}

.discover h3 {
  font-size: 1.875rem;
  line-height: 1.2;
  margin: 0;
  color: var(--primary-color);
}

/* Discover Section Wrapper */
.discover-section {
  padding: 3rem 0;
  background: linear-gradient(to top, var(--gray-1) 50%, #80808010 100%);
  margin-top: 0;
}

/* Discover Header Styles */
.discover-header {
  margin-top: 0;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.loading-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: #666;
  font-style: italic;
}

/* Legacy article classes - kept for backward compatibility but hidden */
.articles-header,
.view-all-articles-link,
.articles-grid,
.article-card,
.article-image,
.article-info,
.article-category,
.article-date {
  display: none !important;
}

/* Responsive Design */
@media (max-width: 576px) {
  .discover-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .discover-info {
    padding: 1rem;
    min-width: 180px;
    min-height: 90px;
  }

  .discover-info h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  .discover-info p {
    font-size: 0.85rem;
  }
}

@media (max-width: 768px) {
  .discover h3 {
    font-size: 1.8rem;
  }

  .discover-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .discover-section {
    margin-top: 0;
    padding: 2rem 0;
  }

  .discover-header {
    margin-top: 0;
  }

  .discover-info {
    padding: 1rem;
    width: 85%;
    max-width: 250px;
    min-width: 200px;
    min-height: 100px;
    border-radius: 18px;
    --neon-border-width: 1.5px;
    --neon-glow-size: 4px;
  }

  .discover-info h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .discover-info p {
    font-size: 0.875rem;
  }
}

@media (max-width: 992px) {
  .discover-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .discover-info {
    padding: 1.25rem;
    width: 85%;
    max-width: 280px;
    min-width: 220px;
    min-height: 110px;
    border-radius: 18px;
    --neon-border-width: 1.8px;
    --neon-glow-size: 4.5px;
  }

  .discover-info h4 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
  }

  .discover-info p {
    font-size: 1rem;
  }
}

@media (min-width: 993px) {
  .discover-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Copyright disclaimer styling for discover page */
.copyright-disclaimer {
  font-size: 0.86rem;
  display: block;
  margin-top: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  text-align: center;
}