@import "../../../../../assets/css/abstracts/custom-variables.scss";

// -------------------------
// ----- BLOG HOME
// -------------------------
.blog-home__container {
    .blog-home__image-link {
        height: 187px;
        width: 301px;

        @media only screen and (max-width: 767px) {
            max-width: 203px;
            height: 145px;
        }

        @media only screen and (max-width : 480px) {
            max-width: 132px;
            height: 100px;
        }
    }

    .blog-home__image {
        height: 100%;
        width: 100%;
        object-fit: cover;
        max-width: 301px;
        @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
            height: auto;
        }

        @media only screen and (max-width: 767px) {
            width: 193px;
        }

        @media only screen and (max-width : 480px) {
            width: 128px;
        }
    }


    .blog-title-wrapper {
    flex: 1;
    }

    .blog-home__title {
        margin-top: 0;
        display: inline-flex;
        margin-bottom: 0;
        max-width: calc(100% - 30px);

        a {
            word-break: break-word;
        }
    }

    a:hover {
        text-decoration: none;
    }

    .blog-home__extras-btn {
        margin-top: -.375rem;

        @media only screen and (max-width: 767px) {
            margin-right: -.375rem;
        }
    }

    .channel {
        font-weight: 700;
    }

    .blog-home__body {
        height: 100%;
        min-height: 187px;

        @media only screen and (max-width: 767px) {
            min-height: 145px;
        }

        @media only screen and (max-width : 480px) {
            min-height: 100px;
        }
    }


    .comments {
        padding: 0 12px;

        @media only screen and (max-width: 767px) {
            padding-right: 0;
        }
    }
}


// -------------------------
// ----- BLOG SINGLE
// -------------------------

.blog-title {
    margin-top: 0;
}

.img-full {
    width: 100%;
}

.cke-content:not(:empty) {
    border-top: 1px solid $gray-100;
    padding-top: 15px;
    margin-top: 15px;
}

.blog-article{
    &__image-wrapper {
        display: flex;
        justify-content: center;
    }

    &__image {
        max-height: 55vh;

        &:hover {
            cursor: pointer;
        }
    }
}

.image-expand-modal {
    background: rgba(0,0,0,0.8);

    .modal-dialog {
        text-align: center;

        .close {
            background: rgba(255,255,255,.8);
            opacity: 1;
            padding: 5px 10px;
            border: none;
            border-radius: 350px;
            margin-bottom: 10px;
            cursor: pointer;
            float: none;
            vertical-align: middle;
            font-weight: normal;
            font-size: 14px;
            text-shadow: none;
        }

        .image-lightbox-img {
            box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
            max-width: 100%;
            max-height: 90vh;
        }
    }
}

// -------------------------
// ----- BLOG ARCHIVE
// -------------------------
.blog-archive {
	ul {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			+ li {
				margin-top: 3px;
			}
		}

		ul {
			margin-top: 3px;
			padding-left: 10px;
		}
	}

	a {
		padding: 3px 8px;
		display: block;
		border-radius: 3px;
		text-decoration: none;

		&:hover {
			background-color: $gray-200;
		}
	}
}
