/*==============================*/
/*=====----- SOCIAL CALLOUT -----=====*/
/*==============================*/

.social-callout {
	position: relative;
	padding: 40px 0;
}

.social-callout > .inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}

/* Red background - max height 420px */
.social-callout .bg-shape {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
	left: 0;
	height: 100%;
	max-height: 420px;
	background-color: var(--red);
	border-radius: 15px;
	z-index: 0;
}

/* Content wrapper - holds video + star + text */
.social-callout .content-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}

/*============================*/
/*=====----- VIDEO -----=====*/
/*============================*/

.social-callout .video-outer {
	position: relative;
	flex-shrink: 0;
	width: 324px;
	margin-left: 80px;
}

.social-callout .slide {
	position: relative;
	width: 324px;
	height: 576px;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	background: #000;
}

.social-callout .slide > .inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.social-callout .video-cont {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* Gradient overlay for profile visibility */
.social-callout .video-cont::before {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 5;
	display: block;
	height: 92px;
	background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1) 33%, rgba(0,0,0,0));
	content: '';
	pointer-events: none;
	border-radius: 16px 16px 0 0;
}

.social-callout .slide.no-profile-graphic .video-cont::before {
	display: none;
}

/* Profile section at top of video */
.social-callout .profile-cont {
	display: flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
	pointer-events: none;
}

.social-callout .profile-cont .profile-graphic {
	width: 50px;
	height: 50px;
	border-radius: 30px;
	object-fit: cover;
}

.social-callout .profile-cont .profile-name {
	color: var(--white);
	font-size: var(--text-lg);
	font-weight: 600;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.40);
}

.social-callout .slide.no-profile-graphic .profile-cont {
	display: none;
}

/* Video embed - Fixed dimensions */
.social-callout .plyr,
.social-callout .plyr__video-embed {
	position: relative;
	z-index: 1;
	width: 324px;
	height: 576px;
	overflow: hidden;
}

.social-callout .plyr iframe,
.social-callout .plyr__video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	object-fit: cover;
}

.plyr__poster {
	width: unset !important;
}
/* Slide title overlay */
.social-callout .slide .content-section {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 60px 16px 16px;
	background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
	pointer-events: none;
}

.social-callout .slide-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--white);
	margin: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.social-callout .slide-title a {
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
}

/*============================*/
/*=====----- STAR ICON -----=====*/
/*============================*/

.social-callout .icon-cont {
	pointer-events: none;
}

.social-callout .icon-cont img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Single star - positioned at right edge of video, overlapping into content */
.social-callout .icon-center {
	position: absolute;
	z-index: 4;
	width: 107px;
	height: 123px;
	flex-shrink: 0;
	right: -53px;
	top: 50px;
	margin: 0;
}

/*============================*/
/*=====----- CONTENT -----=====*/
/*============================*/

.social-callout .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 15px;
	color: var(--white);
	padding: 70px;
}

.social-callout .content .title {
    color: var(--white);
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	text-transform: capitalize;
	margin: 0;
}

.social-callout .content .description {
    color: var(--white);
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	margin: 0;
}

.social-callout .button-cont {
	margin-top: 6px;
}

/* Button - white background with red text */
.social-callout .follow-button {
	display: inline-block;
	padding: 10px 30px;
	background: var(--white);
	color: var(--red);
	border: none;
	border-radius: 25px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-transform: uppercase;
}

/*----- Video playing state -----*/

.social-callout .slide.playing .video-cont::before,
.social-callout .slide.playing .content-section,
.social-callout .slide.playing .profile-cont {
	opacity: 0;
	pointer-events: none;
}

/*===================================*/
/*=====----- RESPONSIVE -----=====*/
/*===================================*/

/* Tablet - 50% centered video */
@media (max-width: 899px) {
	.social-callout {
		padding: 40px 20px;
	}

	.social-callout > .inner {
		padding: 0;
	}

	.social-callout .bg-shape {
		left: -20px;
		right: -20px;
		top: 0;
		transform: none;
		height: auto;
		bottom: 80px;
		max-height: none;
		border-radius: 0;
	}

	.social-callout .content-wrapper {
		flex-direction: column;
		padding: 0;
	}

	/* Content appears first (on top) */
	.social-callout .content {
		order: 1;
		padding: 30px 30px 0;
		align-items: flex-start;
		text-align: left;
	}

	/* Video appears second (below content) - centered at 50% */
	.social-callout .video-outer {
		order: 2;
		width: 50%;
		margin: 40px auto 0;
		padding: 0;
		box-sizing: border-box;
		position: relative;
	}

	.social-callout .slide {
		width: 100%;
		height: auto;
		aspect-ratio: 9 / 16;
	}

	.social-callout .plyr,
	.social-callout .plyr__video-embed {
		width: 100%;
		height: auto;
		aspect-ratio: 9 / 16;
	}

	/* Adjust star icon position for centered video */
	.social-callout .icon-center {
		display: block;
		width: 65px;
		height: 70px;
		right: -20px;
		top: 10px;
	}

	.social-callout .content .title {
		font-size: 32px;
	}

	.social-callout .content .description {
		font-size: 18px;
	}

	.social-callout .profile-cont {
		top: 10px;
		left: 10px;
	}

	.social-callout .profile-cont .profile-graphic {
		width: 40px;
		height: 40px;
	}

	.social-callout .profile-cont .profile-name {
		font-size: 14px;
	}

	.social-callout .button-cont, .follow-button {
		width: 100%;
		text-align: center;
	}

}

