/* ============================================
   COMPLETE MOBILE RESPONSIVE CSS
   ============================================ */

/* ============================================
   EXTRA SMALL DEVICES (Phones, less than 576px)
   ============================================ */
@media (max-width: 575px) {
  /* Button Fix - Keep all buttons on single line */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-primary-hero,
  .btn-secondary-hero,
  .btn-cta-white,
  .btn-cta-outline,
  .cta-button,
  .service-link,
  .video-cta-link-ss2,
  .cta-button-spw3,
  .form-submit-btn,
  a[class*="btn"],
  a[class*="cta"] {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(0.7rem, 2.5vw, 0.95rem) !important;
    padding-left: clamp(0.5rem, 2vw, 1rem) !important;
    padding-right: clamp(0.5rem, 2vw, 1rem) !important;
  }
  
  /* Keep FAQ buttons normal */
  .faq-question {
    white-space: normal !important;
    font-size: 1rem !important;
    padding: 1.25rem 1rem !important;
  }

  /* Extra small adjustments */
  .card-enhanced {
    padding: 1rem !important;
  }
  
  .form-label {
    font-size: 0.65rem !important;
  }
  
  .form-input {
    font-size: 0.875rem !important;
  }
  
  /* Hero buttons - KEEP SIDE BY SIDE */
  .gradient-primary .flex {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }
  
  .gradient-primary a {
    flex: 1 1 48% !important;
    max-width: 48% !important;
    min-width: 140px !important;
    padding: 0.75rem 0.5rem !important;
    font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ============================================
   SMALL DEVICES (Phones, 576px to 768px)
   ============================================ */
@media (min-width: 576px) and (max-width: 768px) {
  /* ---------------- HERO SECTION ---------------- */
  .gradient-primary {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
    min-height: 350px !important;
  }

  .gradient-primary h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .gradient-primary p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Keep buttons side by side */
  .gradient-primary .flex {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .gradient-primary a {
    flex: 1 1 48% !important;
    max-width: 35% !important;
    justify-content: center !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
  }

  /* ---------------- CARDS ---------------- */
  .card {
    padding: 1rem !important;
  }

  .card .pl-16 {
    padding-left: 0 !important;
    gap: 3px;
  }

  .card h3 {
    font-size: 1.05rem !important;
  }

  .card p,
  .card a {
    font-size: 0.95rem !important;
  }

  .card .w-20 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  .card-enhanced {
    min-height: auto !important;
    padding: 1.25rem !important;
  }
  
  .match-height {
    min-height: auto !important;
  }

  /* Stack contact info cards */
  .container > .grid-cols-1.md\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  /* ---------------- FORM ---------------- */
  #contact-form {
    gap: 1rem !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Stack form fields vertically */
  #contact-form .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  #contact-form input,
  #contact-form select,
  #contact-form textarea {
    padding: 0.7rem 0.9rem !important;
    font-size: 0.95rem !important;
  }

  .form-input {
    padding: 0.625rem 0.875rem !important;
  }

  #contact-form textarea,
  textarea.form-input {
    min-height: 110px !important;
  }

  #contact-form select {
    height: 48px !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    padding-right: 2.5rem !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    background-position: right 0.75rem center !important;
  }

  /* Adjust form title */
  .card-enhanced h2 {
    font-size: 1.5rem !important;
  }

  /* ---------------- RIGHT COLUMN FIX ---------------- */
  .lg\\:col-span-2 .pl-16 {
    padding-left: 0 !important;
  }

  .lg\\:col-span-2 .flex {
    align-items: center !important;
  }

  .lg\\:col-span-2 .flex.gap-4 {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .lg\\:col-span-2 a {
    width: 48px !important;
    height: 48px !important;
  }

  /* Adjust social media icons */
  .match-height .w-11 {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  .fab {
    font-size: 1rem !important;
  }

  /* ---------------- MAP FIX ---------------- */
  .section .card {
    padding: 1rem !important;
  }

  .section iframe {
    width: 100% !important;
    height: 260px !important;
    display: block !important;
  }

  .section .rounded-lg.overflow-hidden {
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .map-wrapper {
    width: 100% !important;
    height: 260px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }

  .map-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .map-card {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .map-card .map-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Adjust map height */
  .h-44 {
    height: 220px !important;
  }
}

/* ============================================
   IPAD MINI (768px to 820px)
   2-column layout: Left (Form + Office) | Right (Hours, Map, Social)
   ============================================ */
@media (min-width: 768px) and (max-width: 820px) {
  /* Keep full width container */
  .bg-gray-50 > .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* NEW: 2-column layout - narrower left, wider right */
  .lg\\:grid-cols-3 {
    grid-template-columns: 0.9fr 1.8fr !important;
    gap: 1rem !important;
  }
  
  /* Left column: Form + Office card stacked */
  .lg\\:grid-cols-3 > .lg\\:col-span-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .lg\\:col-span-2 {
    grid-column: span 1 !important;
  }
  
  /* Show 2 cards per row in the right section */
  .lg\\:col-span-2 > .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.875rem !important;
  }
  
  /* Compact form card - narrower */
  .card-enhanced {
    min-height: auto !important;
    padding: 0.75rem !important;
  }
  
  /* Compact card padding */
  .card {
    padding: 0.75rem !important;
  }
  
  /* Optimize form inputs - VERY COMPACT */
  #contact-form {
    gap: 0.45rem !important;
  }
  
  #contact-form input,
  #contact-form select {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.55rem !important;
    height: 30px !important;
    max-width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
  }
  
  #contact-form textarea {
    font-size: 0.75rem !important;
    padding: 0.45rem 0.6rem !important;
    min-height: 75px !important;
    max-width: 100% !important;
  }
  
  /* Reduce input field width */
  .form-input {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.7rem !important;
  }
  
  /* Make form container narrower */
  #contact-form > div {
    width: 100% !important;
  }
  
  /* Grid layout for name/email fields - KEEP SIDE BY SIDE */
  #contact-form .grid-cols-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
  }
  
  /* Compact form title */
  .card-enhanced h2 {
    font-size: 1rem !important;
    margin-bottom: 0.45rem !important;
  }
  
  /* Compact form labels */
  .form-label {
    font-size: 0.65rem !important;
    margin-bottom: 0.12rem !important;
  }
  
  /* Compact submit button */
  #contact-form button[type="submit"] {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.75rem !important;
    margin-top: 0.2rem !important;
  }
  
  /* Compact card titles */
  .card h3 {
    font-size: 0.9rem !important;
  }
  
  .card p,
  .card a {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  
  /* Reduce icon sizes */
  .card .w-20 {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
  
  /* Social media icons */
  .match-height .w-11 {
    width: 1.85rem !important;
    height: 1.85rem !important;
  }
  
  /* Map adjustments - wider now */
  .map-wrapper {
    height: 200px !important;
  }
  
  /* Office card - make it compact */
  .card:has(.w-20) {
    padding: 0.75rem !important;
  }
  
  /* Adjust spacing in office card */
  .card .space-y-1 {
    gap: 0.25rem !important;
  }
}

/* ============================================
   IPAD AIR & IPAD PRO (821px to 1366px)
   Original 3-column layout with reduced form width
   ============================================ */
@media (min-width: 821px) and (max-width: 1366px) {
  /* Reduce container width */
  .bg-gray-50 > .container {
    max-width: 1100px !important;
    margin: 0 auto !important;
  }
  
  .lg\\:grid-cols-3 {
    grid-template-columns: 1fr 2fr !important;
    gap: 1.5rem !important;
  }
  
  /* Reduce form card width */
  .lg\\:grid-cols-3 > .lg\\:col-span-1 {
    max-width: 420px !important;
  }
  
  .card-enhanced {
    min-height: 550px !important;
    padding: 1.5rem !important;
  }
  
  .lg\\:col-span-2 > .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}