/* Fluidity FlexPanels.
 *
 * Note: Keep styles scoped to .fldtyfp- to avoid conflicts.
 */

.fldtyfp-flexpanels{
	--fldtyfp-height-desktop: 360px;
	--fldtyfp-height-mobile: 420px;
	--fldtyfp-expand: 2;
	--fldtyfp-contract: 0.8;
	--fldtyfp-mobile-slide-width: 85%;
	position: relative;
	width: 100%;
	margin: var(--fldtyfp-margin, 0 auto);
	background: var(--fldtyfp-bg-color, transparent);
	padding: var(--fldtyfp-padding, 0);
	box-sizing: border-box;
}

.fldtyfp-flexpanels__track{
	display: flex;
	gap: 0;
	height: var(--fldtyfp-height-desktop);
	overflow: hidden;
	border-radius: 16px;
}

.fldtyfp-pane{
	position: relative;
	display: block;
	flex: 1 1 0%;
	flex-grow: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
	outline: none;
	transition: flex-grow 350ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.fldtyfp-flexpanels.is-hovering .fldtyfp-pane{
	flex-grow: var(--fldtyfp-contract);
}

.fldtyfp-pane.is-active{
	flex-grow: var(--fldtyfp-expand);
}

/* CSS-only hover fallback. */
.fldtyfp-flexpanels__track:hover .fldtyfp-pane{
	flex-grow: var(--fldtyfp-contract);
}
.fldtyfp-flexpanels__track .fldtyfp-pane:hover{
	flex-grow: var(--fldtyfp-expand);
}

/* Keyboard fallback. */
.fldtyfp-flexpanels__track:focus-within .fldtyfp-pane{
	flex-grow: var(--fldtyfp-contract);
}
.fldtyfp-flexpanels__track:focus-within .fldtyfp-pane:focus{
	flex-grow: var(--fldtyfp-expand);
}

.fldtyfp-pane__media,
.fldtyfp-pane__media img{
	width: 100%;
	height: 100%;
}

.fldtyfp-pane__media{
	position: absolute;
	inset: 0;
}

.fldtyfp-pane__img{
	object-fit: cover;
	object-position: center;
	display: block;
}

.fldtyfp-pane__caption{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 18px 18px;
	background: rgba(0, 74, 173, 0.92);
	color: #fff;
    -webkit-clip-path: polygon(
		0% 14%,
		50% 0%,
		100% 14%,
		100% 100%,
		0% 100%
	);
	clip-path: polygon(
		0% 14%,
		50% 0%,
		100% 14%,
		100% 100%,
		0% 100%
	);
}

.fldtyfp-pane__date {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.9;
    margin: 6px 0;
}

.fldtyfp-pane__title {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 65px;
}

.fldtyfp-pane:focus-visible{
	box-shadow: 0 0 0 3px rgba(22, 110, 99, 0.45);
}

/* Dots (primarily for mobile).
 */
.fldtyfp-flexpanels__dots{
	display: none;
	gap: 8px;
	justify-content: center;
	margin-top: 10px;
}

.fldtyfp-dot{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 0;
	background: rgba(0, 0, 0, 0.25);
	cursor: pointer;
	padding: 0;
}

.fldtyfp-dot.is-active{
	background: rgba(0, 0, 0, 0.6);
}

/* Mobile carousel.
 * Default: 85% width for a premium peek of the next panel.
 */
@media (max-width: 767px){
	.fldtyfp-flexpanels__track{
		height: var(--fldtyfp-height-mobile);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 14px;
		padding: 0 14px;
		border-radius: 16px;
	}

	.fldtyfp-pane{
		flex: 0 0 var(--fldtyfp-mobile-slide-width);
		scroll-snap-align: center;
		border-radius: 16px;
		overflow: hidden;
	}

	/* Disable desktop hover expansion behavior.
	 */
	.fldtyfp-flexpanels.is-hovering .fldtyfp-pane,
	.fldtyfp-pane.is-active{
		flex: 0 0 var(--fldtyfp-mobile-slide-width);
	}

	.fldtyfp-flexpanels__dots{
		display: flex;
	}

	.fldtyfp-pane__caption{
		clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
	}
}

/* ==========================================================================
 * Slideshow / Hero Banner Carousel Layout Mode
 * ========================================================================== */

.fldtyfp-slideshow {
	--fldtyfp-max-width: 700px;
	max-width: var(--fldtyfp-max-width);
	margin: var(--fldtyfp-margin, 20px auto);
	padding: var(--fldtyfp-padding, 0);
	box-sizing: border-box;
	height: var(--fldtyfp-height-desktop);
	border-radius: var(--fldtyfp-border-radius, 0px);
	overflow: hidden;
	position: relative;
	background: var(--fldtyfp-bg-color, #0d1e34);
	user-select: none;
}

.fldtyfp-slideshow--rounded {
	border-radius: 12px;
}

.fldtyfp-slideshow--square {
	border-radius: 0 !important;
}

.fldtyfp-slideshow__viewport {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.fldtyfp-slideshow__track {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fldtyfp-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	display: block;
}

/* Fade Transition */
.fldtyfp-slideshow--fade .fldtyfp-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
	z-index: 1;
	pointer-events: none;
}

.fldtyfp-slideshow--fade .fldtyfp-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	pointer-events: auto;
}

/* Slide Transition */
.fldtyfp-slideshow--slide .fldtyfp-slide {
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
	z-index: 1;
	pointer-events: none;
}

.fldtyfp-slideshow--slide .fldtyfp-slide.is-active {
	transform: translateX(0);
	z-index: 2;
	pointer-events: auto;
}

.fldtyfp-slideshow--slide .fldtyfp-slide.is-prev {
	transform: translateX(-100%);
	z-index: 1;
}

/* Slideshow Caption Overlay */
.fldtyfp-slideshow .fldtyfp-pane__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 24px 28px;
	background: var(--fldtyfp-caption-bg, rgba(0, 0, 0, 0.7));
	color: var(--fldtyfp-caption-color, #ffffff);
	text-align: var(--fldtyfp-caption-align, left);
	clip-path: none;
	-webkit-clip-path: none;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 5;
	transition: background-color 0.2s ease;
	box-sizing: border-box;
}

.fldtyfp-slideshow .fldtyfp-pane__title {
	font-size: var(--fldtyfp-caption-font-size, 22px);
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
	height: auto;
	max-height: none;
	display: block;
	overflow: visible;
	color: var(--fldtyfp-caption-color, #ffffff);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	letter-spacing: -0.01em;
	word-wrap: break-word;
}

.fldtyfp-slideshow .fldtyfp-pane__date {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.85;
	margin: 0 0 4px;
	color: var(--fldtyfp-caption-color, #ffffff);
}

/* Prev / Next Arrows - Clean Chevrons matching energy.gov.tt */
.fldtyfp-slideshow__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 54px;
	background: transparent;
	color: #ffffff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: transform 0.2s ease, opacity 0.2s ease;
	padding: 0;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65));
	opacity: 0.85;
}

