/* ============================================
   TALEY MOBILE HORIZONTAL SCROLL
   CSS Scroll-Snap for Card Carousels (Mobile Only)
   
   Brand-aligned implementation:
   - Glassmorphism subtle hints
   - Green primary accents
   - Playful yet premium feel
   - Outfit typography (inherited)
============================================ */

/* ============================================
   MOBILE HORIZONTAL SCROLL CONTAINERS
   Applied ONLY within max-width: 600px (Large Phones and below)
============================================ */
@media (max-width: 600px) {
  /* -------------------------------------------
       SHARED SCROLL CONTAINER STYLES
       Parent containers that hold scrollable cards
       NOTE: .steps-grid excluded - user requested vertical stack on mobile
    ------------------------------------------- */
  .pain-points-grid,
  .features-grid,
  .communities-grid,
  .testimonials-grid,
  .updates-grid {
    /* Convert from grid to horizontal flex */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    /* Horizontal scrolling */
    overflow-x: auto;
    overflow-y: hidden;

    /* Scroll snap for smooth card-by-card scrolling */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* iOS smooth scrolling */

    /* Spacing and padding */
    gap: 16px;

    /* FIXED: Centered carousel with symmetric padding
       Using calc to center cards: padding = (viewport - card width) / 2
       Card width is ~320px or calc(100vw - 48px), so padding centers it */
    padding: 20px calc((100vw - min(320px, calc(100vw - 48px))) / 2);

    /* REMOVED: Negative margins that caused off-center snapping */
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;

    /* Hide scrollbar for cleaner look */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
  }

  /* Hide webkit scrollbar */
  .pain-points-grid::-webkit-scrollbar,
  .features-grid::-webkit-scrollbar,
  .communities-grid::-webkit-scrollbar,
  .testimonials-grid::-webkit-scrollbar,
  .updates-grid::-webkit-scrollbar {
    display: none;
  }

  /* -------------------------------------------
       SHARED CARD STYLES - SCROLL SNAP TARGETS
       Individual cards within scrollable containers
    ------------------------------------------- */
  .pain-point-card,
  .step-card,
  .feature-card,
  .community-card,
  .testimonial-card,
  .update-card {
    /* Snap to center of each card */
    scroll-snap-align: center;

    /* Fixed width for consistent card sizing across all devices */
    /* Uses min() to cap at 320px but allow smaller on very small screens */
    min-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));
    max-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));

    /* Ensure cards don't shrink */
    flex-shrink: 0;

    /* Reset any grid-related properties */
    grid-column: unset;
  }

  /* -------------------------------------------
       SECTION-SPECIFIC ADJUSTMENTS
       Fine-tuning for each section's unique needs
    ------------------------------------------- */

  /* Pain Points - slightly larger cards due to more content */
  .pain-point-card {
    min-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));
    max-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));
  }

  /* Steps - same consistent width */
  .step-card {
    min-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));
    max-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));
  }

  /* Communities - same consistent width */
  .community-card {
    min-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));
    max-width: var(--card-width-mobile, min(320px, calc(100vw - 48px)));
  }

  /* -------------------------------------------
       SCROLL INDICATORS (Visual Affordance)
       Subtle gradient fades to hint at scrollability
    ------------------------------------------- */
  .pain-points,
  .steps-section,
  .features,
  .communities-section,
  .testimonials,
  .updates {
    position: relative;
  }

  /* Fade overlay on right edge to indicate more content */
  .pain-points::after,
  .features::after,
  .communities-section::after,
  .testimonials::after,
  .updates::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 80%;
    max-height: 300px;
    background: linear-gradient(to right, transparent, var(--app-bg, #fafafa));
    pointer-events: none;
    opacity: 0.8;
    z-index: 2;
  }

  /* -------------------------------------------
       SCROLL HINT ANIMATION (First-time users)
       Bouncy arrow or dot indicator
    ------------------------------------------- */

  /* Optional: Add a small swipe hint icon */
  .pain-points-grid::before,
  .steps-grid::before,
  .features-grid::before,
  .updates-grid::before,
  .communities-grid::before,
  .testimonials-grid::before {
    content: '← Wischen →';
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--gray-400);
    opacity: 0.6;
    white-space: nowrap;
    pointer-events: none;
    animation: swipeHint 3s ease-in-out infinite;
  }

  @keyframes swipeHint {
    0%,
    100% {
      opacity: 0.6;
      transform: translateX(-50%);
    }

    50% {
      opacity: 0.3;
      transform: translateX(-45%);
    }
  }

  /* -------------------------------------------
       ACCESSIBILITY: FOCUS STATES FOR SWIPING
    ------------------------------------------- */
  .pain-point-card:focus-within,
  .step-card:focus-within,
  .feature-card:focus-within,
  .community-card:focus-within,
  .testimonial-card:focus-within,
  .update-card:focus-within {
    outline: 2px solid var(--green-primary);
    outline-offset: 4px;
  }

  /* -------------------------------------------
       TOUCH TARGET IMPROVEMENTS
       Ensure cards are easy to tap/swipe
    ------------------------------------------- */
  .pain-point-card,
  .step-card,
  .feature-card,
  .community-card,
  .testimonial-card,
  .update-card {
    /* Minimum touch target */
    min-height: 150px;

    /* Ensure content doesn't clip */
    padding: 20px;
  }

  /* Keep step cards vertically compact */
  .step-card {
    min-height: 180px;
  }

  /* Pain points need to grow with content */
  .pain-point-card {
    min-height: auto;
    height: auto;
    /* Ensure no fixed height constrains it */
  }
}

