@icon-height: 20px;
@icon-offset: 0px;

@blog-title-font: 500 24px / 33.6px "Plus Jakarta Sans", sans-serif;
@blog-title-color: #000;

@blog-read-more-font: 16px / 22.4px "Plus Jakarta Sans", sans-serif;
@blog-read-more-color: #000;

@blog-meta-font: 16px / 22.4px "Plus Jakarta Sans", sans-serif;
@blog-meta-color: #000;

@blog-excerpt-font: 14px / 19.6px Helvetica, sans-serif;
@blog-excerpt-color: #5F6567;


.loop-wrapper {
	&.regular {
		&.masonry {
			opacity: 0;
			transition: opacity .3s ease-out;

			&.masonry-loaded {
				opacity: 1;
			}
		}

		.list-item {
			width: calc( 50% - 60px/2 );
			box-sizing: border-box;
			margin-bottom: 40px !important;
			transition: background-color .25s;
			display: inline-block;

			body.layout-full & {
				width: calc( 33% - 2*60px/3 );
				padding: 0 15px;
			}

			&.sticky {
				padding: 0 !important;
				left: 15px !important;
				.post-row {
					background-color: var(--vamtam-accent-color-2);
				}
				.post-content-outer {
					// background-color: var(--vamtam-accent-color-4);
					padding: 43px 50px 30px 0px;
					border-radius: 0px;
				}
				.post-article {
					border: none !important;
					padding: 0 !important;
				}
			}

			.vamtam-meta-author,
			.vamtam-meta-date,
			.vamtam-meta-comments,
			.vamtam-meta-tax {
				margin-right: 20px;
				font-weight: 500;
			}

			&:first-child {
				.post-article .post-content-outer {
					&.vamtam-full-width-thumb {
						.vamtam-meta-tax.the-categories {
							top: 0;
						}
					}
				}
			}

			.post-article .post-content-outer {
				&.vamtam-full-width-thumb {
					.vamtam-meta-tax.the-categories {
						position: absolute;
						padding: 15px;
						top: 45px;
					}
				}
			}

			.post-article {
				padding: 0;
				border: 1px solid var(--vamtam-accent-color-7);
				background-color: var(--vamtam-accent-color-5);
				border-radius: 0px;
				transition: background-color .3s ease;
				.wp-post-image {
					border-radius: 0px;
				}

				&:hover {
					// background-color: var(--vamtam-accent-color-2);
				}
			}

			.post-content-outer {
				box-sizing: border-box;
				background-color: transparent;
				padding: 0;

				&:not(:first-child) {
					padding-top: 20px;
				}

				.post-meta {
					width: 100%;
					margin-top: 10px;
					margin-bottom: 0;
				}

				.post-content {
					font-size: 16px;
					line-height: 24px;
				}

				.excerpt {
					word-break: break-word;

					&:not(:last-child) {
						margin-bottom: var(--vamtam-content-space-s);
					}
				}

				.read-more {
					font: @blog-read-more-font;
					color: @blog-read-more-color;
					&:hover {
						color: var(--vamtam-accent-color-1);
					}
				}

				.vamtam-excerpt p {
					color: @blog-excerpt-color;
					font: @blog-excerpt-font;
					margin-bottom: 20px;
				}

				.vamtam-categories {
					margin-bottom: 10px;
					// text-transform: uppercase;
					&, a {
						font: @blog-meta-font;
						color: @blog-meta-color;
						&:hover {
							color: var(--vamtam-accent-color-1);
						}
					}
				}
			}

			header h4 {
				margin: 0 0 var(--vamtam-content-space-xs) 0;
				overflow-wrap: break-word;
				font: @blog-title-font;
				color: @blog-title-color;

				a {
					// text-decoration: underline solid transparent;
					// text-underline-offset: 6px;
					transition: color .3s ease, text-decoration 1s ease;
					color: @blog-title-color;

					&:hover {
						color: var(--vamtam-accent-color-1);
						// text-decoration: underline solid var(--vamtam-accent-color-2);
					}
				}
			}

			.media-inner {
				> div {
					margin: 0;
				}

				.wp-post-image {
					display: block;
					width: 100%;
				}
			}

			.post-row {
				border-radius: 0;
				overflow: hidden;
				padding: 20px 30px 30px 30px;

				.media-inner {
					&.vamtam-has-post-thumb-shape {
						> a {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.navigation:last-child,
				.post-actions-wrapper:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
				}

				.vamtam-meta-date {
					margin-bottom: var(--vamtam-content-space-m);
					line-height: 24px !important;
					display: none;

					a {
						color: var( --vamtam-accent-color-1 );
						font: 500 16px/24px inherit;
						letter-spacing: 2px;
					}
				}
			}

			.post-media {
				margin-bottom: 0;
				max-width: none;
				padding-right: 0;
				width: 100%;
				position: relative;

				.read-more {
					// font: @blog-read-more-font;
					color: @blog-read-more-color;
					background-color: white;
					&:hover {
						color: white;
						background-color: var(--vamtam-accent-color-1);
						&::after {
							color: white;
						}
					}

					&::after {
						font-family: "Font Awesome 5 Free";
						font-size: 15px;
						content: "\f061";
						font-family: theme-icons;
						content: "\e902";
						color: var(--vamtam-accent-color-1);
					}
					font-size: 0;
					position: absolute;
					padding: 20px 20px 20px 50px;
					bottom: 0;
					left: 0;
				}
			}
		}
	}
}