/**
 * Team Two by Two Grid Block Front-end CSS
 * Updated to display in a 2x2 grid layout (4 cards total)
 */

/* Background Colors - Named Colors */
.team-two-by-two-grid.bg-dark-blue,
.team-two-by-two-grid-section .bg-dark-blue {
	background-color: #0F293E;
}

.team-two-by-two-grid.bg-dark-brown,
.team-two-by-two-grid-section .bg-dark-brown {
	background-color: #290B0B;
}

.team-two-by-two-grid.bg-burgundy,
.team-two-by-two-grid-section .bg-burgundy {
	background-color: #800020;
}

.team-two-by-two-grid.bg-gold,
.team-two-by-two-grid-section .bg-gold {
	background-color: #B8860B;
}

.team-two-by-two-grid.bg-copper,
.team-two-by-two-grid-section .bg-copper {
	background-color: #B87333;
}

.team-two-by-two-grid.bg-periwinkle,
.team-two-by-two-grid-section .bg-periwinkle {
	background-color: #CCCCFF;
}

.team-two-by-two-grid.bg-deep-blue,
.team-two-by-two-grid-section .bg-deep-blue {
	background-color: #00008B;
}

.team-two-by-two-grid.bg-dark-red,
.team-two-by-two-grid-section .bg-dark-red {
	background-color: #8B0000;
}

.team-two-by-two-grid.bg-white,
.team-two-by-two-grid-section .bg-white {
	background-color: #FFFFFF;
}

.team-two-by-two-grid.bg-black,
.team-two-by-two-grid-section .bg-black {
	background-color: #000000;
}

/* Text Colors */
.team-two-by-two-grid.text-white,
.team-two-by-two-grid.text-white h1,
.team-two-by-two-grid.text-white h2,
.team-two-by-two-grid.text-white h3,
.team-two-by-two-grid.text-white h4,
.team-two-by-two-grid.text-white h5,
.team-two-by-two-grid.text-white h6,
.team-two-by-two-grid.text-white p,
.team-two-by-two-grid.text-white .team-two-by-two-grid-title,
.team-two-by-two-grid.text-white .team-two-by-two-grid-description,
.team-two-by-two-grid-section.text-white,
.team-two-by-two-grid-section.text-white h1,
.team-two-by-two-grid-section.text-white h2,
.team-two-by-two-grid-section.text-white h3,
.team-two-by-two-grid-section.text-white h4,
.team-two-by-two-grid-section.text-white h5,
.team-two-by-two-grid-section.text-white h6,
.team-two-by-two-grid-section.text-white p,
.team-two-by-two-grid-section.text-white .team-two-by-two-grid-title,
.team-two-by-two-grid-section.text-white .team-two-by-two-grid-description {
	color: #FFFFFF;
}

.team-two-by-two-grid.text-black,
.team-two-by-two-grid.text-black h1,
.team-two-by-two-grid.text-black h2,
.team-two-by-two-grid.text-black h3,
.team-two-by-two-grid.text-black h4,
.team-two-by-two-grid.text-black h5,
.team-two-by-two-grid.text-black h6,
.team-two-by-two-grid.text-black p,
.team-two-by-two-grid.text-black .team-two-by-two-grid-title,
.team-two-by-two-grid.text-black .team-two-by-two-grid-description,
.team-two-by-two-grid-section.text-black,
.team-two-by-two-grid-section.text-black h1,
.team-two-by-two-grid-section.text-black h2,
.team-two-by-two-grid-section.text-black h3,
.team-two-by-two-grid-section.text-black h4,
.team-two-by-two-grid-section.text-black h5,
.team-two-by-two-grid-section.text-black h6,
.team-two-by-two-grid-section.text-black p,
.team-two-by-two-grid-section.text-black .team-two-by-two-grid-title,
.team-two-by-two-grid-section.text-black .team-two-by-two-grid-description {
	color: #000000;
}

.team-two-by-two-grid.text-dark-blue,
.team-two-by-two-grid.text-dark-blue h1,
.team-two-by-two-grid.text-dark-blue h2,
.team-two-by-two-grid.text-dark-blue h3,
.team-two-by-two-grid.text-dark-blue h4,
.team-two-by-two-grid.text-dark-blue h5,
.team-two-by-two-grid.text-dark-blue h6,
.team-two-by-two-grid.text-dark-blue p,
.team-two-by-two-grid.text-dark-blue .team-two-by-two-grid-title,
.team-two-by-two-grid.text-dark-blue .team-two-by-two-grid-description,
.team-two-by-two-grid-section.text-dark-blue,
.team-two-by-two-grid-section.text-dark-blue h1,
.team-two-by-two-grid-section.text-dark-blue h2,
.team-two-by-two-grid-section.text-dark-blue h3,
.team-two-by-two-grid-section.text-dark-blue h4,
.team-two-by-two-grid-section.text-dark-blue h5,
.team-two-by-two-grid-section.text-dark-blue h6,
.team-two-by-two-grid-section.text-dark-blue p,
.team-two-by-two-grid-section.text-dark-blue .team-two-by-two-grid-title,
.team-two-by-two-grid-section.text-dark-blue .team-two-by-two-grid-description {
	color: #0F293E;
}

