/* BC Timeline Slideshow — Frontend */
.bcts-slideshow {
	position: relative;
	width: 100%;
	background: var(--bcts-bg, #fff);
	font-family: var(--bcts-font, inherit);
	font-size: var(--bcts-font-size, 16px);
	color: var(--bcts-font-color, #222);
	box-sizing: border-box;
	overflow: hidden;
	padding-top: var(--bcts-pad-top, 0px);
	padding-bottom: var(--bcts-pad-bottom, 0px);
}

.bcts-viewport {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	height: var(--bcts-h, 1000px);
	user-select: none;
	-webkit-overflow-scrolling: touch;
	/* Hide the native horizontal scrollbar. Scrolling still works via drag,
	   wheel, the prev/next arrows, the timeline handle, and keyboard. */
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE / legacy Edge */
	/* scroll-behavior is controlled entirely by JS (scrollTo behavior option). */
}
.bcts-viewport::-webkit-scrollbar { display: none; }  /* Chrome / Safari / WebKit */
.bcts-viewport.bcts-draggable { cursor: grab; }
.bcts-viewport.dragging { cursor: grabbing; }

.bcts-track {
	position: relative;
	height: 100%;
	display: flex;
	align-items: flex-start;
	gap: var(--bcts-gap, 66px); /* set inline via JS using data-spacing */
	padding-right: 1px;
}

.bcts-slide {
	position: relative;
	height: 100%;
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.bcts-slide-image {
	position: absolute;
	transform-origin: top left;
}
.bcts-slide-image img { user-select: none; -webkit-user-drag: none; pointer-events: none; }

.bcts-slide-textblock {
	position: absolute;
	left: 0;
}
.bcts-slide-text,
.bcts-slide-header {
	line-height: 1.4;
	margin: 0;
}
.bcts-slide-header { line-height: 1.2; }
.bcts-slide-text p:first-child { margin-top: 0; }
.bcts-slide-text p:last-child  { margin-bottom: 0; }
.bcts-slide-text img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}
.bcts-slide-text img.alignleft   { float: left;  margin: 0 12px 8px 0; }
.bcts-slide-text img.alignright  { float: right; margin: 0 0 8px 12px; }
.bcts-slide-text img.aligncenter { display: block; margin: 8px auto; }
.bcts-slide-text figure { margin: 8px 0; }
.bcts-slide-text figure img { max-width: 100%; height: auto; }

/* Arrows */
.bcts-arrow {
	position: absolute;
	z-index: 5;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--bcts-arrow-color, #222);
	font-size: var(--bcts-arrow-size, 36px);
	line-height: 1;
	padding: 6px 10px;
}
.bcts-arrow:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.bcts-arrow img {
	display: block;
	width: var(--bcts-arrow-size, 36px);
	height: auto;
}
.bcts-arrow-icon {
	display: inline-block;
	line-height: 0;
}
.bcts-arrow-icon svg {
	width: var(--bcts-arrow-size, 36px);
	height: var(--bcts-arrow-size, 36px);
	display: block;
}
.bcts-arrow-prev .bcts-arrow-icon { transform: scaleX(-1); }

.bcts-arrows-sides .bcts-arrow-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.bcts-arrows-sides .bcts-arrow-next { right: 8px; top: 50%; transform: translateY(-50%); }
.bcts-arrows-sides-top .bcts-arrow-prev { left: 8px; top: 16px; }
.bcts-arrows-sides-top .bcts-arrow-next { right: 8px; top: 16px; }
.bcts-arrows-sides-bottom .bcts-arrow-prev { left: 8px; bottom: 16px; }
.bcts-arrows-sides-bottom .bcts-arrow-next { right: 8px; bottom: 16px; }

.bcts-arrows-above .bcts-arrow,
.bcts-arrows-below .bcts-arrow {
	position: relative;
	display: inline-block;
	top: auto; bottom: auto; left: auto; right: auto;
	transform: none;
}
.bcts-arrows-above .bcts-arrow-prev,
.bcts-arrows-below .bcts-arrow-prev { order: 1; margin-right: 6px; }
.bcts-arrows-above .bcts-arrow-next,
.bcts-arrows-below .bcts-arrow-next { order: 2; }
.bcts-arrows-above { display: flex; flex-wrap: wrap; }
.bcts-arrows-above .bcts-viewport { order: 3; flex: 1 0 100%; }
.bcts-arrows-below { display: flex; flex-wrap: wrap; }
.bcts-arrows-below .bcts-viewport { order: 0; flex: 1 0 100%; }

/* When the timeline nav is shown, the side/above/below arrow CSS is irrelevant — arrows live inside .bcts-nav-arrows. */
.bcts-has-nav .bcts-arrow-prev,
.bcts-has-nav .bcts-arrow-next {
	position: static;
	transform: none;
	top: auto; bottom: auto; left: auto; right: auto;
}

/* Timeline navigation */
.bcts-nav {
	position: absolute;
	top: calc(var(--bcts-pad-top, 0px) + var(--bcts-nav-top, 40px));
	left: 50%;
	transform: translateX(-50%);
	width: var(--bcts-nav-width, 90%);
	z-index: 5;
	color: var(--bcts-nav-color, #8a6a31);
	pointer-events: auto;
	font-family: var(--bcts-font, inherit);
}

/* Arrows inside the nav (anchored above the line) */
.bcts-nav-arrows.is-in-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	transform: translate(var(--bcts-arrow-x, 0px), var(--bcts-arrow-y, 0px));
}
.bcts-nav-arrows.is-in-nav[data-anchor="nav-left"]   { justify-content: flex-start; }
.bcts-nav-arrows.is-in-nav[data-anchor="nav-center"] { justify-content: center; }
.bcts-nav-arrows.is-in-nav[data-anchor="nav-right"]  { justify-content: flex-end; }

/* Arrows as a separate floating block over the slides */
.bcts-nav-arrows.is-floating {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 6;
	pointer-events: auto;
}
.bcts-nav-arrows.is-floating[data-anchor="slides-tl"] { top:    calc(var(--bcts-pad-top, 0px) + var(--bcts-image-top, 200px) + var(--bcts-arrow-y, 0px)); left:  calc(16px + var(--bcts-arrow-x, 0px)); }
.bcts-nav-arrows.is-floating[data-anchor="slides-tc"] { top:    calc(var(--bcts-pad-top, 0px) + var(--bcts-image-top, 200px) + var(--bcts-arrow-y, 0px)); left:  calc(50% + var(--bcts-arrow-x, 0px)); transform: translateX(-50%); }
.bcts-nav-arrows.is-floating[data-anchor="slides-tr"] { top:    calc(var(--bcts-pad-top, 0px) + var(--bcts-image-top, 200px) + var(--bcts-arrow-y, 0px)); right: calc(16px - var(--bcts-arrow-x, 0px)); }
.bcts-nav-arrows.is-floating[data-anchor="slides-bl"] { bottom: calc(var(--bcts-pad-bottom, 0px) + 16px - var(--bcts-arrow-y, 0px)); left:  calc(16px + var(--bcts-arrow-x, 0px)); }
.bcts-nav-arrows.is-floating[data-anchor="slides-bc"] { bottom: calc(var(--bcts-pad-bottom, 0px) + 16px - var(--bcts-arrow-y, 0px)); left:  calc(50% + var(--bcts-arrow-x, 0px)); transform: translateX(-50%); }
.bcts-nav-arrows.is-floating[data-anchor="slides-br"] { bottom: calc(var(--bcts-pad-bottom, 0px) + 16px - var(--bcts-arrow-y, 0px)); right: calc(16px - var(--bcts-arrow-x, 0px)); }

/* Shared arrow button styling for in-nav and floating */
.bcts-nav-arrows .bcts-arrow {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--bcts-arrow-size, 36px) + 14px);
	height: calc(var(--bcts-arrow-size, 36px) + 14px);
	padding: 0;
	border: 1px solid var(--bcts-nav-color, #8a6a31);
	background: transparent;
	color: var(--bcts-nav-color, #8a6a31);
	border-radius: 2px;
	transition: background-color 120ms, color 120ms;
	transform: none;
	top: auto; bottom: auto; left: auto; right: auto;
}
.bcts-nav-arrows .bcts-arrow:hover,
.bcts-nav-arrows .bcts-arrow:focus {
	background: var(--bcts-nav-color, #8a6a31);
	color: #fff;
}
.bcts-nav-arrows .bcts-arrow-icon svg {
	width: var(--bcts-arrow-size, 36px);
	height: var(--bcts-arrow-size, 36px);
	max-width: 22px; max-height: 22px;
}

/* Timeline line + dates */
.bcts-nav-timeline {
	display: flex;
	align-items: center;
	gap: 14px;
}
.bcts-nav-date {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--bcts-nav-color, #8a6a31);
	white-space: nowrap;
}
.bcts-nav-track {
	position: relative;
	flex: 1 1 auto;
	height: var(--bcts-nav-line-thickness, 1px);
	background: var(--bcts-nav-line-bg, rgba(138, 106, 49, 0.25));
	cursor: pointer;
}
.bcts-nav-track::before {
	/* Larger hit area so the line is easy to click */
	content: "";
	position: absolute;
	left: 0; right: 0; top: -10px; bottom: -10px;
}
.bcts-nav-track-fill {
	position: absolute;
	left: 0; top: 0;
	height: 100%;
	width: 0%;
	background: var(--bcts-nav-line-fill, var(--bcts-nav-color, #8a6a31));
	pointer-events: none;
}

/* New 2-arrow drag handle */
.bcts-nav-handle {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	width: 26px; height: 18px;
	margin: 0; padding: 0;
	border: 1px solid var(--bcts-nav-color, #8a6a31);
	background: #fff;
	color: var(--bcts-nav-color, #8a6a31);
	cursor: grab;
	touch-action: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}
.bcts-nav-handle svg {
	width: 14px; height: 10px;
	display: block;
}
.bcts-nav-handle:focus { outline: 2px solid var(--bcts-nav-color, #8a6a31); outline-offset: 3px; }
.bcts-nav-handle.is-dragging { cursor: grabbing; }

/* Year tooltip — shown while scrubbing (timeline handle OR slideshow drag) */
.bcts-nav-year {
	position: absolute;
	top: 100%;
	left: 0%;
	transform: translateX(-50%);
	margin-top: 8px;
	font-size: var(--bcts-year-size, 12px);
	font-weight: 600;
	color: var(--bcts-nav-color, #8a6a31);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 120ms;
}
.bcts-slideshow.is-scrubbing .bcts-nav-year { opacity: 1; }

/* Always show grab cursor over the slideshow viewport when drag is enabled */
.bcts-viewport.bcts-draggable .bcts-slide,
.bcts-viewport.bcts-draggable .bcts-slide * { cursor: grab; }
.bcts-viewport.bcts-draggable.dragging .bcts-slide,
.bcts-viewport.bcts-draggable.dragging .bcts-slide * { cursor: grabbing; }

/* ============================================================
   Responsive — full-screen swipe (≤1024px)   [1.2.7]
   ============================================================
   Phones (≤600px): one slide per screen — 100vw, no peek.
   Tablets (601–1024px): ~1.2 slides — each 84vw so the next peeks.
   Every slide flattens to a clean image-on-top / text-below card;
   the desktop left/right/above/below placement is desktop-only.
   The timeline scrubber sits in normal flow as a bar at the top;
   page dots (built by the frontend JS) sit at the bottom.
   ============================================================ */

@media (max-width: 1024px) {
	.bcts-slideshow {
		max-width: 100%;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		display: flex;
		flex-direction: column;
	}

	/* Timeline scrubber → a bar pinned at the top, in normal flow. */
	.bcts-nav {
		position: static !important;
		order: 0;
		left: auto !important;
		transform: none !important;
		width: auto !important;
		margin: 14px 16px 10px !important;
	}
	.bcts-nav-date { font-size: 11px; }
	.bcts-nav-arrows.is-in-nav { margin-bottom: 12px; }
	.bcts-nav-year { font-size: max(var(--bcts-year-size, 12px), 12px); }

	/* Floating "over slides" arrows fall back to the top-right corner. */
	.bcts-nav-arrows.is-floating {
		position: absolute !important;
		top: 10px !important; right: 12px !important;
		left: auto !important; bottom: auto !important;
		transform: none !important;
		z-index: 7;
	}

	/* Nav arrows — show/hide + top-or-bottom placement (mobile + tablet only).
	   Desktop is governed by the Nav arrow position setting, untouched. */
	.bcts-slideshow[data-mob-show-arrows="0"] .bcts-nav-arrows { display: none !important; }
	/* Covers in-nav AND floating arrows (1.2.14); also emitted per-instance
	   inline by the shortcode so it survives stale cached CSS. */
	.bcts-slideshow[data-mob-arrows="bottom"] .bcts-nav-arrows {
		position: absolute !important;
		top: auto !important; bottom: 10px !important;
		left: 50% !important; right: auto !important;
		transform: translateX(-50%) !important;
		margin: 0 !important;
		z-index: 8;
	}
	/* Reserve room under the text so bottom arrows don't cover it. */
	.bcts-slideshow[data-mob-arrows="bottom"] .bcts-slide {
		padding-bottom: calc(var(--bcts-mob-text-pad-b, 20px) + 60px) !important;
	}

	/* Viewport: the horizontal swipe strip. Grows to its tallest slide. */
	.bcts-viewport {
		order: 1;
		height: auto !important;
		min-height: 40vh;
		max-height: none !important;
		scroll-snap-type: x mandatory;
	}
	.bcts-track {
		align-items: stretch !important;
		gap: 0 !important;
	}

	/* Each slide: a full-width card. Image + text stack; the Text block →
	   Placement setting flips the order (below image by default, or above). */
	.bcts-slide {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		height: auto !important;
		box-sizing: border-box !important;
		padding: 14px var(--bcts-mob-card-pad-x, 18px) var(--bcts-mob-text-pad-b, 20px) !important;
		gap: var(--bcts-mob-img-text-gap, 16px) !important;
		scroll-snap-align: center;
	}
	.bcts-slide[data-mob-text-pos="above"] .bcts-slide-image { order: 2; }
	.bcts-slide[data-mob-text-pos="above"] .bcts-slide-textblock { order: 1; }

	.bcts-slide-image,
	.bcts-slide-textblock {
		position: relative !important;
		top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
		margin: 0 !important;
	}
	.bcts-slide-image {
		flex: 0 0 auto !important;
		align-self: center;
		max-width: 100% !important;
	}
	.bcts-slide-image,
	.bcts-slide-image img {
		max-height: var(--bcts-mob-img-max-h, 40vh) !important;
		max-width: 100% !important;
	}
	.bcts-slide-image img { height: auto !important; width: auto !important; }
	.bcts-slide-textblock {
		width: var(--bcts-mob-text-w, 100%) !important;
		max-width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}

	/* Text alignment override (Inherit leaves the per-slide value alone). */
	.bcts-slideshow[data-mob-align="left"]   .bcts-slide-header,
	.bcts-slideshow[data-mob-align="left"]   .bcts-slide-text,
	.bcts-slideshow[data-mob-align="left"]   .bcts-slide-text p { text-align: left !important; }
	.bcts-slideshow[data-mob-align="center"] .bcts-slide-header,
	.bcts-slideshow[data-mob-align="center"] .bcts-slide-text,
	.bcts-slideshow[data-mob-align="center"] .bcts-slide-text p { text-align: center !important; }
	.bcts-slideshow[data-mob-align="right"]  .bcts-slide-header,
	.bcts-slideshow[data-mob-align="right"]  .bcts-slide-text,
	.bcts-slideshow[data-mob-align="right"]  .bcts-slide-text p { text-align: right !important; }
}

/* --- Tablet (601–1024px): ~1.2 slides, the next one peeks --- */
@media (max-width: 1024px) and (min-width: 601px) {
	.bcts-slide { flex: 0 0 84vw !important; max-width: 84vw !important; }
	.bcts-track { gap: 14px !important; }
	.bcts-nav-date { font-size: 12px; }
}

/* --- Phone (≤600px): one full-screen slide, no peek --- */
@media (max-width: 600px) {
	.bcts-slide { flex: 0 0 100vw !important; max-width: 100vw !important; }
}

/* --- Touch target floor (any pointer-coarse device, any width) --- */
@media (pointer: coarse) {
	.bcts-arrow,
	.bcts-nav-handle {
		min-width: 44px;
		min-height: 44px;
	}
	.bcts-nav-handle {
		/* Larger handle for finger scrubbing */
		width: 44px;
		height: 28px;
	}
	.bcts-nav-handle svg {
		width: 20px;
		height: 14px;
	}
	.bcts-nav-track::before {
		/* Bigger invisible tap target around the line */
		top: -16px;
		bottom: -16px;
	}
}