/* -------------------------------- */
/* -- DEL PLAYOFFS ---------------- */
/* -------------------------------- */

.delplayoffs-content {
  gap: 30px;
}

.delplayoffs-round {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 24px;
}


/* -------------------------------- */
/* -- SERIES LIST ----------------- */
/* -------------------------------- */

.delplayoffs-serieslist {
  --series-gap: 30px;

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

  gap: var(--series-gap);
}

.delplayoffs-serieslist > .delplayoffs-series:only-child {
  grid-column: 1 / -1;

  width: calc((100% - var(--series-gap)) / 2);

  justify-self: center;
}


/* -------------------------------- */
/* -- SERIES ---------------------- */
/* -------------------------------- */

.delplayoffs-series {
  overflow: hidden;

  background: var(--background);

  border: 1px solid var(--primary-10);
  border-radius: 28px;

  box-shadow: 0 10px 30px var(--primary-5);
}


/* -------------------------------- */
/* -- SERIES HEADER --------------- */
/* -------------------------------- */

.delplayoffs-serieshead {
  min-height: 50px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;

  gap: 20px;
  padding: 24px;

  background-color: var(--primary-5);

  border-bottom: 1px solid var(--primary-10);
}


/* -------------------------------- */
/* -- SERIES CLUB ----------------- */
/* -------------------------------- */

.delplayoffs-seriesclub {
  min-width: 0;

  display: flex;
  align-items: center;
}

.delplayoffs-seriesclub--home {
  justify-content: flex-start;
}

.delplayoffs-seriesclub--away {
  justify-content: flex-end;
}


/* -------------------------------- */
/* -- SERIES TEAM ----------------- */
/* -------------------------------- */

.delplayoffs-team {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  color: var(--primary);

  font-weight: 650;

  text-decoration: none;
}

.delplayoffs-team--left {
  justify-content: flex-start;

  text-align: left;
}

.delplayoffs-team--right {
  justify-content: flex-end;

  text-align: right;
}

.delplayoffs-team span {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* -------------------------------- */
/* -- TEAM LOGO ------------------- */
/* -------------------------------- */

.delplayoffs-teamlogo {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  object-fit: contain;

  transition: all .3s ease;
}


/* -------------------------------- */
/* -- CLUB HOVER ------------------ */
/* -------------------------------- */

.delplayoffs-team:hover .delplayoffs-teamlogo,
.delplayoffs-gameclub:hover .delplayoffs-teamlogo {
  transform: scale(1.1);
}


/* -------------------------------- */
/* -- SERIES STATUS --------------- */
/* -------------------------------- */

.delplayoffs-seriesstatus {
  min-width: 70px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 3px;

  text-align: center;
  white-space: nowrap;
}

.delplayoffs-seriesstatus span {
  color: var(--primary-60);

  font-size: .78rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: .08em;
}

.delplayoffs-seriesstatus strong {
  color: var(--primary);

  font-size: 2rem;
  line-height: 1;
}


/* -------------------------------- */
/* -- GAMES ----------------------- */
/* -------------------------------- */

.delplayoffs-games {
  display: flex;
  flex-direction: column;
}

.delplayoffs-game {
  padding: 16px 20px;

  border-bottom: 1px solid var(--primary-10);
}

.delplayoffs-game:last-child {
  border-bottom: 0;
}


/* -------------------------------- */
/* -- GAME META ------------------- */
/* -------------------------------- */

.delplayoffs-gamemeta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;
  margin-bottom: 10px;

  color: var(--primary-60);

  font-size: .82rem;
}

.delplayoffs-gamemeta time {
  text-align: right;
}


/* -------------------------------- */
/* -- GAME BODY ------------------- */
/* -------------------------------- */

.delplayoffs-gamebody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;

  gap: 12px;
}


/* -------------------------------- */
/* -- GAME CLUB WRAPPER ----------- */
/* -------------------------------- */

.delplayoffs-gameclubwrapper {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.delplayoffs-gameclubwrapper--away {
  justify-content: flex-end;
}

/* -------------------------------- */
/* -- GAME CLUB ------------------- */
/* -------------------------------- */

.delplayoffs-gameclub {
  width: fit-content;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-size: .95rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.delplayoffs-gameclub--away {
  text-align: right;
}

.delplayoffs-gameclub span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delplayoffs-gameclub .delplayoffs-teamlogo {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}


/* -------------------------------- */
/* -- GAME SCORE ------------------ */
/* -------------------------------- */

.delplayoffs-gamescore {
  min-width: 54px;

  color: var(--primary);

  font-size: 1.1rem;
  line-height: 1;

  text-align: center;
}


/* -------------------------------- */
/* -- TABLET ---------------------- */
/* -------------------------------- */

@media (max-width: 900px) {

  .delplayoffs-serieslist {
    grid-template-columns: 1fr;
  }

  .delplayoffs-serieslist > .delplayoffs-series:only-child {
    grid-column: auto;

    width: 100%;
  }

}


/* -------------------------------- */
/* -- MOBILE ---------------------- */
/* -------------------------------- */

@media (max-width: 600px) {

  .delplayoffs-serieshead {
    min-height: 0;

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

    gap: 8px;
    padding: 18px 14px;
  }


  /* -------------------------------- */
  /* -- SERIES CLUB ----------------- */

  .delplayoffs-seriesclub--home {
    justify-content: flex-start;
  }

  .delplayoffs-seriesclub--away {
    justify-content: flex-end;
  }


  /* -------------------------------- */
  /* -- SERIES TEAM ----------------- */

  .delplayoffs-team {
    gap: 6px;

    font-size: .82rem;
  }

  .delplayoffs-team--left {
    flex-direction: row;

    justify-content: flex-start;

    text-align: left;
  }

  .delplayoffs-team--right {
    flex-direction: row;

    justify-content: flex-end;

    text-align: right;
  }

  .delplayoffs-team span {
    max-width: 65px;
  }


  /* -------------------------------- */
  /* -- SERIES LOGO ----------------- */

  .delplayoffs-teamlogo {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;
  }


  /* -------------------------------- */
  /* -- SERIES STATUS --------------- */

  .delplayoffs-seriesstatus {
    min-width: 58px;

    gap: 2px;
  }

  .delplayoffs-seriesstatus span {
    font-size: .65rem;
  }

  .delplayoffs-seriesstatus strong {
    font-size: 1.15rem;
  }


  /* -------------------------------- */
  /* -- GAME ------------------------ */

  .delplayoffs-game {
    padding: 14px;
  }

  .delplayoffs-gamemeta {
    gap: 8px;
    margin-bottom: 8px;

    font-size: .75rem;
  }


  /* -------------------------------- */
  /* -- GAME BODY ------------------- */

  .delplayoffs-gamebody {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    gap: 8px;
  }


  /* -------------------------------- */
  /* -- GAME CLUB ------------------- */

  .delplayoffs-gameclub {
    gap: 6px;

    font-size: .82rem;
  }

  .delplayoffs-gameclub span {
    max-width: 55px;
  }

  .delplayoffs-gameclub .delplayoffs-teamlogo {
    width: 24px;
    height: 24px;

    flex: 0 0 24px;
  }


  /* -------------------------------- */
  /* -- GAME SCORE ------------------ */

  .delplayoffs-gamescore {
    min-width: 48px;

    font-size: 1rem;
  }

}