/* ============================================
   MOBILE OPTIMIZATIONS FOR HESHAMINCHINA
   Target: Mobile devices (sm breakpoint and below: ≤640px)
   Desktop layouts remain completely unchanged
   ============================================ */

/* ============ MOBILE: Hero Component ============ */
@media (max-width: 640px) {
  /* Reduce hero height to minimize scrolling */
  section[id="hero"] {
    min-height: 70vh !important;
    height: 70vh !important;
  }

  /* Optimize hero content spacing */
  section[id="hero"] .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Reduce hero heading sizes */
  section[id="hero"] h1 {
    font-size: 2rem !important; /* Down from 3rem+ */
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  section[id="hero"] p {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Adjust hero button spacing */
  section[id="hero"] button,
  section[id="hero"] a[class*="button"],
  section[id="hero"] a[class*="btn"] {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
  }
}

/* ============ MOBILE: Service Pages Hero ============ */
@media (max-width: 640px) {
  /* Reduce service page hero heights */
  section[class*="h-screen"],
  section[class*="h-\[70vh\]"],
  section[class*="h-\[100vh\]"] {
    min-height: 60vh !important;
    height: 60vh !important;
  }

  /* Optimize service hero headings */
  section[class*="h-screen"] h1,
  section[class*="h-\[70vh\]"] h1 {
    font-size: 1.875rem !important; /* 30px */
    line-height: 1.25 !important;
  }

  section[class*="h-screen"] p,
  section[class*="h-\[70vh\]"] p {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.5 !important;
  }
}

/* ============ MOBILE: Services Grid ============ */
@media (max-width: 640px) {
  /* Ensure proper service card spacing */
  div[class*="grid"][class*="grid-cols-2"] {
    gap: 1rem !important;
  }

  /* Optimize service card images */
  div[class*="grid"][class*="grid-cols-2"] img {
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
  }

  /* Service card text sizing */
  div[class*="grid"][class*="grid-cols-2"] h3 {
    font-size: 1rem !important;
  }

  div[class*="grid"][class*="grid-cols-2"] p {
    font-size: 0.8125rem !important; /* 13px */
  }
}

/* ============ MOBILE: Blog Grid ============ */
@media (max-width: 640px) {
  /* Blog grid should stack on mobile */
  div[class*="grid"][class*="lg:grid-cols-3"] {
    gap: 1.25rem !important;
  }

  /* Blog card image heights */
  div[class*="grid"][class*="lg:grid-cols-3"] img {
    max-height: 180px !important;
    object-fit: cover !important;
  }

  /* Blog card content */
  div[class*="grid"][class*="lg:grid-cols-3"] h3 {
    font-size: 1.125rem !important;
  }

  div[class*="grid"][class*="lg:grid-cols-3"] p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }
}

/* ============ MOBILE: Destinations Grid ============ */
@media (max-width: 640px) {
  /* Optimize city card layout */
  div[class*="grid"][class*="md:grid-cols-2"] {
    gap: 1rem !important;
  }

  /* City card images */
  div[class*="grid"][class*="md:grid-cols-2"] img {
    max-height: 140px !important;
    object-fit: cover !important;
  }
}

/* ============ MOBILE: Navigation ============ */
@media (max-width: 640px) {
  /* Navbar adjustments */
  nav {
    padding: 0.75rem 1rem !important;
  }

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

  /* Mobile menu spacing */
  nav div[class*="md:hidden"] {
    padding: 1rem !important;
  }

  nav div[class*="md:hidden"] a {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
  }
}

/* ============ MOBILE: Footer ============ */
@media (max-width: 640px) {
  footer {
    padding: 2rem 1.5rem !important;
  }

  footer h3 {
    font-size: 1.125rem !important;
    margin-bottom: 0.75rem !important;
  }

  footer p,
  footer a,
  footer li {
    font-size: 0.875rem !important;
  }

  /* Footer social icons */
  footer a[aria-label] {
    padding: 0.5rem !important;
  }
}

/* ============ MOBILE: Section Spacing ============ */
@media (max-width: 640px) {
  /* Reduce section padding to minimize scrolling */
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  section:first-of-type {
    padding-top: 1rem !important;
  }

  /* Container padding */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Section headings */
  section h2 {
    font-size: 1.5rem !important;
    margin-bottom: 1.25rem !important;
  }

  section h3 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }
}

