/**
 * Shared Banner Component
 *
 * Used by: Projects Grid, Portfolio Grid, Similar Projects
 * Eliminates duplication across multiple widgets
 *
 * Usage:
 * - Apply banner classes to banner containers
 * - Supports: .project-card-banner-homepage, .portfolio-card-banner, .project-similar-banner
 */

/* Banner Container */
.project-card-banner-homepage,
.portfolio-card-banner,
.project-similar-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
  transform: translateY(100%);
  /* Animation handled by GSAP - no CSS transition */
}

/* Banner Stripe */
.project-card-banner-stripe,
.portfolio-card-banner-stripe,
.project-similar-banner-stripe {
  position: relative;
  width: 100%;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: inline-start;
  background-color: var(--banner-bg-color, #f2b713);
  /* Animation handled by GSAP - no CSS transition */
}

@media (max-width: 767px) {
  .project-card-banner-stripe,
  .portfolio-card-banner-stripe,
  .project-similar-banner-stripe {
    height: 80px;
  }
}

/* Animated Stripes Background */
.project-card-banner-stripes-animated,
.portfolio-card-banner-stripes-animated,
.project-similar-banner-stripes-animated {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
  animation: bannerStripes 2s linear infinite;
}

@keyframes bannerStripes {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Banner Content (Text + Arrow) */
.project-card-banner-content,
.portfolio-card-banner-content,
.project-similar-banner-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  /* Animation handled by GSAP - no CSS transition */
}

@media (max-width: 767px) {
  .project-card-banner-content,
  .portfolio-card-banner-content,
  .project-similar-banner-content {
    gap: 8px;
  }
}

/* Banner Text */
.project-card-banner-text,
.portfolio-card-banner-text,
.project-similar-banner-text {
  font-size: 30px; /* Default - can be overridden by Elementor controls */
  font-weight: 700;
  letter-spacing: 0.1em;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color: var(--banner-text-color, #1e1d1b);
  /* Font size can be controlled via Elementor - this is just a default */
}

@media (max-width: 767px) {
  .project-card-banner-text,
  .portfolio-card-banner-text,
  .project-similar-banner-text {
    font-size: 18px; /* Default mobile - can be overridden by Elementor controls */
    letter-spacing: 0.05em;
  }
}

/* Banner Arrow */
.project-card-banner-arrow,
.portfolio-card-banner-arrow,
.project-similar-banner-arrow {
  /* Animation handled by GSAP - no CSS transition */
  stroke: var(--banner-text-color, #1e1d1b);
}

@media (max-width: 767px) {
  .project-card-banner-arrow,
  .portfolio-card-banner-arrow,
  .project-similar-banner-arrow {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Banner Lines (Top & Bottom) */
.project-card-banner-line-top,
.project-card-banner-line-bottom,
.portfolio-card-banner-line-top,
.portfolio-card-banner-line-bottom,
.project-similar-banner-line-top,
.project-similar-banner-line-bottom {
  position: absolute;
  inset-inline: 0;
  height: 4px;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: inline-start;
  /* Animation handled by GSAP - no CSS transition */
}

.project-card-banner-line-top,
.portfolio-card-banner-line-top,
.project-similar-banner-line-top {
  top: -4px;
  /* Animation handled by GSAP - no CSS transition */
}

.project-card-banner-line-bottom,
.portfolio-card-banner-line-bottom,
.project-similar-banner-line-bottom {
  bottom: -4px;
  /* Animation handled by GSAP - no CSS transition */
}