/**
 * Contact Section Styles
 * BEM Structure with ta_ prefix
 */

/* ==========================================================================
   Section Container
   ========================================================================== */

.ta_contact-section {
  position: relative;
  padding: var(--space-16, 4rem) 0;
  background-color: var(--contact-bg-color, #f3f4f6);
  color: var(--contact-text-color, inherit);
}

/* Inner Container */
.ta_contact-section__inner {
  max-width: 1024px;
  margin: 0 auto;
  background-color: var(--card-bg, #ffffff);
  border-radius: var(--rounded-lg, 0.5rem);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: var(--space-8, 2rem);
  overflow: hidden;
}

/* ==========================================================================
   Description
   ========================================================================== */

.ta_contact-section__description {
  text-align: center;
  max-width: 64rem;
  margin: 0 auto var(--space-8, 2rem);
}

.ta_contact-section__description p {
  color: #525252;
  line-height: 1.75;
  font-size: 1rem;
  margin: 0;
}

@media (min-width: 768px) {
  .ta_contact-section__description p {
    font-size: var(--text-base, 1rem);
  }
}

.ta_contact-section__description strong {
  color: var(--text-main, #1f2937);
  font-weight: 700;
}

/* ==========================================================================
   Form Container
   ========================================================================== */

.ta_contact-section__form {
  margin-top: var(--space-6, 1.5rem);
}

/* No Form Message */
.ta_contact-section__no-form {
  text-align: center;
  padding: var(--space-8, 2rem);
  color: var(--text-muted, #6b7280);
  background-color: #f9fafb;
  border-radius: var(--rounded, 0.25rem);
  border: 1px dashed #d1d5db;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 640px) {
  .ta_contact-section {
    padding: var(--space-8, 2rem) 0;
  }

  .ta_contact-section__description {
    margin-bottom: var(--space-6, 1.5rem);
  }
}