/* ==========================================================================
   Chhatrapati Shahu Maharaj Bahuuddeshiya Sanstha
   Responsive Breakpoints & Media Queries (Laptop, Tablet, Mobile)
   ========================================================================== */

/* --- Laptop / Small Desktop (max-width: 992px) --- */
@media (max-width: 992px) {
  :root {
    --container-width: 100%;
    --section-padding: 60px;
  }

  /* Single Big Title Header Styling for Mobile View */
  .header-brand-centered {
    display: block !important;
    background: #ffffff !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--border-color) !important;
    text-align: center !important;
  }

  .header-brand-centered h1 {
    font-size: clamp(1.15rem, 4.5vw, 1.65rem) !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
  }

  .brand-title-large {
    font-size: 1.4rem !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .brand-logo-large {
    height: 40px !important;
    max-height: 40px !important;
  }

  /* Display Mobile Brand Logo & Title in Sticky Navbar on Mobile */
  .nav-brand-mobile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: var(--text-dark) !important;
    margin-right: auto !important;
  }

  .nav-brand-mobile img {
    height: 32px !important;
    width: 32px !important;
    object-fit: contain !important;
  }

  .nav-brand-mobile span {
    font-family: var(--font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 220px !important;
  }

  /* Hamburger Navigation Bar Container */
  .navbar-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 54px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
  }

  /* Hamburger Menu Button - High Contrast & High Visibility */
  .hamburger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 1.3rem !important;
    cursor: pointer !important;
    z-index: 1000001 !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  .hamburger.active-toggle {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    background: #1E2432 !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 1000001 !important;
  }

  /* Slider Controls Mobile Positioning - No Overlap */
  .slider-controls {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    bottom: auto !important;
    gap: 8px !important;
    z-index: 5 !important;
  }

  .slider-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  /* Back To Top Mobile Float Above Dock - No Overlap */
  .back-to-top {
    bottom: 75px !important;
    right: 18px !important;
    z-index: 10000 !important;
  }

  /* Prevent Footer & Content Clipping Below Mobile Dock */
  body, footer {
    padding-bottom: 65px !important;
  }

  /* Full Screen Solid Opaque Mobile Menu Overlay */
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 85px 1.25rem 3rem 1.25rem !important;
    gap: 0.2rem !important;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1000000 !important;
  }

  .nav-menu.active {
    left: 0 !important;
  }

  .nav-dropdown {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .nav-dropdown .nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 12px 14px !important;
  }

  .dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: #F1F5F9 !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 12px !important;
    margin: 4px 0 10px 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-dropdown.active .dropdown-menu {
    display: block !important;
  }

  .nav-dropdown .dropdown-icon {
    transition: transform 0.3s ease !important;
  }

  .nav-dropdown.active .dropdown-icon {
    transform: rotate(180deg) !important;
  }

  .dropdown-item {
    padding: 10px 14px !important;
    font-size: 0.98rem !important;
    border-bottom: 1px dashed var(--border-color) !important;
    color: var(--text-dark) !important;
  }

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

  .nav-menu .nav-link {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    text-align: left !important;
    padding: 12px 14px !important;
    color: var(--text-dark) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: all var(--transition-fast) !important;
  }

  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.active {
    color: var(--primary) !important;
    background: var(--primary-light) !important;
    border-radius: var(--radius-sm) !important;
    border-bottom-color: transparent !important;
  }

  /* Prevent iOS Safari Automatic Zoom on Input Focus */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    font-size: 16px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .features-grid,
  .activities-grid,
  .projects-grid,
  .gallery-grid,
  .committee-grid,
  .downloads-grid,
  .offices-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .about-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-img-main {
    height: 380px !important;
    object-fit: cover;
    object-position: top center;
  }

  .about-experience-card {
    right: 10px;
    bottom: -15px;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Mobile Devices (max-width: 768px) --- */
@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  :root {
    --section-padding: 45px;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-brand-centered {
    padding: 10px 0 !important;
  }

  .header-brand-centered h1 {
    font-size: clamp(1.1rem, 4.2vw, 1.45rem) !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }

  .top-bar-content {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 0.5rem;
  }

  .top-info {
    flex-direction: column;
    gap: 0.4rem;
  }

  .site-logo-img {
    height: 36px !important;
    max-height: 36px !important;
  }

  .nav-cta {
    display: none !important;
  }

  .hero-section {
    min-height: 70vh;
  }

  .hero-title {
    font-size: 1.75rem !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

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

  .stats-banner {
    margin-top: -20px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    padding: 1.25rem;
    gap: 1rem;
  }

  .features-grid,
  .activities-grid,
  .projects-grid,
  .gallery-grid,
  .committee-grid,
  .downloads-grid,
  .offices-grid,
  .news-album-grid,
  .misc-album-grid,
  .doctor-album-grid,
  .camps-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Mobile Image Cards Height Adjustment for All Mobile Brands & Models (Except Home Page, Officers, and Booklet/Docs) */
  body:not(.home-page) .news-album-img,
  body:not(.home-page) .misc-album-img,
  body:not(.home-page) .doctor-album-img,
  body:not(.home-page) .gallery-item img,
  body:not(.home-page) .camps-gallery-grid img,
  body:not(.home-page) .camps-gallery-grid .gallery-item img,
  body:not(.home-page) .doc-card img,
  body:not(.home-page) .activity-thumb,
  body:not(.home-page) .activity-thumb img,
  body:not(.home-page) .project-thumb,
  body:not(.home-page) .project-thumb img,
  body:not(.home-page) .project-card img,
  body:not(.home-page) .gallery-item > div > img {
    height: 380px !important;
    max-height: 440px !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  /* Specific override for Officers Profile Images in Mobile View */
  .officer-avatar,
  .officer-card div[style*="border-radius: 50%"],
  .officer-card .officer-avatar-box {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
    min-width: 140px !important;
    min-height: 140px !important;
    margin: 0 auto 15px auto !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  .officer-card img,
  .officer-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 50% !important;
  }

  /* Specific override for Hospital Flyer & Booklet Images on Mobile (Full Page Display without Clipping) */
  .hospital-booklet-img,
  .hospital-flyer-card img,
  body:not(.home-page) .hospital-booklet-img,
  body:not(.home-page) .doc-preview-img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
  }

  body:not(.home-page) .gallery-item {
    height: auto !important;
    min-height: 380px !important;
  }

  body:not(.home-page) .news-album-img-wrap,
  body:not(.home-page) .misc-album-img-wrap,
  body:not(.home-page) .doctor-album-img-wrap {
    height: 380px !important;
  }

  .notice-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .notice-info {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .members-table-wrap, table, .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }

  /* Full mobile touch button styling */
  .btn, .hero-actions .btn {
    max-width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 0.95rem;
    white-space: normal;
    word-break: break-word;
    text-align: center;
  }
}

/* --- Small Mobile Devices (max-width: 480px) --- */
@media (max-width: 480px) {
  .logo-title {
    font-size: 0.85rem;
  }

  .logo-subtitle {
    font-size: 0.6rem;
  }

  .nav-brand-mobile span {
    font-size: 0.85rem;
    max-width: 170px !important;
  }

  .about-img-main {
    height: 340px !important;
    object-fit: cover;
    object-position: top center;
  }

  /* Mobile Image Cards Height Adjustment for Small Mobile Devices (Except Home Page) */
  body:not(.home-page) .news-album-img,
  body:not(.home-page) .misc-album-img,
  body:not(.home-page) .doctor-album-img,
  body:not(.home-page) .gallery-item img,
  body:not(.home-page) .camps-gallery-grid img,
  body:not(.home-page) .camps-gallery-grid .gallery-item img,
  body:not(.home-page) .doc-card img,
  body:not(.home-page) .doc-preview-img,
  body:not(.home-page) .activity-thumb,
  body:not(.home-page) .activity-thumb img,
  body:not(.home-page) .project-thumb,
  body:not(.home-page) .project-thumb img,
  body:not(.home-page) .project-card img,
  body:not(.home-page) .card-hover img,
  body:not(.home-page) .gallery-item > div > img {
    height: 360px !important;
    max-height: 400px !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  body:not(.home-page) .gallery-item {
    height: auto !important;
    min-height: 360px !important;
  }

  body:not(.home-page) .news-album-img-wrap,
  body:not(.home-page) .misc-album-img-wrap,
  body:not(.home-page) .doctor-album-img-wrap {
    height: 360px !important;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .about-feature-list {
    grid-template-columns: 1fr;
  }

  .filter-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
    flex-grow: 1;
    text-align: center;
  }
}

/* --- Ultra Small Mobile Devices (max-width: 360px - Galaxy Fold Outer, iPhone SE) --- */
@media (max-width: 360px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .header-brand-centered h1 {
    font-size: 1.05rem !important;
  }

  .brand-badge-large {
    font-size: 0.75rem !important;
    padding: 3px 12px !important;
  }

  .nav-menu .nav-link {
    font-size: 1rem !important;
    padding: 10px 0 !important;
  }

  .btn {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
  }
}

/* --- Mobile Modals, Digital Cards & Lightbox Viewer Adjustments --- */
@media (max-width: 768px) {
  .lightbox-modal > div,
  #cardApplyModal > div,
  #cardVerifyModal > div,
  #patientModal > div,
  #cameraCaptureModal > div {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
    padding: 18px 14px !important;
    border-radius: var(--radius-md) !important;
  }

  .lightbox-nav-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
  }

  .lightbox-nav-btn.prev {
    left: 8px !important;
  }

  .lightbox-nav-btn.next {
    right: 8px !important;
  }

  .lightbox-close {
    top: 10px !important;
    right: 10px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1.8rem !important;
  }

  .live-digital-card,
  .digital-health-card-box,
  .card-preview-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --- iOS Safe Area Insets & Landscape Mode --- */
@supports (padding: max(0px)) {
  body {
    padding-left: min(0px, env(safe-area-inset-left));
    padding-right: min(0px, env(safe-area-inset-right));
  }

  .nav-menu {
    padding-top: max(80px, env(safe-area-inset-top)) !important;
    padding-bottom: max(30px, env(safe-area-inset-bottom)) !important;
  }
}

/* --- Enhanced Footer Mobile Responsiveness --- */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  #hospitalMap {
    height: 320px !important;
  }

  .dhc-header, .dhc-body, .dhc-footer {
    padding: 10px 12px !important;
  }

  .dhc-info {
    font-size: 0.8rem !important;
  }

  .dhc-id-number {
    font-size: 0.95rem !important;
  }
}