/*
 * =========================================
 * CATEGORY DESCRIPTION - ČÍTAŤ VIAC
 * =========================================
 */

.category-perex--collapsible {
    position: relative;

    transition:
        max-height .4s ease;
}


/*
 * Zbalený stav
 */
.category-perex--collapsed {
    overflow: hidden;
}


/*
 * =========================================
 * GRADIENT
 * =========================================
 */

.category-perex--collapsed::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 55%;
    height: 65px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .92) 55%,
            #fff 100%
        );

    z-index: 2;
}


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

.category-read-more {
    z-index: 3;

    cursor: pointer;
}


/*
 * Zbalený stav:
 * button pri spodnej hrane
 * viditeľného obsahu.
 */
.category-perex--collapsed
.category-read-more {
    position: absolute;

    right: 0;
    bottom: 0;
}


/*
 * Rozbalený stav:
 * button normálne pod textom.
 */
.category-perex--expanded
.category-read-more {
    position: relative;

    display: block;
    clear: both;

    margin:
        20px 0 0 auto;
}


/*
 * =========================================
 * ŠÍPKA
 * =========================================
 */

.category-read-more__arrow {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-left: 8px;
    margin-bottom: 3px;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        rotate(45deg);

    transition:
        transform .25s ease;
}


.category-perex--expanded
.category-read-more__arrow {
    margin-bottom: -1px;

    transform:
        rotate(225deg);
}


/*
 * =========================================
 * MOBILE
 * =========================================
 */

@media (max-width: 767px) {

    /*
     * Na mobile je gradient cez
     * celú šírku textu.
     */
    .category-perex--collapsed::after {
        width: 100%;
        height: 85px;
    }


    .category-read-more {
        font-size: 13px;
    }


    /*
     * Button nech je trochu odsadený
     * od pravého okraja.
     */
    .category-perex--collapsed
    .category-read-more {
        right: 0;
        bottom: 5px;
    }
}