/* ============================================
   YOUTUBE-STYLE PULSE SKELETON SYSTEM
   Calm, Gentle Loading States
   Hadassa Ebenezer Ministries
   ============================================ */

:root {
  /* Skeleton Colors - Simple solid backgrounds */
  --skeleton-bg: #e0e0e0;
  --skeleton-border: rgba(0, 0, 0, 0.1);

  /* Animation Settings - YouTube style */
  --skeleton-duration: 1.5s;
  --skeleton-easing: cubic-bezier(0.4, 0, 0.6, 1);
}

/* ============================================
   BASE SKELETON CLASSES
   ============================================ */

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--skeleton-bg);
  animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
  pointer-events: none;
  user-select: none;
}

/* YouTube-Style Pulse Animation */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================
   SKELETON CONTAINER
   Controls visibility and transitions
   ============================================ */

.skeleton-container {
  opacity: 1;
  transition: opacity 0.3s var(--skeleton-easing);
  position: relative;
}

.skeleton-container--hidden {
  opacity: 0;
  pointer-events: none;
}

.skeleton-container--loaded {
  display: none !important;
}

/* ============================================
   1. SKELETON IMAGE
   Universal image placeholders
   ============================================ */

.skeleton-image {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background-color: var(--skeleton-bg);
  animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
}

.skeleton-image--card {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
}

.skeleton-image--hero {
  aspect-ratio: 21 / 9;
  border-radius: 0;
  height: clamp(500px, 80vh, 800px);
  width: 100%;
}