/* Eyebrow Styles */
.team-two-by-two-grid-section .eyebrow {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: 6.72px;
	text-transform: uppercase;
	margin-bottom: 10px;
	display: block;
}

/* Eyebrow style variations */
.team-two-by-two-grid-section .eyebrow-style-uppercase {
	font-weight: 400;
	text-transform: uppercase;
}

.team-two-by-two-grid-section .eyebrow-style-default {
	font-weight: 400;
	text-transform: uppercase;
}

.team-two-by-two-grid-section .eyebrow-style-bold {
	font-weight: 700;
	text-transform: uppercase;
}

.team-two-by-two-grid-section .eyebrow-style-elegant {
	font-style: italic;
}

/* Title and Description Styles */
.team-two-by-two-grid .team-two-by-two-grid-title,
.team-two-by-two-grid-section .team-two-by-two-grid-title {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 48px;
	line-height: 114%;
	margin-bottom: 32px;
	font-weight: 400;
	text-align: left;
}

.team-two-by-two-grid .team-two-by-two-grid-description,
.team-two-by-two-grid-section .team-two-by-two-grid-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	letter-spacing: -0.48px;
	margin-bottom: 48px;
	text-align: left;
}

/* Button Styles */
.team-two-by-two-grid-section .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Button Style 1: Default (Blue Background) */
.team-two-by-two-grid-section .wp-block-button.is-style-default .wp-block-button__link {
	background-color: #A6B8E3;
	color: #000000;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
}

.team-two-by-two-grid-section .wp-block-button.is-style-default .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
	background-color: #788FC6;
}

/* Button Style 2: Solid (Brown Background) */
.team-two-by-two-grid-section .wp-block-button.is-style-solid .wp-block-button__link {
	background-color: #AA632C;
	color: #FFFFFF;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
	border: none;
	cursor: pointer;
	text-align: center;
}

.team-two-by-two-grid-section .wp-block-button.is-style-solid .wp-block-button__link:hover {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
}

/* Button Style 3: Arrow */
.team-two-by-two-grid-section .wp-block-button.is-style-arrow .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 18px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	font-weight: 400;
	position: relative;
	border-radius: 0;
}

.team-two-by-two-grid-section .wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 29px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='16' viewBox='0 0 29 16' fill='none'%3E%3Cpath d='M28.7071 8.70711C29.0976 8.31659 29.0976 7.68342 28.7071 7.2929L22.3431 0.928934C21.9526 0.53841 21.3195 0.53841 20.9289 0.928934C20.5384 1.31946 20.5384 1.95262 20.9289 2.34315L26.5858 8L20.9289 13.6569C20.5384 14.0474 20.5384 14.6805 20.9289 15.0711C21.3195 15.4616 21.9526 15.4616 22.3431 15.0711L28.7071 8.70711ZM-8.74228e-08 9L28 9L28 7L8.74228e-08 7L-8.74228e-08 9Z' fill='%23AA622C'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 10px;
	transition: transform 0.3s ease;
}

.team-two-by-two-grid-section .wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

.team-two-by-two-grid-bg-image-cont{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	height: 100%;
}

/* Team Two by Two Grid Styles */
.team-two-by-two-grid-section {
	position: relative;
	min-height: 676px;
	width: 100%;
	overflow: hidden;
	padding: 117px 0;
}

/* Background bottom section */
.team-two-by-two-grid-section .absolute.w-full.left-0.right-0.bottom-0 {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
}

/* Support for hex colors */
.team-two-by-two-grid-section [class*="bg-hex-"] {
	/* Note: Hex colors will need to be handled with inline styles or JavaScript */
}

.team-two-by-two-grid-container {
	display: flex;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 30px; /* Increased padding for better spacing */
	position: relative;
	flex-direction: row; /* Changed to row for horizontal layout */
	z-index: 10; /* Ensure content stays above the background */
	align-items: flex-start; /* Align items to the top */
	gap: 60px; /* Add gap between content and carousel */
}

@media (max-width: 1500px) {
	.team-two-by-two-grid-container{
		max-width: 1200px;
	}
}

