/* ============================================================
   TEAM PAGE
   ============================================================ */

.team-page {

  min-height:
    calc(100vh - 72px);

  position: relative;

  overflow: visible;

  padding:
    35px 20px 80px;

}


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

.team-title {

  margin:
    0 0 40px;

  text-align: center;

  font-family:
    "Alan Sans",
    sans-serif;

  font-size:
    clamp(
      32px,
      4vw,
      52px
    );

  font-weight: 900;

  color:
    #399447;

  text-transform: uppercase;

}


/* ============================================================
   TEAM LIST
   ============================================================ */

.team-list {

  width:
    min(
      100%,
      2000px
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    repeat(
      8,
      minmax(0, 1fr)
    );

  gap:
    40px;

  align-items:
    start;

  overflow:
    visible;

  position:
    relative;

  z-index:
    2;

}


/* ============================================================
   LAST 4 TEAMS
   ============================================================ */



/* ============================================================
   TEAM CARD
   ============================================================ */

.team-card {

  width:
    100%;

  height:
    230px;

  position:
    relative;

  background:
    #f8f8f8;

  box-shadow:
    0 2px 7px
    rgba(
      0,
      0,
      0,
      .20
    );

  overflow:
    visible;

}


/* ============================================================
   TEAM CARD BOTTOM
   ============================================================ */

.team-card::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    22px;

  background:
    #f8f8f8;

  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 55%,
      50% 100%,
      0 55%
    );

  z-index:
    1;

  pointer-events:
    none;

}


/* ============================================================
   TEAM BANNER
   ============================================================ */

.team-short-name {

  position:
    relative;

  z-index:
    10;

  width:
    125%;

  height:
    55px;

  margin-left:
    -12.5%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background-image:
    url(
      "assets/group_banner_template.png"
    );

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    100% 100%;

  color:
    white;

  font-family:
    "Alan Sans",
    sans-serif;

  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    .5px;

  text-transform:
    uppercase;

  text-align:
    center;

  flex-shrink:
    0;

  pointer-events:
    none;

}


/* ============================================================
   LOGO AREA
   ============================================================ */

