/* Teams */
.github-markdown-content dl:has(span:is(.pos1, .pos2, .pos3, .pos4, .pos5)) {
  --team-accent: var(--color-accent);
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  grid-auto-flow: dense;
  column-gap: 12px;

  @media screen and (max-width: 1024px) {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    column-gap: 8px;
  }

  @media screen and (max-width: 522px) {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    column-gap: 6px;
  }

  /* Team Logo */
  dt {
    grid-column: 1;
    display: flex;
    justify-content: center;
    width: stretch;
    margin: 0 !important;
    padding-inline: 12px;
    box-sizing: border-box;

    img {
      display: block;
      width: 100%;
      height: 100%;
      min-width: 150px;
      min-height: 150px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      justify-self: center;
    }

    &:hover,
    &:has(+ dd > a:hover) {
      img,
      & + dd > a {
        filter: drop-shadow(
            0px 0px 2px oklch(from var(--team-accent) l c h / 75%)
          )
          drop-shadow(0px 0px 4px oklch(from var(--team-accent) l c h / 65%))
          drop-shadow(0px 0px 8px oklch(from var(--team-accent) l c h / 45%));
      }
    }
  }

  /* Name & Region */
  dd:nth-of-type(7n + 1),
  dd:nth-of-type(7n + 2) {
    grid-column: 1;
    box-sizing: border-box;
    height: 1lh;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  /* Team Name */
  dd:nth-of-type(7n + 1) {
    font-size: var(--bl);
    font-weight: 700;

    a {
      background: var(--text-gradient);
      background-blend-mode: screen, normal;
      background-clip: text;
      -webkit-text-fill-color: transparent;

      &:hover {
        filter: drop-shadow(
            0px 0px 2px oklch(from var(--team-accent) l c h / 75%)
          )
          drop-shadow(0px 0px 4px oklch(from var(--team-accent) l c h / 65%))
          drop-shadow(0px 0px 8px oklch(from var(--team-accent) l c h / 45%));
      }
    }
  }

  /* Region */
  dd:nth-of-type(7n + 2) {
    font-size: var(--bs);
    font-weight: 700;
    background: var(--text-gradient);
    background-blend-mode: screen, normal;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Players */
  dd:has(span:is(.pos1, .pos2, .pos3, .pos4, .pos5)) {
    grid-row: span 3;
    display: flex;
    gap: 12px;
    justify-content: center;
    height: 100%;
    padding: 0px;

    span {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      border-radius: 8px;
      margin-bottom: 24px;
      padding-block: 0 12px;
      padding-inline: 12px;
      background-color: oklch(
        from var(--team-accent) calc(l * 0.85) calc(c * 1.25) h / 15%
      );
      box-sizing: border-box;
      font-size: var(--bt);
      text-align: center;
      text-wrap: pretty;
      box-shadow:
          /* drop shadow */
        0px 1px 4px
          oklch(from var(--team-accent) calc(l * 0.15) calc(c * 1.25) h / 75%),
        0px 4px 8px
          oklch(from var(--team-accent) calc(l * 0.2) calc(c * 1.5) h / 45%),
        0px 8px 16px
          oklch(from var(--team-accent) calc(l * 0.25) calc(c * 1.75) h / 25%),
        /* inner glow */ inset 0px 2px 8px
          oklch(from var(--team-accent) calc(l * 0.85) calc(c * 1.25) h / 25%),
        inset 0px 1px 8px
          oklch(from var(--team-accent) calc(l * 0.85) calc(c * 1.25) h / 35%),
        inset 0px 1px 3px
          oklch(from var(--team-accent) calc(l * 0.85) calc(c * 1.25) h / 45%),
        inset 0px -1px 3px
          oklch(from var(--team-accent) calc(l * 0.85) calc(c * 1.25) h / 45%),
        inset 0px -1px 8px
          oklch(from var(--team-accent) calc(l * 0.85) calc(c * 1.25) h / 35%),
        inset 0px -2px 8px
          oklch(from var(--team-accent) calc(l * 0.85) calc(c * 1.25) h / 25%);

      &:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: var(--background);
        aspect-ratio: 1 / 1;
      }

      &:after {
        position: absolute;
        content: "";
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        pointer-events: none;
        filter: opacity(0.85)
          drop-shadow(0px 0px 2px oklch(from var(--team-accent) l c h / 90%))
          drop-shadow(0px 0px 4px oklch(from var(--team-accent) l c h / 50%))
          drop-shadow(0px 0px 8px oklch(from var(--team-accent) l c h / 25%));
      }

      &.pos1:after {
        background: no-repeat center / 32px 32px
          url("./guides/ti-2025/images/icons/safelane.svg");
      }

      &.pos2:after {
        background: no-repeat center / 32px 32px
          url("./guides/ti-2025/images/icons/midlane.svg");
      }

      &.pos3:after {
        background: no-repeat center / 32px 32px
          url("./guides/ti-2025/images/icons/offlane.svg");
      }

      &.pos4:after {
        background: no-repeat center / 32px 32px
          url("./guides/ti-2025/images/icons/soft-support.svg");
      }

      &.pos5:after {
        background: no-repeat center / 32px 32px
          url("./guides/ti-2025/images/icons/hard-support.svg");
      }

      a {
        position: relative;
        display: table;
        margin-inline: -12px;
        margin-bottom: 8px;
        font-size: var(--bs);
        text-align: center;

        /* Player Portait */
        img {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
          min-width: 150px;
          min-height: 150px;
          margin-bottom: 8px;
          aspect-ratio: 1 / 1;
          object-fit: cover;
          clip-path: content-box;
          filter: drop-shadow(
              0px 0px 4px oklch(from var(--team-accent) l c h / 45%)
            )
            drop-shadow(0px 0px 12px oklch(from var(--team-accent) l c h / 45%))
            drop-shadow(0px 0px 24px oklch(from var(--team-accent) l c h / 75%));
          transition: filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        &:hover {
          img {
            filter: contrast(1.15) brightness(1.05)
              drop-shadow(
                0px 0px 4px oklch(from var(--team-accent) l c h / 45%)
              )
              drop-shadow(
                0px 0px 12px oklch(from var(--team-accent) l c h / 45%)
              )
              drop-shadow(
                0px 0px 24px oklch(from var(--team-accent) l c h / 75%)
              );
          }
        }

        /* Name */
        em {
          background: var(--text-gradient);
          background-blend-mode: lighten, normal;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          font: normal 800 var(--ht) / 1.5 var(--family-display);
          filter: drop-shadow(
              0px 0px 2px oklch(from var(--team-accent) l c h / 75%)
            )
            drop-shadow(0px 0px 4px oklch(from var(--team-accent) l c h / 65%))
            drop-shadow(0px 0px 8px oklch(from var(--team-accent) l c h / 45%));
        }
      }

      /* Team Backgrounds */
      &.liquid {
        --team-accent: oklch(53.6% 0.166 253.21);
        --background: center/cover
          url("./guides/ti-2025/images/teams/team-liquid/bg-team-liquid.webp");
      }

      &.paravision {
        --team-accent: oklch(81.09% 0.138 164.5);
        --background: center/cover
          url("./guides/ti-2025/images/teams/paravision/bg-paravision.webp");
      }

      &.betboom {
        --team-accent: oklch(75.61% 0.146 21.61);
        --background: center/cover
          url("./guides/ti-2025/images/teams/betboom-team/bg-betboom-team.webp");
      }

      &.tidebound {
        --team-accent: oklch(82.41% 0.096 243.21);
        --background: center/cover
          url("./guides/ti-2025/images/teams/team-tidebound/bg-team-tidebound.webp");
      }

      &.spirit {
        --team-accent: oklch(66.53% 0.21 300.72);
        --background: center/cover
          url("./guides/ti-2025/images/teams/team-spirit/bg-team-spirit.webp");
      }

      &.falcons {
        --team-accent: oklch(73.43% 0.195 136.47);
        --background: center/cover
          url("./guides/ti-2025/images/teams/team-falcons/bg-team-falcons.webp");
      }

      &.tundra {
        --team-accent: oklch(70.91% 0.184 302.3);
        --background: center/cover
          url("./guides/ti-2025/images/teams/tundra-esports/bg-tundra-esports.webp");
      }

      &.yakotou {
        --team-accent: oklch(73.66% 0.165 11.43);
        --background: center/cover
          url("./guides/ti-2025/images/teams/yakutou-brothers/bg-yakutou-brothers.webp");
      }

      &.navi {
        --team-accent: oklch(92.35% 0.168 100.65);
        --background: center/cover
          url("./guides/ti-2025/images/teams/natus-vincere/bg-natus-vincere.webp");
      }

      &.nigma {
        --team-accent: oklch(55.93% 0.218 297.18);
        --background: center/cover
          url("./guides/ti-2025/images/teams/nigma-galaxy/bg-nigma-galaxy.webp");
      }

      &.aurora {
        --team-accent: oklch(81.24% 0.152 164.49);
        --background: center/cover
          url("./guides/ti-2025/images/teams/aurora-gaming/bg-aurora-gaming.webp");
      }

      &.xtreme {
        --team-accent: oklch(75.68% 0.155 304.26);
        --background: center/cover
          url("./guides/ti-2025/images/teams/xtreme-gaming/bg-xtreme-gaming.webp");
      }

      &.nemesis {
        --team-accent: oklch(55.93% 0.218 297.18);
        --background: center/cover
          url("./guides/ti-2025/images/teams/team-nemesis/bg-team-nemesis.webp");
      }

      &.boom {
        --team-accent: oklch(54.36% 0.219 21.84);
        --background: center/cover
          url("./guides/ti-2025/images/teams/boom-esports/bg-boom-esports.webp");
      }

      &.wildcard {
        --team-accent: oklch(84.04% 0.112 222.24);
        --background: center/cover
          url("./guides/ti-2025/images/teams/wildcard/bg-wildcard.webp");
      }

      &.heroic {
        --team-accent: oklch(67.01% 0.217 22.5);
        --background: center/cover
          url("./guides/ti-2025/images/teams/heroic/bg-heroic.webp");
      }
    }
  }
}