/**
 * Module: Feature - Empower Organization
 * Figma Node: 433:390
 * Generated: 2025-12-16
 *
 * Empower Your Organization at Scale
 * Grey outer container with white rounded inner card
 * 3 feature cards with separators between them
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  /* Colors */
  --feature-dark-blue: #121C66;
  --feature-primary-blue: #2B388F;
  --feature-light-grey: #E9EBF3;
  --feature-white: #FFFFFF;
  --feature-separator: #D0D5E8;

  /* Typography */
  --feature-font-family: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Border Radius */
  --feature-radius-large: 23px;
  --feature-radius-card: 20px;
}

/* ==========================================================================
   Section Container (Grey Background)
   ========================================================================== */

.feature-empower-organization {
  background-color: var(--feature-light-grey);
  width: 100%;
  padding: 80px 60px;
}

/* ==========================================================================
   White Inner Container
   ========================================================================== */

.feature-empower-organization__container {
  background-color: var(--feature-white);
  border-radius: var(--feature-radius-large);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px 24px;
  max-width: 1390px;
  margin: 0 auto;
}

/* ==========================================================================
   Section Title
   ========================================================================== */

.feature-empower-organization__title {
  font-family: var(--feature-font-family);
  font-size: 48px;
  font-weight: 700;
  color: var(--feature-dark-blue);
  line-height: normal;
  text-align: center;
  margin: 0;
  max-width: 885px;
}

/* ==========================================================================
   Features Row (with separators)
   ========================================================================== */

.feature-empower-organization__features {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   Vertical Separator
   ========================================================================== */

.feature-empower-organization__separator {
  width: 1px;
  height: 342px;
  background-color: var(--feature-separator);
  flex-shrink: 0;
}

/* ==========================================================================
   Individual Feature Card
   ========================================================================== */

.feature-empower-organization__feature {
  flex: 0 0 408px;
  width: 408px;
  height: 368px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 32px 0 24px 0;
  border-radius: var(--feature-radius-card);
  overflow: hidden;
}

/* ==========================================================================
   Feature Icon
   ========================================================================== */

.feature-empower-organization__feature-icon {
  width: 100px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Handle both img and picture > img from WordPress */
.feature-empower-organization__feature-icon picture,
.feature-empower-organization__feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ==========================================================================
   Feature Title
   ========================================================================== */

.feature-empower-organization__feature-title {
  font-family: var(--feature-font-family);
  font-size: 30px;
  font-weight: 600;
  color: var(--feature-dark-blue);
  line-height: normal;
  margin: 0;
  max-width: 407px;
}

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

.feature-empower-organization__feature-description {
  font-family: var(--feature-font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--feature-primary-blue);
  line-height: normal;
  margin: 0;
  max-width: 363px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Large Desktop - reduce max-width */
@media (max-width: 1440px) {
  .feature-empower-organization__container {
    max-width: calc(100% - 40px);
  }

  .feature-empower-organization__feature {
    flex: 1;
    width: auto;
    min-width: 280px;
    max-width: 408px;
  }
}

/* Large tablets and small desktops */
@media (max-width: 1200px) {
  .feature-empower-organization {
    padding: 60px 40px;
  }

  .feature-empower-organization__container {
    padding: 40px 24px;
  }

  .feature-empower-organization__features {
    flex-wrap: wrap;
    gap: 24px;
  }

  .feature-empower-organization__separator {
    display: none;
  }

  .feature-empower-organization__feature {
    flex: 1 1 calc(50% - 12px);
    min-width: 280px;
    max-width: 400px;
    height: auto;
    min-height: 320px;
  }
}

/* Tablets - Adjust spacing */
@media (max-width: 900px) {
  .feature-empower-organization {
    padding: 50px 30px;
  }

  .feature-empower-organization__container {
    gap: 20px;
    padding: 36px 20px;
  }

  .feature-empower-organization__title {
    font-size: 40px;
  }

  .feature-empower-organization__features {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .feature-empower-organization__feature {
    max-width: 500px;
    width: 100%;
    min-height: auto;
    height: auto;
    padding: 24px 20px;
  }

  .feature-empower-organization__feature-title {
    font-size: 26px;
  }
}

/* Mobile - Stack and reduce sizing */
@media (max-width: 768px) {
  .feature-empower-organization {
    padding: 40px 20px;
  }

  .feature-empower-organization__container {
    padding: 32px 16px;
    border-radius: 16px;
  }

  .feature-empower-organization__title {
    font-size: 32px;
  }

  .feature-empower-organization__feature-icon {
    width: 90px;
    height: 95px;
  }

  .feature-empower-organization__feature-title {
    font-size: 24px;
  }

  .feature-empower-organization__feature-description {
    font-size: 15px;
  }
}

/* Small mobile - Further reduce spacing */
@media (max-width: 480px) {
  .feature-empower-organization {
    padding: 32px 16px;
  }

  .feature-empower-organization__container {
    padding: 24px 16px;
    gap: 16px;
  }

  .feature-empower-organization__title {
    font-size: 28px;
  }

  .feature-empower-organization__features {
    gap: 24px;
  }

  .feature-empower-organization__feature-icon {
    width: 80px;
    height: 85px;
  }

  .feature-empower-organization__feature-title {
    font-size: 22px;
  }

  .feature-empower-organization__feature-description {
    font-size: 14px;
  }
}