@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

.ponca-timeline {
	position: relative;
	background: var(--ptl-bg, #0d0f0e);
	overflow: hidden;
	box-sizing: border-box;
}

.ponca-timeline *,
.ponca-timeline *::before,
.ponca-timeline *::after {
	box-sizing: border-box;
}

/* Container */
.ponca-timeline__container {
	width: 100%;
	max-width: var(--ptl-max, 1360px);
	margin: 0 auto;
}

/* Header */
.ponca-timeline__header {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 2rem);
	margin-bottom: clamp(2rem, 4vw, 4rem);
}

@media (min-width: 768px) {
	.ponca-timeline__header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
}

.ponca-timeline__eyebrow {
	margin: 0 0 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ptl-eyebrow-color, #d4a574);
	font-family: var(--ptl-eyebrow-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ptl-eyebrow-font-size, 0.74rem);
	line-height: var(--ptl-eyebrow-line-height, 1.2);
	font-style: var(--ptl-eyebrow-font-style, normal);
}

.ponca-timeline__title {
	margin: 0;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--ptl-title-color, #f0ebe4);
	font-family: var(--ptl-title-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--ptl-title-font-size, clamp(2rem, 1.4rem + 3vw, 4rem));
	line-height: var(--ptl-title-line-height, 1.05);
	font-style: var(--ptl-title-font-style, normal);
}

/* Full History button */
.ponca-timeline__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid;
	border-radius: 4px;
	font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	align-self: flex-start;
	color: var(--ptl-btn-color, #f0ebe4);
	border-color: var(--ptl-btn-border, rgba(255,255,255,0.25));
	background-color: var(--ptl-btn-bg, transparent);
}

@media (min-width: 768px) {
	.ponca-timeline__btn {
		align-self: auto;
	}
}

