/* Company Timeline
 * Custom properties default to the St. John's Ministries palette but are
 * overridden by inline styles output by the shortcode from the admin settings.
 *   --ctl-primary  : headings / card title (burgundy)
 *   --ctl-accent   : rail / marker border (magenta)
 *   --ctl-chip     : date/chip background (teal)
 *   --ctl-card-bg  : card background
 *   --ctl-alt-bg   : alt card background (pale lavender)
 *   --ctl-ink      : body text
 *   --ctl-font     : font family stack
 *   --ctl-entry-accent : optional per-entry override on .ctl-item
 */

.ctl-timeline-wrap {
	--ctl-primary:  #6b1546;
	--ctl-accent:   #9d1d64;
	--ctl-chip:     #74c3d5;
	--ctl-card-bg:  #ffffff;
	--ctl-alt-bg:   #f9f6fa;
	--ctl-ink:      #221f20;
	--ctl-border:   #efe8f1;
	--ctl-font:     'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	font-family: var(--ctl-font);
	color: var(--ctl-ink);
	max-width: 1100px;
	margin: 2.5rem auto;
	padding: 0 1.25rem;
	box-sizing: border-box;
}

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

.ctl-timeline-heading {
	font-family: inherit;
	font-weight: 900;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	color: var(--ctl-primary);
	text-align: center;
	margin: 0 0 2.5rem;
	letter-spacing: 0.5px;
}

.ctl-timeline-heading::after {
	content: "";
	display: block;
	width: 70px;
	height: 4px;
	background: var(--ctl-chip);
	margin: 0.75rem auto 0;
	border-radius: 0 20px;
}

.ctl-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* Item — base */
.ctl-item {
	position: relative;
	margin: 0;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.ctl-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Marker */
.ctl-marker {
	position: absolute;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--ctl-entry-accent, var(--ctl-accent));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	z-index: 2;
}

.ctl-marker-year {
	font-weight: 900;
	font-size: 0.95rem;
	color: var(--ctl-primary);
	letter-spacing: 0.5px;
}

.ctl-marker-icon.dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: var(--ctl-entry-accent, var(--ctl-accent));
}

/* Card */
.ctl-card {
	background: var(--ctl-card-bg);
	border: 1px solid var(--ctl-border);
	border-radius: 0 20px 0 20px;
	box-shadow: 0 6px 24px rgba(34, 31, 32, 0.06);
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	overflow: hidden;
}

.ctl-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	border-color: var(--ctl-chip);
}

.ctl-card-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 240px;
	object-fit: cover;
}

.ctl-card-inner {
	padding: 1.5rem 1.75rem;
}

.ctl-card-date {
	display: inline-block;
	background: var(--ctl-entry-accent, var(--ctl-chip));
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 0.35rem 0.85rem;
	border-radius: 0 20px 0 20px;
	margin-bottom: 0.75rem;
}

.ctl-card-title {
	font-family: inherit;
	font-weight: 900;
	font-size: 1.35rem;
	color: var(--ctl-primary);
	margin: 0 0 0.5rem;
	line-height: 1.25;
}

.ctl-card-body {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ctl-ink);
}

.ctl-card-body p { margin: 0 0 0.75rem; }
.ctl-card-body p:last-child { margin-bottom: 0; }
.ctl-card-body a { color: var(--ctl-accent); text-decoration: underline; }
.ctl-card-body a:hover { color: var(--ctl-primary); }

.ctl-empty {
	text-align: center;
	color: #666;
	font-style: italic;
	padding: 2rem 1rem;
}

/* =========================================================================
 * Layout: alternating (center rail with cards on both sides)
 * ========================================================================= */
.ctl-layout-alternating .ctl-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background: linear-gradient(180deg, var(--ctl-primary), var(--ctl-accent));
	transform: translateX(-50%);
	border-radius: 2px;
}

.ctl-layout-alternating .ctl-item {
	width: 50%;
	padding: 1rem 2.75rem;
}

.ctl-layout-alternating .ctl-item.ctl-left  { left: 0;   text-align: right; }
.ctl-layout-alternating .ctl-item.ctl-right { left: 50%; text-align: left;  }

.ctl-layout-alternating .ctl-item .ctl-marker { top: 1.75rem; }
.ctl-layout-alternating .ctl-item.ctl-left  .ctl-marker { right: -35px; }
.ctl-layout-alternating .ctl-item.ctl-right .ctl-marker { left:  -35px; }

.ctl-layout-alternating .ctl-item.ctl-right .ctl-card { background: var(--ctl-alt-bg); }

