/* Swiper.js styles for homepage carousel */

/* Swiper CSS is loaded from CDN in default.html */

/* Custom styles for homepage carousel */
.homepage-carousel {
  width: 100%;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: auto; /* Allow natural height */
  max-width: 100%; /* Prevent horizontal overflow */
}

/* Slide styles */
.homepage-carousel .swiper-slide {
  height: auto;
  padding: 0.5rem;
}

/* Navigation button styles */
.homepage-carousel .swiper-button-prev,
.homepage-carousel .swiper-button-next {
  color: rgba(59, 130, 246, 0.9); /* Primary blue */
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.homepage-carousel .swiper-button-prev:after,
.homepage-carousel .swiper-button-next:after {
  font-size: 18px;
  font-weight: bold;
}

/* Position the navigation buttons properly */
.homepage-carousel .swiper-button-prev {
  left: 10px;
}

.homepage-carousel .swiper-button-next {
  right: 10px;
}

/* Pagination styles */
.homepage-carousel .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: rgba(59, 130, 246, 0.5); /* Primary blue with opacity */
  opacity: 0.7;
  transition: all 0.3s ease;
}

.homepage-carousel .swiper-pagination-bullet-active {
  background-color: rgba(59, 130, 246, 1); /* Primary blue */
  opacity: 1;
  transform: scale(1.2);
}

/* Article card styles */
.homepage-carousel .article-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.homepage-carousel .article-image {
  height: 100px; /* Further reduced height */
  border-radius: 0.375rem;
  overflow: hidden;
  margin-bottom: 0.25rem; /* Reduced margin */
}

.homepage-carousel .article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homepage-carousel .article-title {
  font-weight: bold;
  font-size: 1rem; /* Slightly smaller font */
  margin-bottom: 0.25rem; /* Reduced margin */
  line-height: 1.3;
  max-height: 2.6rem; /* Limit height to 2 lines */
  overflow: hidden;
  color: #1e40af; /* Brand blue 800 */
}

.homepage-carousel .article-description {
  color: #4b5563;
  font-size: 0.8rem; /* Smaller font */
  margin-bottom: 0.5rem; /* Reduced margin */
  max-height: none; /* Remove height limit */
  overflow: visible; /* Make content visible */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homepage-carousel .article-link {
  margin-top: auto;
}

/* Responsive adjustments */
@media (max-width: 639px) { /* Match our sm breakpoint - 1px */
  .homepage-carousel {
    max-height: none; /* Remove height restriction on mobile */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .homepage-carousel .swiper-button-prev,
  .homepage-carousel .swiper-button-next {
    display: none; /* Hide navigation buttons on mobile */
  }
  
  .homepage-carousel .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
  }
  
  .homepage-carousel .article-image {
    height: 100px; /* Even smaller for mobile */
  }
  
  /* Reduce padding in slides */
  .homepage-carousel .swiper-slide {
    padding: 0.25rem;
    width: auto !important; /* Prevent slides from causing overflow */
    max-width: 100%;
  }
  
  /* Reduce article padding */
  .homepage-carousel article {
    padding: 0.25rem !important;
    width: 100%;
    max-width: 100%;
  }
  
  /* Smaller text for mobile */
  .homepage-carousel h3 {
    font-size: 0.8rem !important;
    line-height: 1.2;
    margin-bottom: 0.25rem !important;
    max-height: 2rem; /* Limit to 2 lines */
  }
  
  .homepage-carousel p {
    font-size: 0.7rem !important;
    margin-bottom: 0.25rem !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-height: 1.7rem; /* Ensure consistent height */
  }
  
  /* Smaller buttons */
  .homepage-carousel .article-link a {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.7rem !important;
  }
  
  /* Fix for horizontal scrolling */
  .swiper-wrapper {
    max-width: 100%;
  }
}

/* Medium screens (tablet and small desktop) */
@media (min-width: 640px) and (max-width: 1023px) { /* Match our sm to lg-1 breakpoints */
  .homepage-carousel {
    max-height: none; /* Remove height restriction */
  }
  
  .homepage-carousel .swiper-slide {
    width: 48% !important; /* Fixed width for consistent rendering */
  }
  
  .homepage-carousel article {
    height: 100%;
  }
  
  .homepage-carousel .article-image {
    height: 120px;
  }
  
  .homepage-carousel h3 {
    font-size: 0.9rem !important;
    line-height: 1.3;
  }
  
  .homepage-carousel p {
    font-size: 0.8rem !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    min-height: 2rem; /* Ensure consistent height */
  }
}

/* Desktop layout adjustments */
@media (min-width: 1024px) { /* Match our lg breakpoint */
  .homepage-carousel {
    max-height: none; /* Remove fixed height */
  }
  
  /* Adjust for side-by-side layout */
  .landing-right-content .homepage-carousel {
    max-width: 100%;
  }
  
  /* Adjust article height for desktop */
  .homepage-carousel article {
    max-height: none; /* Remove fixed height */
  }
  
  .homepage-carousel .swiper-slide {
    width: 32% !important; /* Fixed width for consistent rendering */
  }
}

/* Adjust for different screen heights */
@media (max-height: 700px) {
  .homepage-carousel {
    max-height: calc(100vh - 150px);
  }
  
  .homepage-carousel .article-image {
    height: 90px;
  }
  
  .homepage-carousel h3 {
    font-size: 0.8rem;
    max-height: 2rem;
  }
  
  .homepage-carousel p {
    font-size: 0.7rem;
    max-height: 1.6rem;
  }
}

/* Extra small screens */
@media (max-width: 359px) { /* Match our xs breakpoint - 1px */
  .homepage-carousel {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .homepage-carousel .article-image {
    height: 80px;
  }
  
  .homepage-carousel h3 {
    font-size: 0.75rem !important;
  }
  
  .homepage-carousel p {
    display: none; /* Hide description on very small screens */
  }
  
  .homepage-carousel .article-link a {
    padding: 0.15rem 0.3rem !important;
    font-size: 0.65rem !important;
  }
  
  /* Fix for horizontal scrolling */
  .swiper-container, 
  .swiper-wrapper, 
  .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* Compact layout for landing page */
.landing-carousel {
  margin-top: 0;
}

/* This is now moved to enhanced-components.css */