/* ================================================================
   GIG ECONOMY LANE — Mobile Responsive Stylesheet
   Loaded on every page; complements Tailwind utility classes.
   ================================================================ */

/* ---- Prevent horizontal scroll everywhere ---- */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---- Typography: scale down display-lg (48px) on mobile ---- */
@media (max-width: 767px) {
  .text-display-lg,
  .font-display-lg.text-display-lg {
    font-size: 28px !important;
    line-height: 36px !important;
    letter-spacing: -0.01em !important;
  }
  h1.text-display-lg,
  h1.font-display-lg {
    font-size: 28px !important;
    line-height: 36px !important;
  }
}

/* ---- Section padding: reduce on mobile ---- */
@media (max-width: 767px) {
  .py-section-padding {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  /* Keep CTA sections breathing on mobile */
  section.py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  section.py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

/* ================================================================
   MOBILE NAV DRAWER
   ================================================================ */
#gel-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
}
#gel-mobile-nav.open { display: block; }

#gel-nav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 46, 38, 0.55);
  backdrop-filter: blur(2px);
}

#gel-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 88vw);
  height: 100%;
  background: #f9f9f7;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#gel-mobile-nav.open #gel-nav-panel {
  transform: translateX(0);
}

#gel-nav-panel .gel-nav-link {
  display: block;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  color: #4e4633;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
#gel-nav-panel .gel-nav-link:hover,
#gel-nav-panel .gel-nav-link.active {
  background: #eeeeec;
  color: #755b00;
}
#gel-nav-panel .gel-nav-link.active {
  font-weight: 700;
}

#gel-nav-panel .gel-nav-cta {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  text-align: center;
  background: #1A4D2E;
  color: #ffffff;
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
#gel-nav-panel .gel-nav-cta:hover { opacity: 0.9; }

/* ================================================================
   HOME PAGE FIXES
   ================================================================ */
@media (max-width: 767px) {
  /* Pillar cards: reduce large padding */
  .pillar-card-p10 { padding: 1.5rem !important; }

  /* Hero image: reasonable aspect ratio on mobile */
  .hero-img-wrap { aspect-ratio: 16/10 !important; }

  /* Hero CTA button: full-width stack on tiny screens */
  .hero-cta-wrap { flex-direction: column !important; }
  .hero-cta-wrap > * { width: 100%; justify-content: center; }

  /* Contact CTA button: no fixed min-width */
  .cta-btn-minw { min-width: unset !important; width: 100% !important; }

  /* Process step large numbers: keep but don't overflow */
  .step-num-bg {
    font-size: 3.5rem !important;
    position: static !important;
    margin-bottom: -0.5rem;
    display: block;
    overflow: hidden;
  }

  /* "How We Work" teaser section inside home: align link CTA left */
  .process-cta-wrap { text-align: left !important; }
}

/* ================================================================
   HOW WE WORK PAGE FIXES
   ================================================================ */
@media (max-width: 767px) {
  /* Hide the vertical connector line on mobile — steps already stack */
  .process-line::before { display: none !important; }

  /* Reduce giant step spacing */
  .process-line { row-gap: 2.5rem !important; }
  .process-line > * + * { margin-top: 0 !important; }

  /* Step text: always left-align on mobile */
  .process-step-text { text-align: left !important; }

  /* Reduce space-y-24 (6rem) to something tighter */
  .space-y-24 { row-gap: 3rem !important; }
}

/* ================================================================
   ABOUT PAGE FIXES
   ================================================================ */
@media (max-width: 1023px) {
  /* Founder image: fluid on tablet/mobile, never overflow */
  .founder-img-box {
    width: 100% !important;
    max-width: 360px !important;
  }
}

/* ================================================================
   CLIENTS PAGE FIXES
   ================================================================ */
@media (max-width: 767px) {
  /* Intro staggered images: remove top offset on mobile */
  .clients-img-offset { margin-top: 0 !important; }
}

/* ================================================================
   CONTACT PAGE FIXES
   ================================================================ */
@media (max-width: 767px) {
  /* LinkedIn long URL: allow wrapping */
  .contact-link-wrap { word-break: break-all; }
}

/* ================================================================
   FLOATING WHATSAPP BUTTON
   ================================================================ */
#whatsapp-float-btn {
  /* safe-area-inset keeps it above home indicators on iOS */
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
  right: 1rem !important;
  width: 52px !important;
  height: 52px !important;
}
@media (min-width: 768px) {
  #whatsapp-float-btn {
    bottom: 2rem !important;
    right: 2rem !important;
    width: 60px !important;
    height: 60px !important;
  }
}

/* ================================================================
   GENERAL CARD & BUTTON TWEAKS
   ================================================================ */
@media (max-width: 480px) {
  /* Ensure buttons never overflow narrow screens */
  .rounded-full.px-8,
  .rounded-full.px-10 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Bento large card min-height: relax on small screens */
  .min-h-\[350px\] { min-height: unset !important; }
}

/* ================================================================
   FOOTER TWEAKS
   ================================================================ */
@media (max-width: 767px) {
  /* Ensure footer grid always single-column */
  footer .md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  footer img { max-width: 120px !important; }
}

/* ================================================================
   CLIENT LOGO STRIP — HOMEPAGE
   ================================================================ */
/* Logos must never be greyed out or invisible */
.logo-strip img,
.client-logo img {
  max-height: 52px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  /* Logo strip wraps to 2 columns on mobile */
  .logo-strip-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    justify-items: center;
    align-items: center;
  }
}

/* ================================================================
   HERO — MOBILE TEXT SCALE
   ================================================================ */
@media (max-width: 390px) {
  h1.text-display-lg,
  .hero-gradient h1 {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}