/* About page: standard main text formatting */

/* Apply styles to all main content sections */
#about, #filosophia, #contact, #credits {
  display: grid;
  gap: 1rem; /* Reduced from 1.25rem */
  /* consistent vertical rhythm */
}

#about h2, #filosophia h2, #contact h2, #credits h2 {
  margin-bottom: 0.375rem; /* Reduced from 0.5rem */
  color: var(--text-secondary);
}

#about h3, #filosophia h3, #contact h3, #credits h3 {
  margin-top: 0.5rem; /* Reduced from 0.75rem */
  margin-bottom: 0.25rem;
  color: var(--about-h3-color);
}

#about h4, #filosophia h4, #contact h4, #credits h4 {
  margin-top: 0.375rem; /* Reduced from 0.5rem */
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--text-secondary);
}

#about p, #filosophia p, #contact p, #credits p {
  margin: 0 0 0.75rem 0; /* Added specific paragraph spacing */
  line-height: 1.5; /* Tighter line height */
}

#about blockquote, #filosophia blockquote, #contact blockquote, #credits blockquote {
  margin: 0.75rem 0; /* Reduced spacing around blockquote */
  line-height: 1.4; /* Tighter line height for blockquote */
}

.description {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  color: var(--about-description);
  line-height: 1.45; /* Tighter line height */
}

.subdescription {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: var(--about-subdescription);
  line-height: 1.4; /* Tighter line height */
}

blockquote {
  color: var(--accent-gold);
  line-height: 1.4; /* Ensure blockquote has consistent line height */
}

#about ul, #filosophia ul, #contact ul, #credits ul {
  list-style: disc;
  padding-left: 1.25rem;
  /* readable bullets */
  margin: 0 0 0.5rem 0;
  line-height: 1.45; /* Tighter line height for lists */
}

#about li, #filosophia li, #contact li, #credits li {
  margin: 0.25rem 0;
}

/* Mobile responsiveness - single column layout */
@media (max-width: 768px) {
  #about div[style*="display: flex"], #filosophia div[style*="display: flex"], #contact div[style*="display: flex"], #credits div[style*="display: flex"] {
    display: block !important;
    gap: 0 !important;
  }

  #about div[style*="flex: 1"], #filosophia div[style*="flex: 1"], #contact div[style*="flex: 1"], #credits div[style*="flex: 1"] {
    flex: none !important;
    margin-bottom: 2rem;
  }

  .wizard-panel {
    padding: 1rem;
  }

  #about h2, #filosophia h2, #contact h2, #credits h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  #about h3, #filosophia h3, #contact h3, #credits h3 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }

  #about h4, #filosophia h4, #contact h4, #credits h4 {
    font-size: 1rem;
    margin-top: 1rem;
  }

  .description,
  .subdescription {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  #about ul, #filosophia ul, #contact ul, #credits ul {
    padding-left: 1rem;
  }
}

/* Tablet responsiveness */
@media (max-width: 1024px) and (min-width: 769px) {
  #about div[style*="display: flex"], #filosophia div[style*="display: flex"], #contact div[style*="display: flex"], #credits div[style*="display: flex"] {
    flex-direction: column;
    gap: 1.5rem !important;
  }

  #about div[style*="flex: 1"], #filosophia div[style*="flex: 1"], #contact div[style*="flex: 1"], #credits div[style*="flex: 1"] {
    flex: none !important;
  }

  .wizard-panel {
    padding: 1.25rem;
  }
}

/* Keep card content comfortably spaced on wide screens */
@media (min-width: 1025px) {
  .wizard-panel {
    padding: 1.25rem 1.5rem;
  }
}

/* =====================================================
   ART CAROUSEL & ACKNOWLEDGMENTS CAROUSEL STYLES
   ===================================================== */

.art-carousel, .acknowledgments-carousel {
  margin-top: 1rem;
  position: relative;
}

.art-carousel .carousel-container, .acknowledgments-carousel .carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.2);
  padding: 1.5rem;
  min-height: 280px; /* Synchronized minimum height for all carousels */
  display: flex;
  flex-direction: column;
}

.art-carousel .carousel-slides, .acknowledgments-carousel .carousel-slides {
  position: relative;
  width: 100%;
  flex: 1; /* Take up remaining space */
  min-height: 220px; /* Consistent slide area height */
  display: flex;
  align-items: stretch; /* Ensure all slides stretch to full height */
}

.art-carousel .carousel-slide, .acknowledgments-carousel .carousel-slide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Take full height of container */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically */
}

.art-carousel .carousel-slide.active, .acknowledgments-carousel .carousel-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.art-carousel .carousel-slide h4, .acknowledgments-carousel .carousel-slide h4 {
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  text-align: center;
}

