/*
  =======================================================
  Hero Module Base Styles
  =======================================================
*/
.hero-module {
  max-width: 100%;
  max-height: clamp(650px, calc(1020px - 20vw), 1020px);
  overflow: hidden;
  
}

.hero-content {
   max-width: 1900px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0; /* add or adjust if needed */
}



/*
  =======================================================
  CSS Grid for 12-Column Layout
  =======================================================
*/


.hero-left-col {
  grid-column: 2 / span 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;               /* remove the fixed top margin */
  align-self: center;      /* centers vertically within the grid row */
}

.hero-right-col {
  grid-column: 7 / span 5;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
}

.hero-txt {
  margin-bottom: 50px;
  
}

.hero-txt h1 {
  margin: 0 0 30px;
  }

.hero-tag-repeater {
  display: flex;
  flex-wrap: wrap; 
  gap: 12px; 
  align-items: end;
  padding-bottom: 20px;
}

.hero-tags {
  display:flex;
  max-width: 290px;
  align-items: center;
  background-color: #1A1A1A;
  color: #FFF;
  padding: 12px 12px;
  gap: 8px; /* spacing between icon and text */
  border-radius: 3px;
}

.hero-tags > * {
  display: inline-flex; 
  min-width: 1em; 
}
.hero-tags svg,
.hero-tags i {
  color: #fff;
  fill: #fff; /* for SVGs */
}


.hero-cutout {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-cutout img {
  height: auto;
  width: auto;
  max-height: 100%;
  flex-shrink: 0;
  object-fit: contain;
  min-width: 500px;
  
}



/*
  =======================================================
  Responsive: Large Mobile (max-width: 767px)
  =======================================================
*/
@media (max-width: 767px) {
  .hero-module {
    display: flex;
    flex-direction: column-reverse; /* text below image */
    align-items: stretch;           /* text block spans full width */
    position: relative;
    min-height: 400px;
    max-height: none;
    width: 100%;
  }
  
  .hero-content {
    display: block;     /* remove grid so content stacks naturally */
    width: 100%;        /* span full width */
    max-width: 100%;    /* override the 1900px */
    margin: 0;          /* no auto-centering */
    padding-top: 100px;
  }

  .hero-left-col { 
    grid-column: auto;  /* reset grid placement */
    width: 100%;
    padding: 30px 20px; 
    background: transparent; 
    z-index: 3; 
    position: relative; 
    width: 100%;          /* take full width instead of grid */
    text-align: left; 
  }

  .hero-right-col {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-right-col::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 2;
    pointer-events: none;
  }
}

/*
  =======================================================
  Responsive: Small Mobile (max-width: 576px)
  =======================================================
*/

@media (max-width: 576px) {
  .hero-left-col {
    padding: 20px 10px;
    width: 100%;
    align-self: flex-start;
  }

  .hero-right-col::after {
    background: rgba(255,255,255,0.85); /* stronger for small screens */
  }
}


/* 
 =========================================================
  BACKGROUND STYLING 
 =========================================================
*/


.bg-purple {
  background: #FFF;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 15%, rgba(245, 235, 255, 1) 30%, rgba(232, 195, 255, 1) 75%)
  ;
}

.bg-yellow-purple {
  background: #FFF;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 12%, rgba(255, 242, 178, 1) 40%, rgba(232, 206, 255, 1) 75%, rgba(181, 93, 255, 1) 90%);
}

.bg-turquoise-purple {
  background: #FFF;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 5%, rgba(186, 249, 244, 1) 20%, rgba(232, 206, 255, 1) 60%);
}

.bg-yellow-purple-turquoise {
  background: #FFF;
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 5%, rgba(255, 242, 178, 1) 20%, rgba(232, 195, 255, 1) 50%, rgba(186, 249, 244, 1) 90%);
}

.bg-turquoise-green {
  background: #BAF9F4;
  background: linear-gradient(135deg, rgba(186, 249, 244, 1) 25%, rgba(211, 251, 164, 1) 75%);
}

.bg-halloween {
  background: #FF9954;
  background: linear-gradient(142deg, rgba(255, 153, 84, 1) 5%, rgba(232, 209, 215, 1) 37%, rgba(163, 53, 255, 1) 93%);
}