/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 2025   *
* / /_\ | | _____  _| |_/ /_ __ __ _ _ __   __| |_ _ __   __ _   | |_ ___  __ _ _ __ ___   *
* |  _  | |/ _ \ \/ / ___ \ '__/ _` | '_ \ / _` | | '_ \ / _` |  | __/ _ \/ _` | '_ ` _ \  *
* | | | | |  __/>  <| |_/ / | | (_| | | | | (_| | | | | | (_| |  | ||  __/ (_| | | | | | | *
* \_| |_/_|\___/_/\_\____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |  \___\___|\__,_|_| |_| |_| *
*                                                         __/ |                            *
*                                                        |___/                             *
* ---------------------------------------------------------------------------------------- *
* This is commercial software, only users who have purchased a valid license and accept    *
* to the terms of the License Agreement can install and use this program.                  *
* ---------------------------------------------------------------------------------------- *
* website: https://cs-cart.alexbranding.com                                                *
*   email: info@alexbranding.com                                                           *
*******************************************************************************************/

.ut2-blog__recent-posts--img, .ut2-blog__recent-posts-scroller--img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimizeQuality;

	.ut2-blog__date {
		position: absolute;
		padding: 3px 5px;
		font-size: calc(~'var(--font-size-small) - 2px');
		color: white;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		bottom: 0;

		.ut2_round(@round: 12px) when not (@abt__ut2_general_use_rounding = do_not_use) {
			margin: var(--gap-xs);
			border-radius: @round;
		}
		.ut2_round();
	}
}

.ut2-blog {
	&__item {
		margin-bottom: var(--gap-l);
		.clearfix();

		.ut2_bg_block() when not (@content_bg = #ffffff) {
			.contrast_background();
		}
		.ut2_bg_block();
	}
	&__title-block {
		display: block;
	}
	&__post-title {
		margin-top: -5px;
		margin-bottom: calc(var(--gap-sm) / 2);
	}
	&__img-block {
		float: left;
		margin-right: var(--gap-m);
	}
	&__description {
		display: inline-block;
		.xcalc(380px);

		.ty-wysiwyg-content * {
			font-size: var(--font-size-medium);
			color: @font;
		}
	}
	&__read-more a {
		font-size: var(--font-size-medium);
		text-decoration: underline;
	}
	@media (max-width: 1024px) {
		&__item {
			margin: var(--gap-sm) 0;
		}
		&__img-block {
			width: 100%;
			margin-right: 0;
			margin-bottom: var(--gap-s);
		}
		&__description {
			width: 100%;
			padding-right: 0;
		}
	}
	@media (max-width: 576px) {
		&__img-block img {
			width: 100%;
		}
	}
}

.ty-blog-grid {

	@media (min-width: 900px) {
		&[class*="span"]:not(:only-child) {
			&:not(.span9) {
				width: calc(~'100% - 300px - var(--gap-m, 0)');
			}
			margin-right: var(--gap-m);
		}

		~ [class*="span"] {
			position: sticky;
			top: var(--gap, 20px);
			bottom: 0;
			margin: 5px 0 0 0;
			min-width: 300px;
			float: right;

			.fixed-header & {
				top: 100px;
			}
		}
	}
	@media (max-width: 899px) {
		min-width: 100%;
		~ [class*="span"] {
			min-width: 100%;
			margin-left: 0;
		}
	}

	@media (max-width: 768px) {
		.row-fluid > & + [class^="span"], .row-fluid > & {
			width: 100%;
			margin-right: 0!important;
		}
	}

	.tygh-header + .tygh-content & + .ab__sfb-aside {
		top: calc(~"20px - var(--content-top, 0) * 1px");
	}

	.light_header + .tygh-content & + .ab__sfb-aside, .default_header + .tygh-content & + .ab__sfb-aside {
		top: calc(~"var(--header-height, 0px) - var(--menu-height, 0px) - var(--content-top, 0) * 1px + 20px");
	}

	.advanced_header + .tygh-content & + .ab__sfb-aside {
		top: calc(~"var(--menu-height, 0px) - var(--content-top, 0) * 1px + 20px");
	}

	.ty-mainbox-container {
		margin-bottom: var(--gap-l);

		> .ty-mainbox-title {
			font-size:var(--font-size-extra-bigest);

			.uppercase() when (@abt__ut2_general_use_titles_uppercase = true) {
				text-transform: uppercase;
			}
			.uppercase();
		}
	}

	.ty-mainbox-body > .ty-wysiwyg-content {

		:where(p, a, div, ul, li):not(:where(.ut2-gl__item, .ut2-template-small__item, .ty-scroller-list, .cm-block-loader)) {
			font-size: var(--font-size-large);
		}

		.uppercase() when not (@abt__ut2_general_use_titles_uppercase = true) {
			h1 {
				font-size: calc(~'var(--font-size-extra-big) + 8px');
			}
			h2 {
				font-size: var(--font-size-extra-big);
			}
			h3, h4 {
				font-size: var(--font-size-big);
			}
			h5, h6 {
				font-size: calc(~'var(--font-size-medium) + 2px');
				font-weight: bold;
			}
		}
		.uppercase();

		.cm-block-loader {
			margin: var(--gap-xs) 0;

			:where(p, a, div:not([class*="reviews-stars"]):not([class*="icon"]), ul, li) {
				font-size: unset;
			}

			ul {
				margin: 0;
			}
		}

		.ut2-blog__img-block {
			display: block;
			float: none;
			margin: var(--gap-m) 0;
		}
		.ut2-blog__date {
			font-size: var(--font-size-normal);
		}
	}
	.ut2-blog__date {
		display: inline-flex;
		align-items: center;
		padding: 3px var(--gap-xs);
		height: 24px;
		margin: var(--gap-xs) 0;
		background: var(--fill-gray);
		color: var(--color-font-lighten);
		font-size: var(--font-size-small);

		i {
			font-size: 16px;
			margin-right: 5px;
		}

		.ut2_round(@round: 12px) when not (@abt__ut2_general_use_rounding = do_not_use) {
			border-radius: @round;
		}
		.ut2_round();
	}
	.discussion-block {
		padding-top: var(--gap-sm);
		margin-top: var(--gap-m);
		border-top: 1px solid @base;
	}
}

.ut2-blog {
	&__recent-posts {
		position: relative;

		~ div {
			margin-top: var(--gap-s);
		}

		@media (max-width: 992px) {
			flex-direction: row;
			height: auto;
		}

		&:not(.extra-view) {
			display: flex;
			flex-wrap: wrap;
			width: calc(100% + (var(--gap) * 2));
			margin: 0 calc((var(--gap) / 2) * -1);

			.ut2-blog__recent-posts--item {
				margin: 0 calc(var(--gap) / 2) var(--gap);
				width: calc(~'25% - var(--gap)');

				@media (max-width: 946px) {
					width: calc(~'33.333333% - var(--gap)');
				}
				@media (max-width: 704px) {
					width: calc(~'50% - var(--gap)');
				}
			}
			.ut2-blog__recent-posts--img {
				aspect-ratio: 2/1.33;
			}
		}
		&.extra-view {
			display: grid;
			grid-template-columns: repeat(2, 20%) repeat(auto-fit, minmax(max(200px, calc(10% - var(--gap))), calc(~"20% - 1.34 * var(--gap)")));
			width: 100%;
			gap: var(--gap);

			@media (max-width: 1200px) {
				grid-template-columns:  repeat(auto-fit, minmax(max(200px, calc(~'20% - var(--gap)')), 1fr));
			}

			@media (max-width: 576px) {
				grid-template-columns: repeat(auto-fit, minmax(max(150px, calc(~'50% - var(--gap)')), 1fr));
			}

			.ut2-blog__recent-posts--img {
				aspect-ratio: 2/1.33;
			}

			.ut2-blog__recent-posts--item {
				@media (max-width: 576px) {
					min-width: 50%;
				}
				@media (max-width: 320px) {
					min-width: 100%;
				}

				&.first {
					@media (min-width: 1200px) {
						grid-column: span 2;
						grid-row: span 2;
					}
					.ut2-blog__recent-posts--img {
						@media (min-width: 1200px) {
							min-height: 415px;
							aspect-ratio: 2/1.48;
						}
					}
					.ut2-blog__recent-posts--title {
						@media (min-width: 1200px) {
							font-size: var(--font-size-large);
						}
					}
				}
			}
		}

		&--img {
			position: relative;
			margin-bottom: var(--gap-xs);
			width: 100%;
			background-size: cover;

			&.cover {
				background-position: center center;
				&.no-image {
					background: rgba(255, 255, 255, 0.5) url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjA1OCAzMS4wNTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjA1OCAzMS4wNTg7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMzAuMTcxLDMxLjA1OEgwLjg4N0MwLjM5NywzMS4wNTgsMCwzMC42NjEsMCwzMC4xNzFWMC44ODhDMCwwLjM5OCwwLjM5NywwLDAuODg3LDBoMjkuMjg0ICAgIGMwLjQ5LDAsMC44ODcsMC4zOTgsMC44ODcsMC44ODh2MjkuMjgzQzMxLjA1OCwzMC42NjEsMzAuNjYxLDMxLjA1OCwzMC4xNzEsMzEuMDU4eiBNMS43NzUsMjkuMjg1aDI3LjUwOVYxLjc3NUgxLjc3NVYyOS4yODV6IiBmaWxsPSIjOTk5OTk5Ii8+Cgk8L2c+Cgk8Zz4KCQk8cGF0aCBkPSJNMC44ODcsMzEuMDU4Yy0wLjIxMSwwLTAuNDIzLTAuMDc0LTAuNTkzLTAuMjI3Yy0wLjM2NC0wLjMyNy0wLjM5NC0wLjg4OS0wLjA2Ny0xLjI1M2w4Ljg3NC05Ljg4ICAgIGMwLjE2LTAuMTc4LDAuMzg0LTAuMjgzLDAuNjIzLTAuMjkzYzAuMjMzLTAuMDEyLDAuNDcxLDAuMDc2LDAuNjQ1LDAuMjM4bDIuMzA4LDIuMTY2bDYuOTkxLTYuOTEyICAgIGMwLjMzNS0wLjMzLDAuODctMC4zNDIsMS4yMTgtMC4wMjdsOS44OCw4LjkwM2MwLjE4NywwLjE2OCwwLjI5MywwLjQwNywwLjI5MywwLjY1OXY1LjczOGMwLDAuNDktMC4zOTcsMC44ODctMC44ODcsMC44ODdoLTkuODggICAgYy0wLjIyNiwwLTAuNDQyLTAuMDg2LTAuNjA3LTAuMjRMOS44MTUsMjEuNTZsLTguMjY4LDkuMjA0QzEuMzcyLDMwLjk1OSwxLjEzLDMxLjA1OCwwLjg4NywzMS4wNTh6IE0yMC42NDIsMjkuMjg1aDguNjQydi00LjQ1NyAgICBsLTguOTY0LTguMDc4bC02LjM0OCw2LjI3NUwyMC42NDIsMjkuMjg1eiIgZmlsbD0iIzk5OTk5OSIvPgoJPC9nPgoJPGc+CgkJPHBhdGggZD0iTTEwLjAyOCwxNS43OTZjLTIuMzQ5LDAtNC4yNi0xLjkxMi00LjI2LTQuMjZjMC0yLjM0OSwxLjkxMS00LjI2LDQuMjYtNC4yNiAgICBzNC4yNTksMS45MTEsNC4yNTksNC4yNkMxNC4yODcsMTMuODg0LDEyLjM3NiwxNS43OTYsMTAuMDI4LDE1Ljc5NnogTTEwLjAyOCw5LjA1MmMtMS4zNywwLTIuNDg1LDEuMTE0LTIuNDg1LDIuNDg0ICAgIGMwLDEuMzY5LDEuMTE1LDIuNDg0LDIuNDg1LDIuNDg0YzEuMzcsMCwyLjQ4NC0xLjExNSwyLjQ4NC0yLjQ4NEMxMi41MTIsMTAuMTY2LDExLjM5Nyw5LjA1MiwxMC4wMjgsOS4wNTJ6IiBmaWxsPSIjOTk5OTk5Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==) no-repeat center;
					background-size: inherit !important;
					.box-shadow(inset 0 0 0 1px rgba(255, 255, 255, 0.1));
				}
			}
		}

		&-scroller--img {
			a:before {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				transition: box-shadow 150ms;
			}
		}
		&--title {
			color: @font;
			font-size: var(--font-size-normal);
			margin-bottom: var(--gap-xs);
			padding-right: var(--gap-xs);
			min-height: 42px;
			width: 100%;
			hyphens: auto;
			.ut2_line_clamp(3);
		}
	}
	&__button.ty-btn {
		flex-direction: row-reverse;

		span + span:not(.ty-icon) {
			margin-left: 0;
			margin-right: 5px;
		}
		@media (max-width: 576px) {
			display: flex;
			margin: 0 auto;
		}
	}

	&__recent-posts-scroller {
		min-width: 100%;

		&--item {
			a {
				color: @font;
				font-size: var(--font-size-normal);
				font-weight: 600;
			}
			&:hover .ut2-blog__recent-posts--img {
				box-shadow: none;
			}
		}
		&--img {
			position: relative;
			background: @general_bg_color;

			~ a {
				display: block;
				padding: var(--gap-xs);
			}
		}
		.no-image {
			min-height: inherit;
			height: 0;
			padding-bottom: 66.9333%;
		}
	}
}

.container-fluid-row:not([class*="fill"]) .no-image {
	background-color: var(--fill-gray);
}

.ty-blog-sidebox__item {
	margin-bottom: var(--gap-xs);
}