.skeleton-image--square {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

.skeleton-image--avatar {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

/* ============================================
   2. SKELETON TEXT
   Text block placeholders
   ============================================ */

.skeleton-text {
  height: 16px;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: var(--skeleton-bg);
  animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
}

.skeleton-text--display {
  height: clamp(2.75rem, 6vw + 1rem, 4.5rem);
  width: 80%;
  border-radius: 12px;
}

.skeleton-text--headline {
  height: clamp(2rem, 4vw + 0.5rem, 3rem);
  width: 70%;
  border-radius: 8px;
}

.skeleton-text--title {
  height: clamp(1.25rem, 2vw + 0.25rem, 1.5rem);
  width: 85%;
  border-radius: 6px;
}

.skeleton-text--body {
  height: 16px;
  width: 100%;
  border-radius: 4px;
}

.skeleton-text--caption {
  height: 14px;
  width: 60%;
  border-radius: 4px;
}

/* ============================================
   3. SKELETON CARD
   Card layout placeholders
   ============================================ */

.skeleton-card {
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid var(--skeleton-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.skeleton-card__image {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  width: 100%;
  background-color: var(--skeleton-bg);
  animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
}

.skeleton-card__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Teaching Card Variant */
.skeleton-card--teaching {
  border-radius: 16px;
}

.skeleton-card--teaching .skeleton-card__image {
  aspect-ratio: 16 / 9;
}

/* Healing Card Variant (Horizontal) */
.skeleton-card--healing {
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  min-width: 300px;
  height: 100%;
}

.skeleton-card--healing .skeleton-card__image {
  width: 120px;
  height: 100%;
  aspect-ratio: auto;
  flex-shrink: 0;
}

.skeleton-card--healing .skeleton-card__content {
  flex: 1;
  padding: 12px;
}

/* Archive Card Variant */
.skeleton-card--archive {
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  padding: 0;
}

.skeleton-card--archive .skeleton-card__image {
  height: 100%;
  aspect-ratio: auto;
}

/* ============================================
   4. SKELETON GRID
   Grid layout placeholders
   ============================================ */

.skeleton-grid {
  display: grid;
  gap: 16px;
  width: 100%;
}

.skeleton-grid--gallery {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.skeleton-grid--archives {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

/* ============================================
   5. SKELETON CAROUSEL
   Carousel layout placeholders
   ============================================ */

.skeleton-carousel {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.skeleton-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.skeleton-carousel__track::-webkit-scrollbar {
  display: none;
}

.skeleton-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Hero Carousel Variant */
.skeleton-carousel--hero {
  height: clamp(500px, 80vh, 800px);
  border-radius: 0;
  background-color: var(--skeleton-bg);
  animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
}

.skeleton-carousel--hero .skeleton-carousel__slide {
  position: relative;
  height: 100%;
}

.skeleton-carousel--hero .skeleton-carousel__content {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

/* Healings Carousel Variant */
.skeleton-carousel--healings {
  border-radius: 0;
}

.skeleton-carousel--healings .skeleton-carousel__track {
  gap: 12px;
}

.skeleton-carousel--healings .skeleton-carousel__slide {
  flex: 0 0 300px;
}

/* ============================================
   6. SKELETON MAP
   Map placeholder
   ============================================ */

.skeleton-map {
  width: 100%;
  height: 500px;
  border-radius: 20px;
  position: relative;
  background-color: var(--skeleton-bg);
  animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton-map__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.skeleton-map__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background-color: var(--skeleton-bg);
  animation: skeleton-pulse var(--skeleton-duration) var(--skeleton-easing) infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet and below */
@media (max-width: 1024px) {
  .skeleton-carousel--hero {
    height: clamp(400px, 70vh, 700px);
  }

  .skeleton-carousel--hero .skeleton-carousel__content {
    bottom: 32px;
    left: 32px;
    right: 32px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .skeleton-grid--gallery,
  .skeleton-grid--archives {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }

  .skeleton-card--healing {
    flex-direction: column;
  }

  .skeleton-card--healing .skeleton-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .skeleton-carousel--hero {
    height: clamp(300px, 60vh, 600px);
  }

  .skeleton-carousel--hero .skeleton-carousel__content {
    bottom: 24px;
    left: 16px;
    right: 16px;
  }

  .skeleton-carousel--healings .skeleton-carousel__slide {
    flex: 0 0 250px;
  }

  .skeleton-map {
    height: 400px;
    border-radius: 16px;
  }
}

/* Mobile Small */
@media (max-width: 480px) {
  .skeleton-carousel--hero {
    height: clamp(250px, 50vh, 500px);
  }

  .skeleton-carousel--healings .skeleton-carousel__slide {
    flex: 0 0 220px;
  }

  .skeleton-grid--gallery,
  .skeleton-grid--archives {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .skeleton-map {
    height: 300px;
    border-radius: 12px;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* GPU Acceleration */
.skeleton {
  will-change: opacity;
  transform: translateZ(0);
}

/* Layout Isolation */
.skeleton-container {
  contain: layout style paint;
}

/* Remove will-change after animation */
.skeleton-container--loaded .skeleton {
  will-change: auto;
}

/* ============================================
   ACCESSIBILITY FEATURES
   ============================================ */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .skeleton-image,
  .skeleton-text,
  .skeleton-card__image,
  .skeleton-map,
  .skeleton-map__icon {
    animation: none !important;
    background-color: var(--skeleton-bg);
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .skeleton,
  .skeleton-image,
  .skeleton-text,
  .skeleton-card,
  .skeleton-map {
    background-color: var(--color-gray-200, #e5e7eb);
    border: 2px solid var(--color-gray-400, #9ca3af);
  }

  .skeleton-card {
    border-width: 2px;
  }
}

/* Print - Hide Skeletons */
@media print {
  .skeleton,
  .skeleton-container,
  .skeleton-card,
  .skeleton-grid,
  .skeleton-carousel,
  .skeleton-map {
    display: none !important;
  }
}

/* ============================================
   ARIA & Screen Reader Support
   ============================================ */

.skeleton-container[role="status"],
.skeleton-container[aria-busy="true"] {
  position: relative;
}

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

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Skeleton spacing utilities */
.skeleton-gap-sm {
  gap: 8px !important;
}

.skeleton-gap-md {
  gap: 12px !important;
}

.skeleton-gap-lg {
  gap: 16px !important;
}

.skeleton-gap-xl {
  gap: 20px !important;
}

/* Skeleton margin utilities */
.skeleton-mb-sm {
  margin-bottom: 8px !important;
}

.skeleton-mb-md {
  margin-bottom: 12px !important;
}

.skeleton-mb-lg {
  margin-bottom: 16px !important;
}

/* Width variants for text skeletons */
.skeleton-w-full {
  width: 100% !important;
}

.skeleton-w-90 {
  width: 90% !important;
}

.skeleton-w-80 {
  width: 80% !important;
}

.skeleton-w-70 {
  width: 70% !important;
}

.skeleton-w-60 {
  width: 60% !important;
}

.skeleton-w-50 {
  width: 50% !important;
}

/* ============================================
   FADE TRANSITIONS
   For smooth skeleton-to-content transitions
   ============================================ */

.skeleton-fade-in {
  animation: skeleton-fade-in 0.3s var(--skeleton-easing) forwards;
}

.skeleton-fade-out {
  animation: skeleton-fade-out 0.3s var(--skeleton-easing) forwards;
}

@keyframes skeleton-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes skeleton-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ============================================
   IMAGE LOADING STATES
   For immediate loading with skeleton support
   ============================================ */

/* Images with skeleton loading */
.img-loading {
  opacity: 0;
  transition: opacity 0.3s var(--skeleton-easing, cubic-bezier(0.4, 0, 0.2, 1));
}

.img-loaded {
  opacity: 1;
}

.img-error {
  opacity: 1;
  filter: grayscale(100%);
}

/* Ensure parent containers are positioned for skeleton overlay */
.carousel-image-wrapper,
.image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Smooth aspect ratio preservation */
.carousel-image,
.gallery-image,
.card-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   END OF SKELETON SYSTEM
   ============================================ */