/**
 * Black Friday Promotional Hero Section Styles
 * Version: 2.4.0 (REMOVE WIDTH CONSTRAINT)
 *
 * Dermalogica-inspired dark luxury aesthetic with product focus.
 * Based on revised design with side-by-side layout and dark gradient.
 * Button styling matches theme conventions (19px radius, 14px font, line-height 2).
 * Mobile optimizations: 40px top/bottom margin, reduced CTA gap (10px), shipping tag margin (8px).
 * Animation removed: Float animation eliminated for static product display.
 * Mobile centering: All elements properly centered with !important overrides.
 * WordPress block overrides: Strong specificity to override inline FSE styles.
 * Gradient: 11-step purple spectrum from light at focal point to black at edges.
 * No white - pure purple gradient: lightest purple → primary → dark purple → black.
 * Image sizes: Desktop 520px, Mobile 240px/200px/160px (20% reduction all breakpoints).
 * Content constraint: 890px centered wrapper with full-width gradient background.
 * Flexbox centering: Overrides WordPress justify-content: space-between with center + gap.
 * Column 1 fix: Added flex-direction: column to stack text elements vertically.
 * Decorative text: Large "15%" background element (15rem, z-index 0, semi-transparent).
 * Inline CTA: Button + shipping tag no longer wrap on desktop (flex-wrap: nowrap).
 * Full-width hero: No width constraints - hero expands to full viewport at all sizes.
 * Min-height override: 80vh !important to prevent WordPress inline style overrides.
 *
 * @package eride
 */

/* ========================================
   RESET & BASE STYLES
   ======================================== */

.bf-hero-v2 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
}

/* ========================================
   COLOR VARIABLES (DARK LUXURY THEME)
   ======================================== */

:root {
  /* Dermalogica Purple (from bottle cap) */
  --derm-purple: #492f88;
  --derm-purple-light: #a88aff;

  /* Dark Gradient */
  --derm-gradient-start: #1a1a1a;
  --derm-gradient-end: #050505;

  /* Accents */
  --accent-silver: #e0e0e0;
  --text-gray: #cccccc;

  /* Transitions */
  --bf-transition-smooth: all 0.3s ease;
}

/* ========================================
   HERO SECTION - SIDE BY SIDE LAYOUT
   ======================================== */

.bf-hero-v2 {
  position: relative;
  min-height: 80vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center !important; /* Override WordPress space-between */
  flex-wrap: wrap; /* Allow wrapping for content constraint */
  padding: 0 5%;
  /* Radial gradient from dark edges to lighter purple at image focal point */
  /* Focal point at 65% to align with centered 890px layout */
  background: radial-gradient(
    circle at 65% 50%,
    #a88aff 0%,           /* Lightest purple at focal point (image) */
    #8b6fd9 8%,           /* Very light purple */
    #7256c2 15%,          /* Light purple */
    #5e42a6 22%,          /* Medium-light purple */
    #492f88 30%,          /* Primary Dermalogica purple */
    #3a2570 40%,          /* Medium-dark purple */
    #2e1d5a 50%,          /* Dark purple */
    #221547 60%,          /* Darker purple */
    #160d30 72%,          /* Very dark purple */
    #0a0515 85%,          /* Nearly black with purple tint */
    #000000 100%          /* Pure black at edges */
  );
  overflow: hidden;
}

/* Decorative "15%" background text */
.bf-hero-v2::after {
  content: '15%';
  position: absolute;
  top: 20%;
  right: 0%;
  font-size: 15rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  z-index: 0;
  line-height: 1;
  pointer-events: none;
}

/* Content wrapper constraint - groups children into 890px centered container */
.bf-hero-v2::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 890px;
  height: 0;
}

/* Flex children positioning within 890px constraint */
.bf-hero-v2 > .bf-hero-content,
.bf-hero-v2 > .bf-hero-image {
  flex-shrink: 0;
}

/* Create centered 890px layout using flex basis */
.bf-hero-v2 > .bf-hero-content {
  flex-basis: 500px;
  max-width: 500px;
}

.bf-hero-v2 > .bf-hero-image {
  flex-basis: 350px;
  max-width: 350px;
  margin-left: 40px; /* Gap between content and image */
}

/* ========================================
   LEFT CONTENT AREA
   ======================================== */

.bf-hero-content {
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  /* Flex basis handled by parent targeting (.bf-hero-v2 > .bf-hero-content) */
}

/* Sale Badge */
.bf-sale-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #fff;
}

/* Main Heading */
.bf-hero-title-v2 {
  font-size: 4.5rem;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -2px;
  color: #fff;
}

.bf-hero-title-v2 .bf-accent-text {
  color: #a88aff; /* Lighter purple for emphasis */
  display: block;
}

/* Subtext */
.bf-sub-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #cccccc;
  margin-bottom: 40px;
  max-width: 90%;
}

/* ========================================
   CTA GROUP
   ======================================== */

.bf-cta-group {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap; /* Keep button and shipping tag inline on desktop */
}

