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


/*
   HERO IMAGE

   The actual image lives at:

   assets/images/pizza-hero.jpg

   The image is deliberately handled through
   CSS so desktop and mobile can use different
   positioning without touching the HTML.
*/


.hero {

  position:
    relative;

  min-height:
    610px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  color:
    white;

  background:
    #080808;

}


/* =========================================
   HERO IMAGE LAYER
========================================= */

.hero::after {

  content:
    "";

  position:
    absolute;

  z-index:
    0;

  inset:
    0;

  background-image:

    linear-gradient(
      90deg,
      rgba(8, 8, 8, .97) 0%,
      rgba(8, 8, 8, .88) 27%,
      rgba(8, 8, 8, .50) 48%,
      rgba(8, 8, 8, .12) 72%,
      rgba(8, 8, 8, .10) 100%
    ),

    url("../images/pizza-hero.jpg");

  background-size:
    cover;

  background-position:
    center center;

  background-repeat:
    no-repeat;

}


/* =========================================
   SUBTLE TEXTURE
========================================= */

.hero::before {

  content:
    "";

  position:
    absolute;

  z-index:
    1;

  inset:
    0;

  opacity:
    .10;

  pointer-events:
    none;

  background-image:

    radial-gradient(
      #ffffff 1px,
      transparent 1px
    );

  background-size:
    26px
    26px;

}


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

.hero-content {

  position:
    relative;

  z-index:
    3;

  width:
    52%;

  max-width:
    760px;

  padding:
    85px
    4vw
    105px
    7vw;

}


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

.hero .eyebrow {

  margin:
    0
    0
    14px;

  color:
    var(--red);

  font-size:
    .78rem;

  font-weight:
    900;

  letter-spacing:
    .17em;

}


/* =========================================
   HEADLINE
========================================= */

.hero h1 {

  max-width:
    650px;

  margin:
    0;

  font-size:
    clamp(
      3rem,
      6.2vw,
      6.1rem
    );

  line-height:
    .91;

  letter-spacing:
    -.075em;

}


.hero h1 span {
  color: white;
}

.hero-ampersand {
  color: var(--red);
}

/* =========================================
   HERO AMPERSAND ACCENT
========================================= */

.hero h1 span.hero-ampersand {
  color: var(--red) !important;
}

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

.hero-text {

  max-width:
    520px;

  margin:
    27px
    0
    32px;

  color:
    rgba(
      255,
      255,
      255,
      .78
    );

  font-size:
    .98rem;

  line-height:
    1.7;

}


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

.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

}


/*
   Slightly stronger buttons inside
   the hero so they remain visible
   over the photograph.
*/

.hero .button {

  min-height:
    52px;

  padding:
    0
    24px;

}


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

.hero-benefits {

  position:
    absolute;

  z-index:
    4;

  bottom:
    0;

  left:
    0;

  right:
    0;

  display:
    flex;

  justify-content:
    center;

  gap:
    8vw;

  padding:
    18px
    5vw;

  background:
    rgba(
      0,
      0,
      0,
      .76
    );

  font-size:
    .78rem;

  backdrop-filter:
    blur(5px);

}


.hero-benefits div {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

}


.hero-benefits span {
  color: var(--red);
}


/* =========================================
   DESKTOP IMAGE POSITION
========================================= */

/*
   The pizza in the supplied hero image
   is intentionally kept toward the
   right-hand visual zone.

   This is the main value we can tune
   later without touching the image.
*/

@media (min-width: 1101px) {

  .hero::after {

    background-position:
      67% center;

  }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

  .hero-content {

    width:
      58%;

    padding-left:
      6vw;

  }


  .hero::after {

    background-position:
      70% center;

  }


  .hero h1 {

    font-size:
      clamp(
        3rem,
        7vw,
        5rem
      );

  }

}


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

.hero h1 .hero-accent {
  color: var(--red);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 760px) {

  .hero {

    min-height:
      700px;

    align-items:
      flex-start;

  }


  /* -----------------------------------------
     MOBILE HERO IMAGE
  ----------------------------------------- */

  .hero::after {

    background-image:

      linear-gradient(
        180deg,
        rgba(8, 8, 8, .82) 0%,
        rgba(8, 8, 8, .68) 32%,
        rgba(8, 8, 8, .35) 65%,
        rgba(8, 8, 8, .12) 100%
      ),

      url("../images/pizza-hero.jpg");

    background-position:
      69% center;

    background-size:
      cover;

  }


  /* -----------------------------------------
     CONTENT
  ----------------------------------------- */

  .hero-content {

    width:
      100%;

    max-width:
      none;

    padding:
      110px
      20px
      155px;

  }


  /* -----------------------------------------
     EYEBROW
  ----------------------------------------- */

  .hero .eyebrow {

    font-size:
      .72rem;

    letter-spacing:
      .14em;

  }


  /* -----------------------------------------
     HEADLINE
  ----------------------------------------- */

  .hero h1 {

    width:
      100%;

    max-width:
      none;

    font-size:
      clamp(
        3rem,
        12.5vw,
        4.4rem
      );

    line-height:
      .92;

    letter-spacing:
      -.075em;

  }


  /* -----------------------------------------
     DESCRIPTION
  ----------------------------------------- */

  .hero-text {

    width:
      100%;

    max-width:
      none;

    margin:
      24px
      0
      32px;

    font-size:
      .96rem;

    line-height:
      1.65;

  }


  /* -----------------------------------------
     BUTTONS
  ----------------------------------------- */

  .hero-actions {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      12px;

  }


  .hero .button {

    min-height:
      52px;

    padding:
      0
      22px;

  }


  /* -----------------------------------------
     BENEFITS
  ----------------------------------------- */

  .hero-benefits {

    flex-direction:
      column;

    align-items:
      center;

    gap:
      8px;

    padding:
      17px
      20px;

    font-size:
      .7rem;

  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .hero {

    min-height:
      690px;

  }


  .hero::after {

    background-position:
      71% center;

  }


  .hero-content {

    padding:
      92px
      18px
      145px;

  }


  .hero h1 {

    font-size:
      3rem;

    line-height:
      .92;

    letter-spacing:
      -.075em;

  }


  .hero-text {

    margin:
      22px
      0
      27px;

    font-size:
      .92rem;

    line-height:
      1.65;

  }


  .hero .button {

    min-height:
      50px;

  }

}