/* ==========================================================================
   KHOSLA STONE KIDNEY & SURGICAL CENTRE
   Responsive Stylesheet: Desktop, Tablet, and Mobile Adaptations
   ========================================================================== */

/* ===================================================
   DESKTOP LARGE & MEDIUM SCREENS (max-width: 1200px)
   =================================================== */
@media (max-width: 1200px) {
    .nav-menu {
        gap: 0;
    }

    .nav-link {
        padding: 8px 10px;
        font-size: 0.875rem; /* 14px */
    }

    .btn-appointment {
        padding: 9px 16px;
        font-size: 0.8125rem;
    }

    .mega-menu {
        width: 820px;
    }

    .mega-menu-grid {
        gap: 20px;
    }

    /* Footer 5 columns rebalance */
    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr 1fr 1.1fr;
        gap: 24px;
    }
}

/* ===================================================
   TABLETS & SMALL DESKTOPS (max-width: 991px)
   =================================================== */
@media (max-width: 991px) {
    /* Top Bar Mobile/Tablet Optimization */
    .top-bar-left {
        display: none; /* Keep mobile screen clean and uncluttered */
    }

    .top-bar-container {
        justify-content: center;
    }

    .top-bar-right {
        width: 100%;
        justify-content: space-around;
        gap: 12px;
        flex-wrap: wrap;
    }

    .top-bar-location {
        display: none; /* Keep only most critical contact information */
    }

    /* Main Header Layout */
    .main-header-container {
        height: 80px;
    }

    .brand-logo {
        height: 60px;
        max-width: 250px;
    }

    .accreditation-logo {
        height: 36px;
    }

    .acc-bold {
        font-size: 0.6875rem;
    }

    .acc-tag {
        font-size: 0.625rem;
    }

    /* Hide Desktop Navigation & Mega Menu */
    .main-navigation {
        display: none;
    }

    /* Display Mobile Toggle */
    .mobile-nav-toggle {
        display: inline-flex;
    }

    /* Footer Grid Layout: 2 Columns on Tablet */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }

    .footer-col-about {
        grid-column: span 2;
        max-width: 600px;
    }

    .footer-col-contact {
        grid-column: span 2;
    }

    .contact-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ===================================================
   MOBILE PHONES (max-width: 767px)
   =================================================== */