/* ============================================
   MOBILE VISIBILITY & POSITIONING FIXES
   Wrapped in media query for mobile only.
============================================ */
@media (max-width: 600px) {
  /* CRITICAL: Force visibility for .reveal elements in scroll containers */
  .pain-points-grid .reveal,
  .steps-grid .reveal,
  .features-grid .reveal,
  .communities-grid .reveal,
  .testimonials-grid .reveal,
  .updates-grid .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* FIX: Re-position swipe hint */
  /* FIX: Remove swipe hint to avoid clutter and overlap */
  .pain-points-grid::before,
  .steps-grid::before,
  .features-grid::before,
  .updates-grid::before,
  .communities-grid::before,
  .testimonials-grid::before {
    display: none !important;
  }
}

/* ============================================
   PAGINATION DOTS FOR CAROUSEL INDICATORS
   Shows current position in horizontal scroll
   (Mobile only - matches max-width: 600px breakpoint)
============================================ */
@media (max-width: 600px) {
  /* Container for pagination dots */
  .carousel-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px 0 8px;
    margin-top: 8px;
  }

  /* Individual dot */
  .carousel-pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-400, #9ca3af);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: content-box;
    outline: none;
    position: relative;
  }

  /* Touch-friendly tap area while keeping small visual */
  .carousel-pagination-dot::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
  }

  /* Active dot */
  .carousel-pagination-dot.active {
    background: var(--green-primary, #4caf50);
    transform: scale(1.25);
  }

  /* Hover state (for touch feedback) */
  .carousel-pagination-dot:hover {
    background: var(--green-secondary, #81c784);
  }

  /* Focus state for accessibility */
  .carousel-pagination-dot:focus-visible {
    outline: 2px solid var(--green-primary, #4caf50);
    outline-offset: 2px;
  }

  /* Screen reader only text */
  .carousel-pagination .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;
  }
}

/* Hide pagination on desktop */
@media (min-width: 601px) {
  .carousel-pagination {
    display: none !important;
  }
}

/* ============================================
   SMALL MOBILE ADJUSTMENTS (max-width: 480px)
   Tighter spacing for very small screens
============================================ */
@media (max-width: 480px) {
  .pain-point-card,
  .step-card,
  .feature-card,
  .community-card,
  .testimonial-card,
  .update-card {
    /* Full width minus padding on small screens */
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  .community-card {
    /* Same consistent sizing */
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  /* Reduce padding to maximize content */
  .pain-points-grid,
  .steps-grid,
  .features-grid,
  .communities-grid,
  .testimonials-grid,
  .updates-grid {
    /* FIXED: Centered padding for small screens
       Card width = calc(100vw - 40px), so padding = 20px each side */
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;

    /* REMOVED: Negative margins that caused off-center snapping */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* ============================================
   STEPS SECTION: Vertical stack on mobile
   Not a horizontal carousel per user request
============================================ */
@media (max-width: 600px) {
  .steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    width: 100%;
  }

  .steps-grid .step-card {
    min-width: 100%;
    max-width: 100%;
  }
}