/* Primary Button - Theme-Matched Style */
.bf-btn-primary {
  background-color: #fff !important;
  color: #000 !important;
  /* Padding handled by inline styles (6px 38px) */
  /* Font size handled by inline styles (14px) */
  /* Border radius handled by inline styles (19px) */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  line-height: 2 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
}

.bf-btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 20px rgba(168, 138, 255, 0.3) !important;
  background-color: #fff !important;
  color: #000 !important;
}

/* Shipping Tag */
.bf-shipping-tag {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  gap: 8px;
}

.bf-checkmark-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--derm-purple);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.7rem;
}

.bf-checkmark-inline::before {
  content: '✓';
  color: #fff;
}

/* ========================================
   RIGHT IMAGE AREA
   ======================================== */

.bf-hero-image {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  /* Flex basis handled by parent targeting (.bf-hero-v2 > .bf-hero-image) */
}

/* Glow effect behind the product */
.bf-hero-image::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--derm-purple);
  filter: blur(100px);
  opacity: 0.5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.bf-hero-image img {
  max-width: 100%;
  height: auto;
  max-height: 520px; /* Reduced by 20% from 650px */
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 968px) {
  .bf-hero-v2 {
    flex-direction: column-reverse !important; /* Image on top, text below */
    justify-content: center !important;
    align-items: center; /* Center all child elements */
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
    margin-top: 40px;
    margin-bottom: 40px;
    /* Mobile gradient from dark edges to lighter purple at image focal point */
    background: radial-gradient(
      circle at 50% 30%,
      #a88aff 0%,           /* Lightest purple at focal point (image) */
      #8b6fd9 10%,          /* Very light purple */
      #7256c2 18%,          /* Light purple */
      #5e42a6 26%,          /* Medium-light purple */
      #492f88 35%,          /* Primary Dermalogica purple */
      #3a2570 45%,          /* Medium-dark purple */
      #2e1d5a 56%,          /* Dark purple */
      #221547 67%,          /* Darker purple */
      #160d30 78%,          /* Very dark purple */
      #0a0515 90%,          /* Nearly black with purple tint */
      #000000 100%          /* Pure black at edges */
    );
  }

  /* Remove ::before pseudo element on mobile */
  .bf-hero-v2::before {
    display: none;
  }

  /* Reset flex-basis constraints for mobile */
  .bf-hero-v2 > .bf-hero-content,
  .bf-hero-v2 > .bf-hero-image {
    flex-basis: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .bf-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all content elements */
  }

  /* Override WordPress block layout settings for mobile centering */
  .bf-hero-content.wp-block-group {
    justify-content: center;
  }

  .bf-hero-content > * {
    margin-left: auto;
    margin-right: auto;
  }

  /* Sale Badge - Center alignment */
  .bf-sale-badge {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Title - Center alignment */
  .bf-hero-title-v2 {
    font-size: 3rem;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Subtitle - Center alignment */
  .bf-sub-text {
    margin: 0 auto 30px auto;
    text-align: center;
    max-width: 100%;
  }

  /* CTA Group - Center alignment */
  .bf-cta-group {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%; /* Full width for proper centering */
  }

  /* Hero Image - Center alignment */
  .bf-hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .bf-hero-image img {
    max-height: 240px; /* Reduced by 20% from 300px */
    margin-bottom: 30px;
  }

  .bf-hero-image::before {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 768px) {
  .bf-hero-v2 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  /* Image height adjustment for text visibility */
  .bf-hero-image img {
    max-height: 200px; /* Reduced by 20% from 250px */
    margin-bottom: 25px;
  }

  /* Typography adjustments */
  .bf-hero-title-v2 {
    font-size: 2.5rem;
    letter-spacing: -1px;
    text-align: center;
  }

  .bf-sub-text {
    font-size: 1rem;
    text-align: center;
  }

  .bf-sale-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
    text-align: center;
  }

  /* CTA Group - Reduce gap by 50% on mobile + ensure centering + stack vertically */
  .bf-cta-group {
    gap: 10px; /* Reduced from 20px to 10px (50% reduction) */
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column; /* Stack button and shipping tag vertically on mobile */
  }

  /* Button - Full width and centered */
  .bf-btn-primary {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .bf-btn-primary a.wp-block-button__link {
    width: 100%;
    text-align: center;
    display: block;
  }

  /* Shipping Tag - Add margin bottom and ensure center alignment */
  .bf-shipping-tag {
    justify-content: center;
    align-items: center;
    margin-bottom: 24px !important;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .bf-hero-v2 {
    padding-top: 80px;
    padding-bottom: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .bf-hero-title-v2 {
    font-size: 2rem;
    text-align: center;
  }

  .bf-hero-image img {
    max-height: 160px; /* Reduced by 20% from 200px */
    margin-bottom: 20px;
  }

  .bf-sub-text {
    text-align: center;
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.bf-dark-bg {
  background: radial-gradient(circle at 70% 50%, #2a1b4e 0%, #000000 60%) !important;
}

.bf-text-light {
  color: #ffffff !important;
}

.bf-text-gray {
  color: #cccccc !important;
}

.bf-text-purple {
  color: #a88aff !important;
}

/* ========================================
   BACKWARDS COMPATIBILITY
   ======================================== */

/* V1 classes removed - no longer needed */