/* ============================================================
   mobile-fix.css  –  Phone optimization for Abhinav Institute
   Injected on top of existing JD Omni styles
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ── Viewport fix (site was locked as "desktop") ──────────── */
@media (max-width: 768px) {

  /* Force full-width layout */
  .container, .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  /* ── Navbar / Header ─────────────────────────────────────── */
  .navbar, .navbar-default, header, .header-section {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
  }

  .navbar-brand, .logo-holder img {
    max-height: 48px !important;
    width: auto !important;
  }

  /* Hamburger menu – ensure it shows */
  .navbar-toggle {
    display: block !important;
    margin-top: 10px !important;
  }

  /* Collapse nav links on mobile */
  .navbar-collapse {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  .navbar-nav > li > a {
    font-size: 15px !important;
    padding: 12px 16px !important;
  }

  /* ── Hero / Banner Section ───────────────────────────────── */
  .coverImageMiddleHeader,
  .banner-section,
  [class*="banner"],
  [class*="hero"],
  [class*="cover"] {
    min-height: 220px !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .coverImageMiddleHeader .company-name,
  .coverImageMiddleHeader h1,
  .coverImageMiddleHeader .title {
    font-size: clamp(16px, 5vw, 28px) !important;
    line-height: 1.3 !important;
    padding: 8px 12px !important;
    word-break: break-word !important;
  }

  /* ── Grid Columns – Force Single Column ──────────────────── */
  [class*="col-md-"],
  [class*="col-sm-"],
  [class*="col-lg-"] {
    width: 100% !important;
    float: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Keep xs-6 for 2-column grids like "Why Us" cards */
  .col-xs-6  { width: 50% !important; }
  .col-xs-4  { width: 33.333% !important; }
  .col-xs-8  { width: 66.666% !important; }
  .col-xs-12 { width: 100% !important; }

  /* ── Sections Padding ────────────────────────────────────── */
  .bootstrap-iso,
  [class*="template-"],
  .services,
  .gallery,
  .notification {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* ── Typography – Scale Down ─────────────────────────────── */
  .main-header, .font-size-40 {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  .sub-header, .font-size-24 {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  .font-size-20 { font-size: 16px !important; }
  .font-size-18 { font-size: 15px !important; }
  .font-size-16 { font-size: 14px !important; }

  /* ── Services Section ────────────────────────────────────── */
  .services .col-md-4,
  .services .col-md-3,
  .service-card,
  [class*="service"] .col-md-4 {
    width: 100% !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  .services img,
  .service-card img {
    max-width: 140px !important;
    max-height: 140px !important;
    margin: 0 auto 10px !important;
    display: block !important;
    border-radius: 12px !important;
  }

  /* ── About Us / Template 42 ──────────────────────────────── */
  .template-42 .responsive-row {
    display: flex !important;
    flex-direction: column !important;
  }

  .template-42 img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  /* ── Why Us Cards / Template 57 ─────────────────────────── */
  .template-57 .clearfix.border-radius {
    margin-bottom: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .template-57 .col-xs-4 img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
  }

  .template-57 .col-xs-8 {
    font-size: 15px !important;
  }

  /* ── Gallery ─────────────────────────────────────────────── */
  .gallery-block,
  [class*="gallery"] .col-md-4,
  [class*="gallery"] .col-md-3 {
    width: 50% !important;
    float: left !important;
    padding: 4px !important;
  }

  [class*="gallery"] img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* ── Notification / Contact Bar ──────────────────────────── */
  .notification .notification-container {
    flex-direction: column !important;
  }

  .notification .col-md-4.img-holder {
    width: 100% !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 12px !important;
    text-align: center !important;
  }

  .notification .col-md-8.contact-holder {
    width: 100% !important;
    border-radius: 0 0 8px 8px !important;
    padding: 16px !important;
  }

  .notification .contact-mob a,
  .notification .contact-mail {
    font-size: 15px !important;
    word-break: break-all !important;
  }

  /* Phone & email links – bigger tap targets */
  a[href^="tel"], a[href^="mailto"] {
    display: inline-block !important;
    padding: 8px 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn, .block-btn, .link-button, [class*="btn"] {
    width: auto !important;
    min-width: 120px !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    touch-action: manipulation !important;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  footer, .footer, [class*="footer"] {
    padding: 20px 12px !important;
    text-align: center !important;
  }

  footer [class*="col-md-"],
  [class*="footer"] [class*="col-md-"] {
    width: 100% !important;
    margin-bottom: 16px !important;
    text-align: center !important;
  }

  /* ── Map / Embed ─────────────────────────────────────────── */
  iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;
  }

  /* ── Images – General ────────────────────────────────────── */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Slick Slider / Carousel ─────────────────────────────── */
  .slick-dots li button {
    width: 8px !important;
    height: 8px !important;
  }

  .slick-prev, .slick-next {
    width: 32px !important;
    height: 32px !important;
  }

  /* ── Sticky Call Button (bonus!) ─────────────────────────── */
  .mobile-call-btn {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

/* ── Small phones (< 400px) ───────────────────────────────── */
@media (max-width: 400px) {
  .main-header, .font-size-40 { font-size: 20px !important; }
  .sub-header, .font-size-24  { font-size: 13px !important; }
  .font-size-20               { font-size: 14px !important; }

  [class*="gallery"] .col-md-4,
  [class*="gallery"] .col-md-3 {
    width: 100% !important;
  }
}