/* =========================================================
   HOMEPAGE
   ========================================================= */


/* =========================
   BASE
   ========================= */

.homepage {
  height: 100svh;
  overflow: hidden;

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

.homepage .site-name {
  color: var(--color-text);
}


/* =========================
   DESKTOP LAYOUT
   ========================= */

.homepage__layout {
  height: 100svh;
}

.homepage__main {
  grid-column: 2 / -1;
  grid-row: 1 / -1;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));

  column-gap: var(--site-column-gap);
  row-gap: var(--site-row-gap);
}


/* =========================
   VIDEO
   ========================= */

.homepage__video-wrapper {
  grid-column: 1 / -1;
  grid-row: 3 / -1;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background-color: transparent;
}

.homepage__video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  background-color: transparent;
}


/* =========================
   NAVIGATION
   ========================= */

.homepage .site-navigation__primary {
  gap: 0;
}

.homepage .site-navigation__link {
  color: var(--color-text);
}


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

@media (max-width: 767px) {
  .homepage__layout {
    width: 100%;
    height: 100svh;
    min-height: 100svh;

    padding:
      var(--page-padding-block)
      var(--page-padding-inline);

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));

    column-gap: var(--site-column-gap);
    row-gap: var(--site-row-gap);
  }

  .homepage__main {
    width: auto;
    height: auto;

    min-width: 0;
    min-height: 0;

    grid-column: 1 / -1;
    grid-row: 1 / -1;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));

    column-gap: var(--site-column-gap);
    row-gap: var(--site-row-gap);
  }

  .homepage__video-wrapper {
    grid-column: 1 / -1;
    grid-row: 3 / -1;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }

  .homepage__video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    background-color: transparent;
  }

  .homepage .mobile-header .site-name {
    color: var(--color-text);
  }

  .homepage .menu-button {
    color: var(--color-text);
  }

  .homepage .mobile-menu {
    padding-top: calc(
      var(--mobile-header-height) +
      var(--space-6)
    );
  }
}