@media (max-width: 1500px) {
	.team-two-by-two-grid-section .eyebrow {
		font-size: 16px !important;
	}

	.team-two-by-two-grid .team-two-by-two-grid-description,
	.team-two-by-two-grid-section .team-two-by-two-grid-description {
		font-size: 16px !important;
	}

	.team-two-by-two-grid-section .wp-block-button.is-style-default .wp-block-button__link {
		font-size: 16px !important;
	}

	.team-two-by-two-grid-section .wp-block-button.is-style-solid .wp-block-button__link {
		font-size: 16px !important;
	}

	.team-two-by-two-grid-section .wp-block-button.is-style-arrow .wp-block-button__link {
		font-size: 16px !important;
	}

	.teamtwobytwo-cta-link {
		font-size: 16px !important;
	}
}

/* Content Column */
.team-two-grid-content-column {
	display: flex;
	flex-direction: column !important; /* Changed to column for stacked content */
	justify-content: flex-start !important;
	align-items: flex-start !important; /* Align items to the top */
	width: 45%; /* Take 45% of container width */
	position: relative; /* For positioning navigation */
	align-self: center;
}

/* Content Wrapper */
.team-two-grid-content-wrapper {
	width: 100%;
	text-align: left;
	/*margin-bottom: 40px; */
}

/* Desktop/Mobile visibility control */
.desktop-only {
	display: flex;
}

/* Grid navigation buttons */
.grid-navigation-two-by-two {
	display: flex;
	justify-content: flex-start !important;
	align-items: center;
	gap: 8px;
	position: relative;
	z-index: 15;
	margin-top: 0;
	margin-bottom: 0;
}

/* Grid Column - Modified for 2x2 layout */
.grid-column {
	flex: 0 0 55%; /* Changed to 55% of container width */
	position: relative;
	overflow: visible;
	height: auto;
	min-height: 450px;
	z-index: 10;
}

/* Grid Track - Modified for 2x2 layout */
.grid-track {
	display: flex;
	flex-wrap: wrap; /* Changed to wrap for 2x2 grid */
	position: relative;
	margin-bottom: 30px;
	justify-content: flex-start; /* Changed to flex-start for proper 2x2 alignment */
	overflow: visible;
	width: 100%;
}

/* Grid Item - Modified for 2x2 layout with no gaps */
.grid-item {
	position: relative;
	height: auto;
	flex: 0 0 50%; /* 50% width for 2x2 grid */
	max-width: 50%;
	padding: 0; /* Remove padding between grid items */
	box-sizing: border-box;
	transition: all 0.3s ease;
}

.grid-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 1/1.2; /* Maintain consistent aspect ratio */
	margin: 0;
	transition: transform 0.3s ease; /* Add smooth transition for hover effect */
}

/* Image hover effect - 1.1 scale zoom */
.team-two-by-two-member-card:hover .grid-image {
	transform: scale(1.1);
}

/* Navigation Buttons */
.grid-prev,
.grid-next {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: opacity 0.3s ease;
	width: 45px;
	height: 45px;
	opacity: 70%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid-prev:hover,
.grid-next:hover {
	opacity: 1;
}

.grid-prev svg,
.grid-next svg {
	width: 45px;
	height: 45px;
}

.grid-prev:disabled,
.grid-next:disabled {
	cursor: pointer; /* Changed to allow clicking even when "disabled" for loop effect */
	opacity: 1; /* Keep full opacity for loop effect */
}

.grid-prev:focus,
.grid-next:focus {
	outline: none;
}

/* Card styling for team members - overlay style */
.team-two-by-two-member-card {
	position: relative;
	display: block;
	overflow: hidden;
	z-index: 10;
	width: 100%;
	height: 100%;
}

/* Container for name and position - overlay style */
.team-two-by-two-member-info {
	padding: 20px;
	color: #FFFFFF;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 20;
	background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0) 100%);
}

/* Name styling */
.team-two-by-two-member-name {
	font-family: 'Hedvig Letters Serif', serif;
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 5px 0;
	font-weight: 400;
	color: #FFFFFF !important;
}

/* Position styling */
.team-two-by-two-member-position {
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	margin: 0;
	letter-spacing: 2.72px;
	text-transform: uppercase;
	color: #FFFFFF !important;
}

/* Reset color overrides from parent elements */
.text-black .team-two-by-two-member-info,
.text-dark-blue .team-two-by-two-member-info {
	color: #FFFFFF;
}

.text-black .team-two-by-two-member-name,
.text-dark-blue .team-two-by-two-member-name,
.text-black .team-two-by-two-member-position,
.text-dark-blue .team-two-by-two-member-position {
	color: #FFFFFF !important;
}

