/**
 * Get Social Block Front-end CSS
 * Updated to display 4 cards in a row
 */

/* Get Social Styles */
.get-social-section {
	position: relative;
	min-height: 676px;
	width: 100%;
	overflow: hidden;
	padding: 117px 0;
	background-color: #0F293E; /* Fixed background color */
	color: #FFFFFF; /* Fixed text color */
}

.get-social-container {
	box-sizing: border-box; /* Ensure padding is included in width calculation */
}
.social-track {
	box-sizing: border-box; /* Ensure proper width calculation */
}
.social-column {
	box-sizing: border-box; /* Ensure proper width calculation */
}

/* Background bottom section */
.get-social-section .absolute.w-full.left-0.right-0.bottom-0 {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	background-color: #0F293E; /* Fixed background color */
}

.get-social-container {
	display: flex;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 30px; /* Increased padding for better spacing */
	position: relative;
	flex-direction: column;
	z-index: 10; /* Ensure content stays above the background */
	box-sizing: border-box; /* Ensure padding is included in width calculation */
}

@media (max-width: 1500px) {
	.get-social-container{
		max-width: 1200px;
	}
}

@media (max-width: 1500px) {
	.get-social .social-grid-description,
	.get-social-section .social-grid-description {
		font-size: 16px !important;
	}

	.get-social .wp-block-button.is-style-default .wp-block-button__link,
	.get-social-section .wp-block-button.is-style-default .wp-block-button__link {
		font-size: 16px !important;
	}

	.get-social .wp-block-button.is-style-solid .wp-block-button__link,
	.get-social-section .wp-block-button.is-style-solid .wp-block-button__link {
		font-size: 16px !important;
	}

	.get-social .wp-block-button.is-style-arrow .wp-block-button__link,
	.get-social-section .wp-block-button.is-style-arrow .wp-block-button__link {
		font-size: 16px !important;
	}

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


/* Content Column */
.social-content-column {
	display: flex;
	flex-direction: row !important; /* Force row direction */
	justify-content: space-between !important; /* Space between content and navigation */
	align-items: flex-start !important; /* Align items to the top */
	margin-bottom: 40px; /* Space between content and grid */
	width: 100%;
}

/* Content Wrapper */
.social-content-wrapper {
	flex: 1 1 70%; /* Take 70% of the space but allow flex */
	padding-right: 30px; /* Add some spacing between content and navigation */
	max-width: 70%; /* Ensure it doesn't get too wide */
	text-align: left;
}

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

.get-social .social-grid-description,
.get-social-section .social-grid-description {
	font-family: 'DM Sans', sans-serif;
	font-size: 18px;
	letter-spacing: -0.48px;
	margin-bottom: 48px;
	text-align: left;
	color: #FFFFFF;
}

/* Button Styles */
.get-social .wp-block-buttons,
.get-social-section .wp-block-buttons,
.get-social .social-grid-buttons,
.get-social-section .social-grid-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* Button Style 1: Default (Blue Background) */
.get-social .wp-block-button.is-style-default .wp-block-button__link,
.get-social-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;
}

.get-social .wp-block-button.is-style-default .wp-block-button__link:hover,
.get-social-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) */
.get-social .wp-block-button.is-style-solid .wp-block-button__link,
.get-social-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;
}

.get-social .wp-block-button.is-style-solid .wp-block-button__link:hover,
.get-social-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 */
.get-social .wp-block-button.is-style-arrow .wp-block-button__link,
.get-social-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;
}

.get-social .wp-block-button.is-style-arrow .wp-block-button__link::after,
.get-social-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;
}

.get-social .wp-block-button.is-style-arrow .wp-block-button__link:hover::after,
.get-social-section .wp-block-button.is-style-arrow .wp-block-button__link:hover::after {
	transform: translateX(5px);
}

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

/* Container for navigation buttons */
.social-content-column .flex {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: end;
	margin-top: 30px;
	width: 100%;
}

/* Right side buttons */
.social-navigation.buttons-right {
	display: flex;
	justify-content: flex-end !important;
	align-items: center;
	margin: 0;
	gap: 8px;
	position: relative;
	z-index: 15;
	margin-left: 30px;
	flex: 0 0 auto;
}

