/* ==========================================================================
   SKYSTONE FAST LINKS V9
   Restaurado do modelo antigo:
   fundo JPG + personagem PNG independente + movimento no hover.
   ========================================================================== */

body.template-skystone .sky-fast-links {
    width: 100%;
    margin: 0;
    padding: 0;
}

body.template-skystone .sky-fast-links__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: 100%;
    height: 80px;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

body.template-skystone .sky-fast-link {
    position: relative;

    min-width: 0;
    height: 80px;

    padding: 16px 102px 10px 18px;

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

    overflow: hidden;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    text-decoration: none;

    box-sizing: border-box;
}

/* Fundos */
body.template-skystone .sky-fast-link--donate {
    background-image: url("../../images/fast-links-left.jpg");
}

body.template-skystone .sky-fast-link--download {
    background-image: url("../../images/fast-links-center.jpg");
}

body.template-skystone .sky-fast-link--ranking {
    background-image: url("../../images/fast-links-right.jpg");
}

/* --------------------------------------------------------------------------
   PERSONAGENS EM CAMADA SEPARADA
   No template antigo as artes tinham 125px de altura.
   Aqui reduzimos proporcionalmente para 80px.
   -------------------------------------------------------------------------- */

body.template-skystone .sky-fast-link::before {
    content: "";

    position: absolute;

    z-index: 1;
    right: -4px;
    bottom: 0;

    height: 80px;

    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 80px;

    transition: transform .25s ease;

    pointer-events: none;
}

/* Original 251x125 -> aproximadamente 161x80 */
body.template-skystone .sky-fast-link--donate::before {
    width: 161px;
    background-image: url("../../images/hero-links.png");
}

/* Original 244x125 -> aproximadamente 156x80 */
body.template-skystone .sky-fast-link--download::before {
    width: 156px;
    background-image: url("../../images/hero-links-center.png");
}

/* Original 214x125 -> aproximadamente 137x80 */
body.template-skystone .sky-fast-link--ranking::before {
    width: 137px;
    background-image: url("../../images/hero-links-right.png");
}

/* Mesmo efeito do modelo antigo. */
body.template-skystone .sky-fast-link:hover::before {
    transform: translateX(-6px);
}

/* Texto sempre na frente do personagem. */
body.template-skystone .sky-fast-link strong,
body.template-skystone .sky-fast-link span {
    position: relative;
    z-index: 2;

    display: block;
}

body.template-skystone .sky-fast-link strong {
    margin: 0;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;

    text-shadow: 0 2px 6px rgba(39, 69, 97, .30);
}

body.template-skystone .sky-fast-link span {
    max-width: 105px;

    margin-top: 5px;

    color: #173f62;

    font-family: Arial, sans-serif;
    font-size: 7.5px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.22;

    text-shadow: 0 1px rgba(255,255,255,.34);
}

/* Pequeno realce no bloco sem substituir o movimento da personagem. */
body.template-skystone .sky-fast-link:hover {
    filter: brightness(1.04);
}

@media (max-width: 620px) {
    body.template-skystone .sky-fast-links__grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    body.template-skystone .sky-fast-link {
        height: 80px;
        padding-right: 120px;
    }

    body.template-skystone .sky-fast-link::before {
        right: -25px;
        opacity: .82;
    }
}