/* =============================================================
   FWC Talent Carousel — Frontend
   Arch card design inspired by Pebble Beach Food & Wine
   ============================================================= */

/* ---- Wrapper ---- */
.fwc-talent-carousel-wrap {
	position: relative;
	overflow: hidden;
	margin: 20px 0;
	min-height: 400px; /* Reserve space during load to prevent CLS */
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

/* ---- Loading State ---- */
/* Uncode sets .owl-carousel-loading on the container until the carousel is fully initialised,
   then removes it. We use that window to keep the carousel invisible while the correct
   layout space is held by min-height above. */
.owl-carousel-container.owl-carousel-loading .fwc-talent-carousel {
	opacity: 0 !important;
	visibility: hidden !important;
}

.fwc-talent-carousel {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* ---- Owl item & Center Mode Effects ---- */
.fwc-talent-carousel .owl-item {
	padding: 0;
}

/* Scale/fade transition lives on the arch only — matches Owl navspeed (600ms) so
   the shrink-down animation completes in sync with the horizontal slide. */
.fwc-talent-carousel .owl-item .fwc-tc-arch {
	transition: transform 0.6s ease, opacity 0.6s ease;
}

.fwc-talent-carousel .owl-item:not(.fwc-is-center) .fwc-tc-arch {
	opacity: 0.35;
	transform: scale(0.85);
	transform-origin: bottom center;
}

.fwc-talent-carousel .owl-item.fwc-is-center .fwc-tc-arch {
	opacity: 1;
	transform: scale(1);
	transform-origin: bottom center;
}

.fwc-talent-carousel .owl-item.fwc-is-center {
	z-index: 2;
}

/* Names are always visible now, removed opacity toggling */

/* ---- Owl Custom Navigation ---- */
.fwc-talent-carousel-wrap .owl-nav {
	position: absolute;
	top: 40%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 10;
}

.fwc-talent-carousel-wrap .owl-nav button {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9) !important;
	color: var(--fwc-teal, #00293a) !important;
	border: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.fwc-talent-carousel-wrap .owl-nav button:hover {
	background: var(--fwc-gold, #cda053) !important;
	color: #fff !important;
}

.fwc-talent-carousel-wrap .owl-nav button span {
	font-size: 24px;
	line-height: 1;
}

.fwc-talent-carousel-wrap .owl-nav button.owl-prev {
	margin-left: 0;
}

.fwc-talent-carousel-wrap .owl-nav button.owl-next {
	margin-right: 0;
}

.fwc-talent-carousel-wrap .owl-nav button.owl-prev span::before {
	content: '\2039'; /* left angle quote */
}

.fwc-talent-carousel-wrap .owl-nav button.owl-next span::before {
	content: '\203A'; /* right angle quote */
}

/* ---- Responsive Breakpoints ---- */
@media (max-width: 959px) {
	.fwc-talent-carousel-wrap .owl-nav button {
		width: 40px;
		height: 40px;
	}
	
	.fwc-talent-carousel-wrap .owl-nav button span {
		font-size: 20px;
	}

	/* On tablet (3 → 3 items), keep buttons inside the wrap so nothing bleeds */
	.fwc-talent-carousel-wrap .owl-nav {
		padding: 0 4px;
	}
}

@media (max-width: 769px) {
	/* Single-item mobile view: center the arch card */
	.fwc-talent-carousel-wrap {
		overflow: hidden;
	}

	.fwc-talent-carousel .owl-item {
		text-align: center;
	}

	.fwc-tc-arch {
		margin: 0 auto;
		max-width: 260px;
	}

	.fwc-talent-carousel-wrap .owl-nav {
		top: 40%;
		padding: 0 8px;
	}
}

@media (max-width: 569px) {
	.fwc-talent-carousel-wrap .owl-nav button {
		width: 36px;
		height: 36px;
	}
	
	.fwc-talent-carousel-wrap .owl-nav {
		top: 42%;
		padding: 0 4px;
	}
	
	.fwc-tc-name {
		font-size: 1rem;
	}
	
	.fwc-tc-subtitle {
		font-size: 0.8rem;
	}
}

/* ---- Slide link ---- */
.fwc-tc-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.fwc-tc-link:hover {
	text-decoration: none;
}

/* ---- Arch image container ---- */
/* Classic padding-bottom ratio trick (works back to iOS 9).
   ::before is a normal-flow block that creates height; image is
   absolutely positioned inside. No aspect-ratio, no grid. */
.fwc-tc-arch {
	border-radius: 270px 270px 0 0;
	overflow: hidden;
	width: 100%;
	background-color: var(--fwc-card-bg, #0b3647);
	position: relative;
}

.fwc-tc-arch::before {
	content: '';
	display: block;
	padding-bottom: 122.917%; /* 590 / 480 × 100 */
}

.fwc-tc-arch img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}

.fwc-tc-link:hover .fwc-tc-arch img {
	transform: scale(1.04);
}

/* ---- Placeholder when no image ---- */
.fwc-tc-no-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--fwc-card-bg, #0b3647);
}

.fwc-tc-no-thumb .dashicons {
	font-size: 48px;
	color: var(--fwc-gold, #cda053);
	opacity: 0.4;
}

/* ---- Text below arch ---- */
.fwc-tc-content {
	padding: 18px 5px 20px;
}

.fwc-tc-name,
.fwc-tc-subtitle {
	margin: 0;
	padding: 0;
	text-align: center;
}

.fwc-tc-name {
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 10px;
}

.fwc-tc-subtitle {
	color: rgba(255, 255, 255, 0.84);
	font-size: 14px;
	line-height: 1.5;
	margin-top: 4px;
}

/* ---- Editor empty state ---- */
.fwc-tc-empty {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 20px 24px;
	background: rgba(0, 0, 0, 0.06);
	border: 2px dashed rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	color: #666;
	font-style: italic;
}