/* Mobile - 100% full width video */
@media (max-width: 599px) {
	.social-callout .video-outer {
		width: 100%;
		padding: 0 30px;
	}

	.social-callout .icon-center {
		width: 81px;
		height: 87.5px;
		right: -15px;
		top: 0;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.social-callout .bg-shape {
		left: 120px;
		max-height: 320px;
	}

	.social-callout .content-wrapper {
		padding: 40px 0;
	}

	.social-callout .video-outer {
		width: 200px;
		margin-left: 50px;
	}

	.social-callout .slide {
		width: 200px;
		height: 356px;
	}

	.social-callout .plyr,
	.social-callout .plyr__video-embed {
		width: 200px;
		height: 356px;
	}

	.social-callout .icon-center {
		width: 65px;
		height: 75px;
		right: -32px;
		top: 30px;
	}

	.social-callout .content {
		padding: 20px 30px 20px 40px;
	}

	.social-callout .content .title {
		font-size: 24px;
	}

	.social-callout .content .description {
		font-size: 16px;
	}

	.social-callout .profile-cont {
		top: 8px;
		left: 8px;
	}

	.social-callout .profile-cont .profile-graphic {
		width: 35px;
		height: 35px;
	}

	.social-callout .profile-cont .profile-name {
		font-size: 12px;
	}
}

@media (min-width: 1200px) {
	.social-callout .video-outer {
		width: 324px;
	}

	.social-callout .slide {
		width: 324px;
		height: 576px;
	}

	.social-callout .plyr,
	.social-callout .plyr__video-embed {
		width: 324px;
		height: 576px;
	}

	.social-callout .icon-center {
		width: 107px;
		height: 123px;
		right: -60px;
		top: 85px;
	}

	.social-callout .content .title {
		font-size: 32px;
	}

	.social-callout .content .description {
		font-size: 20px;
	}

	.social-callout .profile-cont {
		top: 20px;
		left: 20px;
	}

	.social-callout .profile-cont .profile-graphic {
		width: 60px;
		height: 60px;
	}

	.social-callout .profile-cont .profile-name {
		font-size: var(--text-xl);
	}
}

/*============================*/
/*=====----- PLYR -----=====*/
/*============================*/

.social-callout .plyr__progress__container {
	display: none;
}

.social-callout .plyr__controls {
	justify-content: flex-start;
}

.social-callout .plyr__volume {
	min-width: 40px;
	width: auto;
}

.social-callout .plyr__controls .plyr__controls__item:first-child {
	margin-right: 0;
}

.social-callout .plyr__control {
	display: flex !important;
    justify-content: center;
	align-items: center;
	bottom: auto;
	width: 75px;
	height: 75px;
	border-radius: 40px;
	background: rgba(0, 0, 0, 0.30);
	transition: none !important;
}

/* Prevent hover and focus effects */
.social-callout .plyr__control:hover,
.social-callout .plyr__control:focus {
	background: rgba(0, 0, 0, 0.30) !important;
}

.social-callout .plyr__control svg {
	height: 20px;
	width: 20px;
}

/*==============================*/
/*=====----- GLIDE JS -----=====*/
/*==============================*/

.social-callout .glide__arrows {
	position: absolute;
	inset: 50% -25px auto -25px;
	z-index: 2;
	transform: translateY(-50%);
	display: none;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.social-callout .glide__arrow {
	width: 44px;
	height: 44px;
	margin: 0;
	pointer-events: all;
}

.social-callout .glide__bullets {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.social-callout .glide__bullet {
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--gray-600);
	border-radius: 50%;
	background-color: transparent;
}

.social-callout .glide__bullet--active {
	background-color: var(--gray-600);
}

.social-callout .glide__track {
	position: relative;
	z-index: 1;
}

@media (min-width: 900px) {
	.social-callout .glide__arrows {
		display: flex;
	}
}