/*------------------------------------*\
    
    Hide/Show Text Area - Global styling for all hide/show text

    This method is CSS heavy and light on JS, which is important for good SEO and CWV results
    Find the code snippet here: https://webfxcodelibrary.webpagefxstage.com/#intermediate_cssshowhidetext

\*------------------------------------*/

.read-more__content {
	position: relative;
}

.expand {
	border: none;
	position: relative;
	margin-top: 0.625rem;
	z-index: 10;
}

.read-more__content .expand {
	display: none;
}

.read-more__content.ddd-truncated .expand {
	display: inline-block;
}

.expand--less,
.fx-untruncated .expand--more {
	display: none;
}

.fx-untruncated .expand--less {
	display: inline;
}

.read-more__box {
	max-height: 21.875rem;
    margin-bottom: 1.25rem;
    position: relative;
    /* Fix for Safari/iOS rendering */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* .read-more__box.ddd-truncated {
	overflow: hidden;
} */

.read-more__box.fx-untruncated {
	max-height: none !important;
	overflow: visible !important;
}

/* Safari/iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    .read-more__box {
        max-height: 21.875rem;
    }
    
    .read-more__box.ddd-truncated {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    .read-more__box {
        max-height: 25rem;
        margin-bottom: 0;
    }

    .expand {
        margin-top: 0.9375rem;
    }
    
    /* Safari/iOS specific fixes for tablet */
    @supports (-webkit-touch-callout: none) {
        .read-more__box {
            max-height: 25rem;
        }
    }
}

@media (min-width: 1024px) {
    .read-more__box {
        max-height: 100%;
        overflow: visible;
    }

    .read-more__box--lg {
        max-height: 100%;
    }
}