/**
 * Trimax History Timeline Slider — Frontend Styles
 * v0.4.0: two-panel layout (image+desc left, thumbnails right)
 * v0.7.0: thumbnail card / caption / active-state styling moved onto CSS custom
 *         properties so Elementor style controls always win over the resets.
 *
 * All selectors are scoped to .ahts-slider-wrapper to prevent theme CSS bleed.
 * Critical styles use !important where button/img resets are needed.
 *
 * @package AHTS
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

.ahts-slider-wrapper {
	--ahts-accent:       #d32f2f;
	--ahts-bg:           #ffffff;
	--ahts-nav-bg:       #1e1e1e;
	--ahts-text:         #1a1a1a;
	--ahts-text-muted:   #666666;
	--ahts-thumb-active: var(--ahts-accent);
	--ahts-radius:       4px;
	--ahts-transition:   0.3s ease;
}

/* ==========================================================================
   2. Wrapper Reset
   ========================================================================== */

.ahts-slider-wrapper,
.ahts-slider-wrapper * {
	box-sizing: border-box !important;
}

.ahts-slider-wrapper {
	position:         relative;
	width:            100%;
	overflow:         hidden;
	background-color: var(--ahts-bg);
	font-family:      inherit;
	line-height:      1.5;
	color:            var(--ahts-text);
}

/* ==========================================================================
   3. Progress Bar
   ========================================================================== */

.ahts-slider-wrapper .ahts-progress-track {
	position:         relative;
	width:            100%;
	height:           3px;
	background-color: rgba(0, 0, 0, 0.08);
	overflow:         hidden;
	z-index:          5;
}

.ahts-slider-wrapper .ahts-progress-fill {
	position:         absolute;
	left:             0;
	top:              0;
	height:           100%;
	background-color: var(--ahts-accent);
	transition:       width 0.45s ease;
}

/* ==========================================================================
   4. Period Navigation Strip
   ========================================================================== */

.ahts-slider-wrapper .ahts-period-nav {
	background-color: var(--ahts-nav-bg);
	padding:          12px 24px;
	overflow-x:       auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:  none;
}

.ahts-slider-wrapper .ahts-period-nav::-webkit-scrollbar {
	display: none;
}

.ahts-slider-wrapper .ahts-period-nav-inner {
	position:        relative;
	display:         flex;
	align-items:     flex-start; /* items anchored to top so dot position is predictable */
	justify-content: space-between;
	min-width:       max-content;
	gap:             0;
}

/* Horizontal connector line — must pass through the centre of the nav dots.
   Each .ahts-period-nav-item has padding-top: 4px and the dot is 10px tall,
   so the dot centre sits at 4px + 5px = 9px from the top of the item. */
.ahts-slider-wrapper .ahts-period-nav-line {
	position:         absolute;
	top:              9px;
	left:             0;
	right:            0;
	height:           1px;
	background-color: rgba(255, 255, 255, 0.15);
	z-index:          0;
}

/* Active progress line — fills left→right as the user advances.
   Width is driven by JS (_updatePeriodNav). */
.ahts-slider-wrapper .ahts-period-nav-line-progress {
	position:         absolute;
	top:              9px;
	left:             0;
	width:            0%;
	height:           1px;
	background-color: var(--ahts-accent);
	z-index:          1; /* sits above the base line */
	transition:       width 0.45s ease;
	pointer-events:   none;
}

/* Each period nav button */
.ahts-slider-wrapper .ahts-period-nav-item {
	position:         relative;
	z-index:          1;
	display:          flex !important;
	flex-direction:   column !important;
	align-items:      center !important;
	gap:              6px !important;
	padding:          4px 16px !important;
	background:       transparent !important;
	border:           none !important;
	border-radius:    0 !important;
	cursor:           pointer !important;
	outline:          none !important;
	box-shadow:       none !important;
	text-decoration:  none !important;
	transition:       opacity var(--ahts-transition) !important;
	min-width:        0 !important;
	max-width:        none !important;
	width:            auto !important;
	height:           auto !important;
	min-height:       0 !important;
	margin:           0 !important;
	float:            none !important;
}

