/* Frontend styles for Animated Number Block */
.animated-number-block {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1rem);
  min-height: clamp(150px, 20vw, 200px);
}

.animated-number-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.5rem);
}

.animated-number-title {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-family: "usual", Sans-serif !important;
  color: #fff !important;
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  white-space: nowrap;
}

.animated-number-icon {
  width: clamp(60px, 8vw, 90px);
  height: clamp(60px, 8vw, 90px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-number-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.animated-number-icon svg {
  width: 100%;
  height: 100%;
}

.animated-number-display {
  display: flex;
  align-items: baseline;
  gap: clamp(0.125rem, 0.5vw, 0.25rem);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  font-family: "usual", Sans-serif !important;
  white-space: nowrap;
}

.animated-number-display * {
  font-family: "usual", Sans-serif !important;
}

.animated-number-block .animated-number-value,
.animated-number-block .animated-number-display .animated-number-value,
.animated-number-block
  .animated-number-content
  .animated-number-display
  .animated-number-value {
  min-width: 1ch;
  color: #ffdd00 !important;
  font-family: "usual", Sans-serif !important;
  white-space: nowrap;
}

.animated-number-block .animated-number-prefix,
.animated-number-block .animated-number-suffix,
.animated-number-block .animated-number-display .animated-number-prefix,
.animated-number-block .animated-number-display .animated-number-suffix {
  color: #ffdd00 !important;
  font-family: "usual", Sans-serif !important;
  white-space: nowrap;
}

.animated-number-block .animated-number-prefix:empty,
.animated-number-block .animated-number-suffix:empty,
.animated-number-block .animated-number-display .animated-number-prefix:empty,
.animated-number-block .animated-number-display .animated-number-suffix:empty {
  display: none;
}

/* Mobile: Ensure animated number appears before images and make it larger */
@media (max-width: 782px) {
  .animated-number-display {
    font-size: clamp(2.5rem, 8vw, 4rem);
  }
  
  .animated-number-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }
  
  .animated-number-icon {
    width: clamp(70px, 10vw, 90px);
    height: clamp(70px, 10vw, 90px);
  }
  
  /* Reorder blocks on mobile: animated number first, then images - ONLY for columns containing animated number */
  .wp-block-columns:has(.animated-number-block) > .wp-block-column {
    display: flex;
    flex-direction: column;
  }
  
  .wp-block-columns:has(.animated-number-block) > .wp-block-column .animated-number-block {
    order: -1;
  }
  
  .wp-block-columns:has(.animated-number-block) > .wp-block-column .wp-block-image,
  .wp-block-columns:has(.animated-number-block) > .wp-block-column .wp-block-cover,
  .wp-block-columns:has(.animated-number-block) > .wp-block-column [class*="scroll-flip-image"],
  .wp-block-columns:has(.animated-number-block) > .wp-block-column [class*="image"] {
    order: 1;
  }
  
  /* Reorder columns if animated number and images are in separate columns */
  .wp-block-columns:has(.animated-number-block) {
    display: flex;
    flex-direction: column;
  }
  
  .wp-block-columns:has(.animated-number-block) > .wp-block-column:has(.animated-number-block) {
    order: -1;
  }
  
  .wp-block-columns:has(.animated-number-block) > .wp-block-column:has(.wp-block-image),
  .wp-block-columns:has(.animated-number-block) > .wp-block-column:has(.wp-block-cover),
  .wp-block-columns:has(.animated-number-block) > .wp-block-column:has([class*="scroll-flip-image"]),
  .wp-block-columns:has(.animated-number-block) > .wp-block-column:has([class*="image"]) {
    order: 1;
  }
}