/* ==========================================================================
   MEHTA ASSOCIATES - COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Full Mobile, Tablet & Desktop Coverage across All Viewports
   Breakpoints: 1200px, 1024px (Tablet Landscape), 992px (Tablet Portrait),
                768px (Mobile Large), 576px (Mobile Standard), 420px (Compact Mobile), 360px (Extra Small)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GLOBAL FLUID & MOBILE PREVENTIONS
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Ensure mobile form inputs NEVER trigger automatic iOS Safari zoom jumps */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   1. LAPTOPS & LARGE TABLETS (<= 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .header-sourcing-badge {
    display: none;
  }

  .nav-desktop {
    gap: 0.25rem;
  }

  .nav-link {
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
  }

  .header-search-form {
    width: 175px;
  }

  .header-search-form:focus-within {
    width: 220px;
  }

  .hero-slide-banner .hero-banner-floating-pill {
    right: 1.5rem;
    bottom: 1.25rem;
  }

  .featured-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

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

/* --------------------------------------------------------------------------
   2. TABLETS IN LANDSCAPE & MEDIUM VIEWPORTS (<= 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
  }

  .top-bar {
    display: none; /* Keep header streamlined on tablets & mobile */
  }

  .brand-logo {
    height: 52px;
  }

  /* Switch desktop nav to touch-friendly mobile drawer */
  .nav-desktop,
  .header-search-wrap,
  .btn-header-cta {
    display: none !important;
  }

  .mobile-search-toggle {
    display: inline-flex !important;
  }

  .mobile-nav-toggle {
    display: flex !important;
  }

  /* Hero Section on Tablets */
  .hero-unified {
    min-height: 500px;
    height: auto;
  }

  .hero-slide-banner {
    min-height: 420px;
  }

  .hero-slide-banner .hero-banner-inner {
    bottom: 52px;
  }

  .hero-slide-banner .hero-banner-floating-pill {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1rem;
    max-width: 90%;
  }

  .hero-seal-showcase {
    display: none !important;
  }

  .hero-tabs-container {
    overflow-x: auto;
    display: flex;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero-tabs-container::-webkit-scrollbar {
    display: none;
  }

  .hero-tab {
    min-width: 140px;
    flex-shrink: 0;
  }

  .hero-right-controls {
    display: none; /* Hide floating side controls to prevent overlay on slide text */
  }

  /* Stats Strip */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2.25rem;
    column-gap: 1.5rem;
  }

  .stat-item:nth-child(2)::after {
    display: none;
  }

  /* Bento Capabilities Grid */
  .about-bento-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Brochure Strip */
  .brochure-preview-card {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Enquiry Section */
  .enquiry-grid {
    grid-template-columns: 1fr;
  }

  .enquiry-sidebar {
    padding: 2.5rem 2rem;
  }

  .enquiry-form-container {
    padding: 2.5rem 2rem;
  }

  /* Products Catalogue Grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* Product Detail Monograph */
  .ref-card-showcase {
    grid-template-columns: 180px 1px 1fr;
    gap: 1.75rem;
    padding: 2.25rem 2rem;
  }

  .ref-col-image {
    display: none;
  }

  .ref-step-card {
    grid-template-columns: 140px 1px 1fr;
  }

  .ref-step-right-box,
  .ref-step-img-box {
    display: none;
  }

  .ref-procurement-card {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ref-procurement-card .ref-col-divider {
    display: none;
  }

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

  /* About Us Page */
  .leadership-grid-minimal,
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .founder-banner-minimal,
  .founder-tribute {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
    padding: 2rem 1.75rem;
  }

  .founder-photo-wrap {
    margin: 0 auto;
  }

  /* Contact Page */
  .contact-details-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .contact-details-grid .contact-card:last-child {
    grid-column: span 2;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   3. TABLETS PORTRAIT & PHABLETS (<= 820px)
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .section {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .portfolio-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .portfolio-header-cta {
    width: 100%;
  }

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

  .catalogue-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .btn-download-catalog {
    width: 100%;
    justify-content: center;
  }

  .catalogue-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   4. LARGE MOBILE & COMPACT TABLETS (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 66px;
    --container-pad: 1.25rem;
  }

  .brand-logo {
    height: 46px;
  }

  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-header {
    margin-bottom: 2rem;
  }

  /* Mobile Drawer Polish */
  .mobile-nav-drawer {
    width: min(88vw, 360px);
    padding: 4.5rem 1.5rem 2rem;
  }

  .mobile-nav-links .nav-link {
    font-size: 1.15rem;
    padding: 0.65rem 0;
  }

  /* Hero Section */
  .hero-unified {
    min-height: 440px;
    padding-bottom: 48px;
  }

  .hero-slide-banner {
    min-height: 340px;
  }

  .hero-slide-banner .hero-banner-inner {
    bottom: 46px;
  }

  .hero-slide-banner .hero-banner-img {
    object-fit: contain;
  }

  .hero-unified-content {
    padding: 2rem 1.25rem 3.5rem;
    text-align: center;
  }

  .hero-unified-tag {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
  }

  .hero-unified-title {
    font-size: clamp(1.75rem, 6vw, 2.35rem);
    line-height: 1.2;
    margin-bottom: 0.85rem;
  }

  .hero-unified-desc {
    font-size: 0.925rem;
    line-height: 1.6;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
  }

  .hero-unified-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }

  .hero-unified-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-tabs-bar {
    height: 48px;
  }

  .hero-tab {
    min-width: 125px;
    padding: 0.35rem 0.5rem;
  }

  .hero-tab .tab-title {
    font-size: 0.75rem;
  }

  .hero-tab .tab-num {
    font-size: 0.6875rem;
  }

  /* Stats Strip */
  .stats-strip {
    padding: 2.25rem 0;
  }

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

  .stat-item {
    padding: 0 0.5rem;
  }

  .stat-item::after {
    display: none !important;
  }

  .stat-value {
    font-size: 2.25rem;
  }

  .stat-label {
    font-size: 0.95rem;
  }

  .stat-sub {
    font-size: 0.8rem;
  }

  /* Featured Products on Mobile */
  .featured-cards-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .featured-product-card {
    max-width: 100%;
  }

  /* Category Filter Pills on Mobile */
  .category-tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .category-tabs {
    flex-wrap: nowrap;
    display: flex;
    gap: 0.5rem;
  }

  .tab-btn {
    flex-shrink: 0;
    padding: 0.5rem 0.85rem;
  }

  /* Products Catalogue Grid */
  .products-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .product-custom-sourcing-banner {
    padding: 2rem 1.5rem;
    text-align: center;
  }

  .sourcing-banner-actions {
    flex-direction: column;
    width: 100%;
  }

  .sourcing-banner-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Product Detail Monograph on Mobile */
  .ref-section-header {
    margin-bottom: 2rem;
  }

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

  .ref-card-showcase {
    grid-template-columns: 1fr;
    padding: 1.75rem 1.25rem;
    gap: 1.5rem;
  }

  .ref-card-showcase .ref-col-divider {
    display: none;
  }

  .ref-col-identifier {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ref-badges-wrap {
    justify-content: center;
  }

  .ref-col-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .btn-ref-primary,
  .btn-ref-wa,
  .btn-ref-call {
    width: 100%;
    justify-content: center;
  }

  .ref-step-card {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.25rem;
    gap: 1.25rem;
  }

  .ref-step-card .ref-col-divider {
    display: none;
  }

  .ref-table-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.85rem 1.15rem;
  }

  .ref-table-key {
    font-size: 0.75rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .ref-table-val {
    font-size: 0.9375rem;
  }

  .related-cards-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
  }

  /* About Page on Mobile */
  .leadership-grid-minimal,
  .partners-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

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

  .pillars-grid {
    grid-template-columns: 1fr;
  }

  /* Contact Page on Mobile */
  .contact-details-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .contact-details-grid .contact-card:last-child {
    grid-column: span 1;
  }

  .contact-card {
    padding: 1.5rem;
  }

  /* Footer on Mobile */
  .footer {
    padding-top: 2.5rem;
  }

  .footer-container {
    padding-bottom: 2rem;
  }

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

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

  .footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  /* Floating WhatsApp Button & Popup */
  .floating-whatsapp-wrap {
    bottom: 18px;
    right: 18px;
  }

  .whatsapp-trigger-btn {
    width: 54px;
    height: 54px;
  }

  .whatsapp-popup {
    width: calc(100vw - 36px);
    max-width: 360px;
    right: 0;
    bottom: 68px;
  }

  /* Quick Enquiry Modal */
  .modal-backdrop {
    padding: 1rem;
  }

  .modal-box {
    width: 100%;
    max-width: 500px;
    max-height: 88vh;
    border-radius: 14px;
  }

  .modal-body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   5. STANDARD SMARTPHONES (<= 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  :root {
    --container-pad: 1rem;
  }

  .brand-logo {
    height: 42px;
  }

  /* Single Column Stats on Standard Mobile */
  .stats-grid {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }

  /* CPHI Banner Floating Pill Responsive Text */
  .hero-slide-banner .hero-banner-floating-pill {
    bottom: 0.65rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100% - 1.25rem);
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    gap: 0.5rem;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .pill-desktop-text {
    display: none !important;
  }

  .pill-mobile-text {
    display: inline !important;
  }

  .banner-pill-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    gap: 0.35rem;
  }

  .banner-pill-btn i {
    width: 12px;
    height: 12px;
  }

  /* Bento Cards */
  .bento-card-heritage,
  .bento-card-clean,
  .bento-card-visual {
    padding: 1.5rem 1.25rem;
  }

  .bento-quote-text {
    font-size: 1.15rem;
  }

  /* Form Elements */
  .enquiry-sidebar {
    padding: 1.75rem 1.25rem;
  }

  .enquiry-form-container {
    padding: 1.75rem 1.25rem;
  }

  .form-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Procurement Partner Rows */
  .procure-partner-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }

  .procure-wa-pill {
    align-self: flex-start;
  }
}

/* --------------------------------------------------------------------------
   6. COMPACT & EXTRA SMALL MOBILES (<= 420px & <= 360px)
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  :root {
    --container-pad: 0.85rem;
  }

  .brand-logo {
    height: 38px;
  }

  .hero-unified-title {
    font-size: 1.65rem;
  }

  .hero-tabs-bar {
    height: 44px;
  }

  .hero-tab {
    min-width: 110px;
    padding: 0.25rem 0.4rem;
  }

  .stat-value {
    font-size: 2rem;
  }

  .f-card-actions {
    flex-direction: column;
    gap: 0.5rem;
  }

  .f-card-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .whatsapp-popup-header {
    padding: 1rem;
  }

  .whatsapp-partner-btn {
    padding: 0.65rem 0.75rem;
  }

  .partner-btn-text h6 {
    font-size: 0.85rem;
  }

  .partner-btn-text span {
    font-size: 0.72rem;
  }
}

@media (max-width: 360px) {
  :root {
    --container-pad: 0.75rem;
  }

  .brand-logo {
    height: 34px;
  }

  .hero-unified-title {
    font-size: 1.5rem;
  }

  .stat-value {
    font-size: 1.75rem;
  }

  .hero-slide-banner .hero-banner-floating-pill {
    padding: 0.25rem 0.4rem 0.25rem 0.6rem;
    font-size: 0.68rem;
  }

  .banner-pill-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
  }
}