/* Adding variables */
@import url("../../css/variables.css");

.hoverable-headings__main-container {
    width: var(--full);
    padding: var(--padding);
    margin: 0 auto;
}

.hoverable-headings__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--l-spacing);
    width: var(--full);
    padding: var(--l-spacing) 0;
    position: relative;
}

.hoverable-headings__inner-container h2 {
    font-family: var(--roboto);
    font-size: var(--bigtext);
    font-weight: var(--medium);
    text-align: center;
}

.hoverable-headings__inner-container h2 span {
    color: var(--dinorange);
}

.hoverable-headings__headings-container {
    display: flex;
    flex-direction: column;
    gap: var(--m-spacing);
}

.hoverable-headings__single-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hoverable-heading__content-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--s-spacing) + 8px);
    width: var(--width);
    margin: 0 auto;
}

.hoverable-headings__single-title h3 {
    font-size: var(--h1);
    line-height: var(--lh-n);
    color: #E3CFEC;
    cursor: default;
    z-index: 0;
}

.hoverable-headings__single-title.text-active h3 {
    color: var(--dinblack);
    z-index: 1;
}

.hoverable-headings__single-title.text-active h3 span {
    color: var(--dinviolet);
}

.hoverable-heading__content {
    display: flex;
    flex-direction: column;
    gap: var(--s-spacing);
    align-items: flex-start;
    opacity: 0;
    height: 0;
    overflow: hidden;
    font-size: var(--text);
    line-height: var(--lh-3);
    max-width: 900px;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.hoverable-headings__single-title.text-active .hoverable-heading__content {
    height: 120px;
    opacity: 1;
}

.hoverable-headings__single-title img {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    display: block;
    opacity: 0;
    z-index: -1;
    transform: translateY(-50%);
    transition: opacity .4s ease;
}

.hoverable-headings__single-title.text-active img {
    opacity: 1;
    z-index: 1;
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {
    .hoverable-heading__content {
        max-width: 680px;
    }
}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .hoverable-headings__headings-container {
        gap: var(--xl-spacing);
    }

    .hoverable-heading__content-container {
        gap: var(--s-spacing);
    }

    .hoverable-headings__single-title h3 {
        color: var(--dinblack);
    }
    
    .hoverable-headings__single-title h3 span {
        color: var(--dinviolet);
    }

    .hoverable-heading__content {
        opacity: 1;
        height: auto;
        line-height: var(--lh-2);
        max-width: var(--full);
    }

    .hoverable-headings__single-title img {
        display: none;
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .hoverable-headings__headings-container {
        gap: var(--l-spacing);
    }
}