/**
 * Module: Enterprise Security Badges
 * Figma Node: 417:1196
 * Generated: 2025-12-12
 *
 * Built for Enterprise-grade security section
 * Certification logos, 3 value cards, gradient CTA
 */

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

:root {
  /* Colors - inherited from enterprise theme */
  --security-dark-blue: #121C66;
  --security-primary-blue: #2B388F;
  --security-blue-grey: #E9EBF3;
  --security-white: #FFFFFF;
  --security-orange: #FF8F00;

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

  /* Border Radius */
  --security-radius-small: 12px;
  --security-radius-medium: 20px;
  --security-radius-large: 24px;
  --security-radius-pill: 500px;

  /* Transitions */
  --security-transition-fast: 150ms ease;
}

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

.enterprise-security {
  background-color: var(--security-blue-grey);
  width: 100%;
  overflow: hidden;
  padding: 93px 120px;
}

.enterprise-security__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 1512px;
  margin: 0 auto;
}

/* ==========================================================================
   Section Header
   ========================================================================== */

.enterprise-security__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
  max-width: 885px;
}

.enterprise-security__title {
  font-family: var(--security-font-family);
  font-size: 64px;
  font-weight: 700;
  color: var(--security-dark-blue);
  line-height: normal;
  margin: 0;
}

.enterprise-security__subtitle {
  font-family: var(--security-font-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--security-dark-blue);
  line-height: normal;
  margin: 0;
  max-width: 778px;
}

/* ==========================================================================
   Certification Logos
   ========================================================================== */

.enterprise-security__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 76px;
}

/* Handle both direct img and picture wrapper (WordPress responsive images) */
.enterprise-security__logo {
  width: auto;
  height: 98px;
  object-fit: contain;
}

.enterprise-security__logo img {
  width: auto;
  height: 98px;
  object-fit: contain;
}

/* ==========================================================================
   Value Cards
   ========================================================================== */

.enterprise-security__cards {
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: stretch;
}

.enterprise-security__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 318px;
  padding: 20px 12px;
  background-color: var(--security-white);
  border-radius: var(--security-radius-small);
  text-align: center;
}

.enterprise-security__card-title {
  font-family: var(--security-font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--security-dark-blue);
  line-height: normal;
  margin: 0;
}

.enterprise-security__card-description {
  font-family: var(--security-font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--security-primary-blue);
  line-height: normal;
  margin: 0;
  max-width: 269px;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.enterprise-security__cta-container {
  position: relative;
  width: 100%;
  max-width: 1296px;
  background-color: var(--security-orange);
  border-radius: var(--security-radius-large);
  padding: 36px;
  overflow: hidden;
}

/* Neon rings background image at 10% opacity */
.enterprise-security__cta-container::before {
  content: '';
  position: absolute;
  width: 1024px;
  height: 1024px;
  top: -337px;
  left: -543px;
  opacity: 0.1;
  background-image: url('../../images/book-demo-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.enterprise-security__cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 0 168px;
}

.enterprise-security__cta-title {
  font-family: var(--security-font-family);
  font-size: 48px;
  font-weight: 700;
  color: var(--security-dark-blue);
  line-height: normal;
  margin: 0;
  max-width: 754px;
}

.enterprise-security__cta-subtitle {
  font-family: var(--security-font-family);
  font-size: 16px;
  font-weight: 400;
  color: var(--security-dark-blue);
  line-height: normal;
  margin: 0;
  max-width: 804px;
}

/* CTA Button uses global .workjam-cta-button class */

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Large Desktop - reduce gaps */
@media (max-width: 1400px) {
  .enterprise-security__logos {
    gap: 50px;
  }

  .enterprise-security__cards {
    gap: 20px;
  }

  .enterprise-security__card {
    width: 300px;
  }

  .enterprise-security__cta-content {
    padding: 0 100px;
  }
}

/* Tablet Landscape */
@media (max-width: 1200px) {
  .enterprise-security {
    padding: 80px 60px;
  }

  .enterprise-security__title {
    font-size: 48px;
  }

  .enterprise-security__logos {
    gap: 40px;
    flex-wrap: wrap;
  }

  .enterprise-security__logo,
  .enterprise-security__logo img {
    height: 80px;
  }

  .enterprise-security__cards {
    flex-wrap: wrap;
    max-width: 700px;
  }

  .enterprise-security__card {
    width: calc(50% - 12.5px);
    max-width: 318px;
  }

  .enterprise-security__cta-title {
    font-size: 40px;
  }

  .enterprise-security__cta-content {
    padding: 0 60px;
  }

  .enterprise-security__cta-container::before {
    width: 900px;
    height: 900px;
    top: -300px;
    left: -450px;
  }
}

/* Tablet Portrait */
@media (max-width: 900px) {
  .enterprise-security {
    padding: 60px 45px;
  }

  .enterprise-security__container {
    gap: 40px;
  }

  .enterprise-security__title {
    font-size: 40px;
  }

  .enterprise-security__logos {
    gap: 30px;
  }

  .enterprise-security__logo,
  .enterprise-security__logo img {
    height: 70px;
  }

  .enterprise-security__cards {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  .enterprise-security__card {
    width: 100%;
    max-width: 400px;
  }

  .enterprise-security__cta-content {
    padding: 0 30px;
  }

  .enterprise-security__cta-title {
    font-size: 36px;
  }

  .enterprise-security__cta-container::before {
    width: 768px;
    height: 768px;
    top: -250px;
    left: -350px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .enterprise-security {
    padding: 40px 20px;
  }

  .enterprise-security__container {
    gap: 32px;
  }

  .enterprise-security__header {
    gap: 32px;
  }

  .enterprise-security__title {
    font-size: 32px;
  }

  .enterprise-security__subtitle {
    font-size: 14px;
  }

  .enterprise-security__logos {
    flex-direction: column;
    gap: 24px;
  }

  .enterprise-security__logo,
  .enterprise-security__logo img {
    width: 98px;
    height: 98px;
  }

  .enterprise-security__card-title {
    font-size: 16px;
  }

  .enterprise-security__card-description {
    font-size: 14px;
  }

  .enterprise-security__cta-container {
    padding: 24px;
  }

  .enterprise-security__cta-content {
    padding: 0 10px;
    gap: 16px;
  }

  .enterprise-security__cta-title {
    font-size: 28px;
  }

  .enterprise-security__cta-subtitle {
    font-size: 14px;
  }

  .enterprise-security__cta-container::before {
    width: 640px;
    height: 640px;
    top: -200px;
    left: -280px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .enterprise-security__title {
    font-size: 28px;
  }

  .enterprise-security__logos {
    gap: 20px;
  }

  .enterprise-security__logo,
  .enterprise-security__logo img {
    width: 80px;
    height: 80px;
  }

  .enterprise-security__cta-title {
    font-size: 24px;
  }

  .enterprise-security__cta-container::before {
    width: 512px;
    height: 512px;
    top: -180px;
    left: -240px;
  }
}