/* Mobile navigation */
.social-navigation.mobile-only {
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
	justify-content: flex-start !important;
}

/* Social Column */
.social-column {
	flex: 0 0 100%;
	position: relative;
	overflow: visible; /* Changed to visible to allow the peek effect */
	height: auto;
	min-height: 450px;
	z-index: 10; /* Ensure grid stays above the background */
	box-sizing: border-box; /* Ensure proper width calculation */
}

/* Social Track - Modified for 4-card layout */
.social-track {
	display: flex;
	flex-wrap: nowrap; /* Keep nowrap for carousel effect */
	position: relative;
	margin-bottom: 30px;
	justify-content: center;
	overflow: visible; /* Allow overflow to be visible for peek effect */
	width: 100%;
	gap: 24px; /* Reduced from 32px to ensure items fit container */
	box-sizing: border-box; /* Ensure proper width calculation */
}

.social-item {
	position: relative;
	height: auto;
	flex: 0 0 calc(25% - 18px); /* Adjusted to account for gaps (25% - (gap*3/4)) */
	max-width: calc(25% - 18px); /* Ensure consistent width */
	margin-right: 0;
	transition: all 0.3s ease; /* Smooth transition for carousel movement */
}

.social-image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain; /* Changed from cover to contain to prevent cropping */
	aspect-ratio: auto; /* Removed fixed aspect ratio to allow natural image dimensions */
}

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

.social-prev:hover,
.social-next:hover {
	transition: opacity 0.3s ease;
	opacity: 1;
}

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

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

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

/* Card styling for social profiles */
.social-profile-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 10;
}

/* Container for name and platform */
.social-profile-info {
	padding: 20px;
	color: #FFFFFF;
	width: 100%;
	position: relative;
	z-index: 10;
	height: 100%;
	background-color: #0F293E; /* Fixed background color */
}

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

/* Platform styling */
.social-profile-platform {
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 18px;
	margin: 0;
	letter-spacing: 2.72px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.social-cta-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;
}

.social-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;
}

/* Optional: CSS for cloned items */
.social-item.clone-item {
	/* Keep the same styles as regular items */
	opacity: 1;
	transform: none;
}

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

	.social-content-column {
		flex-direction: column !important;
	}

	.social-content-wrapper {
		flex: 1 1 100%;
		max-width: 100%;
		padding-right: 0;
		margin-bottom: 20px;
	}

	.social-content-column .flex {
		width: 100%;
		margin-top: 20px;
		flex-direction: column;
	}

	/* Apply to desktop navigation */
	.social-navigation.buttons-right {
		margin-left: 0;
		margin-top: 20px;
	}

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

	.social-content-column {
		padding-bottom: 20px;
	}

	.social-content-wrapper {
		max-width: 100%;
	}

	.get-social-section {
		min-height: auto;
		padding: 60px 0;
	}

	/* Adjust to 2 cards per row on tablet */
	.social-item {
		flex: 0 0 calc(50% - 12px); /* Adjusted to account for gap */
		max-width: calc(50% - 12px);
	}

	.social-profile-name {
		font-size: 22px;
	}
}

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

	.social-column{
		min-height: unset;
	}

	.get-social-section {
		padding: 40px 0;
	}

	.get-social-container {
		padding: 0 20px;
	}

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

	.social-grid-description {
		text-align: left !important;
	}

	.social-content-wrapper {
		text-align: left;
	}

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

	.get-social .social-grid-description,
	.get-social-section .social-grid-description {
		text-align: left !important;
	}

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

	.social-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 */
	.social-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 */
	.social-item.active,
	.social-item {
		opacity: 1;
		transform: none;
	}

	/* UPDATED: Improved image display */
	.social-profile-card .social-image {
		width: 100%;
		height: auto;
		max-height: none; /* Removed height constraint */
		display: block;
		object-fit: contain; /* Changed to contain to prevent cropping */
		aspect-ratio: auto; /* Allow natural aspect ratio */
	}

	/* Position navigation buttons for mobile */
	.social-navigation.mobile-only {
		position: relative;
		margin-top: 20px;
		margin-left: 0;
		justify-content: flex-start !important;
	}

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

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

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