/* Kornerstones Carousel Styles */
/* Updated and Enhanced Carousel Component Styles */

.kornerstones-section {
  background: var(--color-purple, #ad598d);
  color: var(--color-white, #ffffff);
  padding: var(--section-padding, 80px) 0;
  position: relative;
  overflow: hidden;
}

/* The main carousel container with full width and max width setup */
.kornerstones-carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Carousel Header styling for flexible layout and responsive font sizes */
.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3rem;
  gap: 2rem;
}

.carousel-header .section-title {
  color: var(--color-white, #ffffff);
  text-align: left;
  margin-bottom: 0;
  flex: 1;
  font-size: clamp(1.875rem, 4vw, 3rem);
  line-height: 1.2;
}

/* Carousel Controls styling for spacing and static behavior */
.carousel-controls {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
}

/* Navigation buttons with hover, focus, and disabled states for better UX */
.carousel-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white, #ffffff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal, 0.3s ease);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.carousel-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.carousel-btn:focus-visible {
  outline: 2px solid var(--color-white, #ffffff);
  outline-offset: 2px;
}

.carousel-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

/* Optional SVG styling inside buttons if used */
.carousel-btn svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

/* Container for the entire carousel to hide overflowing content and have rounded edges */
.carousel-container {
  overflow: hidden;
  border-radius: var(--border-radius-lg, 32px);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

/* Track that holds slide items, animated for smooth transition */
.carousel-track {
  display: flex;
  transition: transform var(--transition-slow, 0.5s ease);
  will-change: transform;
}

/* Each slide with default min-width and some padding/shadow for aesthetic */
.kornerstone-slide {
  min-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 3rem;
  box-sizing: border-box;
  animation: fadeIn 0.5s ease forwards;
}

/* Individual slide styling with hover effects */
/* .kornerstone-slide:hover { } -- removed empty ruleset */

/* Image container with shadows and relative positioning for overlay effects */
.kornerstone-image {
  width: 480px;
  height: 560px;
  border-radius: var(--border-radius-lg, 32px);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
}

/* Pseudo-element for overlay gradient to enhance image visuals */
.kornerstone-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Actual image styling with smooth zoom on hover for interactivity */
.kornerstone-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-slow, 0.5s ease);
}

.kornerstone-slide:hover .kornerstone-image img {
  transform: scale(1.05);
}

/* Content section with padding and responsive font sizes for titles and descriptions */
.kornerstone-content {
  flex: 1;
  max-width: 500px;
  padding-left: 2rem;
}

.kornerstone-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--color-white, #ffffff);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.kornerstone-description {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Carousel Indicators Container for dots navigation */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1rem 0;
}

/* Individual indicator dot with transition effects */
.carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast, 0.2s ease);
  position: relative;
}

/* Active indicator styling for visual feedback */
.carousel-indicator.active {
  background: var(--color-white, #ffffff);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Hover effect for indicators to show visual feedback */
.carousel-indicator:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Focus state for accessibility */
.carousel-indicator:focus-visible {
  outline: 2px solid var(--color-white, #ffffff);
  outline-offset: 2px;
}

/* Loading state styling with animated spinner */
.carousel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--font-size-lg, 1.125rem);
}

/* Spinner animation for loading indicator */
.carousel-loading::before {
  content: '';
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid var(--color-white, #ffffff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 1rem;
}

/* Spin keyframes for spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error state styling for message display */
.carousel-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 2rem;
}

/* Responsive adjustments for various screen sizes */

@media (max-width: 1200px) {
  .kornerstone-slide {
    gap: 3rem;
    padding: 2.5rem;
  }
  .kornerstone-image {
    width: 400px;
    height: 480px;
  }
  .kornerstone-content {
    padding-left: 1rem;
  }
}

@media (max-width: 1024px) {
  /* Adjust header layout for smaller screens */
  .carousel-header {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
    align-items: center;
  }
  .carousel-header .section-title {
    text-align: center;
  }
  /* Stack slides vertically on medium screens */
  .kornerstone-slide {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 2rem;
  }
  /* Reduce image size for tablets */
  .kornerstone-image {
    width: 360px;
    height: 420px;
  }
  /* Reset content padding for smaller layout */
  .kornerstone-content {
    max-width: none;
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  /* Section padding and spacing adjustments */
  .kornerstones-section {
    padding: 60px 0;
  }
  .carousel-header {
    margin-bottom: 2rem;
  }
  /* Reduce slide padding for mobile */
  .kornerstone-slide {
    padding: 1.5rem;
  }
  /* Resize images for mobile */
  .kornerstone-image {
    width: 280px;
    height: 340px;
  }
  /* Adjust title margin */
  .kornerstone-title {
    margin-bottom: 1rem;
  }
  /* Button and indicator sizing for touch devices */
  .carousel-controls {
    gap: 0.5rem;
  }
  .carousel-btn {
    width: 40px;
    height: 40px;
  }
  .carousel-btn svg {
    width: 20px;
    height: 20px;
  }
  .carousel-indicators {
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .carousel-indicator {
    width: 10px;
    height: 10px;
  }
}

/* Extra small devices: phones */
@media (max-width: 480px) {
  /* Compact slide padding */
  .kornerstone-slide {
    padding: 1rem;
  }
  /* Smaller images for phones */
  .kornerstone-image {
    width: 240px;
    height: 300px;
  }
  /* Border radius adjustments for compact devices */
  .carousel-container,
  .kornerstone-image {
    border-radius: var(--border-radius, 20px);
  }
}

/* Accessibility: support for high contrast modes */
@media (prefers-contrast: high) {
  .carousel-btn {
    border-width: 3px;
    background: rgba(255, 255, 255, 0.2);
  }
  .carousel-indicator {
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  .carousel-indicator.active {
    border-color: var(--color-white, #ffffff);
  }
}

/* Reduced motion for users sensitive to animation */
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none;
  }
  .carousel-btn,
  .carousel-indicator,
  .kornerstone-image img {
    transition: none;
  }
  .kornerstone-slide:hover .kornerstone-image img {
    transform: none;
  }
}

/* Print styles to hide controls and indicators when printing */
@media print {
  .carousel-controls,
  .carousel-indicators {
    display: none;
  }
  .kornerstone-slide {
    break-inside: avoid;
  }
}

/* Focus management for accessibility */
.carousel-container:focus-within .carousel-btn:focus-visible {
  z-index: 10;
}

/* Screen reader only class for hidden content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}