/* =====================================================
   KeenSlides — Frontend styles v1.2.8
   ===================================================== */

.flipcard-deck-wrap {
	position: relative;
	width: 100%;
	max-width: 814px;
	margin: 0 auto 2rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

/* =====================================================
   Stage & track
   ===================================================== */

.flipcard-body {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 1;
	min-height: 0;
	width: 100%;
}

.flipcard-stage {
	overflow: hidden;
	border-radius: 8px;
	flex: 1;
	min-width: 0;
	position: relative;
}

.flipcard-track {
	display: flex;
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	will-change: transform;
}

.flipcard-track.is-dragging {
	transition: none;
}

.flipcard-slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
}

/* =====================================================
   Card — the perspective wrapper
   ===================================================== */

.flipcard-card {
	position: relative;
	width: 100%;
	height: 417px;
	cursor: pointer;
	perspective: 1200px;
	outline: none;
}

.flipcard-card:focus-visible {
	outline: 3px solid #4255ff;
	outline-offset: 4px;
	border-radius: 8px;
}

/* Inner — rotates on flip */
.flipcard-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	transform: rotateX(0deg);
}

.flipcard-card.is-flipped .flipcard-card-inner {
	transform: rotateX(180deg);
}

/* Both faces fill the card */
.flipcard-face {
	position: absolute;
	inset: 0;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 8px;
	overflow: hidden;
	overflow-y: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	will-change: transform;
}

.flipcard-front {
	background: #fff;
	border: 1px solid #e8e8e8;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.flipcard-back {
	background: #fff;
	border: 1px solid #e8e8e8;
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
	transform: rotateX(180deg);
}

/* =====================================================
   Face content
   ===================================================== */

/*
   Image + caption layout:
   The face is a flex column. The img-wrap takes all remaining space (flex:1).
   Inside img-wrap: image fills top portion, caption is pinned to bottom.
   This means the caption is ALWAYS visible below the image, never overlapping.
*/
.flipcard-img-wrap {
	flex: 1;
	min-height: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateZ(0);
}

.flipcard-img-wrap .flipcard-img {
	flex: 1;
	min-height: 0;
	width: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	border-radius: 8px 8px 0 0;
}

.flipcard-caption {
	flex: 0 0 auto;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 12px 16px;
	font-size: 22px;
	font-weight: 700;
	color: #3b3b3b;
	text-align: center;
	background: #f9f9f9;
	border-top: 1px solid #e8e8e8;
	box-sizing: border-box;
	line-height: 1.3;
	z-index: 5;
}

/* Image with no caption */
.flipcard-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* Text-only face — centered */
.flipcard-text-face {
	flex: 1;
	width: 100%;
	padding: 2rem 2.5rem;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #2e3856;
	text-align: center;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* =====================================================
   Footer
   ===================================================== */

.flipcard-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .8rem .1rem 0;
}

.flipcard-footer-left  { min-width: 70px; }