.art-carousel .carousel-slide .subdescription, .acknowledgments-carousel .carousel-slide .subdescription {
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.art-carousel .carousel-slide ul, .acknowledgments-carousel .carousel-slide ul {
  text-align: center;
  margin-top: 1rem;
}

.art-carousel .carousel-slide ul li, .acknowledgments-carousel .carousel-slide ul li {
  list-style: none;
  margin-bottom: 0.3rem;
}

.art-carousel .carousel-slide ul li a, .acknowledgments-carousel .carousel-slide ul li a {
  color: var(--accent-gold);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.art-carousel .carousel-slide ul li a:hover, .acknowledgments-carousel .carousel-slide ul li a:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* Navigation Buttons */
.art-carousel .carousel-btn, .acknowledgments-carousel .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 215, 0, 0.8);
  color: #0f172a;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-carousel .carousel-btn:hover, .acknowledgments-carousel .carousel-btn:hover {
  background: var(--accent-gold);
  transform: translateY(-50%) scale(1.1);
}

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

.art-carousel .carousel-btn-prev, .acknowledgments-carousel .carousel-btn-prev {
  left: -20px;
}

.art-carousel .carousel-btn-next, .acknowledgments-carousel .carousel-btn-next {
  right: -20px;
}

/* Dots Indicator */
.art-carousel .carousel-dots, .acknowledgments-carousel .carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.art-carousel .dot, .acknowledgments-carousel .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.3);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.art-carousel .dot.active, .acknowledgments-carousel .dot.active,
.art-carousel .dot:hover, .acknowledgments-carousel .dot:hover {
  background: var(--accent-gold);
  transform: scale(1.2);
}

/* Acknowledgments Carousel specific adjustments - REMOVED for synchronization */
/* All carousels now use the same synchronized height */

/* Mobile Responsive - Synchronized heights */
@media (max-width: 768px) {
  .art-carousel .carousel-container, .acknowledgments-carousel .carousel-container {
    padding: 1rem;
    min-height: 240px; /* Slightly smaller but still synchronized */
  }
  
  .art-carousel .carousel-slides, .acknowledgments-carousel .carousel-slides {
    min-height: 180px; /* Synchronized mobile height */
  }
  
  .art-carousel .carousel-btn, .acknowledgments-carousel .carousel-btn {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }
  
  .art-carousel .carousel-btn-prev, .acknowledgments-carousel .carousel-btn-prev {
    left: -15px;
  }
  
  .art-carousel .carousel-btn-next, .acknowledgments-carousel .carousel-btn-next {
    right: -15px;
  }
}

@media (max-width: 480px) {
  .art-carousel .carousel-container, .acknowledgments-carousel .carousel-container {
    min-height: 220px; /* Extra small screens synchronized height */
  }
  
  .art-carousel .carousel-slides, .acknowledgments-carousel .carousel-slides {
    min-height: 160px; /* Extra small screens synchronized height */
  }
  
  .art-carousel .carousel-btn, .acknowledgments-carousel .carousel-btn {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }
  
  .art-carousel .carousel-btn-prev, .acknowledgments-carousel .carousel-btn-prev {
    left: -10px;
  }
  
  .art-carousel .carousel-btn-next, .acknowledgments-carousel .carousel-btn-next {
    right: -10px;
  }
}

/* =====================================================
   UNIVERSAL FUTURE-PROOF CAROUSEL RULES
   - Auto-applies to any new carousels added to #credits
   ===================================================== */

/* Future carousel auto-detection - applies to any element with "carousel" in the class name */
#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) {
  margin-top: 1rem;
  position: relative;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 215, 0, 0.2);
  padding: 1.5rem;
  min-height: 280px; /* Same synchronized height */
  display: flex;
  flex-direction: column;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slides {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 220px; /* Same synchronized height */
  display: flex;
  align-items: stretch;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide h4 {
  color: var(--accent-gold);
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  text-align: center;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide .subdescription {
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.4;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide ul {
  text-align: center;
  margin-top: 1rem;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide ul li {
  list-style: none;
  margin-bottom: 0.35rem;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide ul li a {
  color: var(--accent-gold);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-slide ul li a:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* Navigation and Dots for future carousels */
#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 215, 0, 0.8);
  color: #0f172a;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-btn:hover {
  background: var(--accent-gold);
  transform: translateY(-50%) scale(1.1);
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-btn-prev {
  left: -20px;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-btn-next {
  right: -20px;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.3);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .dot.active,
#credits [class*="carousel"]:not(.art-carousel):not(.acknowledgments-carousel) .dot:hover {
  background: var(--accent-gold);
  transform: scale(1.2);
}