.ponca-timeline__btn:hover {
	border-color: var(--ptl-dot, #b8784e) !important;
	color: var(--ptl-nav-icon, #d4a574) !important;
	transform: translateY(-2px);
}

.ponca-timeline__btn-arrow {
	transition: transform 0.3s ease;
}

.ponca-timeline__btn:hover .ponca-timeline__btn-arrow {
	transform: translateX(4px);
}

/* Scroll wrapper takes full width so cards can bleed to the edges */
.ponca-timeline__scroll-wrap {
	position: relative;
	width: 100%;

}

.ponca-timeline__scroll {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ptl-item-gap, clamp(1.5rem, 1rem + 2vw, 3rem));
	overflow-x: auto;
	overflow-y: visible;
	/* Left padding aligns the first card with the container edge (under the
	   title); right/top/bottom keep their original values. The left value
	   matches the container's centring: the theme gutter, or the auto-margin
	   when the viewport is wider than the container max-width. */
	padding-top: clamp(1rem, 1.5vw, 1.5rem);
	padding-right: clamp(1.25rem, 1rem + 2vw, 1.75rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	/* Align the first card's left edge with the container content edge (under
	   the title): the centring gutter when the viewport exceeds the container
	   max-width, PLUS the container's own inner side padding. */
	padding-left: calc(max(0px, (100% - var(--ptl-max, 1360px)) / 2) + var(--ptl-edge-gutter, clamp(1.25rem, 1rem + 2vw, 1.75rem)));
	scroll-snap-type: x mandatory;
	scroll-padding-left: calc(max(0px, (100% - var(--ptl-max, 1360px)) / 2) + var(--ptl-edge-gutter, clamp(1.25rem, 1rem + 2vw, 1.75rem)));
	-ms-overflow-style: none;
	scrollbar-width: none;
	cursor: grab;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.ponca-timeline__scroll::-webkit-scrollbar {
	display: none;
}

.ponca-timeline__scroll.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.ponca-timeline__scroll.is-dragging * {
	pointer-events: none;
}

.ponca-timeline__scroll:focus-visible {
	outline: 2px solid var(--ptl-dot, #b8784e);
	outline-offset: 2px;
}

/* Item */
.ponca-timeline__item {
	flex-shrink: 0;
	width: var(--ptl-item-w, 260px);
	scroll-snap-align: start;
	position: relative;
	padding-top: 2rem;
}

/* Top connector line */
.ponca-timeline__item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--ptl-line, rgba(184, 120, 78, 0.35));
}

/* Copper dot at the start of the line */
.ponca-timeline__item::after {
	content: '';
	position: absolute;
	top: -5.5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--ptl-dot, #b8784e);
	box-sizing: border-box;
}

.ponca-timeline__item.hidden::before,
.ponca-timeline__item.hidden::after {
	display: none;
}

/* The leading hidden article is no longer needed as a spacer (alignment is
   handled by the scroll's padding-left). Remove it from layout entirely so it
   doesn't add a leading flex gap. Scripts measure the first *visible* item. */
.ponca-timeline__item.hidden {
	display: none;
}

/* Inner solid dot */
.ponca-timeline__item .ponca-timeline__year::before {
	content: '';
	position: absolute;
	top: -34px;
	left: 4px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ptl-dot, #b8784e);
}

.ponca-timeline__year {
	display: block;
	font-weight: 300;
	margin-bottom: 0.6rem;
	position: relative;
	color: var(--ptl-year-color, #DEB209);
	font-family: var(--ptl-year-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--ptl-year-font-size, clamp(2rem, 1.4rem + 3vw, 3.25rem));
	line-height: var(--ptl-year-line-height, 1);
	font-style: var(--ptl-year-font-style, italic);
}

.ponca-timeline__item-title {
	margin: 0 0 0.6rem;
	font-weight: 500;
	color: var(--ptl-item-title-color, #f0ebe4);
	font-family: var(--ptl-item-title-font-family, 'Cormorant Garamond', Georgia, serif);
	font-size: var(--ptl-item-title-font-size, 1.2rem);
	line-height: var(--ptl-item-title-line-height, 1.3);
	font-style: var(--ptl-item-title-font-style, normal);
}

.ponca-timeline__item-desc {
	margin: 0;
	color: var(--ptl-item-desc-color, #9ca3a0);
	font-family: var(--ptl-item-desc-font-family, 'DM Sans', 'Helvetica Neue', sans-serif);
	font-size: var(--ptl-item-desc-font-size, 0.85rem);
	line-height: var(--ptl-item-desc-line-height, 1.65);
	font-style: var(--ptl-item-desc-font-style, normal);
}

/* Nav buttons */
.ponca-timeline__nav-wrap {
	margin-top: clamp(0.5rem, 1vw, 1rem);
}

.ponca-timeline__nav {
	display: flex;
    justify-content: space-between;
	gap: 0.6rem;
}

.ponca-timeline__nav-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--ptl-nav-border, rgba(212, 165, 116, 0.4));
	background: transparent;
	color: var(--ptl-nav-icon, #efcb3e);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	padding: 0;
}

.ponca-timeline__nav-btn:hover:not(:disabled) {
	background: var(--ptl-nav-hover-bg, #b8784e);
	border-color: var(--ptl-nav-hover-bg, #b8784e);
	color: #fff;
	transform: translateY(-1px);
}

.ponca-timeline__nav-btn:focus-visible {
	outline: 2px solid var(--ptl-dot, #b8784e);
	outline-offset: 2px;
}

.ponca-timeline__nav-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ponca-timeline__nav-btn svg {
	display: block;
	stroke: var(--ptl-nav-icon, #efcb3e)
}
.ponca-timeline__nav-btn:hover svg {
	stroke:  #f0ebe4;
}
/* Ornament strip */
.ponca-timeline__ornament {
	margin-top: clamp(1rem, 2vw, 2rem);
	height: clamp(60px, 7vw, 80px);
	background-image: var(--ptl-orn-svg);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
	pointer-events: none;
	background-repeat: repeat-x;
	background-size: contain;
	height: 83px;
}
.ponca-timeline__container.ponca-timeline__nav-wrap{
    position: absolute;
    top: 45%;
}
/* The absolute nav bar spans the full width across the middle of the items.
   Let clicks/selection pass through it to the item text; only the arrow
   buttons themselves stay clickable. */
.ponca-timeline__nav-wrap,
.ponca-timeline__nav {
	pointer-events: none;
}
.ponca-timeline__nav-btn {
	pointer-events: auto;
}
.ponca-timeline__scroll{
	padding-bottom: 0px;
}
.ponca-timeline__nav-btn[data-ponca-tl-prev] {
	margin-left:-70px
}
.ponca-timeline__nav-btn[data-ponca-tl-next] {
	margin-right:-70px
}
@media (max-width: 1680px) {
	.ponca-timeline__nav-btn[data-ponca-tl-prev]{
		margin-left: -60px;
	}
	.ponca-timeline__nav-btn[data-ponca-tl-next]{
		margin-right: -60px;
	}
	 .ponca-timeline__item {
		width:300px
	 }
}
@media (max-width: 1640px) {
	.ponca-timeline__scroll {
		width: 90%;
		margin: auto;
	}
	.ponca-timeline__nav-btn[data-ponca-tl-prev]{
		margin-left: -10px;
	}
	.ponca-timeline__nav-btn[data-ponca-tl-next]{
		margin-right: -10px;
	}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ponca-timeline__scroll {
		scroll-behavior: auto;
	}

	.ponca-timeline__btn,
	.ponca-timeline__btn-arrow,
	.ponca-timeline__nav-btn {
		transition: none !important;
	}
}


@media (max-width: 768px) {
	.ponca-timeline__item.hidden {
		display: none;
	}
}

/* Alignment variants */
.ponca-timeline.alignwide .ponca-timeline__container,
.ponca-timeline.alignfull .ponca-timeline__container {
	max-width: 1600px;
}

/* ============================================================
   DYNAMIC FOOTER ORNAMENT (Media Library image variant)
   Appended — does NOT alter the existing SVG ornament rules above.
   Activates only when render.php emits `.ponca-timeline__ornament--image`.
   ============================================================ */

/* The section has `overflow: hidden` (above), which would clip a 100vw
   breakout. Re-enable overflow only when the full-viewport image
   ornament is present, so all other layouts stay untouched. */
.ponca-timeline:has(.ponca-timeline__ornament--full) {
	overflow: visible;
}

/* Reset the existing margin-top / clamp() height from .ponca-timeline__ornament
   so the IMAGE variant sits flush at the bottom and uses its own
   author-configured height. */
.ponca-timeline__ornament--image {
	display: block;
	width: 100%;
	margin-bottom: 0;
	pointer-events: none;
	margin-top: var(--ptl-orn-margin-top, 0px);
	background: var(--ptl-orn-bg, transparent);
	opacity: var(--ptl-orn-opacity, 1);
	background-image: var(--ptl-orn-image);
	background-repeat: var(--ptl-orn-repeat, repeat-x);
	background-position: var(--ptl-orn-position, center bottom);
	background-size: var(--ptl-orn-size, auto 100%);
	height: var(--ptl-orn-h, 83px);
}

/* Full-viewport breakout caps */
.ponca-timeline__ornament--image.ponca-timeline__ornament--full {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	max-width: 100vw;
}
.ponca-timeline__item-title { letter-spacing: 0.01rem; font-weight: normal}
/* RESPONSIVE: the image ornament shrinks gracefully on small screens,
   so it always “touches the bottom” cleanly with no awkward height. */
@media (max-width: 1024px) {
	.ponca-timeline__container.ponca-timeline__nav-wrap{
	position: relative;
	}
	.ponca-timeline__nav{
		display: flex;
		justify-content: center;
	}
	.ponca-timeline__scroll {
		width: 100%;
		margin: auto;
	}
}

 
@media (max-width: 640px) {
.ponca-timeline__item {
	width:100%
}
.ponca-timeline__nav{
	margin-top:20px
}
}