/* Main carousel container styling */
.carousel {
  position: relative; /* Allows positioning child elements absolutely within this */
  width: 100%; /* Takes up full width of parent */
  max-width: 1200px; /* But won't grow wider than 1200px */
  height: 500px; /* Fixed height for the carousel */
  margin: 0 auto; /* Centers the carousel horizontally */
  overflow: hidden; /* Hides anything that overflows the container (like sliding images) */
  background-color: #f5f5f5; /* Light gray background */
  border-radius: 8px; /* Slightly rounded corners */
}

/* Force all carousel content to be visible (can be useful for debugging) */
.carousel * {
  visibility: visible !important; /* Overrides other styles trying to hide elements */
}

/* The slide container (usually a <ul>) */
.carousel ul {
  display: flex; /* Places slide items side by side (horizontally) */
  padding: 0; /* Removes default padding */
  margin: 0; /* Removes default margin */
  list-style: none; /* Removes bullet points */
  transition: transform 0.8s ease; /* Smooth sliding effect */
  height: 100%; /* Matches the carousel height */
  width: 100%; /* Full width of the container */
}

/* Each individual slide */
.carousel ul li {
  flex: 0 0 100%; /* Prevents resizing and forces each item to take 100% width */
  width: 100%;
  height: 100%;
  position: relative; /* So content inside can use absolute positioning */
}

/* Container that holds both image and text content */
.carousel-slide-container {
  position: relative; /* Needed for children (like images) with absolute positioning */
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevents content from spilling out */
}

/* Wrapper around the image */
.carousel-image-container {
  position: absolute; /* Places image exactly where we want it inside the slide */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Sends image behind the text content */
}

/* Styling for images */
.carousel ul li img,
.carousel-image-container img {
  width: 100%; /* Stretch image to fill container width */
  height: 100%; /* Stretch image to fill container height */
  object-fit: cover; /* Crop and fill the container proportionally */
  display: block; /* Removes spacing under image */
}

/* Overlay for text info like title, date, and button */
.carousel-content {
  position: absolute; /* Places it on top of the image */
  bottom: 10%; /* Positioned from bottom */
  left: 10%; /* Positioned from left */
  width: 80%; /* Takes up 80% width of the slide */
  color: white; /* White text */
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
  padding: 20px;
  border-radius: 10px;
  z-index: 20; /* Places this above everything else */
  display: block !important; /* Ensures it’s visible */
  pointer-events: auto; /* Allows interaction like clicking links inside */
}

/* Styling for the title text */
.carousel-content h3,
.carousel-content .carousel-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Adds shadow for better contrast */
  color: white;
  display: block;
}

/* Styling for date text */
.carousel-content .carousel-date {
  font-size: 18px;
  margin-bottom: 15px;
  display: block;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  color: white;
  opacity: 1; /* Fully visible */
}

/* Button styling ("Read More" style) */
.carousel-button {
  display: inline-block;
  padding: 12px 24px; /* Space inside button */
  background-color: transparent; /* Transparent by default */
  color: white;
  border: 2px solid white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover animation */
  font-size: 16px;
  font-weight: bold;
}

/* Hover effect for button */
.carousel-button:hover {
  background-color: white;
  color: black;
}

/* Previous and Next buttons (arrow buttons) */
.prev, .next {
  position: absolute; /* Position on top of carousel */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Actually centers the button vertically */
  background-color: rgba(255, 255, 255, 0.8); /* Light background */
  color: black;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%; /* Makes the button circular */
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect for previous/next buttons */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

/* Positioning of previous button (left side) */
.prev {
  left: 15px;
}

/* Positioning of next button (right side) */
.next {
  right: 15px;
}

/* Pagination dots container (bottom of carousel) */
.carousel-pagination {
  position: absolute;
  bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: center; /* Center align dots */
  z-index: 15;
}

/* Dots themselves */
.carousel-pagination ol {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 10px; /* Space between dots */
}

/* Individual dot link */
.carousel-pagination ol li a {
  display: block;
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 100%; /* Makes it a circle */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s; /* Smooth effects */
}

/* Hover effect for dots */
.carousel-pagination ol li a:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2); /* Slightly bigger */
}

/* Active dot (currently selected slide) */
.carousel-pagination ol li a.active {
  background-color: #2563eb; /* Blue color for active */
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(0,0,0,0.3); /* Adds glowing shadow */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .carousel {
    height: 400px; /* Slightly smaller carousel on mobile */
  }

  .carousel-content h3 {
    font-size: 24px; /* Smaller title */
  }

  .carousel-content .carousel-date {
    font-size: 16px; /* Smaller date text */
  }

  .carousel-button {
    padding: 10px 20px;
    font-size: 14px;
  }
}