/**
 * Hero Style 1 Component Styles
 * Simplified version with padding-bottom fix for hero actions overlap
 */

 @import url('../../../assets/css/main-variables.css');

 /* ================================
    BASE HERO STRUCTURE
    ================================ */
 .hero-style1 {
   position: relative;
   height: 80vh;
   min-height: 600px;
   overflow: hidden;
   display: flex;
   align-items: flex-end;
   clip-path: polygon(
     0 30px,
     270px 0,
     100% 0,
     100% 100%,
     0 100%
   );
   -webkit-clip-path: polygon(
     0 30px,
     270px 0,
     100% 0,
     100% 100%,
     0 100%
   );
 }
 
 /* ================================
    BACKGROUND SYSTEM
    ================================ */
 .hero-style1 .background-image {
   position: absolute;
   top: -15%;
   left: -15%;
   right: -15%;
   bottom: -15%;
   z-index: 1;
   will-change: transform;
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   overflow: hidden;
 }
 
 .hero-style1 .background-image img,
 .hero-style1 .background-image video {
   width: 120%;
   height: 120%;
   object-fit: cover;
   display: block;
 }
 
 .hero-style1 .background-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), 
               linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
   z-index: 2;
 }
 
 /* ================================
    CONTENT STRUCTURE
    ================================ */
 .hero-style1 .container-medium {
   position: relative;
   z-index: 3;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
   padding-bottom: var(--spacing-6);
 }
 
 .hero-content {
   margin-top: auto;
   width: 100%;
   position: relative;
 }
 
 /* ================================
    TYPOGRAPHY WITH FIXED WIDTHS
    ================================ */
 .hero-eyebrow {
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-semibold);
   margin-bottom: var(--spacing-3);
   line-height: var(--line-height-tight);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   opacity: 0.9;
   /* Always 65% width */
   max-width: 65%;
 }
 
 .hero-heading {
   font-size: var(--font-size-h1);
   font-weight: var(--font-weight-bold);
   margin-bottom: var(--spacing-6);
   line-height: var(--line-height-tight);
   word-wrap: break-word;
   overflow-wrap: break-word;
   /* Always 65% width */
   max-width: 65%;
 }
 
 .hero-description {
   line-height: var(--line-height-relaxed);
   margin-top: var(--spacing-4);
   margin-bottom: 4rem;
   /* Always 45% width */
   max-width: 45%;
 }
 
 .hero-description p {
  color:var(--gray-50);
 }

 /* ================================
    HERO ACTIONS OVERLAP FIX
    ================================ */
 
 /* Huge Heading Variant */
 .hero-heading.hero-heading-huge {
   font-size: 6.5rem;
   line-height: 1.1;
   margin-bottom: var(--spacing-8);
   overflow: visible;
   padding-bottom: 0.1em;
 }
 
 /* Gradient Heading */
 .hero-heading.hero-heading-gradient {
   background: linear-gradient(to right, var(--primary-300), var(--secondary-300));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: transparent;
 }
 
 /* ================================
    MULTI-VIDEO SUPPORT
    ================================ */
 .multi-video-container {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
 
 .multi-video-container video {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 120%;
   height: 120%;
   min-width: 120%;
   min-height: 120%;
   max-width: none;
   max-height: none;
   object-fit: cover;
   transform: translate(-50%, -50%);
   transition: opacity 1s ease-in-out;
   z-index: 1;
   will-change: opacity;
   backface-visibility: hidden;
 }

 /* ================================
    CIRCLE ARROW ELEMENT
    Fixed version with no double icons and optional shadow
    ================================ */
 
 /* Arrow positioned relative to the hero-section-wrapper */
 .hero-section-wrapper {
   position: relative;
 }

 .hero-arrow-circle {
   position: absolute;
   bottom: -60px;
   right: 80px;
   width: 120px;
   height: 120px;
   background-color: var(--primary-900);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 20;
   pointer-events: none;
   /* Remove shadow by commenting out the line below */
   /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); */
 }

 /* Remove ALL pseudo-elements to prevent double icons */
 .hero-arrow-circle::before,
 .hero-arrow-circle::after {
   display: none !important;
   content: none !important;
 }

 /* Style the Font Awesome icon */
 .hero-arrow-circle i {
   font-size: 60px;
   color: var(--secondary-400);
   text-shadow: none;
 }

 /* Ensure no pseudo-elements on the icon itself */
 .hero-arrow-circle i::before {
   /* Font Awesome will handle this, just ensure no text shadow */
   text-shadow: none;
 }

 .hero-arrow-circle i::after {
   display: none !important;
   content: none !important;
 }

 /* Hide arrow when hero actions are present */
 .hero-style1.has-hero-actions-overlap ~ .hero-arrow-circle,
 .hero-style1.has-hero-actions-cutout ~ .hero-arrow-circle {
   display: none !important;
 }

 /* Margin adjustments for hero section */
 .hero-style1 {
   margin-bottom: 80px; /* Space for arrow overlap */
 }

 /* Remove margin when hero actions are present */
 .hero-style1.has-hero-actions-overlap,
 .hero-style1.has-hero-actions-cutout {
   margin-bottom: 0;
 }
 
 /* ================================
    RESPONSIVE STYLES
    ================================ */
 @media (max-width: 1200px) {
   .hero-heading.hero-heading-huge {
     font-size: 5rem;
   }
 }
 
 @media (max-width: 1024px) {
   .hero-style1 {
     height: auto;
     min-height: 500px;
     padding: var(--spacing-16) 0;
     margin-bottom: 60px;
   }

   .hero-style1 .background-overlay {
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0));
  }

  .post-excerpt {
    display:none;
  }

  .news-item {
    height:55vh;
  }
   
   /* Remove width constraints on mobile - elements go full width */
   .hero-eyebrow,
   .hero-heading,
   .hero-description {
     max-width: 100%;
   }
   
   /* Remove padding on mobile since hero actions don't overlap */
   .hero-style1.has-hero-actions-overlap .hero-content:not(:has(.hero-description)) .hero-heading,
   .hero-style1.has-hero-actions-overlap .hero-content.no-description .hero-heading,
   .hero-style1.has-hero-actions-overlap.no-description .hero-heading,
   .hero-style1.has-hero-actions-overlap .hero-content:not(:has(.hero-description)) .hero-heading.hero-heading-huge,
   .hero-style1.has-hero-actions-overlap .hero-content.no-description .hero-heading.hero-heading-huge,
   .hero-style1.has-hero-actions-overlap.no-description .hero-heading.hero-heading-huge {
     padding-bottom: 0;
   }
   
   .hero-heading {
     font-size: var(--font-size-h1);
   }

   /* Circle arrow responsive */
   .hero-arrow-circle {
     width: 80px;
     height: 80px;
     bottom: -40px;
     right: 40px;
   }
   
   .hero-arrow-circle i {
     font-size: 40px;
   }
 }
 
 @media (max-width: 768px) {
   .hero-style1 {
     height:80vh;
     min-height: 300px;
     padding: var(--spacing-12) 0;
     margin-bottom: 40px;
   }
   

   
   .hero-eyebrow {
     font-size: var(--font-size-small);
   }
 

   /* Circle arrow mobile size */
   .hero-arrow-circle {
     width: 60px;
     height: 60px;
     bottom: -30px;
     right: 20px;
   }
   
   .hero-arrow-circle i {
     font-size: 30px;
   }
 }
 
 @media (max-width: 480px) {
   .hero-heading {
     font-size: 2.5rem;
   }
   
   .hero-heading.hero-heading-huge {
     font-size: 2.5rem;
   }
   
   .hero-eyebrow {
     font-size: var(--font-size-tiny);
   }
   
   .hero-description {
     font-size: var(--font-size-small);
   }

   /* Hide circle arrow on very small screens */
   .hero-arrow-circle {
     display: none;
   }
   
   /* Reset margin when arrow is hidden */
   .hero-style1 {
     margin-bottom: var(--spacing-4);
   }
 }