/*
 * Mobile Responsiveness Overrides for Knowledge Barbers
 * Added AFTER the Webflow CSS to fix mobile layout issues.
 * Breakpoints match Webflow: 991px (tablet), 767px (mobile landscape), 479px (phone)
 */

/* ==========================================================================
   1. Container horizontal padding on mobile
   The Webflow CSS sets margin-left/right: 0 at 767px with no padding,
   causing edge-to-edge content with no breathing room.
   ========================================================================== */

@media screen and (max-width: 991px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 479px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   2. Team members grid — 2 columns on tablet and phone (not 4)
   The Webflow CSS uses a 4-column grid by default. On tablets (991px) it
   switches to a 2x4 named-area grid but only at 767px. We ensure 2 cols
   on all sub-991px screens.
   ========================================================================== */

@media screen and (max-width: 991px) {
  .team-members {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    grid-template: none !important;
  }
}

/* ==========================================================================
   3. Locations grid — 1 column on mobile
   The .locations grid uses the default w-layout-grid (2 columns).
   Stack to 1 column on phones.
   ========================================================================== */

@media screen and (max-width: 767px) {
  .locations {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template: none !important;
  }
}

/* ==========================================================================
   4. Services grid — 1 column on mobile
   The services-grid uses w-layout-grid (2 columns). Stack on phones.
   ========================================================================== */

@media screen and (max-width: 767px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template: none !important;
  }
}

/* ==========================================================================
   5. Contact form grid — stack vertically on mobile
   Already partially handled by Webflow at 991px, but reinforce at 767px.
   ========================================================================== */

@media screen and (max-width: 767px) {
  .contact-form-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template: none !important;
    grid-row-gap: 30px;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   6. Team-pic images — scale properly, no overflow
   ========================================================================== */

.team-pic {
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .team-pic {
    height: 220px;
    min-height: 180px;
  }
}

@media screen and (max-width: 479px) {
  .team-pic {
    height: 180px;
    min-height: 140px;
  }

  /* Location cards need slightly more height */
  .team-pic.mt-pleasant,
  .team-pic.commerecial-dr {
    height: 200px;
  }
}

/* ==========================================================================
   7. Section padding on mobile
   ========================================================================== */

@media screen and (max-width: 767px) {
  .section {
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media screen and (max-width: 479px) {
  .section {
    margin-top: 4px;
  }
}

/* ==========================================================================
   8. Navigation — logo centered on mobile with proper padding
   ========================================================================== */

@media screen and (max-width: 767px) {
  .navigation {
    padding: 16px 16px;
  }

  .navigation-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo-link,
  .logo-link.w--current {
    display: flex;
    justify-content: center;
  }

  .logo-image {
    max-width: 120px;
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  .navigation {
    padding: 12px 12px;
  }

  .logo-image {
    max-width: 100px;
  }
}

/* ==========================================================================
   9. Slider / carousel images — responsive height
   ========================================================================== */

@media screen and (max-width: 767px) {
  .slider-3 {
    height: 280px;
  }

  .w-slider-mask {
    height: 100%;
  }

  .slide-15,
  .slide-16,
  .slide-17,
  .slide-18,
  .slide-19,
  .slide-20 {
    background-size: cover;
    background-position: center;
  }
}

@media screen and (max-width: 479px) {
  .slider-3 {
    height: 220px;
  }
}

/* ==========================================================================
   10. Services-wrap cards — proper padding, no cut-off
   ========================================================================== */

@media screen and (max-width: 767px) {
  .services-wrap {
    padding: 24px 16px;
    height: auto !important;
    min-height: 0;
  }
}

@media screen and (max-width: 479px) {
  .services-wrap {
    padding: 20px 14px;
  }
}

/* ==========================================================================
   Additional: Prevent horizontal overflow on the body
   ========================================================================== */

html, body {
  overflow-x: hidden;
}

/* Ensure the footer container has padding too */
@media screen and (max-width: 767px) {
  .container-8 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .footer-wrap {
    padding: 10px 0;
  }
}

/* Section heading wrap — add some bottom margin on mobile */
@media screen and (max-width: 767px) {
  .section-heading-wrap {
    margin-bottom: 16px;
  }
}

/* Book Now button — full width on mobile */
@media screen and (max-width: 479px) {
  .button-2.w-button {
    width: 100%;
    text-align: center;
  }
}