.ahts-slider-wrapper .ahts-period-nav-item:hover {
	opacity: 0.9 !important;
}

.ahts-slider-wrapper .ahts-period-nav-dot {
	display:          block;
	width:            10px;
	height:           10px;
	border-radius:    50%;
	background-color: rgba(255, 255, 255, 0.35);
	border:           2px solid rgba(255, 255, 255, 0.35);
	transition:       background-color var(--ahts-transition), border-color var(--ahts-transition), transform var(--ahts-transition);
	flex-shrink:      0;
}

.ahts-slider-wrapper .ahts-period-nav-item.is-active .ahts-period-nav-dot {
	background-color: var(--ahts-accent);
	border-color:     var(--ahts-accent);
	transform:        scale(1.3);
}

.ahts-slider-wrapper .ahts-period-nav-label {
	font-size:      11px;
	font-weight:    500;
	letter-spacing: 0.04em;
	color:          rgba(255, 255, 255, 0.55);
	white-space:    nowrap;
	transition:     color var(--ahts-transition);
	line-height:    1.2;
}

.ahts-slider-wrapper .ahts-period-nav-item.is-active .ahts-period-nav-label {
	color: #ffffff;
}

/* ==========================================================================
   5. Slider Shell
   ========================================================================== */

.ahts-slider-wrapper .ahts-slider-main {
	position: relative;
	width:    100%;
}

.ahts-slider-wrapper .ahts-swiper {
	width:    100%;
	overflow: hidden;
}

.ahts-slider-wrapper .swiper-wrapper {
	display:    flex;
	flex-wrap:  nowrap;
	will-change: transform;
}

.ahts-slider-wrapper .swiper-slide {
	width:      100%;
	flex-shrink: 0;
}

/* Equal Slide Heights. With Swiper's autoHeight switched off (see the JS) the
   wrapper has no inline height, so as a plain flex row it takes the height of
   its tallest slide -- which is exactly the behaviour wanted. The !important on
   height defends against an inline height left over from an autoHeight run
   before the option was turned on, e.g. while editing. */
.ahts-slider-wrapper.ahts-equal-height .swiper-wrapper {
	align-items: stretch;
	height:      auto !important;
}

/* ==========================================================================
   6. Period Inner Wrapper
   ========================================================================== */

.ahts-slider-wrapper .ahts-period-inner {
	padding: 24px 64px;
}

/* ==========================================================================
   7. Period Header (title + year range — NO description here in v0.4.0)
   ========================================================================== */

.ahts-slider-wrapper .ahts-period-header {
	display:       flex;
	align-items:   flex-start;
	margin-bottom: 16px;
}

.ahts-slider-wrapper .ahts-period-title-wrap {
	flex: 1;
}

/* font-size / font-weight / line-height carry no !important so the Elementor
   "Period Heading" typography group control can take effect. */