.fldtyfp-slideshow__arrow:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.12);
	background: transparent;
}

.fldtyfp-slideshow__arrow svg {
	width: 24px;
	height: 38px;
}

.fldtyfp-slideshow__arrow--prev {
	left: 12px;
}

.fldtyfp-slideshow__arrow--next {
	right: 12px;
}

/* Optional Circle Arrow Style */
.fldtyfp-slideshow--arrow-circle .fldtyfp-slideshow__arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.25);
}
.fldtyfp-slideshow--arrow-circle .fldtyfp-slideshow__arrow:hover {
	background: rgba(0, 0, 0, 0.8);
}
.fldtyfp-slideshow--arrow-circle .fldtyfp-slideshow__arrow svg {
	width: 20px;
	height: 20px;
}

/* Navigation Dots */
.fldtyfp-slideshow__dots {
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	z-index: 10;
	padding: 3px 0;
}

/* Energy.gov.tt Dots Style: small solid black dots with hollow white ring for active */
.fldtyfp-slideshow__dots--energy .fldtyfp-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.fldtyfp-slideshow__dots--energy .fldtyfp-dot.is-active {
	width: 8px;
	height: 8px;
	background: transparent;
	border: 2px solid #ffffff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
	transform: scale(1.1);
}

/* Modern Glow Dots Style */
.fldtyfp-slideshow__dots--glow .fldtyfp-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	border: 1px solid rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
}

.fldtyfp-slideshow__dots--glow .fldtyfp-dot.is-active {
	background: #ffffff;
	transform: scale(1.3);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Mobile Adjustments for Slideshow */
@media (max-width: 767px) {
	.fldtyfp-slideshow {
		height: var(--fldtyfp-height-mobile, 420px);
		border-radius: var(--fldtyfp-border-radius, 0px);
	}

	.fldtyfp-slideshow--rounded {
		border-radius: 8px;
	}

	.fldtyfp-slideshow--square {
		border-radius: 0 !important;
	}

	.fldtyfp-slideshow .fldtyfp-pane__caption {
		bottom: 0;
		padding: 10px 14px 22px;
	}

	.fldtyfp-slideshow .fldtyfp-pane__title {
		font-size: 14px;
		max-height: none;
		display: block;
		overflow: visible;
	}

	.fldtyfp-slideshow__arrow {
		width: 34px;
		height: 34px;
	}
	.fldtyfp-slideshow__arrow--prev {
		left: 8px;
	}
	.fldtyfp-slideshow__arrow--next {
		right: 8px;
	}
}