@import '../../../styles/essentials';

.lift-posts-v2 {
	padding: 4rem 0;

	.content-before {
		margin-bottom: 2.5rem;
	}

	// Card styles are provided by _blog.scss (.posts-container)
	// Override column count: 4 at large screens instead of the archive default of 3
	.posts-container {
		margin: 0;

		@include csmin(1300px) {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	// Clamp snippet to 3 lines — overrides flex:1 from _blog.scss
	.posts-container .post .content-box .text-container {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		flex: unset;
	}

	// Category badge sits inside .image-box
	.image-box .category-badge {
		position: absolute;
		top: .75rem;
		right: .75rem;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: .7rem;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		padding: .3rem .65rem;
		pointer-events: none;
	}

	// "Lue lisää" button matches .post-link style from _blog.scss
	.btn-lue-lisaa {
		display: inline-block;
		background: $dark;
		color: #fff;
		font-size: .8125rem;
		font-weight: 700;
		letter-spacing: .07em;
		text-transform: uppercase;
		padding: .65rem 1.6rem;
		border-radius: 2rem;
		text-decoration: none;
		transition: background .2s;

		&:hover {
			background: $main;
			color: #fff;
		}
	}

	.see-all-container {
		text-align: center;
		margin-top: 2.5rem;
	}

	.see-all-link {
		font-size: 1rem;
		text-decoration: none;
		font-weight: 500;
	}
}