/*
Plugin CSS: Read More - Hx Devs
*/


/*
==================================================
WRAPPER
==================================================
*/

.hxd-read-more-wrapper {
    position: relative;
    width: 100%;
}


/*
==================================================
PARTE INICIAL
==================================================

Contém exatamente os 4 primeiros parágrafos.

O elemento mantém sua altura natural.

Não usamos:
- max-height
- overflow: hidden

Assim o corte é determinado pelo PHP,
exatamente após o 4º parágrafo.
*/

.hxd-read-more-wrapper .hxd-read-more-initial {

    position: relative;

    display: block;

    width: 100%;

    height: auto;


    /*
    ==============================================
    LINEAR GRADIENT
    ==============================================
    
    Fade aplicado somente ao final dos
    4 primeiros parágrafos.
    */

    mask-image:
        linear-gradient(
            to bottom,
            black 50%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 50%,
            transparent 100%
        );


    /*
    Não repetir a máscara.
    */

    mask-repeat: no-repeat;

    -webkit-mask-repeat: no-repeat;


    /*
    A máscara ocupa toda a área.
    */

    mask-size: 100% 100%;

    -webkit-mask-size: 100% 100%;
}


/*
==================================================
PARTE ESCONDIDA
==================================================

Todo o conteúdo depois do 4º parágrafo
continua no HTML/DOM.

Apenas sua visualização inicial é ocultada.
*/

.hxd-read-more-wrapper .hxd-read-more-hidden {

    display: none !important;
}


/*
==================================================
BOTÃO
==================================================
*/

.hxd-read-more-button {

    display: block !important;

    width: 100%;

    margin: 20px auto;

    padding: 10px 20px;

    box-sizing: border-box;

    background-color: #0073aa;

    color: #ffffff !important;

    border: 0;

    border-radius: 5px;

    cursor: pointer;

    font-size: 1em;

    line-height: 1.3;

    text-align: center;

    text-decoration: none !important;

    transition:
        background-color 0.3s ease !important;
}


/*
==================================================
HOVER
==================================================
*/

.hxd-read-more-button:hover {

    background-color: #005177;

    color: #ffffff !important;

    text-decoration: none !important;
}


/*
==================================================
FOCUS
==================================================
*/

.hxd-read-more-button:focus {

    outline: 2px solid #005177;

    outline-offset: 3px;
}


/*
==================================================
BOTÃO ESCONDIDO
==================================================
*/

.hxd-read-more-button.hidden {

    display: none !important;
}


/*
==================================================
SVG
==================================================
*/

.hxd-read-more-button svg {

    vertical-align: middle;

    margin-left: 8px;

    width: 10px;

    height: 10px;
}


/*
==================================================
RESPONSIVO
==================================================
*/

@media (max-width: 767px) {

    .hxd-read-more-button {

        padding: 12px 18px;

        font-size: 1em;
    }
}