.flipcard-footer-center {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.flipcard-footer-right {
	min-width: 70px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: .5rem;
}

.flipcard-count { font-size: .85rem; color: #6e6e6e; }

.flipcard-arrow {
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	color: #333;
	transition: background .15s, border-color .15s;
	padding: 0;
	line-height: 1;
	flex-shrink: 0;
}

.flipcard-arrow:hover     { background: #f2f2f2; border-color: #999; }
.flipcard-arrow:disabled  { opacity: .3; cursor: default; }

.flipcard-dots { display: flex; gap: 5px; align-items: center; }

.flipcard-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background .2s, transform .2s;
	display: block;
}

.flipcard-dot.is-active { background: #4255ff; transform: scale(1.35); }

.flipcard-hint {
	font-size: .78rem;
	color: #aaa;
	font-style: italic;
	text-align: center;
	display: block;
	margin-top: .35rem;
}

.flipcard-fullscreen-btn {
	position: absolute;
	top: 10px;
	right: calc(44px + 12px);
	z-index: 100;
	background: rgba(255,255,255,0.85);
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 7px 10px;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: #444;
	transition: background 0.2s;
}

.flipcard-fullscreen-btn:hover { background: #f2f2f2; border-color: #999; color: #111; }

/* =====================================================
   Fullscreen close button (hidden by default)
   ===================================================== */

.flipcard-fullscreen-close {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 2147483646;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: 2px solid rgba(255,255,255,0.7);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0;
}

.flipcard-fullscreen-close:hover {
	background: rgba(0,0,0,0.85);
	border-color: #fff;
}

/* =====================================================
   Fullscreen mode
   Uses native browser Fullscreen API — this CSS fires
   when .is-fullscreen is added by the JS after the
   fullscreenchange event. Works for projectors & tablets.
   ===================================================== */

.flipcard-deck-wrap.is-fullscreen {
	position: fixed;
	inset: 0;
	max-width: none;
	width: 100vw;
	height: 100vh;
	margin: 0;
	z-index: 2147483647;
	background: #111;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 0;
}

/* Stage fills as much vertical space as possible */
.flipcard-deck-wrap.is-fullscreen .flipcard-stage {
	flex: 1;
	min-height: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	border-radius: 0;
}

/* Track and slide must also fill the stage height */
.flipcard-deck-wrap.is-fullscreen .flipcard-track {
	height: 100%;
}

.flipcard-deck-wrap.is-fullscreen .flipcard-slide {
	height: 100%;
}

/* Card fills the full stage height — !important overrides the inline height set by PHP */
.flipcard-deck-wrap.is-fullscreen .flipcard-card {
	height: 100% !important;
	border-radius: 0;
	perspective: 2000px;
}

.flipcard-deck-wrap.is-fullscreen .flipcard-face {
	border-radius: 0;
}

/* Contain images in fullscreen so nothing is cropped */
.flipcard-deck-wrap.is-fullscreen .flipcard-img,
.flipcard-deck-wrap.is-fullscreen .flipcard-img-wrap .flipcard-img {
	object-fit: contain !important;
	height: 100% !important;
	background-color: #000;
}

/* Hide the "Enter Fullscreen" button when already in fullscreen */
.flipcard-deck-wrap.is-fullscreen .flipcard-fullscreen-btn {
	display: none !important;
}

/* Hide footer prev/next arrows in fullscreen — side arrows take over */
.flipcard-deck-wrap.is-fullscreen .flipcard-arrow {
	display: none !important;
}

/* Side navigation arrows — inside .flipcard-stage, overlaid on edges */
.flipcard-side-prev,
.flipcard-side-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	background: transparent;
	color: #888;
	border: none;
	cursor: pointer;
	font-size: 2.5rem;
	line-height: 1;
	padding: 0;
	transition: background 0.2s, color 0.2s;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.flipcard-side-prev { left: 8px; }
.flipcard-side-next { right: 8px; }

.flipcard-side-prev:hover,
.flipcard-side-next:hover {
	background: rgba(0, 0, 0, 0.06);
	color: #000;
}

.flipcard-side-prev:focus,
.flipcard-side-next:focus,
.flipcard-side-prev:focus-visible,
.flipcard-side-next:focus-visible,
.flipcard-side-prev:active,
.flipcard-side-next:active {
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
	color: #888;
}

/* Ensure stage is the anchor for all controls in fullscreen */
.flipcard-deck-wrap.is-fullscreen .flipcard-stage {
	position: relative !important;
}

/* Exit button — mirrors flip icon position, top-right */
.flipcard-deck-wrap.is-fullscreen .flipcard-fullscreen-close {
	position: absolute !important;
	top: 10px !important;
	right: 12px;
	z-index: 2000 !important;
	display: flex !important;
}

/* Fullscreen arrows — larger, darker, same 12px inset as flip icon */
.flipcard-deck-wrap.is-fullscreen .flipcard-side-prev,
.flipcard-deck-wrap.is-fullscreen .flipcard-side-next {
	width: 72px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 4rem;
}

.flipcard-deck-wrap.is-fullscreen .flipcard-side-prev { left: 12px; }
.flipcard-deck-wrap.is-fullscreen .flipcard-side-next { right: 12px; }


.flipcard-deck-wrap.is-fullscreen .flipcard-side-prev:hover,
.flipcard-deck-wrap.is-fullscreen .flipcard-side-next:hover {
	background: rgba(0, 0, 0, 0.55);
}

.flipcard-hint {
	display: none !important;
}

/* =====================================================
   Mobile & Tablet Responsiveness
   ===================================================== */
@media (max-width: 768px) {
	/* Override the PHP fixed height so card shrinks to fit on small screens */
	.flipcard-deck-wrap:not(.is-fullscreen) .flipcard-card {
		height: auto !important;
		aspect-ratio: 4 / 3;
	}

	/* Slightly smaller text for mobile */
	.flipcard-text-face {
		padding: 1.5rem;
		font-size: 1.1rem;
	}

	.flipcard-caption {
		font-size: 18px;
		padding: 8px 12px;
	}

	.flipcard-hint {
		display: none !important;
	}

	/* Hide side arrows in standard mobile view — too small to be useful */
	.flipcard-deck-wrap:not(.is-fullscreen) .flipcard-side-prev,
	.flipcard-deck-wrap:not(.is-fullscreen) .flipcard-side-next {
		display: none !important;
	}
}


/* =====================================================
   v1.3.25 — Caption pinned to the bottom; the WHOLE image
   is shown above it (standard, non-fullscreen view).
   The image is scaled to fit and centred, so nothing is
   cropped. When the photo and card are different shapes,
   blank strips may appear around the image. Fullscreen
   behaviour is untouched.
   ===================================================== */
.flipcard-deck-wrap:not(.is-fullscreen) .flipcard-img-wrap {
	flex: 1;
	min-height: 0;
}

.flipcard-deck-wrap:not(.is-fullscreen) .flipcard-img-wrap .flipcard-img {
	flex: 1;
	min-height: 0;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
}