/* ========================================================================= CAROUSEL / SLIDER — mobile layout (<= 767px, below md / 768px) Loaded at end of so it wins over Tailwind browser runtime CSS. Applies to: positive-impact, partner, hospitality-solutions, app pages. ========================================================================= */ /* Pointer drag — Apple-style grab interaction (all breakpoints) */ #impact-carousel, #integration-carousel, #component-carousel { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } #impact-track > div, #integration-track > div, #component-track > div { cursor: pointer; } #impact-carousel.is-dragging, #integration-carousel.is-dragging, #component-carousel.is-dragging { cursor: grabbing; } #impact-track, #integration-track, #component-track { touch-action: pan-y; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0, 0, 0); } #impact-carousel.is-dragging #impact-track, #integration-carousel.is-dragging #integration-track, #component-carousel.is-dragging #component-track { transition: none !important; } @media (max-width: 767px) { #impact-carousel, #integration-carousel, #component-carousel { overflow: hidden; } #impact-track, #integration-track, #component-track { gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; } /* Slide shells — nearly full viewport width */ #impact-track > div, #integration-track > div, #component-track > div { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; flex-shrink: 0 !important; } /* Inner fixed-size image / media boxes */ #impact-track [class*="w-[480px]"], #integration-track [class*="w-[480px]"], #component-track [class*="w-[480px]"] { width: 100% !important; max-width: 100% !important; } #impact-track [class*="h-[500px]"], #integration-track [class*="h-[500px]"], #component-track [class*="h-[500px]"] { height: auto !important; aspect-ratio: 480 / 500 !important; } /* Let text blocks size naturally on small screens */ #impact-track [class*="min-h-["], #integration-track [class*="min-h-["] { min-height: 0 !important; } /* Hospitality slide labels — fit within narrow slides */ #integration-track [class*="min-w-[260px]"] { min-width: 0 !important; width: calc(100% - 32px) !important; max-width: 240px !important; white-space: normal !important; text-align: center !important; font-size: 13px !important; padding-left: 12px !important; padding-right: 12px !important; } /* Pagination dots — same thin pill as desktop; padding-only touch target */ #impact-dots, #integration-dots, #component-dots { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; } .carousel-dot { box-sizing: content-box !important; width: 24px !important; height: 3px !important; max-height: 3px !important; padding-top: 8px !important; padding-bottom: 8px !important; flex-shrink: 0 !important; overflow: hidden !important; border-radius: 9999px !important; background-color: rgba(45, 45, 45, 0.1) !important; background-clip: content-box !important; position: relative !important; } .carousel-dot .carousel-progress { position: absolute !important; top: 8px !important; left: 0 !important; width: 100% !important; height: 3px !important; border-radius: 9999px !important; background-color: #1d1d1f !important; } /* Slide text / labels — always readable on mobile */ #impact-track > div > div:first-child, #integration-track > div > div:first-child, #component-track > div > div:last-child { opacity: 1 !important; } #integration-track span[class*="text-white"] { opacity: 1 !important; color: #ffffff !important; } /* Carousel controls — keep dots from being squeezed out */ .carousel-controls-container { flex-wrap: nowrap !important; gap: 12px !important; padding-left: 16px !important; padding-right: 16px !important; } }