/* ==============================================
   Foundry Labs Responsive Overhaul — WU-2a Home
   Homepage hero + carousel responsive patches
   ============================================== */

/* Hide mobile particles canvas on desktop */
#particles-mobile { display: none; }

@media (max-width: 900px) {
  /* H-03: Hide decorative hero canvas layers earlier for mobile/tablet performance */
  .hero-canvas,
  #dot-canvas,
  #dot-canvas-2 {
    display: none !important;
  }

  /* H-03b: Mobile particles canvas — positioned behind hero content */
  #particles-mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  /* Ensure hero content sits above the particles */
  .hero-content {
    position: relative;
    z-index: 1;
  }

  /* Subtle bottom fade so particles don't cut abruptly.
     Fades to #141820 (the body background) so the hero blends into
     the Breakthrough AI section without a visible seam. Previously
     used var(--bg) (#030208) which did NOT match the body color and
     produced a hard boundary. Height bumped 120px -> 200px for a
     more gradual transition. */
  .hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(20,24,32,0.6) 55%, #141820 100%);
  }

  /* Non-homepage hero sections get a simpler ambient glow */
  .page-header::after,
  .about-hero::after,
  .community-hero::after,
  .stories-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(79,66,253,0.14) 0%, transparent 65%),
      radial-gradient(ellipse 50% 50% at 30% 60%, rgba(114,116,255,0.08) 0%, transparent 55%);
  }

  /* H-04: Relax carousel slide width on tablet-narrow viewports */
  .carousel-slide {
    min-width: 85vw;
  }
}

@media (max-width: 768px) {
  /* H-05: Guarantee 44px tap targets for carousel dot controls */
  .carousel-dot {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    box-sizing: border-box;
    background-clip: content-box;
  }

  /* H-06: Center carousel CTA copy and constrain wrap width */
  .cs-cta,
  .carousel-cta {
    width: min(100%, 320px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* H-01: Let the hero logo/label row wrap cleanly on very small screens */
  .hero-label {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  /* H-02: Tighten hero supporting copy width on mobile */
  .hero-sub {
    max-width: 90%;
    margin-inline: auto;
  }

  /* H-04: Give carousel slides a wider single-card presentation on phones */
  .carousel-slide {
    min-width: 92vw;
    transform: scale(0.9);
    transform-origin: center center;
  }

  /* H-07: Revamp carousel navigation — arrows flanking dots.
     Arrows live inside .carousel-outer, dots are a sibling.
     We visually pull arrows out of the card area into the dots row. */

  /* Hide the overlay arrows on the card area */
  .carousel-outer .carousel-arrow {
    position: absolute;
    top: auto;
    bottom: -52px;
    transform: none;
    width: 32px;
    height: 32px;
    font-size: 16px;
    z-index: 12;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
  }

  .carousel-outer .carousel-arrow:hover {
    transform: none;
  }

  .carousel-outer .carousel-arrow--prev {
    left: calc(50% - 90px);
  }

  .carousel-outer .carousel-arrow--next {
    right: calc(50% - 90px);
  }

  /* Dots row: small centered dots between the repositioned arrows */
  .carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-4);
    padding: 0 48px;
    position: relative;
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    min-width: unset;
    min-height: unset;
  }

  .carousel-dot.cd-active {
    width: 10px;
    height: 10px;
    padding: 0;
    background-clip: border-box;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
  }
}