/**
 * Contact Page Styles
 * 
 * BEM-structured styles for the contact page template
 * Works alongside utility classes from design-system.css
 * 
 * @package wbl
 */

/* ================================================================
   CONTACT PAGE BLOCK
   ================================================================ */

.contact-page {
  background-color: var(--color-white);
  min-height: 100vh;
}

/* ================================================================
   CONTACT PAGE SECTIONS
   ================================================================ */

.contact-page__section {
  width: 100%;
  position: relative;
}

/* Section Modifiers */
.contact-page__section--padded {
  padding: var(--spacing-xxl) 0;
}

.contact-page__section--gray {
  background-color: var(--color-bg-alt);
  padding: var(--spacing-xl) 0;
}

/* ================================================================
   CONTACT PAGE CONTAINER
   ================================================================ */

.contact-page__container {
  /* Inherits from .container utility class */
  position: relative;
}

/* ================================================================
   CONTACT PAGE GRID
   ================================================================ */

.contact-page__grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--spacing-sm));
}

.contact-page__column {
  padding: 0 var(--spacing-sm);
  width: 100%;
}

/* Column Modifiers */
.contact-page__column--main {
  flex: 0 0 100%;
  max-width: 100%;
}

.contact-page__column--sidebar {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: var(--spacing-lg);
}

/* ================================================================
   CONTACT PAGE ELEMENTS
   ================================================================ */

.contact-page__form-wrapper {
  width: 100%;
}

.contact-page__sidebar {
  width: 100%;
}

/* ================================================================
   QUICK CONTACT METHODS SECTION
   ================================================================ */

.contact-quick-methods__container {
  /* Inherits from .container utility class */
}

.contact-quick-methods__content {
  max-width: 900px;
  margin: 0 auto;
}

.contact-quick-methods__title {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.contact-quick-methods__subtitle {
  max-width: 600px;
  margin: 0 auto var(--spacing-xl);
  color: var(--color-text-secondary);
}

.contact-quick-methods__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1000px;
  margin: 0 auto;
}

/* ================================================================
   CONTACT METHOD CARD COMPONENT
   ================================================================ */

.contact-method-card {
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  padding: var(--spacing-xl);
  text-align: center;
  border: 1px solid rgba(115, 53, 16, 0.1);
  box-shadow: var(--shadow-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.contact-method-card__icon {
  width: 80px;
  height: 80px;
  background-color: rgba(115, 53, 16, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-method-card__icon svg {
  width: 48px;
  height: 48px;
}

.contact-method-card__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.contact-method-card__description {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================ */

/* Tablet Styles */
@media (min-width: 768px) {
  .contact-page__section--padded {
    padding: var(--spacing-xl) 0;
  }
  
  .contact-quick-methods__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop Styles */
@media (min-width: 992px) {
  .contact-page__column--main {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  
  .contact-page__column--sidebar {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    margin-top: 0;
  }
  
  .contact-page__grid {
    align-items: flex-start;
  }
}

/* Large Desktop Styles */
@media (min-width: 1200px) {
  .contact-page__section--padded {
    padding: var(--spacing-xxl) 0;
  }
}

/* ================================================================
   MOBILE FIRST ADJUSTMENTS
   ================================================================ */

/* Mobile Styles */
@media (max-width: 768px) {
  .contact-quick-methods__cards {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .contact-method-card {
    padding: var(--spacing-lg);
  }
  
  .contact-method-card__icon {
    width: 60px;
    height: 60px;
  }
  
  .contact-method-card__icon svg {
    width: 36px;
    height: 36px;
  }
  
  .contact-method-card__title {
    font-size: var(--font-size-h5);
  }
  
  .contact-method-card__description {
    font-size: var(--font-size-small);
  }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
  .contact-page__section--padded {
    padding: var(--spacing-lg) 0;
  }
  
  .contact-page__section--gray {
    padding: var(--spacing-lg) 0;
  }
  
  .contact-quick-methods__title {
    font-size: var(--font-size-h3);
  }
  
  .contact-quick-methods__subtitle {
    font-size: var(--font-size-small);
  }
}

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

@media print {
  .contact-page__section--gray {
    background-color: transparent;
    border-top: 1px solid var(--color-text-secondary);
    border-bottom: 1px solid var(--color-text-secondary);
  }
  
  .contact-page__grid {
    display: block;
  }
  
  .contact-page__column {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-lg);
  }
}