/* ═══════════════════════════════════════════════════════════════════════════
 *                               HOME LANDING
 ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
 *                                  LAYOUT
 ═══════════════════════════════════════════════════════════════════════════ */
/* #region LAYOUT */

/* ═══════════════════════════════════════════════════════════════════════════

 *            Full-viewport centred grid with responsive padding

 ═══════════════════════════════════════════════════════════════════════════ */
.home-landing {
  min-height: 100vh;
  padding: clamp(1.5rem, 3vw, 3rem);
  display: grid;
  place-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* #endregion LAYOUT */


/* ═══════════════════════════════════════════════════════════════════════════


 *                                   LOGO


 ═══════════════════════════════════════════════════════════════════════════ */
/* #region LOGO */

/* ═══════════════════════════════════════════════════════════════════════════

 *             Fluid logo sizing constrained by viewport height

 ═══════════════════════════════════════════════════════════════════════════ */
.home-landing__logo {
  width: min(88vw, 72rem);
  max-height: 58vh;
  object-fit: contain;
}

/* #endregion LOGO */


/* ═══════════════════════════════════════════════════════════════════════════


 *                             GATEWAY SECTION


 ═══════════════════════════════════════════════════════════════════════════ */
/* #region GATEWAY SECTION */

/* ═══════════════════════════════════════════════════════════════════════════

 *               Centred intro text and link group container

 ═══════════════════════════════════════════════════════════════════════════ */
.home-landing__connect {
  display: grid;
  justify-items: center;
  gap: var(--NV-Space-LG);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════

 *                        Intro paragraph typography

 ═══════════════════════════════════════════════════════════════════════════ */
.home-landing__intro {
  color: var(--NV-Black);
  font-size: clamp(0.85rem, 1.3vw, 1.05rem);
  line-height: 1.5;
  letter-spacing: var(--NV-Letter-Spacing-Wide);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════

 *                          Page navigation links

 ═══════════════════════════════════════════════════════════════════════════ */
.home-landing__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════

 *                            Contact links row

 ═══════════════════════════════════════════════════════════════════════════ */
.home-landing__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* #endregion GATEWAY SECTION */


/* ═══════════════════════════════════════════════════════════════════════════


 *                                  MOBILE


 ═══════════════════════════════════════════════════════════════════════════ */
/* #region MOBILE */

/* ═══════════════════════════════════════════════════════════════════════════

 *          Stack layout and constrain widths on narrow viewports

 ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .home-landing {
    align-content: center;
  }

  .home-landing__logo {
    width: min(100%, 32rem);
    max-height: 48vh;
  }

  .home-landing__connect {
    margin-top: 2rem;
  }

  .home-landing__pages,
  .home-landing__links {
    width: 100%;
    display: grid;
  }

  .home-landing__link {
    width: min(100%, 20rem);
    justify-self: center;
  }
}

/* #endregion MOBILE */