/*
==========================================================
FantasyFanzone Section Title
Version: 4.0
==========================================================
*/

.ffz-section-title{
    margin-bottom:48px;

    min-width:0;
}

/*======================================================
ALIGNMENT
======================================================*/

.ffz-section-title--left{
    text-align:left;
}

.ffz-section-title--center{
    text-align:center;
}

.ffz-section-title--right{
    text-align:right;
}

/*======================================================
EYEBROW
======================================================*/

.ffz-section-title__eyebrow{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    margin-bottom:16px;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(124,58,237,.12);

    color:var(--ffz-primary);

    font-size:13px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:.1em;

    text-transform:uppercase;
}

/*======================================================
HEADING
======================================================*/

.ffz-section-title__heading{
    margin:0;

    overflow-wrap:anywhere;

    color:#fff;

    font-size:44px;
    font-weight:800;
    line-height:1.15;

    letter-spacing:-1px;
}

.ffz-section-title__heading span{
    background:var(--ffz-gradient-primary);

    background-clip:text;
    -webkit-background-clip:text;

    color:transparent;

    -webkit-text-fill-color:transparent;
}

/*======================================================
DESCRIPTION
======================================================*/

.ffz-section-title__description{
    max-width:760px;

    margin-top:18px;

    overflow-wrap:anywhere;

    color:var(--ffz-text-muted);

    font-size:17px;
    line-height:1.8;
}

.ffz-section-title--center
.ffz-section-title__description{
    margin-left:auto;
    margin-right:auto;
}

.ffz-section-title--right
.ffz-section-title__description{
    margin-left:auto;
}

/*======================================================
ACTIONS
======================================================*/

.ffz-section-title__actions{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:26px;
}

.ffz-section-title--center
.ffz-section-title__actions{
    justify-content:center;
}

.ffz-section-title--right
.ffz-section-title__actions{
    justify-content:flex-end;
}

/*======================================================
BUTTON
======================================================*/

.ffz-section-title__button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:46px;

    padding:12px 22px;

    border-radius:999px;

    background:var(--ffz-gradient-primary);

    color:#fff;

    font-size:14px;
    font-weight:700;
    line-height:1;

    text-decoration:none;

    transition:
        transform var(--ffz-transition-normal),
        box-shadow var(--ffz-transition-normal),
        opacity var(--ffz-transition-normal);
}

.ffz-section-title__button:hover{
    transform:translateY(-2px);

    box-shadow:var(--ffz-shadow-md);
}

.ffz-section-title__button:focus-visible{
    outline:2px solid var(--ffz-primary);
    outline-offset:4px;

    box-shadow:var(--ffz-shadow-md);
}

/*======================================================
REVEAL
======================================================*/

.ffz-section-title.ffz-reveal{
    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .55s ease,
        transform .55s ease;
}

.ffz-section-title.ffz-reveal.is-visible{
    opacity:1;

    transform:translateY(0);
}

/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:768px){

    .ffz-section-title{
        margin-bottom:36px;
    }

    .ffz-section-title__eyebrow{
        padding:7px 14px;

        font-size:12px;
    }

    .ffz-section-title__heading{
        font-size:34px;

        letter-spacing:-.6px;
    }

    .ffz-section-title__description{
        margin-top:16px;

        font-size:15px;
        line-height:1.7;
    }

    .ffz-section-title__actions{
        gap:12px;

        margin-top:22px;
    }

    .ffz-section-title__button{
        min-height:44px;

        padding:11px 20px;
    }

}

/*======================================================
SMALL PHONES
======================================================*/

@media(max-width:480px){

    .ffz-section-title__heading{
        font-size:30px;
    }

    .ffz-section-title__actions{
        flex-direction:column;

        align-items:stretch;
    }

    .ffz-section-title__button{
        width:100%;
    }

    .ffz-section-title--center
    .ffz-section-title__actions,
    .ffz-section-title--right
    .ffz-section-title__actions{
        align-items:stretch;
    }

}

/*======================================================
REDUCED MOTION
======================================================*/

@media(prefers-reduced-motion:reduce){

    .ffz-section-title,
    .ffz-section-title__button{
        transition:none;
    }

    .ffz-section-title.ffz-reveal,
    .ffz-section-title.ffz-reveal.is-visible{
        opacity:1;

        transform:none;
    }

    .ffz-section-title__button:hover{
        transform:none;
    }

}