/* ==========================================================================
   PATIENTXPRESS — HOMEPAGE MOBILE RESPONSIVE
   Breakpoints: ≤768px (phones), ≤1024px (tablets)
   ========================================================================== */

/* ── Global ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip !important;
    max-width: 100vw !important;
}

/* ── HERO SECTION ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #hero-section {
        min-height: auto !important;
        padding-top: 80px !important;
        padding-bottom: 40px !important;
    }

    #hero-section .grid {
        grid-template-columns: 1fr !important;
    }

    #hero-section .space-y-3 {
        text-align: center;
    }

    /* Stat badges row — wrap on phones */
    #hero-section .flex.flex-wrap.items-center.gap-2 {
        justify-content: center !important;
    }

    /* Feature cards 2-col grid */
    #hero-section .grid.grid-cols-2 {
        gap: 10px !important;
    }

    /* CTAs center */
    #hero-section .flex.flex-wrap.items-center.justify-center {
        gap: 12px !important;
    }

    /* Hero carousel — reduce height */
    #hero-card-carousel {
        min-height: 300px !important;
    }

    /* Floating chips — hide on mobile (they overlap) */
    .animate-bounce-slow {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #hero-section {
        padding-top: 72px !important;
        padding-bottom: 20px !important;
    }

    /* Stack hero two columns */
    #hero-section .max-w-7xl>div {
        flex-direction: column !important;
    }

    #hero-section h1.text-4xl {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    /* Feature cards: keep 2 col on phone */
    #hero-section .grid.grid-cols-2.gap-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    #hero-section .hero-feature-card {
        padding: 8px !important;
    }

    /* Hide carousel on very small screens, show feature tiles only */
    #hero-card-carousel {
        display: none !important;
    }

    .hero-dot {
        display: none !important;
    }
}