/* ============ MOBILE: Touch Targets ============ */
@media (max-width: 640px) {
  /* Ensure all interactive elements meet WCAG AA (44x44px minimum) */
  button,
  a[class*="button"],
  a[class*="btn"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem 1rem !important;
  }

  /* Icon-only buttons */
  button:not(:has(span)):not(:has(p)),
  a[class*="p-2"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.75rem !important;
  }
}

/* ============ MOBILE: Typography ============ */
@media (max-width: 640px) {
  /* Global font size adjustments */
  html {
    font-size: 16px !important; /* Base size, never smaller */
  }

  body {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.6 !important;
  }

  /* Heading hierarchy */
  h1 {
    font-size: 1.875rem !important; /* 30px */
    line-height: 1.25 !important;
  }

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

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

  h4 {
    font-size: 1.125rem !important; /* 18px */
  }

  /* Paragraph spacing */
  p {
    margin-bottom: 1rem !important;
  }

  p:last-child {
    margin-bottom: 0 !important;
  }
}

/* ============ MOBILE: Images ============ */
@media (max-width: 640px) {
  /* Ensure images are responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Cover images in hero sections */
  section img[class*="absolute"][class*="inset-0"] {
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Card images */
  div[class*="aspect-"] img,
  div[class*="h-"] img {
    object-fit: cover !important;
  }
}

/* ============ MOBILE: Modal/Overlay Optimization ============ */
@media (max-width: 640px) {
  /* Modal dialogs */
  div[role="dialog"],
  div[class*="fixed"][class*="inset-0"] {
    padding: 1rem !important;
  }

  div[role="dialog"] > div {
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  /* Modal content */
  div[role="dialog"] h2 {
    font-size: 1.375rem !important;
  }

  div[role="dialog"] p {
    font-size: 0.9375rem !important;
  }
}

/* ============ MOBILE: Form Elements ============ */
@media (max-width: 640px) {
  /* Input fields */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 0.75rem !important;
    min-height: 44px !important;
  }

  /* Labels */
  label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* ============ MOBILE: Specific Component Fixes ============ */
@media (max-width: 640px) {
  /* About section profile image */
  section img[src*="Main Photo"] {
    max-width: 200px !important;
    margin: 0 auto 1.5rem !important;
  }

  /* Testimonial cards */
  div[class*="testimonial"] {
    padding: 1.25rem !important;
  }

  div[class*="testimonial"] img {
    width: 48px !important;
    height: 48px !important;
  }

  /* Feature lists */
  ul[class*="space-y"],
  ol[class*="space-y"] {
    gap: 0.75rem !important;
  }

  ul li,
  ol li {
    font-size: 0.9375rem !important;
    padding: 0.5rem 0 !important;
  }
}

/* ============ EXTRA SMALL DEVICES (≤375px) ============ */
@media (max-width: 375px) {
  /* Further reduce spacing on very small screens */
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero height */
  section[id="hero"] {
    min-height: 65vh !important;
    height: 65vh !important;
  }

  /* Service page heroes */
  section[class*="h-screen"],
  section[class*="h-\[70vh\]"] {
    min-height: 55vh !important;
    height: 55vh !important;
  }

  /* Reduce heading sizes further */
  h1 {
    font-size: 1.625rem !important; /* 26px */
  }

  h2 {
    font-size: 1.375rem !important; /* 22px */
  }

  /* Service cards - ensure single column on very small screens */
  div[class*="grid"][class*="grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============ LANDSCAPE ORIENTATION ============ */
@media (max-width: 640px) and (orientation: landscape) {
  /* Reduce hero heights in landscape mode */
  section[id="hero"],
  section[class*="h-screen"],
  section[class*="h-\[70vh\]"] {
    min-height: 80vh !important;
    height: 80vh !important;
  }

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

/* ============ PERFORMANCE: Reduce Animations on Mobile ============ */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  /* Keep smooth scrolling but reduce complex animations */
  * {
    transition-duration: 0.2s !important;
  }

  /* Image transitions */
  img {
    transition-duration: 0.3s !important;
  }
}

/* ============ ACCESSIBILITY: High Contrast Mode ============ */
@media (max-width: 640px) and (prefers-contrast: high) {
  /* Ensure sufficient contrast on mobile */
  button,
  a {
    border-width: 2px !important;
  }

  /* Text contrast */
  p, li, span {
    color: #000 !important;
  }

  h1, h2, h3, h4 {
    color: #000 !important;
    font-weight: 700 !important;
  }
}