/*
============================================================
SERVICES BY GIO
SHARED RESPONSIVE HERO SYSTEM

IMPORTANT:
This file NEVER selects a hero image.

Each page owns its own:
- desktop hero image
- mobile hero image when applicable

This file only controls responsive geometry.
============================================================
*/


.hero {
  position:relative;

  background-repeat:no-repeat !important;
  background-color:#071b35 !important;
}


/* =========================================================
   STANDARD DESKTOP
========================================================= */

@media (min-width:1100px) and (max-width:1599px) {

  .hero {
    min-height:575px !important;

    background-size:cover !important;
    background-position:center right !important;
  }

  .hero > .container,
  .hero .container {
    min-height:575px;
  }

  .hero-content,
  .hero-copy {
    max-width:600px;
  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1600px) and (max-width:1919px) {

  .hero {
    min-height:650px !important;

    background-size:cover !important;
    background-position:58% center !important;
  }

  .hero > .container,
  .hero .container {
    min-height:650px;
  }

  .hero-content,
  .hero-copy {
    max-width:650px;
  }

}


/* =========================================================
   ULTRAWIDE
========================================================= */

@media (min-width:1920px) {

  .hero {
    min-height:700px !important;

    background-size:cover !important;
    background-position:58% center !important;
  }

  .hero > .container,
  .hero .container {
    min-height:700px;

    width:min(
      calc(100% - 100px),
      1600px
    ) !important;

    margin-inline:auto;
  }

  .hero-content,
  .hero-copy {
    max-width:690px;
  }

}


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

@media (min-width:651px) and (max-width:1099px) {

  .hero {
    min-height:590px !important;

    background-size:cover !important;
    background-position:center center !important;
  }

}


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

   IMPORTANT:
   No background-image is declared here.

   Every page keeps its own hero image.
========================================================= */

@media (max-width:650px) {

  .hero {
    min-height:545px !important;

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }

  .hero > .container,
  .hero .container {
    position:relative;
    z-index:2;

    min-height:545px;

    width:calc(100% - 38px) !important;

    margin-inline:auto;
  }

  .hero-content,
  .hero-copy {
    width:100%;
    max-width:100%;

    padding-top:45px;
    padding-bottom:26px;
  }

  .hero h1 {
    max-width:420px;

    font-size:clamp(
      39px,
      10vw,
      47px
    ) !important;

    line-height:.95;
  }

  .hero p {
    max-width:390px;

    font-size:16px;
    line-height:1.62;
  }

  .hero-actions {
    width:100%;

    display:grid !important;
    grid-template-columns:1fr !important;

    gap:14px !important;

    margin-top:24px;
  }

  .hero-actions .button,
  .hero-actions a {
    width:100%;
    min-height:49px;

    display:flex;
    align-items:center;
    justify-content:center;
  }

}


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

@media (max-width:420px) {

  .hero {
    min-height:565px !important;
  }

  .hero > .container,
  .hero .container {
    min-height:565px;

    width:calc(100% - 30px) !important;
  }

  .hero-content,
  .hero-copy {
    padding-top:42px;
    padding-bottom:24px;
  }

  .hero h1 {
    font-size:38px !important;
  }

  .hero p {
    font-size:15px;
  }

}