.team-logo-container {

  width:
    100%;

  height:
    calc(
      100% - 55px
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px 10px 35px;

  box-sizing:
    border-box;

  position:
    relative;

  z-index:
    2;

}


/* ============================================================
   LOGO
   ============================================================ */

.team-logo {

  width:
    150%;

  height:
    150%;

  object-fit:
    contain;

  display:
    block;

}


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

@media (max-width: 1100px) {

  .team-page {

    padding:
      30px 20px 70px;

  }

  .team-list {

    grid-template-columns:
      repeat(
        5,
        minmax(120px, 1fr)
      );

    gap:
      35px 20px;

  }

}


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

@media (max-width: 800px) {

  .team-title {

    font-size:
      38px;

    margin-bottom:
      32px;

  }

  .team-list {

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

    gap:
      38px 22px;

  }

  .team-card {

    height:
      215px;

  }

  .team-short-name {

    width:
      116%;

    height:
      50px;

    margin-left:
      -8%;

    font-size:
      12px;

  }

  .team-logo-container {

    height:
      calc(
        100% - 50px
      );

    padding:
      15px 8px 30px;

  }

  .team-logo {

    width:
      78%;

    height:
      78%;

  }

}


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

@media (max-width: 620px) {

  .team-page {

    min-height:
      calc(
        100vh - 64px
      );

    padding:
      35px 16px 70px;

  }


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

  .team-title {

    margin:
      0 0 30px;

    font-size:
      32px;

    line-height:
      1;

    letter-spacing:
      -.5px;

  }


  /* =========================
     TEAM GRID
     ========================= */

  .team-list {

    width:
      100%;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      32px 14px;

  }


  /* =========================
     TEAM CARD
     ========================= */

  .team-card {

    height:
      205px;

  }


  /* =========================
     BANNER
     ========================= */

  .team-short-name {

    width:
      116%;

    height:
      48px;

    margin-left:
      -8%;

    font-size:
      11px;

    letter-spacing:
      .3px;

  }


  /* =========================
     LOGO AREA
     ========================= */

  .team-logo-container {

    height:
      calc(
        100% - 48px
      );

    padding:
      14px 7px 28px;

  }


  /* =========================
     LOGO
     ========================= */

  .team-logo {

    width:
      76%;

    height:
      76%;

  }


  /* =========================
     BOTTOM SHAPE
     ========================= */

  .team-card::after {

    height:
      19px;

  }

}


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

@media (max-width: 400px) {

  .team-page {

    padding:
      30px 14px 60px;

  }


  .team-title {

    margin-bottom:
      27px;

    font-size:
      28px;

  }


  .team-list {

    gap:
      28px 11px;

  }


  .team-card {

    height:
      190px;

  }


  .team-short-name {

    width:
      118%;

    height:
      44px;

    margin-left:
      -9%;

    font-size:
      10px;

  }


  .team-logo-container {

    height:
      calc(
        100% - 44px
      );

    padding:
      12px 5px 25px;

  }


  .team-logo {

    width:
      74%;

    height:
      74%;

  }


  .team-card::after {

    height:
      17px;

  }

}


/* ============================================================
   NAVBAR - MOBILE
   ============================================================ */

.nav-toggle {

  display: none;

}


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

@media (max-width: 620px) {

  /* =========================
     NAVBAR
     ========================= */

  .navbar {

    width: 100%;

    min-height: 64px;

    padding:
      0 18px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    z-index: 1000;

  }


  /* =========================
     LOGO
     ========================= */

  .nav-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

  }

  .nav-logo img {

    width: 78px;

    height: auto;

    display: block;

  }


  /* =========================
     HAMBURGER
     ========================= */

  .nav-toggle {

    width: 42px;

    height: 42px;

    padding: 0;

    border: none;

    background: transparent;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    cursor: pointer;

    position: relative;

    z-index: 1002;

  }


  .nav-toggle span {

    width: 22px;

    height: 2px;

    display: block;

    background: #f8f8f8;

    border-radius: 2px;

    transition:
      transform .25s ease,
      opacity .2s ease;

  }


  /* =========================
     HAMBURGER -> X
     ========================= */

  .nav-toggle.active span:nth-child(1) {

    transform:
      translateY(7px)
      rotate(45deg);

  }

  .nav-toggle.active span:nth-child(2) {

    opacity: 0;

  }

  .nav-toggle.active span:nth-child(3) {

    transform:
      translateY(-7px)
      rotate(-45deg);

  }


  /* =========================
     MENU
     ========================= */

  .nav-menu {

    position: absolute;

    top: 64px;

    left: 12px;

    right: 12px;

    padding:
      12px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 4px;

    background:
      rgba(
        255,
        255,
        255,
        .97
      );

    box-shadow:
      0 10px 30px
      rgba(
        40,
        70,
        40,
        .15
      );

    border:
      1px solid
      rgba(
        39,
        141,
        62,
        .08
      );

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-10px);

    transition:
      opacity .2s ease,
      transform .2s ease,
      visibility .2s ease;

    z-index: 1001;

  }


  /* =========================
     OPEN MENU
     ========================= */

  .nav-menu.active {

    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);

  }


  /* =========================
     MENU LINKS
     ========================= */

  .nav-menu > a:not(.play-now) {

    width: 100%;

    min-height: 45px;

    padding:
      0 16px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-decoration: none;

    color: #52634e;

    background: transparent;

    transition:
      background .2s ease,
      color .2s ease;

  }


  .nav-menu > a:not(.play-now):hover {

    color: #278d3e;

    background:
      rgba(
        39,
        141,
        62,
        .06
      );

  }


  /* =========================
     ACTIVE
     ========================= */

  .nav-menu > a.active {

    color: #278d3e;

    background:
      rgba(
        39,
        141,
        62,
        .08
      );

  }


  /* =========================
     PLAY NOW
     ========================= */

  .nav-menu .play-now {

    width: 100%;

    height: 44px;

    margin-top: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    font-size: 11px;

  }

}


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

@media (max-width: 400px) {

  .navbar {

    min-height: 60px;

    padding:
      0 15px;

  }


  .nav-logo img {

    width: 70px;

  }


  .nav-toggle {

    width: 40px;

    height: 40px;

  }


  .nav-menu {

    top: 60px;

    left: 10px;

    right: 10px;

  }

}