/* 
 * static/css/home.css
 * Home page specific styles for AITM website
 * Contains carousel, testimonials, and news section styles
 * RELEVANT FILES: main/templates/main/home.html, static/js/home.js
 */

/* Modern Testimonials Carousel CSS with Performance Optimizations */
.testimonial-bg {
  background: #1d2236;
}

/* Testimonials Track - News Section Style */
.testimonial-track {
  display: flex;
  gap: 1.5rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.testimonial-track::-webkit-scrollbar {
  display: none;
}

/* Testimonial Cards - Responsive Width */
.testimonial-card {
  flex-shrink: 0;
  min-height: 300px;
}

/* Ensure cards maintain proper width at all breakpoints */
/* Mobile: 1 card visible, no gaps to account for */
@media (max-width: 639px) {
  .testimonial-card {
    width: 100% !important;
  }
}

/* Tablet: 2 cards visible, 1 gap (24px) between them */
@media (min-width: 640px) and (max-width: 1023px) {
  .testimonial-card {
    width: calc((100% - 24px) / 2) !important;
  }
}

/* Desktop: 3 cards visible, 2 gaps (48px total) between them */
@media (min-width: 1024px) {
  .testimonial-card {
    width: calc((100% - 48px) / 3) !important;
  }
}

/* Card Hover Effects */
.testimonial-card .bg-white {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.testimonial-card:hover .bg-white {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Focus Management */
.testimonial-card:focus-within {
  outline: 2px solid rgba(255, 222, 89, 0.8);
  outline-offset: 4px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .testimonial-track {
    scroll-behavior: auto;
  }
  
  .testimonial-card .bg-white {
    transition: none;
  }
}

/* Print Styles */
@media print {
  .testimonial-carousel-wrapper {
    overflow: visible;
  }
  
  .testimonial-track {
    flex-wrap: wrap;
  }
  
  .testimonial-card {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 20px;
  }
}

/* News Cards - Responsive Width */
/* Mobile: 1 card visible, no gaps to account for */
@media (max-width: 639px) {
  .news-card {
    width: 100% !important;
  }
}

/* Tablet: 2 cards visible, 1 gap (24px) between them */
@media (min-width: 640px) and (max-width: 1023px) {
  .news-card {
    width: calc((100% - 24px) / 2) !important;
  }
}

/* Desktop: 3 cards visible, 2 gaps (48px total) between them */
@media (min-width: 1024px) {
  .news-card {
    width: calc((100% - 48px) / 3) !important;
  }
}

/* News Cards with Quotation Mark Background and Improved Layout */
.news-card {
  position: relative;
  overflow: hidden;
  /* Enhanced card styling for consistent layout */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%; /* 1/4 of the card width */
  height: 25%; /* 1/4 of the card height */
  background-image: url('../images/quotation mark bg.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.08; /* Very subtle for news cards */
  z-index: 1;
  pointer-events: none;
}

/* Ensure card content appears above the background */
.news-card > div {
  position: relative;
  z-index: 2;
}

/* Improved card content layout */
.news-card .px-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Enhanced hover effects for consistent user interaction */
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(15, 28, 63, 0.15);
}

.news-card:hover::after {
  opacity: 0.12; /* Slightly more visible on hover */
}

/* Enhanced title and content styling for consistent layout */
.news-card h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  hyphens: auto;
}

.news-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

/* Ensure consistent spacing and typography */
.news-card .px-2 {
  min-height: calc(100% - 12rem); /* Account for image height */
}

/* Fix horizontal overflow issues */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure containers don't cause overflow */
.news-container {
  max-width: 100%;
  overflow: visible;
}

/* Fix the track container to prevent unwanted scroll */
#newsTrack {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
}

/* News track scrollbar hiding */
.news-track::-webkit-scrollbar {
  display: none;
}

.news-track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* Responsive adjustments for quotation mark and mobile improvements */
@media (max-width: 768px) {
  .news-card::after {
    width: 20%;
    height: 20%;
    opacity: 0.05;
  }

  /* Ensure proper spacing on mobile */
  .news-card {
    min-height: 400px; /* Consistent height on mobile */
  }

  /* Adjust title sizing on mobile */
  .news-card h3 {
    font-size: 16px;
    min-height: 2.2rem;
  }

  /* Adjust excerpt height on mobile */
  .news-card p {
    min-height: 3.8rem;
  }
}

@media (max-width: 480px) {
  .news-card::after {
    width: 15%;
    height: 15%;
    opacity: 0.03;
  }

  /* Further mobile optimization */
  .news-card {
    min-height: 380px; /* Consistent height on small mobile */
  }

  /* Further adjust title sizing on small mobile */
  .news-card h3 {
    font-size: 15px;
    min-height: 2rem;
  }

  /* Further adjust excerpt height on small mobile */
  .news-card p {
    min-height: 3.5rem;
  }
}

/* Enhanced scroll behavior for news track */
.news-track {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

/* Ensure cards align properly in flex container */
.news-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Improved navigation button styling and accessibility */
#btnNewsPrev, #btnNewsNext {
  backdrop-filter: blur(8px);
  border: 1px solid rgba(220, 228, 247, 0.3);
}

/* Ensure z-index hierarchy for proper layering */
.news-track {
  z-index: 1;
}

#btnNewsPrev, #btnNewsNext {
  z-index: 20;
}