@media (max-width: 767px) {
    /* Top Bar Mobile */
    .top-bar {
        font-size: 0.75rem; /* 12px */
    }

    .top-bar-container {
        min-height: 36px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .top-bar-right {
        justify-content: space-between;
        gap: 8px;
    }

    .top-bar-label {
        display: none; /* Keep numbers clean on small screens */
    }

    .top-bar-helpline {
        padding: 2px 8px;
    }

    /* Header Mobile */
    .main-header-container {
        height: 64px;
    }

    .brand-group {
        gap: 10px;
    }

    .brand-logo {
        height: 44px;
    }

    .brand-divider {
        height: 28px;
    }

    .accreditation-badge {
        padding: 2px 6px 2px 2px;
        gap: 5px;
    }

    .accreditation-logo {
        height: 32px;
    }

    .accreditation-text {
        display: none; /* Hide micro text on small mobile screens */
    }

    /* Hide desktop CTA button from header to preserve spacing */
    .header-action-wrap .btn-appointment {
        display: none;
    }

    /* Footer Grid: Single Column on Mobile */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-col-about {
        grid-column: span 1;
    }

    .footer-col-contact {
        grid-column: span 1;
    }

    .contact-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer-container {
        padding-bottom: 36px;
    }

    .site-footer {
        padding-top: 50px;
    }

    /* Copyright Bar Mobile */
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .footer-bottom-meta {
        justify-content: center;
    }
}

/* ===================================================
   EXTRA SMALL MOBILE (max-width: 420px)
   =================================================== */
@media (max-width: 420px) {
    .top-bar-phone {
        display: none; /* Only show the 24/7 surgical helpline on very tiny screens */
    }

    .top-bar-right {
        justify-content: center;
    }

    .brand-logo {
        height: 38px;
    }

    .accreditation-logo {
        height: 28px;
    }

    .mobile-nav-drawer {
        width: 100%;
        max-width: 100vw;
    }
}

/* ==========================================================================
   HOMEPAGE RESPONSIVE STYLES
   ========================================================================== */

/* Medium Desktops (max-width: 1200px) */
@media (max-width: 1200px) {
    .hero-container {
        gap: 30px;
    }

    .kidney-art-stage {
        max-width: 420px;
    }

    .story-container {
        gap: 40px;
    }

    .bento-grid {
        gap: 20px;
    }

    .about-grid {
        gap: 50px;
    }
}

/* ===================================================
   TABLETS & SMALL DESKTOPS (max-width: 991px)
   =================================================== */
@media (max-width: 991px) {
    .section-hero {
        padding: 50px 0 80px 0;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .hero-content {
        max-width: 100%;
        align-items: center;
    }

    .hero-cta-group {
        justify-content: center;
    }

    .hero-metrics-strip {
        justify-content: center;
    }

    .hero-glass-card {
        max-width: 440px;
    }

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

    /* Trajectory Stage on Tablet */
    .trajectory-nav-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .trajectory-console-card {
        grid-template-columns: 1fr;
    }

    .console-narrative-panel {
        padding: 30px 24px;
    }

    /* Bento Grid Tablet: 2 columns */
    .bento-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-hero-rirs {
        grid-column: span 2;
    }

    .bento-card-holep {
        grid-column: span 2;
    }

    /* Featured Procedure Tablet */
    .featured-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* About Section Tablet */
    .about-grid-modern {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-visual-cluster {
        max-width: 540px;
        margin: 0 auto;
    }

    /* Surgical Spectrum Tablet */
    .spectrum-header-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .spectrum-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Why Choose Khosla Pillars Tablet */
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Team Card Tablet */
    .team-showcase-card {
        grid-template-columns: 1fr;
    }

    .doctor-photo {
        min-height: 320px;
        max-height: 400px;
    }

    /* Location Grid Tablet */
    .location-grid-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ===================================================
   MOBILE PHONES (max-width: 767px)
   =================================================== */
@media (max-width: 767px) {
    .section-hero {
        padding: 40px 0 65px 0;
    }

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

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-cta-group {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-emergency-badge {
        width: 100%;
        justify-content: center;
    }

    .hero-metrics-strip {
        gap: 14px;
        flex-wrap: wrap;
    }

    .metric-sep {
        display: none;
    }

    .hero-glass-card {
        max-width: 320px;
        padding: 8px;
    }

    .telemetry-tag {
        padding: 5px 10px;
    }

    .tag-title {
        font-size: 0.6875rem;
    }

    .tag-sub {
        font-size: 0.58rem;
    }

    .intro-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .intro-feature-card {
        padding: 24px 20px;
    }

    /* Trajectory Stage Mobile */
    .trajectory-nav-tabs {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .stage-nav-pill {
        padding: 12px 14px;
    }

    .console-narrative-panel {
        padding: 24px 18px;
    }

    .narrative-specs-grid {
        grid-template-columns: 1fr;
    }

    .narrative-action-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-console-cta {
        width: 100%;
        justify-content: center;
    }

    .console-step-controls {
        justify-content: center;
    }

    /* Bento Grid Mobile: 1 column */
    .bento-grid-modern {
        grid-template-columns: 1fr;
    }

    .bento-hero-rirs,
    .bento-card-holep {
        grid-column: span 1;
    }

    .bento-card {
        padding: 24px;
    }

    .bento-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .featured-heading {
        font-size: 2.35rem;
    }

    .featured-cta-row {
        flex-direction: column;
        width: 100%;
    }

    .btn-featured-primary,
    .btn-featured-glass {
        width: 100%;
        justify-content: center;
    }

    /* About Section Mobile */
    .cluster-sub-card {
        width: 180px;
        right: 0;
    }

    .cluster-img-sub {
        height: 100px;
    }

    .cluster-accreditation-card {
        left: 0;
        top: -15px;
        padding: 8px 12px;
    }

    /* Surgical Spectrum Mobile */
    .spectrum-stats-strip {
        grid-template-columns: 1fr;
    }

    .spectrum-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Why Choose Khosla Pillars Mobile */
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    /* Team Preview Mobile */
    .doctor-details-wrap {
        padding: 28px 20px;
    }

    .doctor-heading-name {
        font-size: 1.6rem;
    }

    .doctor-actions-row {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .doctor-actions-row .btn-appointment,
    .doctor-actions-row .btn-outline-plain {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Emergency Mobile */
    .emergency-banner-box {
        padding: 40px 20px;
    }

    .emergency-buttons-row {
        flex-direction: column;
        width: 100%;
    }

    .btn-emergency-call-now,
    .btn-emergency-book-now {
        width: 100%;
        justify-content: center;
    }

    /* Location Mobile */
    .blueprint-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-directions-link {
        width: 100%;
        justify-content: center;
        padding: 8px;
        background: var(--color-light-bg);
        border-radius: 4px;
    }

    /* Final CTA Mobile */
    .final-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-cta-white,
    .btn-cta-transparent {
        width: 100%;
        justify-content: center;
    }
}

/* Extra Small (max-width: 420px) */
@media (max-width: 420px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-glass-card {
        max-width: 280px;
    }

    .about-visual-cluster {
        padding-right: 0;
        padding-bottom: 30px;
    }

    .cluster-sub-card {
        position: relative;
        width: 100%;
        right: 0;
        margin-top: 14px;
    }
}

/* ===================================================
   ABOUT US PAGE RESPONSIVE ADAPTATIONS
   =================================================== */

/* Tablet & Medium Screens (max-width: 991px) */
@media (max-width: 991px) {
    .about-profile-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-visual-column {
        position: static;
        max-width: 600px;
        margin: 0 auto;
    }

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

    .empanelments-card-banner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 36px 28px;
    }

    .cta-inner-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 36px 28px;
    }

    .cta-actions-right {
        width: 100%;
    }
}

/* Mobile Phones (max-width: 767px) */
@media (max-width: 767px) {
    .about-hero-banner {
        padding: 44px 0 40px;
    }

    .banner-badge-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .banner-page-title {
        font-size: 2rem;
    }

    .section-about-profile {
        padding: 55px 0 65px;
    }

    .about-primary-heading {
        font-size: 1.65rem;
    }

    .accreditation-callout-card {
        padding: 18px 16px;
    }

    .callout-header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .about-action-row {
        flex-direction: column;
        width: 100%;
    }

    .btn-about-appointment,
    .btn-cashless-outline {
        width: 100%;
        justify-content: center;
    }

    .badge-top-right {
        right: 0;
        top: 10px;
    }

    .badge-bottom-left {
        left: 0;
        bottom: 10px;
    }

    .about-quick-specs-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .section-about-skills {
        padding: 60px 0;
    }

    .skills-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .skills-experience-callout {
        width: 100%;
    }

    .section-about-empanelments {
        padding: 55px 0;
    }

    .empanelments-card-banner {
        padding: 24px 18px;
    }

    .empanelment-cta-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-empanelment-primary,
    .btn-empanelment-outline {
        width: 100%;
        justify-content: center;
    }

    .section-about-cta {
        padding: 50px 0;
    }

    .cta-inner-box {
        padding: 26px 18px;
    }

    .cta-big-heading {
        font-size: 1.6rem;
    }

    .btn-cta-primary-white,
    .btn-cta-call-glass {
        width: 100%;
        justify-content: center;
    }
}