/* ============================================
   g3-responsive.css
   Mobile-first responsive overrides para mecanicag3.com
   NO modifica CSS originales — solo sobreescribe.
   ============================================ */

/* ---- Touch Targets Mínimos (44px) ---- */
.site-button,
.site-button-secondry,
.button-skew,
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Meet & Ask: scroll parallax effect ---- */
.meet-ask-outer {
  overflow: hidden;
}
.meet-ask-row {
  min-height: 100px;
  position: relative;
}
.meet-ask-row:after {
  transform: skewX(35deg) translateX(var(--meet-tx, -800px)) !important;
  will-change: transform;
}

/* ---- Mapa de Contacto Responsive ---- */
.mapouter,
.gmap_canvas,
.gmap_canvas iframe,
.contact-map iframe {
  width: 100% !important;
  max-width: 100%;
  height: 450px;
}

/* ============================================
   MOBILE SMALL (max-width: 576px)
   ============================================ */
@media only screen and (max-width: 576px) {

  /* Tipografía */
  h1, .h1 { font-size: 1.75rem; line-height: 1.3; }
  h2, .h2 { font-size: 1.5rem; line-height: 1.3; }
  h3, .h3 { font-size: 1.25rem; }
  .dlab-bnr-inr-entry h1 { font-size: 1.5rem; }

  /* Coming soon */
  .coming-soon-content h2 {
    font-size: 1.5rem;
    letter-spacing: 2px;
    line-height: 1.4;
  }
  .countdown .date { min-width: 65px; }
  .countdown .date .time { font-size: 26px; }

  /* Galería 2 columnas */
  .dlab-gallery-listing .card-container {
    width: 50% !important;
  }

  /* Team cards 1 columna */
  .dlab-team1 {
    margin-bottom: 20px;
  }

  /* Client logos */
  .client-logo .owl-item img {
    max-width: 100px;
    height: auto;
    margin: 0 auto;
  }

  /* Pricing tables padding */
  .pricingtable-wrapper {
    margin-bottom: 20px;
  }

  /* Sections padding reducido */
  .content-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .content-inner-1 {
    padding-top: 40px;
    padding-bottom: 20px;
  }

  /* Blog carousel */
  .blog-post .dlab-post-meta ul li {
    font-size: 12px;
  }
}

/* ============================================
   TABLET (max-width: 768px)
   ============================================ */
@media only screen and (max-width: 768px) {

  /* Mapa más bajo en mobile */
  .mapouter,
  .gmap_canvas,
  .gmap_canvas iframe,
  .contact-map iframe {
    height: 300px;
  }

  /* Footer stacking */
  .footer-col-4 {
    margin-bottom: 25px;
  }
  .footer-bottom .row {
    text-align: center;
  }
  .footer-bottom .row > div {
    text-align: center !important;
    margin-bottom: 10px;
  }

  /* Newsletter centrado */
  .dlab-newsletter .row {
    text-align: center;
  }
  .dlab-newsletter .icon-bx-wraper {
    text-align: center;
    margin-bottom: 15px;
  }
  .dlab-newsletter .icon-bx-wraper .icon-lg {
    margin: 0 auto 10px;
  }
  .skew-subscribe {
    text-align: center;
  }

  /* Sidebar full-width */
  .content-area .col-lg-9,
  .content-area .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================
   TABLET/DESKTOP (max-width: 991px)
   ============================================ */
@media only screen and (max-width: 991px) {

  /* Header nav mobile */
  .header-nav .nav > li > a {
    padding: 12px 15px;
    min-height: 44px;
  }
  .navbar-toggler span {
    height: 3px;
    margin: 5px 0;
  }
  .header-nav .nav > li .sub-menu {
    box-shadow: none;
  }
  .logo-header img {
    max-width: 200px;
    height: auto;
  }

  /* Meet & Ask: hide on mobile (no content, only decorative strip) */
  .meet-ask-outer {
    display: none;
  }

  /* Pricing tables stack */
  .pricingtable-wrapper .pricingtable-inner {
    display: flex;
    flex-direction: column;
  }
  .pricingtable-wrapper .pricingtable-thumb,
  .pricingtable-wrapper .pricingtable-details,
  .pricingtable-wrapper .pricingtable-content {
    width: 100%;
    float: none;
  }
  .pricingtable-wrapper .pricingtable-thumb img {
    height: auto;
    max-height: 250px;
    object-fit: cover;
    width: 100%;
  }
  .pricingtable-wrapper .pricingtable-content {
    padding: 15px;
  }
}