/* Styles for the new home
some of the styles did already exist but is bloated with wp-bakery classes -> we need to remove them
*/


.mb-30 {
    margin-bottom: 30px !important;
}

a.lw-arrow-right:after {
    content: "";
    font-family: fontawesome;
    display: inline-block;
    margin-left: 5px;
    top: 1px;
    position: relative;
}

.lawi-post-container {
    margin-bottom: 20px;


    &.grid > div {
        margin-bottom: 30px;
    }

    & .post-text-wrapper > * {
        color: black !important;
    }

    & .post-text-wrapper a:focus-visible p {
        outline: 2px dashed var(--lawiGreen) !important;
        outline-offset: 1px;
    }

    &.topnews {
        margin-bottom: 50px;
    }

    /*since the meow-lightbox plugin was deactivate, a class it added is not added to img tags anymore. unfortunately we rely on that stupid class in a relative global style.. */

    & .image_dachzeile img {
        max-width: 100%;
        height: auto;
    }

    /* override that style from old .lawi-postgrid-list h3*/
    & .lawi-postgrid-list {
        padding-top:1em;

        &.has-img h3.post-title {
            min-height: unset;
        }

        &:last-child {
            margin-bottom: 0.5rem;
        }
    }

    & .lawi-postgrid.has-img .image_dachzeile img {
        aspect-ratio: 325 / 245 !important;
        object-fit: cover;
    }

    & .lawi-post-list-items.has-img img {

        aspect-ratio: 4 / 3;
        object-fit: cover;
        min-width: 155px;
        height: auto;
    }

    & .postgrid-item {

        &:has(a:focus-visible) {
            outline: 2px dashed var(--lawiGreen) !important;
            outline-offset: 2px;
        }
    }

    @media screen and (min-width: 768px) {
        & .lawi-post-list-items.has-img img {
            max-width:25%;
        }
    }

    & .lawi-post-list-item {
        justify-content: space-between;

        & .post-item .post-title {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        & .post-item:last-child .post-title {
            border-bottom: unset;
        }

        & .lawi_headline.styling_balken_klein {
            max-width: unset !important;
        }

        & .post-item.lawi-postgrid-list h3.post-title,
        & .post-item.lawi-postgrid-list h4.post-title {
            padding-bottom: 0.8em;
            margin-bottom: 0;
            min-height: 1.2rem !important;
        }
    }

    .lawi-taxonomy-first-element {

        & .image_dachzeile.item-block img {
            aspect-ratio: 600 / 432;
            object-fit: cover;
        }

        & a.btn {
            margin: 0 5px 5px auto;
        }
    }

    @media screen and (max-width: 767px) {
        & .lawi-post-list-item .post-item:last-child .post-title {
            margin-bottom: 1rem;
        }

        & .lawi-postgrid-grid.post-excerpt-with-img.kommentar .bg-img{
            aspect-ratio: 4 / 3;
            width: 100%;
            background-repeat: no-repeat;
        }
    }

}

/* readd the margin on lawi-border-box element that is remove in theme-styles on mobile*/

@media screen and (max-width: 768px) {
    .postgrid-item.lawi-postgrid.has-img,
    .post-item.lawi-post-list-items.has-img {

            &.lawi-border-box {
            margin-bottom: 30px;
        }
    }

    .lawi-border-box.kommentar {
        margin-bottom: 30px;
    }


    .lawi-post-container {
        margin-bottom: 0px;
    }
}

/*this should be only the magazin navigator*/
.lawi-post-list-item {
    & .post-navigation-arrows  a:focus-visible {
        outline-color: var(--lawiGreen) !important;
    }
}

.lawi-postgrid-list.has-navigation-arrows {

    & .post-navigation-arrows {
        position: absolute;
        left: 0;

        & a:focus-visible {
            outline-color: var(--lawiGreen) !important;
        }

        & svg {
            width: 25px;
        }
    }

    &:last-child {
        & .post-navigation-arrows {
            left: unset;
            right: 0;

            & svg {
                transform: rotate(180deg);
            }
        }
    }


}

.lawi-abogrid-grid {

    & a h2,
    & a h3,
    & a h4 {
        color: black;
    }

    & a:focus-visible .lawi-border-box{
        outline:2px dashed var(--lawiGreen) !important;
    }

    & img {
        max-width: 100%;
        height: auto;
    }

}