/* ============================================================
   KIDS TRAINING LAB: MOBILE REFINEMENTS (mobile.css)
   Organized overrides to eliminate rigid "boxy" mobile layouts:
   1. Smooth swipeable horizontal carousels (Pillars & Locations)
   2. Softened organic corner radii (16px-18px)
   3. Single unified flush FAQ accordion instead of stacked boxes
   4. Softer ambient shadows replacing harsh wireframe outlines
   ============================================================ */

@media (max-width: 768px) {
  /* ------------------------------------------------------------
     1. Pillars Section: Swipeable Horizontal Carousel
     ------------------------------------------------------------ */
  .pillars {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 0.4rem 6vw 1.2rem !important;
    margin-inline: -6vw !important;
    max-width: none !important;
    scrollbar-width: none !important;
  }

  .pillars::-webkit-scrollbar {
    display: none;
  }

  .pillar {
    flex: 0 0 80% !important;
    min-width: 260px !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    border-radius: 18px !important;
    border: 1px solid rgba(225, 217, 199, 0.7) !important;
    box-shadow: 0 8px 24px rgba(23, 21, 15, 0.05) !important;
    padding: 1.8rem 1.4rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* ------------------------------------------------------------
     2. Locations Section: Swipeable Horizontal Carousel
     ------------------------------------------------------------ */
  .home-locations-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 0.4rem 6vw 1.2rem !important;
    margin-inline: -6vw !important;
    max-width: none !important;
    scrollbar-width: none !important;
  }

  .home-locations-grid::-webkit-scrollbar {
    display: none;
  }

  .home-loc-card {
    flex: 0 0 80% !important;
    min-width: 260px !important;
    max-width: 320px !important;
    scroll-snap-align: center !important;
    border-radius: 18px !important;
    border: 1px solid rgba(225, 217, 199, 0.7) !important;
    box-shadow: 0 8px 24px rgba(23, 21, 15, 0.05) !important;
    padding: 1.8rem 1.4rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  /* ------------------------------------------------------------
     3. Movement Alternative ("Why") Cards: Soft Floating Depth
     ------------------------------------------------------------ */
  .why-card {
    border-radius: 18px !important;
    border: 1px solid rgba(225, 217, 199, 0.6) !important;
    box-shadow: 0 8px 26px rgba(23, 21, 15, 0.04) !important;
    padding: 2.2rem 1.5rem !important;
  }

  /* ------------------------------------------------------------
     4. FAQ Accordion: Single Flush Card List (No Floating Boxes)
     ------------------------------------------------------------ */
  .faq-accordion {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    gap: 0 !important;
    box-shadow: 0 8px 24px rgba(23, 21, 15, 0.04) !important;
  }

  .faq-item {
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .faq-item:last-child {
    border-bottom: none !important;
  }

  .faq-item[open] {
    background: #FFFFFF !important;
    box-shadow: none !important;
  }

  .faq-question {
    padding: 1.15rem 1.3rem !important;
  }

  .faq-answer {
    padding: 0.2rem 1.3rem 1.4rem !important;
  }

  /* ------------------------------------------------------------
     5. Forms, Images & Buttons: Softer Modern Radii
     ------------------------------------------------------------ */
  .home-about-img-frame {
    border-radius: 18px !important;
    border: 1px solid rgba(225, 217, 199, 0.7) !important;
    box-shadow: 0 10px 28px rgba(23, 21, 15, 0.06) !important;
  }

  .waitlist-input {
    border-radius: 12px !important;
  }

  .waitlist-btn {
    border-radius: 12px !important;
  }

  .hero-actions .btn {
    border-radius: 12px !important;
  }
}