/* ── INTEGRATION TABS SECTION ────────────────────────────────────────────── */
@media (max-width: 768px) {
    #integration-tabs {
        gap: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    #integration-tabs .int-tab-btn {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }

    /* Partner logo tiles: 2 columns on mobile */
    .int-tab-content {
        position: static !important;
        display: none !important;
        /* controlled by JS — keep but override layout */
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .int-tab-content.opacity-100 {
        display: grid !important;
    }

    .int-tab-content a {
        width: auto !important;
        flex: none !important;
        min-width: 0 !important;
    }

    /* Fix absolute-positioned wrapper causing overflow */
    .int-tab-content-wrapper {
        min-height: auto !important;
        position: relative !important;
        overflow: visible !important;
    }
}

/* ── AI FEATURES / SOLUTION TABS ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pinned-section-container {
        position: static !important;
        height: auto !important;
    }

    .pinned-section-content {
        position: static !important;
        top: auto !important;
    }

    .organization-tabs-wrapper {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        padding: 0 12px !important;
    }

    .organization-type-tab {
        flex: 1 1 auto !important;
        min-width: 120px !important;
        max-width: 160px !important;
        font-size: 12px !important;
        padding: 10px 12px !important;
    }
}

@media (max-width: 768px) {

    /* Patient profile: stack columns */
    .patient-profile-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .profile-center-column {
        width: 100% !important;
        max-width: 220px !important;
    }

    /* Feature detail items: tile grid (2 col) instead of left/right column sprawl */
    .patient-details-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 12px !important;
    }

    .patient-detail-item {
        position: static !important;
        width: auto !important;
        transform: none !important;
        border-radius: 12px !important;
        padding: 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }

    .patient-detail-item.left-column,
    .patient-detail-item.right-column {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    /* Patient photo */
    .patient-photo {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* Explore all grid */
    .specialty-options-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 12px !important;
    }

    .specialty-link-item {
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* ── DASHBOARD / CALL INTELLIGENCE SECTION ───────────────────────────────── */
@media (max-width: 1024px) {

    /* Hide floating overlays — they break layout */
    [data-purpose="auto-response-float"],
    .absolute.-ml-24,
    .absolute.-top-6,
    .absolute.-top-12 {
        display: none !important;
    }
}

@media (max-width: 768px) {

    /* Full width dashboard card wrapper */
    .dashboard-card-wrapper {
        padding: 0 !important;
        min-height: auto !important;
    }

    /* Dashboard main card */
    .dashboard-main-card {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    /* 2-col metrics grid stays 2-col on phone */
    .dashboard-metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

/* ── ABOUT US SECTION ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .au-container {
        flex-direction: column !important;
        gap: 40px !important;
        padding: 40px 20px !important;
    }

    .au-graphic-wrap {
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
    }

    .au-content {
        width: 100% !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .au-section {
        padding: 40px 0 !important;
    }

    .au-float-card {
        display: none !important;
    }

    .au-badge {
        display: none !important;
    }

    /* Feature list → tile grid */
    .au-features {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 16px 0 !important;
    }

    .au-features li {
        background: #f0f7ff !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 10px !important;
        padding: 10px 12px !important;
        font-size: 13px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* ── STATS SECTION ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .stats-section .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        justify-items: center !important;
    }

    .stat-box {
        width: 100% !important;
        max-width: 160px !important;
    }
}

/* ── STEPS / GET STARTED SECTION ─────────────────────────────────────────── */
@media (max-width: 1024px) {
    .px-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 30px !important;
    }

    .px-arrow {
        display: none !important;
    }

    .px-step {
        width: calc(50% - 15px) !important;
        min-width: 140px !important;
    }
}

@media (max-width: 480px) {
    .px-container {
        grid-template-columns: 1fr 1fr !important;
        display: grid !important;
        gap: 16px !important;
    }

    .px-step {
        width: 100% !important;
    }

    .px-steps {
        padding: 40px 16px !important;
    }
}

/* ── TESTIMONIAL SECTION — Complete mobile rework ─────────────────────────── */
@media (max-width: 1024px) {

    /* Section padding */
    .testi-new-section {
        padding: 48px 0 40px !important;
    }

    .testi-new-section .section h2 {
        margin-bottom: 24px !important;
        font-size: 24px !important;
        padding: 0 16px !important;
        hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Track wrapper padding */
    .testi-new-section .track-wrapper {
        padding: 12px 0 20px !important;
    }

    /* Slide is full width to hide edges of other cards */
    .testi-new-section .slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        opacity: 0.4 !important;
        transform: scale(0.92) !important;
        padding: 0 20px !important; /* Keep internal padding for gutter */
        transition: all 0.5s ease-in-out !important;
    }

    .testi-new-section .slide.active-slide {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    /* Slide centred with no peaking edges */
    .testi-new-section .slide-track {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0 !important;
        width: 100% !important;
    }
    
    .testi-new-section .track-wrapper {
        padding: 20px 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Card stacks vertically */
    .testi-new-section .card {
        flex-direction: column !important;
        border-radius: 16px !important;
    }

    /* Brand panel full width */
    .testi-new-section .brand {
        width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 0 !important;
        min-height: auto !important;
    }

    /* Stat number smaller */
    .testi-new-section .brand-stat {
        font-size: 38px !important;
    }

    .testi-new-section .brand p {
        font-size: 16px !important;
    }

    /* Content panel full width */
    .testi-new-section .content {
        width: 100% !important;
        padding: 24px 20px !important;
    }

    .testi-new-section .quote {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    .testi-new-section .quote::before {
        font-size: 60px !important;
        margin-bottom: 20px !important;
    }

    /* Arrow positioning to avoid overlap */
    .testi-new-section .prev {
        left: 2px !important;
    }

    .testi-new-section .next {
        right: 2px !important;
    }

    .testi-new-section .arrow {
        width: 34px !important;
        height: 34px !important;
        font-size: 20px !important;
        background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
        color: white !important;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.8) !important;
    }
}

/* ── INTEGRATION TABS CONTENT (override absolute positioning on mobile) ───── */
@media (max-width: 768px) {

    /* Integration tabs wrapper fixes */
    #integration-tabs-wrapper {
        min-height: auto !important;
    }

    .int-tab-content {
        position: relative !important;
        display: none !important;
        flex-wrap: wrap !important;
        inset: auto !important;
    }

    .int-tab-content.opacity-100 {
        display: flex !important;
        opacity: 1 !important;
    }

    .int-tab-content a {
        width: calc(50% - 8px) !important;
    }
}

/* ── NAVBAR ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .navbar {
        padding: 10px 16px !important;
    }

    .navbar-collapse {
        background: white !important;
        border-radius: 12px !important;
        margin-top: 8px !important;
        padding: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
        border: 1px solid #e2e8f0 !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    .navbar-nav .nav-item {
        padding: 4px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

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

    .navbar-nav .nav-link {
        padding: 10px 8px !important;
        font-size: 15px !important;
    }
}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    footer .row {
        flex-direction: column !important;
    }

    footer .col-md-3,
    footer .col-md-4,
    footer .col-lg-3 {
        width: 100% !important;
        margin-bottom: 24px !important;
    }
}

/* ── HELPERS ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Prevent horizontal overflow from fixed-width elements */
    img,
    video,
    iframe,
    canvas,
    svg {
        max-width: 100% !important;
    }

    /* Premium button full-width on phone */
    .premium-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Section padding reduction */
    section,
    .section {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .max-w-7xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ── KEY FEATURES / SOLUTIONS SECTION ───────────────────────────────────── */
@media (max-width: 768px) {
    .keyfeature-section .row {
        flex-direction: column !important;
    }

    .Keyfeature-content {
        margin-bottom: 24px !important;
    }

    /* Hide decorative vector images that cause overflow */
    .keyfeature-vac-one,
    .keyfeature-vac-two,
    .keyfeature-vac-three,
    .keyfeature-vac-four,
    .keyfeature-vac-five {
        display: none !important;
    }
}

/* ── SOLUTIONS CARDS ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .solutions-section .row {
        flex-wrap: wrap !important;
    }

    .solutions-section .col-md-4 {
        width: 100% !important;
        margin-bottom: 16px !important;
    }
}

/* ── VIDEO / BLOG / CTA SECTIONS ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .video-section .row {
        flex-direction: column !important;
    }

    .call-section-border {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }

    .call-section-border .buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .call-section-border h4 {
        font-size: 18px !important;
    }
}

/* ── MISCELLANEOUS FIXES ─────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Remove any transform that causes overflow */
    [class*="translate-x-"] {
        max-width: 100vw;
    }

    /* Hide glow rings in about section on mobile */
    .au-glow-ring {
        display: none !important;
    }

    /* Better spacing for the header title */
    .page-header {
        padding: 0 16px !important;
        margin-bottom: 16px !important;
    }

    .header-title {
        font-size: 1.4rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    /* section headings */
    .stats-header h2,
    .au-title {
        font-size: 1.6rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION WHITESPACE CRUSH — eliminates phantom gaps between sections
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* ── AI Features pinned container: CRITICAL fix ──
       Desktop uses 350vh so the sticky effect has space to scroll into.
       On mobile that 350vh becomes >2000px of blank space.             */
    #ai-features {
        padding-top: 32px !important;
        padding-bottom: 20px !important;
    }

    /* The 350vh scroll container shrinks to content height */
    .pinned-section-container {
        height: auto !important;
        min-height: 0 !important;
    }

    /* The sticky inner is no longer sticky */
    .pinned-section-content {
        position: static !important;
        top: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* ── Integration section ── */
    .py-16 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Dashboard / Call Intelligence section ── */
    .py-12,
    .dashboard-card-wrapper {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* ── About Us ── */
    .au-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Stats section ── */
    .stats-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Get Started Steps ── */
    .px-steps {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Testimonial section ── */
    .testi-new-section {
        padding-top: 40px !important;
        padding-bottom: 32px !important;
    }

    /* ── Globe / CTA section ── */
    .globe-cta-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* ── Blog section ── */
    .latest-blog-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* ── Generic Tailwind spacing utilities on section wrappers ── */
    .pt-12 {
        padding-top: 32px !important;
    }

    .pb-2 {
        padding-bottom: 8px !important;
    }

    .pt-20 {
        padding-top: 40px !important;
    }

    .mb-16 {
        margin-bottom: 24px !important;
    }

    .mb-10 {
        margin-bottom: 20px !important;
    }

    /* Keyfeature section */
    .keyfeature-section,
    .Keyfeature {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Solutions section */
    .solutions-section {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* Growth Acceleration section fixes */
    #growth-acceleration .max-w-7xl {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        overflow: clip !important;
    }
    #growth-acceleration h2 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        word-wrap: break-word !important;
        hyphens: none !important;
        word-break: normal !important;
    }
    #growth-acceleration .relative.h-\[550px\] {
        height: 500px !important; /* Restore height to prevent absolute children collapse */
        margin-top: 20px !important;
        transform: scale(0.8); /* Scale entire visual stack to fit screen */
        transform-origin: center top;
        margin-bottom: -50px;
    }
    
    /* Ensure the cards within graphics maintain their width */
    #growth-acceleration .glass-card-light,
    #growth-acceleration .bg-white.rounded-\[2\.5rem\] {
        min-width: 280px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* Stack cards vertically instead of overlapping too much on mobile */
    #growth-acceleration .glass-card-light {
        top: 250px !important;
        z-index: 10 !important;
    }
    #growth-acceleration .bg-white.rounded-\[2\.5rem\] {
        top: 20px !important;
        z-index: 20 !important;
    }
}

@media (max-width: 768px) {

    /* Remove residual margin-bottom on heading tags inside sections */
    section h2,
    section h3 {
        margin-bottom: 12px !important;
    }

    section p.lead,
    section p.stats-section-subtitle,
    section p.px-steps-subtitle {
        margin-bottom: 20px !important;
    }

    /* Globe CTA cards stack vertically */
    .globe-cta-cards {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .globe-cta-divider {
        display: none !important;
    }

    .globe-cta-card {
        padding: 20px 16px !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .globe-cta-card:last-child {
        border-bottom: none !important;
    }

    /* Blog cards: single column */
    .latest-blog-section .row.g-4 {
        gap: 16px !important;
    }

    .latest-blog-section .col-lg-4,
    .latest-blog-section .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Stats section: tight 2x2 */
    .stats-section {
        padding: 32px 16px !important;
    }

    .stats-header {
        margin-bottom: 24px !important;
    }

    /* Testi section heading */
    .testi-new-section .section {
        padding: 0 16px !important;
    }
}