/* ==========================================================================
   PurpleFest Vadodara 2027 — Mobile Phone Responsive Stylesheet (Bootstrap 5 + Custom Fixes)
   Strictly scoped to mobile phone viewports (@media only screen and (max-width: 767.98px)).
   Desktop & Laptop layouts (min-width: 768px) are 100% untouched.
   ========================================================================== */

@media only screen and (max-width: 767.98px) {
  /* 1. Viewport & Horizontal Overflow Protection */
  html,
  body {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  main,
  section,
  header,
  footer,
  .site-section,
  .cta-section {
    max-width: 100vw !important;
  }

  /* 2. Bootstrap 5 Mobile Responsive Container, Grid & Flex Utilities */
  .container,
  .container-fluid,
  .container-sm {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.8rem;
    margin-right: -0.8rem;
  }

  .col-12,
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .d-mobile-block { display: block !important; }
  .d-mobile-flex { display: flex !important; }
  .flex-mobile-column { flex-direction: column !important; }
  .text-mobile-center { text-align: center !important; }
  .w-mobile-100 { width: 100% !important; }

  /* 3. Mobile Typography & Heading Scaling (360px - 390px phones) */
  .line-w,
  .styles_wrapper__e5z0j,
  .styles_splitText__pzy_L,
  .styles_fallback__a_QZN {
    padding-right: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  .h1,
  h1,
  .h1.h1--large,
  h1.h1--large,
  h1.h1.styles_heroTitle__vQ4MT,
  h1.h1.styles_heroTitle__w2sqv,
  .md\:h1 {
    font-size: clamp(2.8rem, 8vw, 3.4rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }

  .h2,
  h2,
  .h2.h2--large,
  h2.h2--large {
    font-size: clamp(2.4rem, 6.8vw, 2.8rem) !important;
    line-height: 1.12 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }

  .h3,
  h3,
  .\!h3,
  .h3.h3--small,
  h3.h3--small,
  .\!h3.h3--small,
  .md\:h3 {
    font-size: clamp(2.0rem, 5.5vw, 2.2rem) !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }

  /* 4. Mobile 3D Sequence Canvas Containers */
  canvas,
  .styles_canvas__Am2Oa,
  .styles_canvas__n8gRy,
  .styles_canvas__TWCQu,
  [class*="styles_canvas__"],
  [class*="sequence"] canvas {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
    --tw-translate-x: 0px !important;
    --tw-translate-y: 0px !important;
    transform: none !important;
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }

  /* 5. Mobile Benefits Section Cards (Vertical Stack on Phones) */
  .home-benefits-section,
  section:has(.styles_moveContainer__W1U4r) {
    height: auto !important;
    min-height: 0 !important;
  }

  .home-benefits-section > .sticky,
  section:has(.styles_moveContainer__W1U4r) > .sticky {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-top: 3.2rem !important;
    padding-bottom: 3.2rem !important;
  }

  .styles_moveContainer__W1U4r {
    flex-direction: column !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 1.6rem !important;
    padding-left: 0 !important;
  }

  .styles_moveContainer__W1U4r > * {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }

  .styles_moveContainer__W1U4r .-translate-x-8\/10 {
    --tw-translate-x: 0px !important;
    transform: none !important;
  }

  /* 6. Mobile Footer Email, Phone & Nav Columns */
  footer a.h3,
  footer .h3,
  footer a[href^="mailto:"],
  footer a[href^="tel:"] {
    font-size: clamp(1.6rem, 4.8vw, 1.9rem) !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  footer ul a {
    white-space: normal !important;
  }

  /* 7. Negative Margin, Bleed Image, Arrow & Screen-Reader Bounds Fixes */
  .-mx-20 {
    margin-left: -1.6rem !important;
    margin-right: -1.6rem !important;
  }

  img.scale-\[1\.1\] {
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
    transform: none !important;
  }

  .pointer-arrow > span {
    transform: none !important;
  }

  .-left-\[5\.3rem\].-translate-x-full {
    left: -4.2rem !important;
    --tw-translate-x: 0px !important;
    transform: none !important;
  }

  .sr-only,
  .sr-only * {
    max-width: 1px !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  /* 8. Mobile Tables, Buttons & Form Controls */
  .wysiwyg table,
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .btn {
    max-width: 100% !important;
  }
}