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

.hero-wrapper {
  position: relative;

  height: 100vh;

  z-index: 1;
}



/* =========================================================
   PAGE
========================================================= */

.black-page {
  background:
    var(--light);

  color:
    var(--dark);
}



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

.cinema-page .hero {
  position: relative;

  inset: 0;

  z-index: 1;

  height: 100vh;

  background-image:
    url("../../assets/images/clara-hero-pro-fade.jpg");

  background-position:
    center center;

  background-size:
    cover;

  background-repeat:
    no-repeat;

  background-attachment:
    scroll;

  display:
    flex;

  align-items:
    flex-end;
}



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

.hero::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        var(--opacity-medium)
      ) 0%,

      rgba(
        255,
        255,
        255,
        var(--opacity-strong)
      ) 100%
    );

  z-index:
    var(--layer-overlay);
}



/* =========================================================
   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 BOTTOM
========================================================= */

.hero-bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    100%;

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



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

.hero-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    var(--space-sm);

  transform:
    translateY(-10px);
}



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

@media (max-width: 980px) {

  .cinema-page .hero {
    background-position:
      65% center;
  }

  .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;
  }

}