/* ==========================================================================
   NETHU PRIYAA HOME — RESPONSIVE MEDIA QUERIES
   Pixel-level layout adjustments across 320px - 1920px+
   ========================================================================== */

/* Large Desktop Displays (1440px +) */
@media (min-width: 1440px) {
    .container {
        max-width: 1360px;
    }
}

/* Standard Desktop to Laptop (1025px - 1280px) */
@media (max-width: 1280px) {
    .nav-menu {
        gap: 14px;
    }

    .nav-link {
        font-size: 0.875rem;
    }

    .footer-grid {
        gap: 32px;
    }
}

/* Tablet & Mobile Slide-out Right-to-Left Drawer (max-width: 1180px) */
@media (max-width: 1180px) {
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 78% !important;
        max-width: 320px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background-color: #ffffff !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 85px 20px 32px 20px !important;
        border-left: 2px solid #ebdcc9 !important;
        border-bottom: none !important;
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.3) !important;
        transform: translateX(100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease !important;
        gap: 6px !important;
        z-index: 10000000 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
    }

    /* Prevent mobile background scrolling when menu drawer is open */
    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
    }

    .nav-menu.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-link {
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        color: #0e2e1e !important;
        padding: 13px 18px !important;
        border-radius: 10px !important;
        display: block !important;
        border-bottom: 1px solid #f5ede2 !important;
        transition: all 0.2s ease !important;
    }

    .nav-link:hover,
    .nav-link.active {
        background-color: #0e2e1e !important;
        color: #ffd700 !important;
        padding-left: 22px !important;
        border-bottom-color: transparent !important;
    }

    .nav-link.active::before {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10000007 !important;
        position: relative !important;
        background-color: #f7f2ea !important;
        color: #0e2e1e !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border: 1px solid #ebdcc9 !important;
        transition: all 0.25s ease !important;
    }

    .mobile-menu-toggle svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #0e2e1e !important;
        stroke-width: 2.5px !important;
    }

    /* Fixed Top Navbar lock when Mobile Drawer is Open — Never Disappears */
    .site-header.menu-open,
    .site-header:has(.nav-menu.active),
    body.mobile-menu-open .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000005 !important;
        background-color: #ffffff !important;
        border-bottom: 1.5px solid #ebdcc9 !important;
        box-shadow: 0 4px 16px rgba(14, 46, 30, 0.12) !important;
    }

    .site-header.menu-open .brand-logo,
    .site-header:has(.nav-menu.active) .brand-logo,
    body.mobile-menu-open .brand-logo,
    .site-header.menu-open .header-cta,
    .site-header:has(.nav-menu.active) .header-cta,
    body.mobile-menu-open .header-cta {
        position: relative !important;
        z-index: 10000006 !important;
    }

    .site-header.menu-open .mobile-menu-toggle,
    .site-header:has(.nav-menu.active) .mobile-menu-toggle,
    body.mobile-menu-open .mobile-menu-toggle {
        background-color: #0e2e1e !important;
        border-color: #0e2e1e !important;
    }

    .site-header.menu-open .mobile-menu-toggle svg,
    .site-header:has(.nav-menu.active) .mobile-menu-toggle svg,
    body.mobile-menu-open .mobile-menu-toggle svg {
        stroke: #ffffff !important;
    }

    .mobile-menu-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(0, 0, 0, 0.45) !important;
        z-index: 9999990 !important;
        touch-action: none !important;
        overscroll-behavior: none !important;
    }

    .trust-card-group {
        grid-template-columns: 1fr;
    }
}

