/* Main Container Styling */
.house-details-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f7f6; /* Light background for the page */
    margin: 0;
    padding: 0;
    max-width: 960px;
    margin: 40px auto;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft drop shadow */
    display: flex;
    flex-direction: column;
    gap: 25px; /* Spacing between major sections */
}

/* House Header (Logo and Title) */
.house-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05); /* Subtle separator */
}

.house-logo {
    max-width: 100px; /* Adjust size as needed */
    height: auto;
    border-radius: 8px; /* Slightly rounded corners for the logo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.house-title {
    font-size: 2.8em;
    font-weight: 700;
    margin: 0;
    /* The color will be set inline by Django: style="color: {{house.color}}" */
}

/* Heading Styling */
.house-details-container h3 {
    font-size: 1.8em;
    font-weight: 600;
    color: #2c3e50; /* Darker heading color */
    margin-top: 30px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px; /* For a subtle accent line */
}

.house-details-container h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 80%;
    background-color: var(--house-accent-color); /* Using CSS variable for accent */
    border-radius: 2px;
}

/* Card Styling */
.house-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Lighter shadow for inner cards */
    padding: 20px;
    border: 1px solid #eee; /* Subtle border */
}

/* Introduction Image */
.intro-image {
    max-width: 100%; /* Make image responsive */
    height: auto;
    border-radius: 8px;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth transition */
    cursor: default;
}

.intro-image:hover {
    transform: translateY(-5px) scale(1.02); /* slight lift and scale */
    box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.02),
                0px 5px 4px rgba(3, 7, 18, 0.04),
                0px 12px 9px rgba(3, 7, 18, 0.06),
                0px 20px 15px rgba(3, 7, 18, 0.08),
                0px 32px 24px rgba(3, 7, 18, 0.10);
}

/* House Color Swatch */
.house-color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Make it a circle */
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Add a subtle border */
}

/* Achievements List */
.achievements-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 15px;
}



/* Staff Grid */

.staff-member-card h4 a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s ease-in-out;
}

.staff-member-card h4 a:hover {
    color: var(--house-accent-color);
}

.staff-member-card p {
    font-size: 0.95em;
    color: #666;
}

/* Carousel Images Grid */
.carousel-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive grid for images */
    gap: 15px;
    margin-top: 15px;
}

.carousel-images-grid img {
    width: 100%;
    height: 150px; /* Fixed height for consistency */
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out;
}

.carousel-images-grid img:hover {
    transform: scale(1.03);
}


/* Table Container */
.table-container {
    display: flex;
    justify-content: center; /* centers table horizontally */
    overflow-x: auto; /* adds horizontal scroll if table overflows on small screens */
    padding: 10px 0;
}



/* Responsive Adjustments */
@media (max-width: 768px) {
    .house-details-container {
        margin: 20px auto;
        padding: 20px;
    }

    .house-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .house-logo {
        max-width: 80px;
    }

    .house-title {
        font-size: 2.2em;
    }

    h3 {
        font-size: 1.5em;
        margin-top: 25px;
    }

    .achievements-list,
    .staff-grid,
    .carousel-images-grid {
        grid-template-columns: 1fr; /* Stack items on small screens */
    }
}

@media (max-width: 480px) {
    .house-details-container {
        padding: 15px;
    }

    .house-title {
        font-size: 1.8em;
    }

    h3 {
        font-size: 1.3em;
    }
}




/*======= Carousel Section =========== */

/* House Images Carousel Styles */
.carousel-container {
  position: relative;
  max-width: 100%;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 2px;
}

.carousel-wrapper {
  position: relative;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}

.carousel-track {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide.active {
  opacity: 1;
  transform: translateX(0);
}

.carousel-slide.prev {
  transform: translateX(-30px);
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.carousel-slide:hover img {
  transform: scale(1.02);
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 2rem 1.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Navigation Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.carousel-btn:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel-btn-prev {
  left: 1rem;
}

.carousel-btn-next {
  right: 1rem;
}

.carousel-btn svg {
  color: var(--house-accent-color, #2563eb);
  transition: color 0.3s ease;
}

.carousel-btn:hover svg {
  color: var(--house-accent-color, #1d4ed8);
}

/* Dots Indicator */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.carousel-dot:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: scale(1.2);
}

.carousel-dot.active {
  background: var(--house-accent-color, #2563eb);
  transform: scale(1.3);
}

.carousel-dot.active::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--house-accent-color, #2563eb);
  border-radius: 50%;
  opacity: 0.3;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.1;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .carousel-track {
    height: 300px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .carousel-btn-prev {
    left: 0.5rem;
  }

  .carousel-btn-next {
    right: 0.5rem;
  }

  .carousel-caption {
    padding: 1.5rem 1rem 0.75rem;
    font-size: 0.8rem;
  }

  .carousel-dots {
    padding: 1rem;
  }

  .carousel-dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .carousel-track {
    height: 250px;
  }

  .carousel-btn {
    width: 36px;
    height: 36px;
  }

  .carousel-btn svg {
    width: 20px;
    height: 20px;
  }
}