/**
 * Vennely Mobile-First Responsive Styles
 * 100% Mobile Friendly Design System
 */

/* ===== BASE RESET ===== */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== MOBILE-FIRST TYPOGRAPHY ===== */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem !important; /* 32px */
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 1.75rem !important; /* 28px */
    line-height: 1.25 !important;
  }

  h3 {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.3 !important;
  }

  h4 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
  }

  p, div, span {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.6 !important;
  }
}

/* ===== MOBILE SPACING ===== */
@media (max-width: 768px) {
  /* Reduce padding on mobile */
  section, div[style*="padding"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Reduce vertical spacing */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ===== MOBILE IMAGES ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  img {
    border-radius: 0.5rem !important;
  }
}

/* ===== MOBILE GRIDS ===== */
@media (max-width: 768px) {
  /* Force single column on mobile */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }

  div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* ===== MOBILE BUTTONS ===== */
@media (max-width: 768px) {
  button, a[style*="padding"] {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
    min-height: 44px; /* iOS touch target */
    width: auto;
    display: inline-block;
  }
}

/* ===== MOBILE FORMS ===== */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 0.875rem !important;
    min-height: 44px;
    width: 100% !important;
  }

  textarea {
    min-height: 120px !important;
  }
}

/* ===== MOBILE CARDS ===== */
@media (max-width: 768px) {
  div[style*="border-radius"],
  div[style*="box-shadow"] {
    border-radius: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
}

/* ===== MOBILE MAX-WIDTHS ===== */
@media (max-width: 768px) {
  div[style*="maxWidth"],
  div[style*="max-width"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ===== MOBILE CONTAINERS ===== */
@media (max-width: 768px) {
  /* Hero sections */
  div[style*="minHeight"][style*="600px"],
  div[style*="minHeight"][style*="700px"],
  div[style*="min-height"][style*="600px"],
  div[style*="min-height"][style*="700px"] {
    min-height: 400px !important;
    padding: 2rem 1rem !important;
  }
}

/* ===== MOBILE GALLERY ===== */
@media (max-width: 768px) {
  /* Gallery grids */
  div[style*="grid-template-columns"][style*="repeat"] {
    grid-template-columns: 1fr !important;
  }

  /* Gallery images */
  div[style*="height: 300px"],
  div[style*="height: 280px"] {
    height: 220px !important;
  }
}

/* ===== MOBILE NAVIGATION ===== */
@media (max-width: 768px) {
  nav {
    padding: 0.75rem 1rem !important;
  }

  nav a, nav button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* ===== MOBILE FOOTER ===== */
@media (max-width: 768px) {
  footer {
    padding: 2rem 1rem !important;
  }

  footer div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ===== MOBILE STAFF CARDS ===== */
@media (max-width: 768px) {
  /* Staff widget */
  div[style*="gridTemplateColumns"][style*="minmax"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== MOBILE CONTACT CARDS ===== */
@media (max-width: 768px) {
  /* Contact info cards */
  div[style*="grid-template-columns"][style*="auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== MOBILE TEXT ALIGNMENT ===== */
@media (max-width: 768px) {
  div[style*="textAlign: center"],
  div[style*="text-align: center"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ===== MOBILE ANIMATIONS (REDUCE MOTION) ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== MOBILE SHADOWS ===== */
@media (max-width: 768px) {
  div[style*="box-shadow"] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ===== MOBILE SCROLL INDICATOR ===== */
@media (max-width: 768px) {
  /* Hero scroll indicator */
  div[style*="animation: bounce"] svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ===== TABLET OVERRIDES ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  h1 {
    font-size: 2.5rem !important;
  }

  h2 {
    font-size: 2rem !important;
  }

  section {
    padding: 3rem 2rem !important;
  }

  div[style*="grid-template-columns"][style*="repeat"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===== TOUCH IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for mobile */
  button, a, input[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Remove hover effects on touch devices */
  *:hover {
    /* Hover states won't trigger on touch */
  }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce hero height in landscape */
  div[style*="minHeight"][style*="400px"],
  div[style*="min-height"][style*="400px"] {
    min-height: 300px !important;
  }
}

/* ===== MOBILE UTILITY CLASSES ===== */
.mobile-hidden {
  @media (max-width: 768px) {
    display: none !important;
  }
}

.desktop-hidden {
  @media (min-width: 769px) {
    display: none !important;
  }
}

.mobile-full-width {
  @media (max-width: 768px) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

.mobile-center {
  @media (max-width: 768px) {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===== PREVENT HORIZONTAL SCROLL ===== */
body, html {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ===== FIX IOS SAFE AREAS ===== */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ===== MOBILE PERFORMANCE ===== */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile */
  * {
    will-change: auto !important;
  }

  /* Optimize images */
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}