.ctl-layout-alternating .ctl-card::before {
	content: "";
	position: absolute;
	top: 2rem;
	width: 14px;
	height: 14px;
	background: inherit;
	border-top: 1px solid var(--ctl-border);
	border-right: 1px solid var(--ctl-border);
}
.ctl-layout-alternating .ctl-item.ctl-left  .ctl-card::before { right: -8px; transform: rotate(45deg);   }
.ctl-layout-alternating .ctl-item.ctl-right .ctl-card::before { left:  -8px; transform: rotate(-135deg); }

/* =========================================================================
 * Layout: left rail (all cards on the right)
 * ========================================================================= */
.ctl-layout-left .ctl-timeline::before,
.ctl-layout-right .ctl-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--ctl-primary), var(--ctl-accent));
	border-radius: 2px;
}
.ctl-layout-left .ctl-timeline::before  { left: 35px;   }
.ctl-layout-right .ctl-timeline::before { right: 35px;  }

.ctl-layout-left .ctl-item,
.ctl-layout-right .ctl-item {
	width: 100%;
	padding: 0.75rem 0;
	margin-bottom: 0.75rem;
}

.ctl-layout-left .ctl-item  { padding-left:  90px; }
.ctl-layout-right .ctl-item { padding-right: 90px; text-align: right; }

.ctl-layout-left .ctl-marker  { top: 1rem; left: 0;    }
.ctl-layout-right .ctl-marker { top: 1rem; right: 0;   }

/* =========================================================================
 * Layout: horizontal scroll
 * ========================================================================= */
.ctl-layout-horizontal .ctl-timeline {
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 1.5rem;
	padding: 70px 0.5rem 1.5rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.ctl-layout-horizontal .ctl-timeline::before {
	content: "";
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ctl-primary), var(--ctl-accent));
	border-radius: 2px;
}

.ctl-layout-horizontal .ctl-item {
	flex: 0 0 320px;
	scroll-snap-align: start;
	padding-top: 50px;
	position: relative;
}

.ctl-layout-horizontal .ctl-marker {
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
}

.ctl-layout-horizontal .ctl-card { width: 100%; }

/* Custom scrollbar for horizontal layout */
.ctl-layout-horizontal .ctl-timeline::-webkit-scrollbar { height: 8px; }
.ctl-layout-horizontal .ctl-timeline::-webkit-scrollbar-track { background: var(--ctl-alt-bg); border-radius: 4px; }
.ctl-layout-horizontal .ctl-timeline::-webkit-scrollbar-thumb { background: var(--ctl-accent); border-radius: 4px; }

/* =========================================================================
 * Animations
 * ========================================================================= */
.ctl-anim-none .ctl-item {
	opacity: 1;
	transform: none;
	transition: none;
}

.ctl-anim-fade .ctl-item { transform: translateY(20px); }
.ctl-anim-fade .ctl-item.is-visible { transform: translateY(0); }

.ctl-anim-slide .ctl-item                          { transform: translateX(-40px); }
.ctl-anim-slide .ctl-item.ctl-right                { transform: translateX(40px);  }
.ctl-anim-slide .ctl-item.is-visible               { transform: translateX(0);     }

.ctl-anim-zoom .ctl-item            { transform: scale(0.88); }
.ctl-anim-zoom .ctl-item.is-visible { transform: scale(1);    }

/* =========================================================================
 * Mobile — collapse alternating to single column
 * ========================================================================= */
@media (max-width: 720px) {
	.ctl-layout-alternating .ctl-timeline::before { left: 28px; transform: none; }

	.ctl-layout-alternating .ctl-item,
	.ctl-layout-alternating .ctl-item.ctl-left,
	.ctl-layout-alternating .ctl-item.ctl-right {
		width: 100%;
		left: 0;
		text-align: left;
		padding: 0.75rem 0 0.75rem 80px;
	}

	.ctl-layout-alternating .ctl-item.ctl-left  .ctl-marker,
	.ctl-layout-alternating .ctl-item.ctl-right .ctl-marker {
		left: -6px;
		right: auto;
		width: 60px;
		height: 60px;
	}

	.ctl-layout-alternating .ctl-marker-year { font-size: 0.85rem; }

	.ctl-layout-alternating .ctl-item.ctl-left  .ctl-card::before,
	.ctl-layout-alternating .ctl-item.ctl-right .ctl-card::before {
		left: -8px;
		right: auto;
		transform: rotate(-135deg);
	}

	.ctl-layout-alternating .ctl-item.ctl-right .ctl-card { background: var(--ctl-card-bg); }

	.ctl-layout-right .ctl-item { text-align: left; padding-right: 0; padding-left: 90px; }
	.ctl-layout-right .ctl-timeline::before { right: auto; left: 35px; }
	.ctl-layout-right .ctl-marker { right: auto; left: 0; }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.ctl-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.ctl-card { transition: none; }
}