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

/* Main Container */
.intro-block {
	width: 100%;
	margin: 0 auto;
}

.intro-block-container {
	display: grid;
	grid-template-columns: 483px 1fr;
	gap: 20px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 20px 0px 45px;
	width: 97%;
}

/* Duplicate right item above video: tablet/mobile only */
.intro-right-item-mobile-only {
	display: none;
	grid-column: 1 / -1;
}

/* Video Section */
.intro-video-section {
	position: relative;
	width: 100%;
}

.intro-video-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 30/46.5;
	overflow: hidden;
	border-radius: 25px;
	background-color: #000;
}

.intro-video,
.intro-video-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.intro-video-volume-control-wrapper {
	    /* background: linear-gradient(0deg, rgb(255 255 255 / 15%) 66.83%, rgb(255 255 255 / 0%) 100%); */
	    backdrop-filter: blur(3.5px);
	    display: block;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 61px;
	    display: inline-flex;
	    mask: linear-gradient(transparent, #ffffff, #ffffff);
	    backdrop-filter: blur(3px);
	    padding-top: 112px;
}

.intro-video-fallback {
	position: absolute;
	top: 0;
	left: 0;
}

/* Volume Control Button */
.intro-video-volume-control {
	
	/* Default: Show muted icon (video is muted, aria-pressed="true") */
	position: absolute;
	bottom: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, transform 0.2s ease;
	z-index: 10;
	border-radius: 100px;
	border: 2px solid var(--CREAM, #FFF7E4);
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(2.5px);
	padding: 0;
	background-repeat: no-repeat;
	background-position: center;
}

/* When muted (aria-pressed="true"), show muted icon with X */
.intro-video-volume-control[aria-pressed="true"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19' fill='none'%3E%3Cpath d='M17.4167 7.12498L12.6667 11.875M12.6667 7.12498L17.4167 11.875M7.62718 4.24782L5.12101 6.75398C4.98409 6.8909 4.91563 6.95936 4.83574 7.00832C4.7649 7.05173 4.68768 7.08372 4.6069 7.10311C4.51579 7.12498 4.41897 7.12498 4.22534 7.12498H2.85001C2.40664 7.12498 2.18495 7.12498 2.0156 7.21127C1.86664 7.28717 1.74553 7.40828 1.66963 7.55724C1.58334 7.72659 1.58334 7.94827 1.58334 8.39165V10.6083C1.58334 11.0517 1.58334 11.2734 1.66963 11.4427C1.74553 11.5917 1.86664 11.7128 2.0156 11.7887C2.18495 11.875 2.40664 11.875 2.85001 11.875H4.22534C4.41897 11.875 4.51579 11.875 4.6069 11.8969C4.68768 11.9162 4.7649 11.9482 4.83574 11.9916C4.91563 12.0406 4.98409 12.1091 5.12101 12.246L7.62718 14.7521C7.96631 15.0913 8.13587 15.2608 8.28145 15.2723C8.40777 15.2822 8.53121 15.2311 8.6135 15.1348C8.70834 15.0237 8.70834 14.7839 8.70834 14.3043V4.69565C8.70834 4.21605 8.70834 3.97625 8.6135 3.8652C8.53121 3.76885 8.40777 3.71772 8.28145 3.72766C8.13587 3.73912 7.96631 3.90869 7.62718 4.24782Z' stroke='%23FFF7E4' stroke-width='1.58333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* When unmuted (aria-pressed="false"), show volume on icon */
.intro-video-volume-control[aria-pressed="false"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19' fill='none'%3E%3Cpath d='M7.62718 4.24782L5.12101 6.75398C4.98409 6.8909 4.91563 6.95936 4.83574 7.00832C4.7649 7.05173 4.68768 7.08372 4.6069 7.10311C4.51579 7.12498 4.41897 7.12498 4.22534 7.12498H2.85001C2.40664 7.12498 2.18495 7.12498 2.0156 7.21127C1.86664 7.28717 1.74553 7.40828 1.66963 7.55724C1.58334 7.72659 1.58334 7.94827 1.58334 8.39165V10.6083C1.58334 11.0517 1.58334 11.2734 1.66963 11.4427C1.74553 11.5917 1.86664 11.7128 2.0156 11.7887C2.18495 11.875 2.40664 11.875 2.85001 11.875H4.22534C4.41897 11.875 4.51579 11.875 4.6069 11.8969C4.68768 11.9162 4.7649 11.9482 4.83574 11.9916C4.91563 12.0406 4.98409 12.1091 5.12101 12.246L7.62718 14.7521C7.96631 15.0913 8.13587 15.2608 8.28145 15.2723C8.40777 15.2822 8.53121 15.2311 8.6135 15.1348C8.70834 15.0237 8.70834 14.7839 8.70834 14.3043V4.69565C8.70834 4.21605 8.70834 3.97625 8.6135 3.8652C8.53121 3.76885 8.40777 3.71772 8.28145 3.72766C8.13587 3.73912 7.96631 3.90869 7.62718 4.24782Z' stroke='%23FFF7E4' stroke-width='1.58333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.6667 7.12498C13.4771 7.12498 14.125 7.77288 14.125 8.58331C14.125 9.39375 13.4771 10.0416 12.6667 10.0416M12.6667 4.20831C14.2885 4.20831 15.5833 5.50315 15.5833 7.12498C15.5833 8.74682 14.2885 10.0416 12.6667 10.0416' stroke='%23FFF7E4' stroke-width='1.58333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.intro-video-volume-control:hover,
.intro-video-volume-control:focus {
	opacity: 0.8;
	transform: scale(1.1);
	outline: none;
}

.intro-video-volume-control:active {
	transform: scale(0.95);
}

/* Video Title Overlay */
.intro-video-title-overlay {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 10;
	max-width: calc(100% - 100px);
}

.intro-video-title-link,
.intro-video-title-text {
	display: inline-block;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.3s ease, color 0.3s ease;
	color: var(--CREAM, #FFF7E4);
	font-family: "Google Sans Flex";
	font-size: 15px;
	font-style: normal;
	font-weight: 800;
	line-height: 140%; /* 21px */
	letter-spacing: 3px;
	text-transform: uppercase;
	width: 82%;
}

/* Right Section */
.intro-right-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.intro-right-item {
	position: relative;
	width: 100%;
	min-height: 402px;
	border-radius: 25px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: black;
}

.intro-right-item-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
}

.intro-right-item-content {
	position: relative;
	z-index: 2;
	padding: 0;
	text-align: center;
	width: 100%;
	max-width: 90%;
	margin: 0 auto;
}

.intro-right-item-script-title {
	margin-bottom: 8px;
	color: var(--LEMON, #FFFB8B);
	font-family: Primed;
	font-size: 65px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 65px */
	transform: rotate(-6deg);
	position: absolute;
	top: -55px;
	left: 7px;
}

.intro-right-item-main-title {
	color: var(--LEMON, #FFFB8B);
	text-align: center;
	
/* H1 */
	font-family: "Google Sans Flex";
	font-size: 65px;
	font-style: normal;
	font-weight: 900;
	line-height: 105%; /* 68.25px */
	text-transform: uppercase;
	letter-spacing: -0.1rem;
}

.intro-right-item-highlight-title {
	border: 3px solid var(--LEMON, #FFFB8B);
	color: var(--LEMON, #FFFB8B);
	text-align: center;
/* Sticker */
	font-family: "Young Serif";
	font-size: 23px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 23px */
	letter-spacing: -0.92px;
	width: 166.084px;
	height: 57.705px;
	transform: rotate(-12.945deg);
	border-radius: 50%;
	padding: 13px 0;
	text-transform: lowercase;
	position: absolute;
	bottom: 50px;
	right: -39px;
}

/* Posts Section */
.intro-posts-section {
	width: 100%;
	margin-top: 0;
}

.intro-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding:0;
	margin:0;
}
.intro-posts-grid .archive-post-card {
	background: #FEFAC8;
}
.intro-posts-grid .archive-post-card:hover {
	background: #5B66C6;
}

/* Responsive Design */
@media (max-width: 1080px) {
	.intro-block-container {
		gap: 15px;
	}
	
	.intro-right-item-mobile-only {
		display: block;
	}
	
	.intro-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.intro-right-section .intro-right-item {
		display:none;
	}
	.intro-posts-grid > :first-child {
		grid-column: 1 / -1;
	}
	.intro-right-item-content {
		max-width:600px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.intro-block-container {
		display:block;
	}
	    .intro-posts-grid > :first-child {
        grid-column: 1;
    }
	    .intro-posts-grid > :last-child {
        display:none;
    }
	.intro-video-section {
		margin: 20px auto;
	}
}
@media (max-width: 690px) {
	.intro-right-item-main-title {
		font-size:42px;
	}
	.intro-right-item-script-title {
		font-size: 42px;
		top: -37px;
		left: 0;
	}
	    .intro-right-item-content {
        max-width: 300px;
        margin: 0 auto;
    }
	.intro-right-item-highlight-title {
		font-size:16px;
		width:107px;
		height:37px;
		padding: 7px 0 0;
		top: 16px;
	}
	.intro-block-container {
		display: block;
		width: 95%;
		padding: 0;
	}
}
@media (max-width:500px) {
	.intro-right-item {
		min-height: 200px;
	}
	.intro-right-item-content {
	padding-top:25px;
	}
	.intro-right-item-script-title {
		top:-11px;
	}
	.intro-right-item-highlight-title {
		top:40px;
	}
	.intro-video-wrapper {
			aspect-ratio: 33 / 46.5;
	}
	.intro-video-volume-control-wrapper {
		padding-top:190px;
	}
	.intro-block-container {
		display: block;
		width: 95%;
		padding: 0 0 40px;
	}
}
/* Accessibility: Focus States */
/* .intro-video-volume-control:focus-visible {
	outline: 3px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 3px;
}

.intro-video-title-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--cornflower, #5B66C6);
	outline-offset: 3px;
}
 */
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
	.intro-video-volume-control {
		background-color: #fff;
		border: 2px solid #000;
	}
	
	.intro-video-title-link,
	.intro-video-title-text {
		background-color: #fff;
		border: 2px solid #000;
	}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.intro-video-volume-control,
	.intro-video-title-link,
	.intro-video-title-text {
		transition: none;
	}
	
	.intro-video {
		animation: none;
	}
}