/* ============================================
   GLOBAL RESPONSIVE OVERRIDES
   ============================================ */

/* Scroll reveal initial state */
.observe-anim { opacity: 0; }

/* Overlays & utilities */
.bg-overlay { background-color: rgba(0,0,0,0.65); }
.hover-scale { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.hover-scale:hover { transform: scale(1.03); }
.glass {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* ============================================
   MOBILE FIRST: Key layout overrides
   ============================================ */

/* Make all sections horizontally safe on small screens */
section, main, footer {
    max-width: 100%;
    overflow-x: hidden;
}

/* Prevent oversized fixed-height hero on mobile */
@media (max-width: 640px) {
    /* Hero height: auto on mobile */
    main > section:first-child {
        height: auto !important;
        min-height: 100svh !important;
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Huge hero headlines scale down */
    h1.text-6xl, h1.text-8xl,
    .text-6xl, .text-8xl, .text-7xl {
        font-size: clamp(2rem, 9vw, 4rem) !important;
        line-height: 1.1 !important;
    }

    /* Stat counters: 2-col grid on phones */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    /* Padding on heavy sections that use px-12 */
    .py-32 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
    .px-12 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .px-8  { padding-left: 1rem !important; padding-right: 1rem !important; }

    /* Bento grid: stack on mobile */
    .grid.grid-cols-12 { display: flex !important; flex-direction: column !important; }
    .col-span-8, .col-span-4, .col-span-5, .col-span-7 {
        width: 100% !important;
    }
    /* Bento cards: auto height on mobile */
    .h-\[500px\], .h-\[400px\], .h-\[96px\] {
        height: 260px !important;
    }

    /* Footer: single column */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    footer .col-span-2 { grid-column: span 1 !important; }

    /* Doctor grid: single column */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Contact/About two-column: stack */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Floating hero info card: hide on small screens */
    .absolute.bottom-20.right-20 { display: none !important; }
}

/* ============================================
   TABLET (641–1023px) overrides
   ============================================ */
@media (min-width: 641px) and (max-width: 1023px) {
    .px-12 { padding-left: 2rem !important; padding-right: 2rem !important; }

    /* Stats: 2x2 grid on tablet */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem !important;
    }

    /* Bento: 2-col on tablet */
    .grid.grid-cols-12 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .col-span-8 { grid-column: span 2 !important; }
    .col-span-4, .col-span-5, .col-span-7 { grid-column: span 1 !important; }
    .h-\[500px\] { height: 380px !important; }

    /* Doctor grid: 2-col on tablet */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   GENERAL TOUCH FRIENDLY IMPROVEMENTS
   ============================================ */

/* Minimum touch target size.
   `min-height` has no effect on non-replaced inline elements, so inline links
   inside prose keep their natural text flow while padded block/inline-block
   CTAs and flex-item links still get the 44px floor. The previous rule also
   set `display:inline-flex` on every <a> and <button>, which pulled inline
   text links out of the line box and would flatten any button containing
   stacked block content. */
button,
[role="button"],
input[type="submit"],
input[type="button"],
a {
    min-height: 44px;
}

/* Only the desktop header nav opts out of the 44px floor (its links are inline
   and sit inside an 80px bar). Footer nav links are stacked flex items and were
   rendering just 22px tall on phones, well under the touch minimum. */
header nav a { min-height: 0; }

/* Prevent text overflow overflow */
p, h1, h2, h3, h4, li, span {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Smooth native scroll on iOS */
html { -webkit-overflow-scrolling: touch; }