/* 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%;
}

.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%);
	}
}