/* Responsive adjustments - Tablet */
@media (max-width: 1024px) {
	.team-two-by-two-grid-container {
		flex-direction: column;
		padding: 0 30px;
	}

	.team-two-grid-content-column {
		flex-direction: column !important;
		align-items: flex-start !important;
		width: 100%;
	}

	.team-two-grid-content-wrapper {
		width: 100%;
		margin-bottom: 20px;
		text-align: left;
	}

	.team-two-by-two-grid .team-two-by-two-grid-title,
	.team-two-by-two-grid-section .team-two-by-two-grid-title,
	.team-two-by-two-grid .team-two-by-two-grid-description,
	.team-two-by-two-grid-section .team-two-by-two-grid-description {
		text-align: left;
	}

	/* Apply to navigation */
	.grid-navigation {
		justify-content: flex-start !important;
		margin-bottom: 20px;
	}

	.grid-column {
		flex: 0 0 100%;
		width: 100%;
	}

	.team-two-by-two-grid-section {
		min-height: auto;
		padding: 60px 0;
	}

	/* Adjust grid items for tablet */
	.grid-item {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.team-two-by-two-member-name {
		font-size: 22px;
	}
}

/* Responsive adjustments - Mobile */
@media (max-width: 768px) {

	.grid-navigation-two-by-two{
		align-self: center;
	}

	.team-two-by-two-grid-container {
		padding: 0;
	}

	.team-two-by-two-grid-section {
		padding: 40px 0;
	}

	.team-two-by-two-grid-container {
		padding: 0 20px;
	}

	.team-two-by-two-grid-title {
		font-size: 28px;
		text-align: left !important;
	}

	.team-two-by-two-grid-description {
		text-align: left !important;
	}

	.team-two-grid-content-wrapper {
		text-align: left;
	}

	/* Adjust content title alignment */
	.team-two-by-two-grid .team-two-by-two-grid-title,
	.team-two-by-two-grid-section .team-two-by-two-grid-title {
		text-align: left !important;
	}

	.team-two-by-two-grid .team-two-by-two-grid-description,
	.team-two-by-two-grid-section .team-two-by-two-grid-description {
		text-align: left !important;
	}

	/* Modified carousel layout for mobile to show peek effect */
	.grid-column {
		overflow: hidden;
		padding: 0;
		margin: 0 -20px; /* Extend beyond container padding */
		width: calc(100% + 40px); /* Match the negative margin */
		position: relative;
	}

	.grid-track {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 0;
		gap: 0; /* Remove gap to ensure cards touch */
		transition: transform 0.3s ease;
	}

	/* Card styling for peek effect - 80% width with no gap */
	.grid-item {
		flex: 0 0 80%; /* Each card takes 80% of viewport width */
		max-width: 80%;
		transition: all 0.3s ease;
		margin: 0; /* No margin between cards */
		box-sizing: border-box;
		position: relative;
	}

	/* Remove any scaling or opacity effects - show cards at full visibility */
	.grid-item.active,
	.grid-item {
		opacity: 1;
		transform: none;
	}

	/* UPDATED: Ensure image has proper display */
	.team-two-by-two-member-card .grid-image {
		width: 100%;
		height: auto;
		max-height: 500px; /* Restored from original - 500px max height */
		display: block;
		object-fit: cover; /* Ensure image covers area without distortion */
		aspect-ratio: 1/1.2; /* Maintain consistent aspect ratio */
	}

	/* Position the info overlay properly on mobile */
	.team-two-by-two-member-info {
		padding: 15px;
	}

	.team-two-by-two-member-name {
		font-size: 20px;
	}

	/* Make CTA button align with other content */
	.teamtwobytwo-cta-link {
		margin-top: 20px;
		align-self: flex-start;
	}

	/* Eyebrow text alignment */
	.team-two-by-two-grid-section .eyebrow {
		text-align: left;
	}

	/* Control overall card size - REMOVED max-height to ensure content isn't cut off */
	.team-two-by-two-member-card {
		margin: 0;
		height: auto;
		/* Removed max-height constraint to ensure bottom content isn't cut off */
	}

	/* Ensure buttons layout properly on mobile */
	.team-two-grid-content-column .flex {
		flex-direction: column;
		align-items: flex-start;
	}
}

.teamtwobytwo-cta-link {
	background-color: #AA632C;
	color: #FFFFFF;
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	line-height: 21px;
	font-weight: 400;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	width: fit-content;
	align-self: center;
}

.teamtwobytwo-cta-link:hover{
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	transition: 300ms ease-in;
}

/* JS sync - Target the same buttons whether they're in desktop or mobile */
.team-two-by-two-grid-section .grid-prev,
.team-two-by-two-grid-section .grid-next {
	/* Same styling applies to all button locations */
}