/*Styles for Promo Carousel*/
.da-promo-carousel {
   --primary: #8b032c;
   --primary-dark: #6a0221;
   --accent: #f0c230;
   --text-dark: #0f1419;
   --text-light: #ffffff;
   --spacing: 8px;
   --container-max: 1200px;

   position: relative;
   width: 100%;
   height: 500px;
   font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif;
   background-color: var(--primary);
}

/* Two-column layout structure */
.da-promo-carousel-inner {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
}

/* Content column with max-width constraint */
.da-promo-carousel-content-col {
   width: 55%;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}

/* Actual content area with padding */
.da-promo-carousel-content {
   width: 100%;
   max-width: calc(var(--container-max) * 0.55);
   /* 55% of container max */
   padding: calc(var(--spacing) * 7) calc(var(--spacing) * 7) calc(var(--spacing) * 7) calc(var(--spacing) * 3);
   color: var(--text-light);
}

/* Image column taking remaining space */
.da-promo-carousel-image-col {
   width: 45%;
   position: relative;
   overflow: hidden;
}

/* Image itself with full coverage */
.da-promo-carousel-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

/* Gradient overlay for better text contrast */
.da-promo-carousel-overlay {
   position: absolute;
   top: 0;
   left: -100px;
   /* Extend into content area */
   width: calc(100% + 100px);
   /* Cover the extension */
   height: 100%;
   background: linear-gradient(90deg,
         var(--primary) 0%,
         rgba(139, 3, 44, 0.7) 30%,
         rgba(139, 3, 44, 0) 100%);
   z-index: 1;
}

/* Program badge */
.da-promo-carousel-badge {
   display: inline-block;
   margin-bottom: calc(var(--spacing) * 2);
   padding: calc(var(--spacing)) calc(var(--spacing) * 2);
   background-color: var(--accent);
   color: #8b032c;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 1px;
   text-transform: uppercase;
   border-radius: 4px;
}

/* Info tags */
.da-promo-carousel-tags {
   display: flex;
   gap: calc(var(--spacing) * 1.5);
   margin-bottom: calc(var(--spacing) * 1);
   padding-top:5px;
   white-space: nowrap; 
}

.da-promo-carousel-tag {
   font-size: 14px;
   font-weight: 600;
   padding: calc(var(--spacing)) calc(var(--spacing) * 1);
   background-color: rgba(255, 255, 255, 0.15);
   color: var(--text-light);
   border-radius: 100px;
   white-space: nowrap; 
}

.da-promo-carousel-tag-light {
   background-color: rgba(255, 255, 255, 0.9);
   color: var(--primary);
}

/* Heading structure */
.da-promo-carousel-heading {
   margin-bottom: calc(var(--spacing) * 3);
}

.da-promo-carousel-title {
   font-size: 36px;
   line-height: 1.2;
   font-weight: 800;
   margin: 0 0 calc(var(--spacing) * 1.5) 0;
   color: var(--text-light);
}

.da-promo-carousel-subtitle {
   font-size: 24px;
   line-height: 1.3;
   font-weight: 600;
   margin: 0 0 calc(var(--spacing) * 2) 0;
   color: rgba(255, 255, 255, 0.9);
}

/* Accent separator */
.da-promo-carousel-separator {
   width: 50px;
   height: 4px;
   background-color: var(--accent);
   margin-bottom: calc(var(--spacing) * 3);
   border-radius: 2px;
}

/* Description text */
.da-promo-carousel-description {
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: calc(var(--spacing) * 3);
   color: rgba(255, 255, 255, 0.95);
   max-width: 600px;
}