.ahts-slider-wrapper .ahts-period-title {
	margin:      0 0 4px 0 !important;
	padding:     0 !important;
	font-size:   clamp(1.25rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	color:       var(--ahts-text); /* no !important — lets Elementor color control win */
	border:      none !important;
	background:  none !important;
}

.ahts-slider-wrapper .ahts-period-subtitle {
	margin:      0 !important;
	padding:     0 !important;
	font-size:   0.85rem;
	color:       var(--ahts-text-muted); /* no !important — lets Elementor color control win */
	line-height: 1.4;
}

/* ==========================================================================
   8. Two-Panel Body  (LEFT: image+desc | RIGHT: thumbnails)
   ========================================================================== */

.ahts-slider-wrapper .ahts-period-body {
	display:     flex;
	flex-direction: row;
	gap:         16px;
	align-items: flex-start;
}

/* ---- Left panel ---- */

.ahts-slider-wrapper .ahts-left-panel {
	flex:        1;
	min-width:   0;
	display:     flex;
	flex-direction: column;
}

/* Main image container */
.ahts-slider-wrapper .ahts-main-image-wrap {
	position:      relative;
	width:         100%;
	height:        360px;
	overflow:      hidden;
	background:    #e8e8e8;
	border-radius: var(--ahts-radius);
	flex-shrink:   0;
}

.ahts-slider-wrapper .ahts-main-image-img {
	display:    block !important;
	width:      100% !important;
	height:     100% !important;
	object-fit: cover !important;
	border:     none !important;
	margin:     0 !important;
	padding:    0 !important;
	max-width:  none !important;
	transition: opacity var(--ahts-transition), transform var(--ahts-transition);
}

/* Image caption below the main image — updates dynamically on thumbnail click */
.ahts-slider-wrapper .ahts-period-description {
	margin-top:    12px;
	margin-bottom: 0 !important;
	padding:       0;    /* no !important — lets Elementor padding control win */
	font-size:     0.92rem;
	line-height:   1.65;
	color:         var(--ahts-text-muted);
}

.ahts-slider-wrapper .ahts-period-description.ahts-caption-empty {
	display: none !important;
}

/* ---- Right panel ---- */

.ahts-slider-wrapper .ahts-right-panel {
	width:       220px;
	flex-shrink: 0;
	align-self:  stretch;
	overflow:    hidden;
	display:     flex;
	flex-direction: column;
}

/* Scrollable thumbnail list */
.ahts-slider-wrapper .ahts-thumbnails {
	display:    flex;
	flex-direction: column;
	gap:        6px;
	height:     100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 2px; /* room for scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.ahts-slider-wrapper .ahts-thumbnails::-webkit-scrollbar {
	width: 4px;
}

.ahts-slider-wrapper .ahts-thumbnails::-webkit-scrollbar-track {
	background: transparent;
}

.ahts-slider-wrapper .ahts-thumbnails::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius:    4px;
}

/* ==========================================================================
   9. Thumbnail Card (horizontal: image left, caption right)
   ========================================================================== */

/* NOTE (v0.7.0): every property that has a matching Elementor control is driven
   through a CSS custom property with an inline fallback. The custom properties
   are set by Elementor on the widget wrapper and inherit down to here, so the
   !important resets below (needed to beat theme button styles) can never fight
   the user's own settings. Do NOT declare these variables on
   .ahts-slider-wrapper — a local declaration would shadow the inherited value. */
.ahts-slider-wrapper button.ahts-thumbnail {
	/* Layout */
	display:          flex !important;
	flex-direction:   row !important;
	align-items:      center !important;
	width:            100% !important;
	height:           auto !important;
	min-height:       0 !important;
	/* Reset everything theme/browser might set */
	padding:          0 !important;
	margin:           0 !important;
	background-color: var(--ahts-thumb-bg, #f4f4f4) !important;
	background-image: none !important;
	border-style:     solid !important;
	border-width:     var(--ahts-thumb-border-width, 2px) !important;
	border-color:     var(--ahts-thumb-border-color, transparent) !important;
	border-radius:    var(--ahts-radius) !important;
	cursor:           pointer !important;
	text-align:       left !important;
	outline:          none !important;
	box-shadow:       none !important;
	text-decoration:  none !important;
	font:             inherit !important;
	float:            none !important;
	overflow:         hidden !important;
	transition:       border-color var(--ahts-transition), background-color var(--ahts-transition) !important;
	flex-shrink:      0;
}

.ahts-slider-wrapper button.ahts-thumbnail:hover {
	background-color: var(--ahts-thumb-hover-bg, #ebebeb) !important;
}

.ahts-slider-wrapper button.ahts-thumbnail:focus-visible {
	outline:        2px solid var(--ahts-accent) !important;
	outline-offset: 2px !important;
}

/* Active card — the :hover pairing stops the hover background from wiping out
   the active background while the pointer is over the selected card. */
.ahts-slider-wrapper button.ahts-thumbnail.is-active,
.ahts-slider-wrapper button.ahts-thumbnail.is-active:hover {
	border-color:     var(--ahts-thumb-active-border, var(--ahts-thumb-active)) !important;
	border-width:     var(--ahts-thumb-active-border-width, 3px) !important;
	background-color: var(--ahts-thumb-active-bg, #ffffff) !important;
}

/* Square image slot */
.ahts-slider-wrapper .ahts-thumb-img-wrap {
	width:      64px;
	height:     64px;
	flex-shrink: 0 !important;
	overflow:   hidden !important;
	background: #ddd !important;
}

.ahts-slider-wrapper .ahts-thumb-img-wrap > img {
	display:    block !important;
	width:      100% !important;
	height:     100% !important;
	object-fit: cover !important;
	border:     none !important;
	margin:     0 !important;
	padding:    0 !important;
}

/* Inline caption alongside the image.
   font-size / line-height deliberately carry NO !important so the Elementor
   "Inline Caption" typography group control can take effect. */
.ahts-slider-wrapper .ahts-thumb-caption {
	flex:            1 !important;
	padding:         var(--ahts-thumb-caption-padding, 6px 10px) !important;
	color:           var(--ahts-thumb-caption-color, var(--ahts-text)) !important;
	background-color: var(--ahts-thumb-caption-bg, transparent) !important;
	text-align:      var(--ahts-thumb-caption-align, left) !important;
	word-break:      break-word !important;
	white-space:     normal !important;
	margin:          0 !important;
	border:          none !important;
	display:         block !important;
	font-size:       0.75rem;
	line-height:     1.4;
}

.ahts-slider-wrapper button.ahts-thumbnail.is-active .ahts-thumb-caption {
	color: var(--ahts-thumb-active-caption-color, var(--ahts-thumb-caption-color, var(--ahts-text))) !important;
}

/* ==========================================================================
   10. Thumbnail position — BOTTOM variant
       When thumbnail_position = 'bottom' the body stacks vertically
       and thumbnails run horizontally
   ========================================================================== */

.ahts-slider-wrapper.ahts-thumb-pos--bottom .ahts-period-body {
	flex-direction: column;
	align-items:    stretch;
}

.ahts-slider-wrapper.ahts-thumb-pos--bottom .ahts-right-panel {
	width:      100% !important;
	flex-shrink: 1;
}

.ahts-slider-wrapper.ahts-thumb-pos--bottom .ahts-thumbnails {
	flex-direction: row !important;
	overflow-x:     auto !important;
	overflow-y:     hidden !important;
	height:         auto !important;
	padding-right:  0 !important;
	padding-bottom: 2px !important;
}

.ahts-slider-wrapper.ahts-thumb-pos--bottom button.ahts-thumbnail {
	flex-direction: column !important;
	width:          auto !important;
	min-width:      80px !important;
	flex-shrink:    0 !important;
}

.ahts-slider-wrapper.ahts-thumb-pos--bottom .ahts-thumb-caption {
	padding:    var(--ahts-thumb-caption-padding, 4px 6px) !important;
	text-align: var(--ahts-thumb-caption-align, center) !important;
}

/* ==========================================================================
   11. Image swap animations
   ========================================================================== */

.ahts-slider-wrapper .ahts-img-exit-fade {
	opacity: 0 !important;
}

.ahts-slider-wrapper .ahts-img-enter-fade {
	opacity: 0 !important;
}

.ahts-slider-wrapper .ahts-main-image-img {
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.ahts-slider-wrapper .ahts-img-exit-scale {
	opacity:   0 !important;
	transform: scale(1.04) !important;
}

.ahts-slider-wrapper .ahts-img-enter-scale {
	opacity:   0 !important;
	transform: scale(0.97) !important;
}

/* ==========================================================================
   12. Navigation Arrows
   ========================================================================== */

.ahts-slider-wrapper .ahts-nav-btn {
	position:         absolute !important;
	top:              50% !important;
	transform:        translateY(-50%) !important;
	z-index:          10 !important;
	display:          flex !important;
	align-items:      center !important;
	justify-content:  center !important;
	width:            40px; /* no !important — lets Elementor arrow_size control win */
	height:           40px; /* no !important — lets Elementor arrow_size control win */
	border-radius:    50%; /* no !important — lets Elementor border_radius control win */
	background-color: rgba(255, 255, 255, 0.95); /* no !important — lets Elementor bg control win */
	border:           none !important;
	cursor:           pointer !important;
	padding:          0 !important;
	margin:           0 !important;
	color:            #333333; /* no !important — lets Elementor color control win */
	text-decoration:  none !important;
	outline:          none !important;
	float:            none !important;
	line-height:      1 !important;
	transition:       background-color var(--ahts-transition), color var(--ahts-transition), opacity var(--ahts-transition) !important;
}

.ahts-slider-wrapper .ahts-nav-prev { left:  var(--ahts-arrow-offset, 12px) !important; }
.ahts-slider-wrapper .ahts-nav-next { right: var(--ahts-arrow-offset, 12px) !important; }

.ahts-slider-wrapper .ahts-nav-btn:hover {
	background-color: var(--ahts-accent); /* no !important — lets Elementor hover bg control win */
	color:            #ffffff; /* no !important — lets Elementor hover color control win */
}

.ahts-slider-wrapper .ahts-nav-btn:focus-visible {
	outline:        2px solid var(--ahts-accent) !important;
	outline-offset: 2px !important;
}

.ahts-slider-wrapper .ahts-nav-btn.is-disabled {
	opacity: 0.35 !important;
	cursor:  default !important;
	pointer-events: none !important;
}

/* CSS chevron arrows */
.ahts-slider-wrapper .ahts-nav-btn::before {
	content:        '' !important;
	display:        block !important;
	width:          10px !important;
	height:         10px !important;
	border-top:     2px solid currentColor !important;
	border-right:   2px solid currentColor !important;
	border-bottom:  none !important;
	border-left:    none !important;
	background:     none !important;
}

.ahts-slider-wrapper .ahts-nav-prev::before {
	transform: rotate(-135deg) translate(1px, -1px) !important;
}

.ahts-slider-wrapper .ahts-nav-next::before {
	transform: rotate(45deg) translate(-1px, 1px) !important;
}

/* --------------------------------------------------------------------------
   12.1 Inline pair — mobile, either side of the pagination dots

   display:none here is a FALLBACK only, for when no Elementor CSS is present.
   The Navigation Arrows control always emits a higher-specificity rule for both
   pairs, so on a live site the control decides which one shows. This selector
   is deliberately kept to two classes so the control's {{WRAPPER}} selector
   always outranks it.

   These rules must stay AFTER section 12: they undo the absolute positioning at
   equal specificity, so source order is what settles it.
   -------------------------------------------------------------------------- */

.ahts-slider-wrapper .ahts-nav-btn--inline {
	display:       none !important;
	position:      static !important;
	top:           auto !important;
	left:          auto !important;
	right:         auto !important;
	transform:     none !important;
	flex:          0 0 auto !important;
	/* The row's vertical spacing is carried by its CHILDREN, never the row, so
	   that hiding everything in the row collapses it to zero height instead of
	   leaving a gap under the slide. */
	margin-top:    var(--ahts-pagination-spacing, 12px) !important;
	margin-bottom: 12px !important;
}

/* In this layout --ahts-arrow-offset means "gap to the dots". */
.ahts-slider-wrapper .ahts-nav-prev.ahts-nav-btn--inline { margin-right: var(--ahts-arrow-offset, 12px) !important; }
.ahts-slider-wrapper .ahts-nav-next.ahts-nav-btn--inline { margin-left:  var(--ahts-arrow-offset, 12px) !important; }

/* ==========================================================================
   13. Pagination Dots

   .ahts-pagination is the ROW: [inline prev][dots list][inline next].
   .ahts-pagination-list is the tablist holding the dots themselves.
   ========================================================================== */

.ahts-slider-wrapper .ahts-pagination {
	display:         flex;
	justify-content: center;
	align-items:     center;
}

.ahts-slider-wrapper .ahts-pagination-list {
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             8px;
	/* See the note on .ahts-nav-btn--inline — spacing lives on the children. */
	margin-top:      var(--ahts-pagination-spacing, 12px);
	margin-bottom:   12px;
}

.ahts-slider-wrapper .ahts-pagination-dot {
	display:          block !important;
	width:            8px !important;
	height:           8px !important;
	border-radius:    50px !important; /* large value = always fully rounded */
	background-color: rgba(0, 0, 0, 0.2) !important;
	border:           none !important;
	padding:          0 !important;
	margin:           0 !important;
	cursor:           pointer !important;
	outline:          none !important;
	transition:       background-color var(--ahts-transition), width var(--ahts-transition) !important;
	min-width:        0 !important;
	min-height:       0 !important;
	box-shadow:       none !important;
}

.ahts-slider-wrapper .ahts-pagination-dot.is-active {
	background-color: var(--ahts-accent) !important;
	width:            24px !important; /* morphs into a pill */
}

/* ==========================================================================
   14. Mobile compact nav bar
   ========================================================================== */

/* Hidden on desktop — shown in the 767px breakpoint below */
.ahts-slider-wrapper .ahts-period-nav-mobile-bar {
	display: none;
}

.ahts-slider-wrapper .ahts-mobile-nav-circle {
	position:    relative;
	flex-shrink: 0;
}

.ahts-slider-wrapper .ahts-mobile-circle-svg {
	display: block;
}

.ahts-slider-wrapper .ahts-mobile-circle-track {
	stroke-width: 2.8;
}

.ahts-slider-wrapper .ahts-mobile-circle-fill {
	stroke-width:      2.8;
	stroke-linecap:    round;
	transition:        stroke-dasharray 0.4s ease;
}

.ahts-slider-wrapper .ahts-mobile-circle-pct {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-weight:     700;
	line-height:     1;
	pointer-events:  none;
}

/* ==========================================================================
   15. Responsive

   One stacked layout for BOTH tablet and mobile, up to 1024px. Tablet used
   to have a block of its own that stacked the panels but otherwise kept the
   desktop treatment -- in-slide header, full period-nav strip, thumbnail
   captions -- which read badly at that width. It now gets the compact bar
   and the same stacking order as mobile.
   ========================================================================== */

@media (max-width: 1024px) {
	.ahts-slider-wrapper .ahts-period-body {
		flex-direction: column;
		align-items:    stretch;
	}

	.ahts-slider-wrapper .ahts-right-panel {
		width: 100% !important;
	}

	/* ---- Mobile stacking order: image, thumbnails, caption ----------------
	   The caption lives INSIDE .ahts-left-panel while the thumbnails are in a
	   sibling panel, so `order` alone cannot move the caption past them -- they
	   are not siblings. display:contents dissolves the left panel's box and
	   promotes its two children into .ahts-period-body's flex flow, which makes
	   all three orderable without changing the markup (and without disturbing
	   the desktop layout, where the panels must stay side by side).

	   Two consequences, both deliberate:
	   - Left Panel Padding has no box to apply to while this is active.
	   - Gap: Image to Description is zeroed, because the caption no longer
	     follows the image. Spacing between all three blocks comes from Gap
	     Between Panels instead, so it cannot double up.
	   -------------------------------------------------------------------- */
	.ahts-mobile-stack-image-thumbs-caption .ahts-left-panel {
		display: contents;
	}

	.ahts-mobile-stack-image-thumbs-caption .ahts-main-image-wrap  { order: 1; }
	.ahts-mobile-stack-image-thumbs-caption .ahts-right-panel      { order: 2; }

	.ahts-mobile-stack-image-thumbs-caption .ahts-period-description {
		order: 3;
		/* !important is load-bearing. The Gap: Image to Description control emits
		   {{WRAPPER}} .ahts-period-description, which is three classes or more and
		   outranks this two-class selector -- so without it that 12px margin stays
		   on top of the row gap and the caption sits further below the thumbnails
		   than the thumbnails sit below the image. In this order the caption no
		   longer follows the image, so all three gaps come from Gap Between Panels
		   alone and are therefore equal. */
		margin-top: 0 !important;
	}

	.ahts-slider-wrapper .ahts-thumbnails {
		display:        flex !important;
		flex-direction: row !important;
		flex-wrap:      wrap !important;
		gap:            6px;
		overflow-x:     hidden !important;
		overflow-y:     visible !important;
		height:         auto !important;
		padding-right:  0 !important;
	}

	.ahts-slider-wrapper button.ahts-thumbnail {
		flex-direction: column !important;
		flex:           0 0 auto !important;
		width:          auto !important;
		min-width:      0 !important;
	}

	.ahts-slider-wrapper .ahts-right-panel {
		overflow: visible !important;
	}

	/* Captions are hidden by default to keep mobile cards compact; the
	   "Show Caption on Mobile" control opts back in via a prefix class. */
	.ahts-slider-wrapper .ahts-thumb-caption {
		display: none !important;
	}

	.ahts-thumb-caption-mobile-yes .ahts-slider-wrapper .ahts-thumb-caption {
		display: block !important;
	}

	/* No !important — the responsive "Image Caption" Show/Hide control needs to be
	   able to win here, so that hiding the caption on one device still works. */
	.ahts-slider-wrapper .ahts-period-description:not(.ahts-caption-empty) {
		display: block;
	}

	.ahts-slider-wrapper .ahts-main-image-wrap {
		height: 280px;
	}

	/* Show mobile compact bar */
	.ahts-slider-wrapper .ahts-period-nav-mobile-bar {
		display:         flex;
		align-items:     center;
		justify-content: space-between;
		gap:             12px;
		padding:         10px 16px;
	}

	/* Hide desktop dots strip on mobile */
	.ahts-slider-wrapper .ahts-period-nav-inner {
		display: none;
	}

	/* Hide the period header inside each slide — shown in the mobile bar instead */
	.ahts-slider-wrapper .ahts-period-header {
		display: none;
	}

	/* Mobile nav text (left side) */
	.ahts-slider-wrapper .ahts-mobile-nav-info {
		display:        flex;
		flex-direction: column;
		min-width:      0; /* lets the text shrink inside the flex bar */
	}

	/* Long period titles wrap onto further lines rather than being cut off with
	   an ellipsis — the bar grows to fit. */
	.ahts-slider-wrapper .ahts-mobile-nav-title {
		font-weight:    600;
		font-size:      0.95rem;
		line-height:    1.25;
		white-space:    normal;
		overflow-wrap:  break-word;
		word-break:     break-word;
	}

	.ahts-slider-wrapper .ahts-mobile-nav-subtitle {
		font-size:      0.8rem;
		margin-top:     3px;
		white-space:    normal;
		overflow-wrap:  break-word;
		word-break:     break-word;
	}

	/* Circle sizing */
	.ahts-slider-wrapper .ahts-mobile-nav-circle {
		width:  48px;
		height: 48px;
	}

	.ahts-slider-wrapper .ahts-mobile-circle-fill {
		transition: stroke-dashoffset 0.4s ease;
	}

	.ahts-slider-wrapper .ahts-mobile-circle-svg {
		width:  48px;
		height: 48px;
	}

	.ahts-slider-wrapper .ahts-mobile-circle-pct {
		font-size: 0.62rem;
	}
}

@media (max-width: 480px) {
	.ahts-slider-wrapper .ahts-main-image-wrap {
		height: 220px;
	}

	.ahts-slider-wrapper .ahts-period-nav {
		padding: 10px 16px;
	}
}


/* =====================================================================
   Section 16 — Per-device element visibility (prefix_class toggles)
   ===================================================================== */
/* The arrow toggles that lived here were replaced in 0.10.0 by the responsive
   Navigation Arrows control, which emits the site's own breakpoints.
   The pagination toggles target the dots LIST, not the row — hiding the row
   would take the inline arrows with it. */
@media (min-width: 1025px) {
	.ahts-hide-pagination-desktop-yes .ahts-pagination-list { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ahts-hide-pagination-tablet-yes .ahts-pagination-list { display: none !important; }
}

@media (max-width: 767px) {
	.ahts-hide-pagination-mobile-yes .ahts-pagination-list { display: none !important; }
}