/* =========================================================
   HERO SYSTEM
   Global Hero Architecture
========================================================= */




/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  z-index: 1;

  min-height:
    100vh;

  overflow: hidden;

  display: flex;

  align-items: flex-end;
}



/* =========================================================
   HERO MEDIA
========================================================= */

.hero-media {
  position: absolute;

  inset: 0;

  z-index: 0;
}



.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}



/* =========================================================
   HERO INNER
========================================================= */

.hero-inner {
  position: relative;

  z-index:
    var(--layer-content);

  width: 100%;

  padding:
     0
    var(--section-padding-x)
    var(--space-3xl);
}



/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
  width: 100%;
}



/* =========================================================
   HERO ROW
========================================================= */

.hero-row {
  display: flex;

  align-items: flex-end;

  justify-content: flex-start;
}



/* =========================================================
   HERO LEFT
========================================================= */

.hero-left {
  width: 100%;

  max-width:
    var(--container-width);
}



/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {
  white-space:
    nowrap;
}


/* =========================================================
   HERO SUBTITLE
========================================================= */

.hero-subtitle {

}



/* =========================================================
   HERO BOTTOM
========================================================= */

.hero-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  margin-top:
    var(--space-sm);
}



/* =========================================================
   HERO COPY
========================================================= */

.hero-copy {
  max-width:
    720px;

  margin-top:
    var(--space-lg);
}



/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
  display: flex;

  align-items: center;

  gap:
    var(--space-sm);

  transform:
    translateY(-10px);
}





/* ---------------------------------------------------------
   LIGHT
--------------------------------------------------------- */

.hero--light .hero-overlay {

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0.34) 100%
    );
}



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

@media (max-width: 980px) {

  .hero-inner {
    padding:
      var(--hero-padding-tablet);
  }

  .hero-title {
    white-space:
      normal;
  }

  .hero-bottom {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      var(--space-lg);

    margin-top:
      var(--space-lg);
  }

  .hero-actions {
    transform:
      none;

    flex-wrap:
      wrap;
  }

}