/* Mobile layout changes */
@media (max-width: 720px) {
   .da-promo-carousel {
      height: 900px;
   }

   .da-promo-carousel-badge {
      margin-top: calc(var(--spacing) * 2);
      /* Add top margin to prevent cutoff */
      position: relative;
      /* Ensure proper positioning */
      z-index: 2;
      /* Make sure it's above other elements */
   }

   .da-promo-carousel-inner {
      flex-direction: column;
   }

   /* Image on top for mobile */
   .da-promo-carousel-image-col {
      width: 100%;
      height: 400px;
      order: 1;
   }

   /* Content below image for mobile */
   .da-promo-carousel-content-col {
      width: 100%;
      height: 500px;
      order: 2;
      justify-content: center;
   }

   .da-promo-carousel-content {
      max-width: var(--container-max);
      padding: calc(var(--spacing) * 5) calc(var(--spacing) * 4);
   }

   .da-promo-carousel-overlay {
      left: 0;
      width: 100%;
      background: linear-gradient(0deg,
            var(--primary) 0%,
            rgba(139, 3, 44, 0.7) 20%,
            rgba(139, 3, 44, 0) 60%);
   }

   .da-promo-carousel-title {
      font-size: 32px;
   }

   .da-promo-carousel-subtitle {
      font-size: 22px;
   }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
   .da-promo-carousel-content {
      padding: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
   }

   .da-promo-carousel-title {
      font-size: 28px;
   }

   .da-promo-carousel-subtitle {
      font-size: 20px;
   }

   .da-promo-carousel-description {
      font-size: 15px;
   }

   .da-promo-carousel-tags {
      flex-wrap: wrap;
   }
}

/* Accessibility enhancements */
@media (forced-colors: active) {

   .da-promo-carousel-badge,
   .da-promo-carousel-tag,
   .da-promo-carousel-separator {
      border: 1px solid CanvasText;
   }
}

a:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: 3px;
}



.at-promo-section {
   --primary: #8b032c;
   --primary-dark: #6a0221;
   --accent: #f0c230;
   --text-dark: #0f1419;
   --text-light: #ffffff;
   --spacing: 8px;
   --container-max: 1200px;

   position: relative;
   width: 100%;
   height: 500px;
   font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif;
   background-color: var(--primary);
}


.at-promo-container {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
}


.at-promo-texture {
   display: none;

}


.at-promo-content-wrapper {
   width: 55%;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   position: relative;
}

.at-promo-content-wrapper::before {
   content: '';
   position: absolute;
   bottom: 20px;
   left: 20px;
   width: 60px;
   height: 60px;
   background-color: var(--accent);
   opacity: 0.15;
   border-radius: 0;
   z-index: 1;
}

.at-promo-content-wrapper::after {
   content: '';
   position: absolute;
   bottom: 50px;
   left: 50px;
   width: 30px;
   height: 30px;
   background-color: var(--accent);
   opacity: 0.25;
   border-radius: 0;
   z-index: 1;
}


.at-promo-content-area {
   width: 100%;
   max-width: calc(var(--container-max) * 0.55);
   /* 55% of container max */
   padding: calc(var(--spacing) * 7) calc(var(--spacing) * 4) calc(var(--spacing) * 7) calc(var(--spacing) * 4);
   color: var(--text-light);
   position: relative;
   z-index: 2;

}


.at-promo-media-wrapper {
   width: 45%;
   position: relative;
   overflow: hidden;
}

/* Wave transition effect for desktop */
.at-promo-media-container {
   position: absolute;
   top: 0;
   left: -40px;
   /* Medium overlap */
   width: calc(100% + 40px);
   height: 100%;
   overflow: hidden;
   /* Wave-like edge using clip-path */
   clip-path: polygon(
         /* Top point */
         40px 0,
         /* Right top corner */
         100% 0,
         /* Right bottom corner */
         100% 100%,
         /* Bottom point */
         40px 100%,
         /* wave bend 1 */
         25px 75%,
         /* wave bend 2 */
         55px 50%,
         /* wave bend 3 */
         25px 25%,
         /* Back to top */
         40px 0);
   box-shadow: -4px 0 12px rgba(0, 0, 0, 0.12);
}


.at-promo-media-overlay {
   display: none;
   /* Remove overlay completely */
}

.at-promo-media {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center right 15%;
   display: block;
   filter: saturate(1.1) contrast(1.05);
   /* Slight enhancement */
}


.at-promo-label {
   display: inline-block;
   margin-bottom: calc(var(--spacing) * 3);
   padding: calc(var(--spacing)) calc(var(--spacing) * 2);
   background-color: var(--accent);
   color: var(--primary-dark);
   font-weight: 600;
   font-size: 14px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   border-radius: 2px;
}


.at-promo-tag-group {
   display: flex;
   gap: calc(var(--spacing) * 1.5);
   margin-bottom: calc(var(--spacing) * 3);
}

