/* Numbers Module Responsive CSS */
{% import "../../css/_variables.css" as var %}

/* Ensure proper spacing and alignment for responsive columns */
.numbers .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -px;
  align-items: stretch; /* This ensures equal height columns */
}

.numbers .col {
  padding: 0 px 0;
  box-sizing: border-box;
  display: flex; /* Make column a flex container */
  flex-direction: column; /* Stack content vertically */
}

/* Individual number item styling */
.numbers .numbers {
  height: 100%; /* Take full height of parent column */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 0; /* Remove excessive bottom margin */
  flex: 1; /* Allow card to grow and fill available space */
}

/* Boxed style - only when enabled */
.numbers .numbers--boxed {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 40px !important;
}

/* More specific selector for boxed style */
.module--numbers .numbers--boxed {
  background-color: white !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 40px !important;
}

/* Shadow effect - only when enabled */
.numbers .numbers--shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* More specific selector for shadow style */
.module--numbers .numbers--shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Responsive column classes */
.numbers .s12 { width: 100%; }
.numbers .s6 { width: 50%; }
.numbers .s4 { width: 33.333%; }
.numbers .s3 { width: 25%; }

/* Medium screens (tablet) */
@media (max-width: 1139px) {
  .numbers .md-s12 { width: 100%; }
  .numbers .md-s6 { width: 50%; }
  .numbers .md-s4 { width: 33.333%; }
  .numbers .md-s3 { width: 25%; }
  
  /* Maintain clean spacing on tablet */
  .numbers .col {
    padding: 0 !important;
  }
  
  .numbers .row {
    margin: 0 !important;
  }
  
  /* Remove excessive bottom margin on tablet */
  .numbers .numbers {
    margin-bottom: 0 !important;
  }
}

/* Customizable spacing classes - apply to columns */
.numbers--spacing-small .col {
  margin-bottom: 16px !important;
}

.numbers--spacing-medium .col {
  margin-bottom: 24px !important;
}

.numbers--spacing-large .col {
  margin-bottom: 32px !important;
}

.numbers--spacing-extra-large .col {
  margin-bottom: 48px !important;
}

/* Row-level spacing classes */
.row.numbers--spacing-small .col {
  margin-bottom: 16px !important;
}

.row.numbers--spacing-medium .col {
  margin-bottom: 24px !important;
}

.row.numbers--spacing-large .col {
  margin-bottom: 32px !important;
}

.row.numbers--spacing-extra-large .col {
  margin-bottom: 48px !important;
}

/* Alternative approach - apply spacing to individual cards */
.numbers--spacing-small {
  margin-bottom: 16px !important;
}

.numbers--spacing-medium {
  margin-bottom: 24px !important;
}

.numbers--spacing-large {
  margin-bottom: 32px !important;
}

.numbers--spacing-extra-large {
  margin-bottom: 48px !important;
}

/* Small screens (mobile) */
@media (max-width: 767px) {
  .numbers .sm-s12 { width: 100%; }
  .numbers .sm-s6 { width: 50%; }
  .numbers .sm-s4 { width: 33.333%; }
  .numbers .sm-s3 { width: 25%; }
  
  /* Clean mobile spacing */
  .numbers .col {
    padding: 0 !important;
  }
  
  .numbers .row {
    margin: 0 !important;
  }
  
  /* No bottom margin on mobile */
  .numbers .numbers {
    margin-bottom: 0 !important;
  }
  
  /* Apply customizable spacing in mobile - both approaches */
  .numbers--spacing-small .col {
    margin-bottom: 16px !important;
  }
  
  .numbers--spacing-medium .col {
    margin-bottom: 24px !important;
  }
  
  .numbers--spacing-large .col {
    margin-bottom: 32px !important;
  }
  
  .numbers--spacing-extra-large .col {
    margin-bottom: 48px !important;
  }
  
  /* Alternative approach for mobile */
  .numbers--spacing-small {
    margin-bottom: 16px !important;
  }
  
  .numbers--spacing-medium {
    margin-bottom: 24px !important;
  }
  
  .numbers--spacing-large {
    margin-bottom: 32px !important;
  }
  
  .numbers--spacing-extra-large {
    margin-bottom: 48px !important;
  }
}

/* Alignment classes */
.numbers .justify-start { justify-content: flex-start; }
.numbers .justify-center { justify-content: center; }
.numbers .justify-end { justify-content: flex-end; }

/* Ensure numbers content fits properly in responsive layout */
.numbers .numbers__number {
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex-shrink: 0; /* Prevent number from shrinking */
}

.numbers .numbers__text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 1; /* Allow text area to grow and fill available space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center text content vertically */
}

/* Remove bottom margin from paragraph elements in numbers module */
.numbers p {
  margin-bottom: 0 !important;
}

/* Equal height card enhancement */
.module--numbers .row {
  display: flex !important;
  align-items: stretch !important; /* Ensure all columns have equal height */
}

.module--numbers .col {
  display: flex !important;
  flex-direction: column !important;
}

.module--numbers .numbers {
  flex: 1 !important; /* Make all cards fill available height */
  display: flex !important;
  flex-direction: column !important;
  min-height: 200px; /* Set a minimum height for consistency */
}