/* ==========================================================
   PROJECT XAMUCO
   File: hero.css
   Version: 1.0.0
   Description: Hero Section
========================================================== */

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

.hero {
  position: relative;

  display: flex;

  align-items: center;

  min-height: 100vh;

  overflow: hidden;

  background-color: var(--color-dark);

  background-image: url("../assets/images/hero/hero-desktop.webp");

  background-position: center right;

  background-repeat: no-repeat;

  background-size: cover;
}

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

.hero__overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 38%,
    rgba(0, 0, 0, 0.15) 68%,
    rgba(0, 0, 0, 0) 100%
  );

  z-index: var(--z-base);
}

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

.hero__container {
  min-height: 100vh;

  display: grid;

  grid-template-columns: 5fr 7fr;

  align-items: center;

  gap: var(--space-2xl);
}

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

.hero__content {
  grid-column: 1;

  max-width: 34rem;

  align-self: center;

  justify-self: start;

  color: var(--color-background);

  z-index: var(--z-base);
}

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

.hero__content > * {
  margin-left: clamp(2rem, 4vw, 6rem);
}

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

.hero__eyebrow {
  display: inline-block;

  margin-bottom: var(--space-sm);

  font-size: var(--fs-sm);

  font-weight: var(--fw-regular);

  letter-spacing: 0.45em;

  text-transform: uppercase;

  color: var(--color-background);

  opacity: 0.9;
}

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

.hero__title {
  margin-bottom: var(--space-xl);

  font-size: clamp(3rem, 12vw, 4rem);

  line-height: 0.92;

  color: var(--color-primary);

  text-transform: uppercase;
}

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

.hero__description {
  max-width: 30rem;

  margin-bottom: var(--space-xl);

  font-size: var(--fs-lg);

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.88);
}