.at-promo-tag {
   font-size: 14px;
   font-weight: 500;
   padding: calc(var(--spacing)) calc(var(--spacing) * 2);
   background-color: rgba(255, 255, 255, 0.08);
   color: var(--text-light);
   border-radius: 2px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}

.at-promo-tag-highlight {
   background-color: var(--accent);
   color: var(--primary-dark);
}

.at-promo-header {
   margin-bottom: calc(var(--spacing) * 3);
}

.at-promo-title {
   font-size: 36px;
   line-height: 1.2;
   font-weight: 800;
   margin: 0 0 calc(var(--spacing) * 1.5) 0;
   color: var(--text-light);
   letter-spacing: 0.5px;
}

.at-promo-subtitle {
   font-size: 24px;
   line-height: 1.3;
   font-weight: 600;
   margin: 0 0 calc(var(--spacing) * 2) 0;
   color: rgba(255, 255, 255, 0.95);
   letter-spacing: 0.4px;
}


.at-promo-divider {
   width: 50px;
   height: 4px;
   background-color: var(--accent);
   margin-bottom: calc(var(--spacing) * 3);
   border-radius: 2px;

}

.at-promo-divider::after {
   /* content: '';
               position: absolute;
               top: 0;
               left: 60px;
               width: 15px;
               height: 4px;
               background-color: var(--accent);
               opacity: 0.6;*/
}


.at-promo-description {
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: calc(var(--spacing) * 4);
   color: rgba(255, 255, 255, 0.96);
   max-width: 600px;
   letter-spacing: 0.2px;
}


/* Mobile optimizations for the promotional section */
@media (max-width: 720px) {
   .at-promo-section {
      height: 900px;
      /* Fixed at 900px as required */
   }

   .at-promo-container {
      flex-direction: column;
   }

   .at-promo-media-wrapper {
      width: 100%;
      height: 350px;
      /* Slightly reduced height */
      order: 1;
   }

   .at-promo-media {
      object-position: center right 15%;
   }

   .at-promo-media-container {
      left: 0;
      width: 100%;
      clip-path: polygon(0 0,
            100% 0,
            100% 85%,
            75% 92%,
            50% 97%,
            25% 95%,
            0 90%);
      box-shadow: none;
   }

   .at-promo-content-wrapper {
      width: 100%;
      height: 500px;
      /* Fixed height to match container */
      order: 2;
      justify-content: flex-start;
   }

   .at-promo-content-area {
      max-width: 100%;
      padding: calc(var(--spacing) * 6) calc(var(--spacing) * 3);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      /* Evenly distribute content */
      height: 100%;
      /* Take full height of parent */
   }

   /* Remove fixed margins to allow flex spacing to work */
   .at-promo-tag-group {
      margin-bottom: 0;
   }

   .at-promo-header {
      margin-bottom: 0;
   }

   .at-promo-divider {
      margin-bottom: 0;
   }

   .at-promo-description {
      margin-bottom: 0;
      max-width: 100%;
   }
}

@media (max-width: 480px) {
   .at-promo-section {
      height: 900px;
      /* Maintain 900px height on smallest screens */
   }

   .at-promo-media-wrapper {
      height: 350px;
      /* Slightly larger to maintain proportions */
   }

   .at-promo-content-wrapper {
      height: 550px;
      /* Adjust to maintain total height */
   }

   .at-promo-content-area {
      padding: calc(var(--spacing) * 5) calc(var(--spacing) * 3);
      height: 100%;
   }

   .at-promo-tag-group {
      flex-wrap: wrap;
      gap: calc(var(--spacing));
      margin-bottom: calc(var(--spacing) * 3);
   }

   .at-promo-tag {
      margin-bottom: calc(var(--spacing));
   }

   .at-promo-title {
      font-size: 26px;
      margin-bottom: calc(var(--spacing) * 2);
   }

   .at-promo-subtitle {
      font-size: 18px;
      margin-bottom: calc(var(--spacing) * 1);
   }

   .at-promo-header {
      margin-bottom: calc(var(--spacing) * 3);
   }

   .at-promo-divider {
      margin-bottom: calc(var(--spacing) * 3);
   }

   .at-promo-description {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: calc(var(--spacing) * 4);
   }
}

@media (forced-colors: active) {

   .at-promo-label,
   .at-promo-tag,
   .at-promo-divider {
      border: 1px solid CanvasText;
   }
}