/**
 * Posts Highlight V2 Block Styles
 * Styles for the Posts Highlight V2 custom block
 *
 * @package made-to-thrive-2026-base
 * @since 1.0.0
 */

/* Main Container */
.posts-highlight-v2-block {
	width: 100%;
	margin: 0 auto;
	padding: 80px 0;
}

.posts-highlight-v2-container {
	display: flex;
	gap: 20px;
	align-items: stretch;
	min-height: 500px;
	max-width: 1320px;
	margin: 0 auto;
	width: 97%;
}

/* Left Side: Promotional Section */
.posts-highlight-v2-promo {
	flex: 0 0 49.2%;
	min-width: 0;
	position: relative;
}

.posts-highlight-v2-background {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 792px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 25px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Highlight Badge (top-right) */
.posts-highlight-v2-badge {
	position: absolute;
	top: 87px;
	right: 30px;
	z-index: 10;
	max-width: 207px;
	transform: rotate(-14.399deg);
}

.posts-highlight-v2-badge img {
	width: 100%;
	height: auto;
	display: block;
}

/* Blue Overlay */
.posts-highlight-v2-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background-color: #5B66C6;
	flex-direction: column;
	text-align: center;
	z-index: 2;
	display: flex;
	width: 491px;
	padding: 30px 11px;
	justify-content: center;
	align-items: center;
	height: fit-content;
	border-radius: 25px;
}

/* Title */
.posts-highlight-v2-title {
	letter-spacing: -0.09rem;
	color: var(--CREAM, #FFF7E4);
	text-align: center;

/* H2 */
	font-family: "Google Sans Flex";
	font-size: 32px;
	font-style: normal;
	font-weight: 900;
	line-height: 105%; /* 33.6px */
	text-transform: uppercase;
	margin: 0 0 20px;
	padding: 0 10px;
}

/* Button */
.posts-highlight-v2-button {
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
	cursor: pointer;
	border-radius: 50px;
	border: 1.5px solid var(--CREAM, #FFF7E4);
	display: flex;
	height: 40px;
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: var(--CREAM, #FFF7E4);
	text-align: center;

/* H6 */
	font-family: "Google Sans Flex";
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
	line-height: 130%; /* 15.6px */
	letter-spacing: 2.4px;
	text-transform: uppercase;
}

.posts-highlight-v2-button:hover,
.posts-highlight-v2-button:focus {
	background-color: #fff;
	color: var(--wp--preset--color--cornflower, #5B66C6);
	text-decoration: none;
	transform: translateY(-2px);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.posts-highlight-v2-button:active {
	transform: translateY(0);
}

/* Right Side: Posts Grid */
.posts-highlight-v2-posts {
	flex: 1;
	min-width: 0;
}

.posts-highlight-v2-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	height: 100%;
}

/* Responsive Design */
@media (max-width: 1080px) {
	.posts-highlight-v2-background {
		min-height:450px;
	}
}

@media (max-width: 768px) {
	.posts-highlight-v2-container {
		flex-direction: column;
		gap: 2rem;
	}
	.posts-highlight-v2-block {
	    width: 100%;
	    margin: 0 auto;
	    padding: 40px 0;
	}
	.posts-highlight-v2-promo {
		flex: 1 1 auto;
	}
	
	.posts-highlight-v2-background {
		min-height: 450px;
	}
	
	.posts-highlight-v2-title {
		font-size: 32px;
		margin-bottom: 1.5rem;
	}
	
	.posts-highlight-v2-overlay {
		padding: 2rem 1.5rem;
	}
	
	.posts-highlight-v2-button {
		padding: 12px 24px;
		font-size: 14px;
	}
	
	.posts-highlight-v2-badge {
		top: 26px;
		right: 15px;
		max-width: 150px;
	}
}

@media (max-width: 550px) {
	.posts-highlight-v2-overlay {
		width:90%;
	}
			    .posts-highlight-v2-title {
			    	font-size: 26px;
			    	margin-bottom: 10px;
			    }
								.posts-highlight-v2-container {
									max-width:95%;
								}
}

/* Accessibility: Focus States */
.posts-highlight-v2-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 3px;
}

.posts-highlight-v2-grid .archive-post-card:focus {
	outline: 2px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 2px;
}

/* Screen Reader Text */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}