/* What's New Section Styling */
@font-face {
    font-family: 'DeltaSans';
    src: url('./fonts/DeltaSans-Regular.eot');
    src: url('./fonts/DeltaSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('./fonts/DeltaSans-Regular.woff2') format('woff2'),
    url('./fonts/DeltaSans-Regular.woff') format('woff'),
    url('./fonts/DeltaSans-Regular.ttf') format('truetype'),
    url('./fonts/DeltaSans-Regular.svg#DeltaSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DeltaSans';
    src: url('./fonts/DeltaSans-SemiBold.eot');
    src: url('./fonts/DeltaSans-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('./fonts/DeltaSans-SemiBold.woff2') format('woff2'),
    url('./fonts/DeltaSans-SemiBold.woff') format('woff'),
    url('./fonts/DeltaSans-SemiBold.ttf') format('truetype'),
    url('./fonts/DeltaSans-SemiBold.svg#DeltaSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.whats-new {
  padding: 40px 0 80px;
  background-color: #001337 !important;
  color: white !important;
  width: 100%;
  position: relative;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  z-index: 5 !important; /* Force proper z-index stacking within What's New boxes */
}

.whats-new h1 {
  color: white;
  text-align: left;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
  margin-left: 0; /* Reset margin since we're using container-inner now */
  position: relative;
}

.whats-new h1:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 300px;
  height: 12px;
  background: linear-gradient(90deg, #0087dc, #82d4d6, #b9eb5f);
    margin-left: 13rem;
}

.whats-new-track {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px 0; /* Remove horizontal padding since container-inner handles it */
  width: 100%;
  max-width: 100%; /* Let container-inner handle max-width */
  margin: 0; /* Remove auto margin since container-inner handles centering */
  visibility: visible !important;
  opacity: 1 !important;
  align-items: stretch !important; /* Ensures equal height cards */
  box-sizing: border-box !important; /* Ensures padding doesn't add to width */
}

/* Ensure absolute positioning doesn't affect our layout */
.whats-new-track * {
  transform: none !important;
}

.whats-new-box {
  position: relative !important;
  width: 340px !important; /* Slightly wider to accommodate images better */
  height: auto !important;
  background-color: #001337 !important;
  border-radius: 8px !important; /* More consistent border radius */
  overflow: hidden !important; /* Changed to hidden to keep content within bounds */
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  margin-bottom: 20px !important;
  opacity: 1 !important; /* Ensure boxes are visible */
  visibility: visible !important;
  z-index: 100 !important; /* Ensure the box is on top */
  transition: transform 0.3s ease !important; /* Smooth transition for hover effects */
}

/* Override the global card-layer class that's causing positioning issues */
.whats-new-box .card-layer {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  height: auto !important;
  transition: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.whats-new-box .card-layer.card-image.whats-new-image,
.whats-new-image {
  width: 100% !important;
  height: 350px !important;
  overflow: visible !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important; /* Override absolute positioning */
  top: auto !important;
  left: auto !important;
  
}

.news-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 40px !important; /* Match the box border radius */
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
}

.whats-new-box .card-content {
  padding: 20px 0;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  position: static !important; /* Override any absolute positioning */
  visibility: visible !important;
  opacity: 1 !important;
}

.whats-new-box .fragment-heading {
  margin-bottom: 30px;
  text-align: left;
  padding: 0 10px;
}

.whats-new-box .content-text {
  color: white !important;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.3;
  text-align: left;
}

.whats-new-box .content-subtitle {
  color: white !important;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
  text-align: left;
}

.whats-new-box .fragment-cta {
  margin-top: auto;
  text-align: center;
  margin-bottom: 10px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 200 !important; /* Make sure buttons are on top and clickable */
}

.whats-new-box .cta-link {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  min-width: 140px !important;
  
  /* Gradient border only - CRITICAL PART FOR TRANSPARENT BACKGROUND WITH GRADIENT BORDER */
  border: 2px solid transparent !important;
  background-color: transparent !important;
  border-image: 
    linear-gradient(transparent, transparent), 
    linear-gradient(45deg, #0087dc, #82d4d6, #b9eb5f) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  
  /* Prevent any other styling */
  box-shadow: none !important;
  outline: none !important;
  
  /* Ensure visibility */
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 100 !important;
  
  transition: transform 0.3s ease !important;
}

.whats-new-box .cta-text {
    font-family: 'DeltaSans', Inter, sans-serif, Arial;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

.whats-new-box .cta-link:hover {
  transform: scale(1.1) !important;
  text-decoration: none !important;
}

/* Force images to maintain proper aspect ratio */
.whats-new-box .card-image {
  position: relative !important;
  aspect-ratio: 16/9 !important; /* Maintain consistent aspect ratio */
  overflow: hidden !important;
}

/* Ensure image is centered within its container */
.whats-new-box .news-img {
  position: relative !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  object-position: center center !important;
}

/* Add a subtle hover effect to the boxes */
.whats-new-box:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure overflow is properly handled in all browsers */
.whats-new-box, 
.whats-new-box .card-layer,
.whats-new-box .card-image,
.whats-new-box .news-img {
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
  backface-visibility: hidden !important;
}

/* Extra override for visibility */
html body .whats-new, 
html body .whats-new-track,
html body .whats-new-box,
html body .whats-new-box * {
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Media Queries for Responsive Design */
@media (max-width: 1200px) {
  .whats-new-track {
    gap: 20px;
    padding: 30px 3%;
  }
  
  .whats-new-box {
    width: 320px !important;
  }
  
  .whats-new-image {
    max-height: 260px !important;
  }
}

@media (max-width: 992px) {
  .whats-new-track {
    justify-content: center;
    gap: 15px;
  }
  
  .whats-new-box {
    width: 280px !important;
  }
  
  .whats-new-image {
    max-height: 230px !important;
  }
  
  .news-img {
    border-radius: 6px !important;
  }
}

@media (max-width: 768px) {
  .whats-new h1 {
    font-size: 2rem;
    margin-left: 5%;
  }
  
  .whats-new h1:after {
    width: 200px;
  }
  
  .whats-new-box {
    width: 90% !important;
    max-width: 400px !important;
    margin: 0 auto 20px !important;
  }
  
  .whats-new-image {
    max-height: 250px !important;
  }
}

@media (max-width: 480px) {
  .whats-new-image {
    max-height: 200px !important;
  }
  
  .whats-new-box .content-text {
    font-size: 0.9rem !important;
  }
  
  .whats-new-box .content-subtitle {
    font-size: 0.8rem !important;
  }
}