/**
 * A&Y Pressure Washing LLC - Contact Section Fix
 * Version: 2.2.0
 * Date: October 30, 2025
 * 
 * Fix para mantener el layout de 2 columnas en Contact Section
 * Solo afecta la optimización responsive
 */

/* ======================
   CONTACT SECTION FIX
   Mantener 2 columnas en Desktop
   ====================== */

/* Desktop: Mantener grid de 2 columnas */
@media (min-width: 1025px) {
  #contact .container > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--spacing-3xl) !important;
    align-items: start !important;
  }
}

/* Tablet: 2 columnas pero más compactas */
@media (min-width: 768px) and (max-width: 1024px) {
  #contact .container > div[style*="grid-template-columns"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--spacing-2xl) !important;
    align-items: start !important;
  }
  
  /* Cards de contacto más compactas en tablet */
  #contact .card {
    padding: var(--spacing-lg);
  }
  
  /* Iconos más pequeños en tablet */
  #contact .card > div > div[style*="width: 50px"] {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.25rem !important;
  }
  
  /* Títulos más pequeños */
  #contact .card h4 {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
  }
  
  /* Formulario más compacto */
  #contact .form-group {
    margin-bottom: var(--spacing-md);
  }
}

/* Mobile: 1 columna (mantener comportamiento actual) */
@media (max-width: 767px) {
  #contact .container > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-2xl) !important;
  }
  
  /* Info de contacto primero en móvil */
  #contact .reveal:first-child {
    order: 1;
  }
  
  #contact .card.reveal {
    order: 2;
  }
}

/* ======================
   OPTIMIZACIÓN ADICIONAL
   ====================== */

/* Asegurar que los cards de info se vean bien */
#contact .card[style*="margin-bottom"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#contact .card[style*="margin-bottom"]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Links de contacto con mejor hover */
#contact a[href^="tel"],
#contact a[href^="mailto"] {
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
}

#contact a[href^="tel"]:hover,
#contact a[href^="mailto"]:hover {
  color: var(--color-primary-dark) !important;
}

#contact a[href^="tel"]::after,
#contact a[href^="mailto"]::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

#contact a[href^="tel"]:hover::after,
#contact a[href^="mailto"]:hover::after {
  width: 100%;
}

/* Formulario de contacto mejorado */
#contact #contact-form .form-group {
  margin-bottom: var(--spacing-lg);
}

#contact #contact-form .form-input:focus,
#contact #contact-form .form-select:focus,
#contact #contact-form .form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11, 126, 185, 0.1);
}

/* Botón del formulario */
#contact #contact-form .btn {
  transition: all 0.3s ease;
}

#contact #contact-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 126, 185, 0.3);
}

/* ======================
   SPACING RESPONSIVE
   ====================== */

/* Desktop grande */
@media (min-width: 1440px) {
  #contact .container > div[style*="grid-template-columns"] {
    gap: var(--spacing-4xl) !important;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Laptop */
@media (min-width: 1025px) and (max-width: 1439px) {
  #contact .container > div[style*="grid-template-columns"] {
    gap: var(--spacing-3xl) !important;
  }
}

/* Tablet grande */
@media (min-width: 900px) and (max-width: 1024px) {
  #contact .container > div[style*="grid-template-columns"] {
    gap: var(--spacing-2xl) !important;
  }
}

/* Tablet pequeño */
@media (min-width: 768px) and (max-width: 899px) {
  #contact .container > div[style*="grid-template-columns"] {
    gap: var(--spacing-xl) !important;
  }
  
  #contact .card {
    padding: var(--spacing-md);
  }
}

/* ======================
   LANDSCAPE MOBILE FIX
   ====================== */

@media (max-width: 767px) and (orientation: landscape) {
  #contact .section__header {
    margin-bottom: var(--spacing-xl);
  }
  
  #contact .card {
    padding: var(--spacing-md);
  }
  
  #contact .form-group {
    margin-bottom: var(--spacing-md);
  }
}

/* ======================
   ACCESIBILIDAD
   ====================== */

/* Focus visible en elementos del formulario */
#contact .form-input:focus-visible,
#contact .form-select:focus-visible,
#contact .form-textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Links con mejor área de click */
@media (max-width: 767px) {
  #contact a[href^="tel"],
  #contact a[href^="mailto"] {
    display: inline-block;
    padding: var(--spacing-xs) 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ======================
   PRINT STYLES
   ====================== */

@media print {
  #contact .container > div[style*="grid-template-columns"] {
    display: block !important;
  }
  
  #contact #contact-form {
    display: none;
  }
  
  #contact .card {
    page-break-inside: avoid;
    margin-bottom: var(--spacing-md);
  }
}

/* ======================
   FIN CONTACT SECTION FIX
   ====================== */