/* Mobile Devices & Small Screens (max-width: 767px) */
@media (max-width: 767px) {
    .top-bar {
        display: none;
    }

    /* Mobile Sticky Top Header — Zero Cut-off, Zero White Space */
    .site-header {
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 68px !important;
        background-color: #ffffff !important;
        border-bottom: 1.5px solid #ebdcc9 !important;
        box-shadow: 0 4px 16px rgba(14, 46, 30, 0.08) !important;
        z-index: 9999999 !important;
        overflow: visible !important;
    }

    .site-header.menu-open,
    .site-header:has(.nav-menu.active),
    body.mobile-menu-open .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 68px !important;
        z-index: 10000005 !important;
    }

    .header-container {
        height: 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .brand-logo {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .brand-logo img {
        height: 42px !important;
        max-height: 42px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    .header-cta {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 100% !important;
    }

    .header-cta .btn-schedule-visit {
        padding: 7px 13px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        border-radius: 9999px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 34px !important;
        box-sizing: border-box !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px !important;
        margin: 0 !important;
        height: 40px !important;
        width: 40px !important;
    }

    main,
    #main-content,
    .hero-editorial,
    .page-banner,
    .contact-hero-section,
    .site-main {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0;
    }

    .hero-editorial {
        padding-top: 32px;
        padding-bottom: 50px;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        background-position: 72% center !important;
        background-size: cover !important;
        background-image: url('../images/gallery/banner_image.png?v=5.0') !important;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    /* Hero Action Buttons - Mobile Friendly Vertical Alignment, Compact Width & Centered */
    .hero-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .hero-actions .btn,
    .hero-actions .btn-hero-primary,
    .hero-actions .btn-hero-glass {
        width: 100% !important;
        max-width: 250px !important;
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 16px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 9999px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22) !important;
        text-decoration: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .hero-actions .btn-hero-primary {
        background-color: #1b382b !important;
        color: #ffffff !important;
        border: 1.5px solid #28543f !important;
    }

    .hero-actions .btn-hero-primary:active {
        background-color: #12281e !important;
        transform: scale(0.98) !important;
    }

    .hero-actions .btn-hero-glass {
        background-color: rgba(255, 255, 255, 0.16) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        color: #ffffff !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    }

    .hero-actions .btn-hero-glass:active {
        background-color: rgba(255, 255, 255, 0.28) !important;
        transform: scale(0.98) !important;
    }

    /* Mobile Hero Trust Strip Scaling — Strict Vertical Stack */
    .hero-trust-strip {
        padding: 16px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .hero-trust-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hero-trust-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 0 2px !important;
        gap: 4px !important;
    }

    .hero-trust-item:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    .hero-trust-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
        margin: 0 auto 2px auto !important;
        flex-shrink: 0 !important;
    }

    .hero-trust-number {
        font-size: 1.15rem !important;
        line-height: 1 !important;
    }

    .hero-trust-label {
        font-size: 0.68rem !important;
        line-height: 1.2 !important;
        color: #c4d1c9 !important;
    }

    /* Hide Persistent Mobile Action Bar on Mobile */
    .mobile-action-bar {
        display: none !important;
    }

    .action-bar-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.15fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .action-bar-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 8px 2px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        border-radius: 9999px !important;
        text-align: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .services-grid,
    .amenities-content-grid,
    .gallery-grid,
    .philosophy-cards-grid,
    .services-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .philosophy-container,
    .visit-booking-grid,
    .path-steps-grid,
    .path-detail-grid,
    .adl-cards-row-1,
    .adl-cards-row-2,
    .nursing-grid,
    .ready-tour-grid,
    .respite-grid,
    .amenities-content-grid,
    .gallery-row-1,
    .gallery-row-2,
    .blogs-featured-grid,
    .blogs-bottom-grid,
    .care-questions-grid,
    .contact-main-grid,
    .contact-form-grid-2,
    .contact-locations-grid {
        grid-template-columns: 1fr;
    }

    /* Support CTA Cards Mobile Centering */
    .adl-support-cta-bar,
    .nursing-cta-bar,
    .faq-still-questions-bar {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 28px 20px !important;
        gap: 16px !important;
    }

    .adl-support-left,
    .nursing-cta-left,
    .faq-still-left {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        border-right: none !important;
        padding-right: 0 !important;
    }

    .adl-support-icon-circle,
    .nursing-cta-icon-circle,
    .faq-still-icon {
        margin: 0 auto !important;
    }

    .adl-support-info,
    .nursing-cta-info,
    .faq-still-info {
        text-align: center !important;
    }

    .btn-talk-care-team {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .nursing-banner-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .nursing-banner-numbers {
        align-items: flex-start !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .care-questions-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .blog-hero-card {
        flex-direction: column;
    }

    .blog-hero-img-wrapper,
    .blog-hero-content {
        width: 100%;
    }

    .amenities-bottom-cta-bar {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .amenities-cta-left {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ebdcc9;
        padding-bottom: 16px;
    }

    .amenities-cta-right {
        flex-direction: column;
        align-items: flex-start;
    }

    .respite-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .respite-feature-col {
        border-right: none;
        padding-right: 0;
    }

    .respite-action-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .ready-tour-features {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-right: 0;
    }

    .ready-tour-feature-item {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px dashed #ebdcc9;
        padding-bottom: 16px;
    }

    .ready-tour-feature-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .adl-item-card.adl-card-wide {
        grid-column: span 1;
    }

    .adl-support-cta-bar,
    .nursing-cta-bar {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .nursing-cta-left {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ebdcc9;
        padding-bottom: 16px;
    }

    .path-steps-line {
        display: none;
    }

    .path-checklist-column {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #ebdcc9;
        padding-top: 24px;
    }

    .path-full-guide-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .btn-read-full-guide {
        width: 100%;
        justify-content: center;
    }

    .lifestyle-hero-card {
        flex-direction: column !important;
        padding: 36px 24px 60px 24px !important;
        min-height: auto !important;
    }

    .lifestyle-card-media-fade {
        position: relative !important;
        width: 100% !important;
        height: 320px !important;
        margin-top: 28px !important;
        border-radius: 18px !important;
    }

    .lifestyle-card-media-fade img {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        border-radius: 18px !important;
    }

    .lifestyle-card-media-fade::before {
        display: none !important;
    }

    .lifestyle-content-left {
        max-width: 100% !important;
    }

    .facility-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    @media (max-width: 640px) {
        .facility-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .stat-pill-bar,
    .lifestyle-bottom-bar,
    .visit-trust-strip {
        grid-template-columns: 1fr;
        border-radius: 24px;
        gap: 16px;
        padding: 24px 20px;
        position: static;
        margin-top: 24px;
    }

    .stat-pill-item:not(:last-child),
    .lifestyle-bar-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #ebdcc9;
        padding-bottom: 16px;
    }

    .footer-main-body {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Brand col spans full width */
    .footer-brand-col {
        grid-column: 1 / -1;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ebdcc9;
        padding-bottom: 20px;
    }

    /* Contact info col spans full width at bottom */
    .footer-main-body>.footer-col:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid #ebdcc9;
        padding-top: 16px;
    }

    /* Compact nav list */
    .footer-nav-list {
        gap: 6px;
    }

    .footer-nav-list li {
        padding-bottom: 6px;
    }

    /* Smaller header badge on mobile */
    .footer-col-icon-badge {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .footer-col-header {
        margin-bottom: 12px;
        gap: 8px;
    }

    .footer-col-header h4 {
        font-size: 0.8rem;
    }

    .footer-trust-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-trust-item {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px dashed #ebdcc9;
        padding-bottom: 16px;
    }

    .footer-social-wrapper {
        justify-content: center;
        padding-top: 8px;
    }

    .footer-dark-strip {
        text-align: center;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body,
    html {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        overflow-x: clip !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* Small Mobile Breakpoints (320px - 414px) */
@media (max-width: 414px) {
    .btn {
        width: 100%;
    }

    .hero-actions {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .trust-feature-card {
        padding: 20px 16px;
    }

    .testimonial-card {
        padding: 24px 20px;
    }

    .contact-info-block,
    .contact-form-block {
        padding: 24px 20px;
    }

    .footer-logo-img {
        width: 48px !important;
        max-width: 48px !important;
        height: auto !important;
        margin-bottom: 8px !important;
    }
}

/* ============================================================
   MOBILE SECTION SPACING — Remove excessive whitespace gaps
   ============================================================ */
@media (max-width: 767px) {

    .philosophy-section,
    .services-section,
    .adl-section,
    .nursing-section,
    .thoughtful-path-section,
    .faq-section,
    .respite-section,
    .testimonials-section,
    .visit-booking-section,
    .community-section,
    .amenities-section,
    .gallery-section,
    .blogs-hero-section,
    .blogs-list-section,
    .care-questions-section,
    .contact-hero-section,
    .contact-main-section,
    .contact-locations-section,
    .lifestyle-section,
    .living-section,
    .planning-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .site-footer {
        padding-top: 40px !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .hero-editorial {
        padding-top: 32px !important;
        padding-bottom: 40px !important;
    }
}

/* ============================================================
   MODAL FORM — Mobile Fix
   ============================================================ */
@media (max-width: 767px) {

    /* Reduce modal card padding on mobile */
    .schedule-visit-modal-card {
        padding: 24px 20px !important;
        border-radius: 18px !important;
        max-height: 95vh !important;
    }

    /* Stack 2-col form grid to single column */
    .modal-form-grid-2 {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Make form fields full width and comfortable */
    .modal-input-group {
        margin-bottom: 12px !important;
    }

    .modal-input-field {
        padding: 12px 14px !important;
        font-size: 0.9rem !important;
    }

    /* Tighten modal header */
    .modal-header-box h3 {
        font-size: 1.25rem !important;
    }

    /* Also fix contact form 2-col grid on mobile */
    .contact-form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Philosophy 4-card grid & Footer responsive breakpoints */
@media (min-width: 768px) and (max-width: 1180px) {
    .philosophy-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .footer-main-body {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 36px 32px !important;
    }

    .footer-brand-col {
        padding-right: 0 !important;
    }

    .footer-hours-box {
        padding: 12px 14px !important;
    }

    .footer-trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .philosophy-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .footer-main-body {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .footer-brand-col {
        padding-right: 0 !important;
    }

    .footer-logo-img {
        width: 58px !important;
        max-width: 58px !important;
        height: auto !important;
        margin-bottom: 10px !important;
    }

    .footer-hours-box {
        padding: 14px 16px !important;
        margin-top: 14px !important;
    }

    .footer-trust-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        text-align: center !important;
    }

    .footer-trust-item {
        width: 100% !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px 0 !important;
        border-right: none !important;
        border-bottom: 1px dashed #ebdcc9 !important;
    }

    .footer-trust-info {
        text-align: center !important;
        max-width: 90% !important;
        margin: 0 auto !important;
    }

    .footer-trust-info strong {
        text-align: center !important;
        font-size: 1.05rem !important;
        margin-bottom: 4px !important;
    }

    .footer-trust-info span {
        text-align: center !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    .footer-social-wrapper {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding-top: 18px !important;
        gap: 14px !important;
    }

    .footer-social-label {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    .footer-social-wrapper .social-circle-btn {
        display: inline-flex !important;
        margin: 0 !important;
    }

    .footer-strip-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   FACILITY GRID & TESTIMONIAL RESPONSIVE RULES
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .facility-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 640px) {
    .facility-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
    
    .facility-card {
        padding: 24px 20px !important;
    }
    
    .testimonial-card {
        padding: 28px 20px !important;
    }
}