/* =====================================================
   OE Timeline Wheel
   ===================================================== */

/* Variables & wrapper — clips to top half (the visible arc) */
.oe-timeline-wheel-wrapper {
  --oe-tw-radius: 40vw;
  --oe-tw-duration: 200ms;
  --oe-tw-padding: 2rem;

  --oe-tw-label-offset: calc(var(--oe-tw-radius) * -1 - 1rem);
  --oe-tw-label-size: 30px;
  --oe-tw-label-color: rgba(255, 255, 255, 0.45);
  --oe-tw-label-color-active: var(--oe-color-primary, #00addc);
  --oe-tw-label-line-h: 0px;
  --oe-tw-label-line-h-active: 2rem;
  --oe-tw-label-dot-size: 10px;
  --oe-tw-circle-border: transparent;

  --oe-tw-title-top: 1.5rem;
  --oe-tw-info-top: 5rem;
  --oe-tw-info-width: min(70%, 500px);

  position: relative;
  width: 100%;
  height: calc(var(--oe-tw-radius) + var(--oe-tw-padding) + 1.5rem);
  clip-path: inset(0);
}


@media (min-width: 800px) {
  .oe-timeline-wheel-wrapper {
    --oe-tw-radius: min(30vw, 530px);
    --oe-tw-label-size: 40px;
    --oe-tw-label-dot-size: 15px;
    --oe-tw-label-line-h-active: 4rem;
    --oe-tw-title-top: 4rem;
    --oe-tw-info-top: 8rem;
  }
}

@media (min-width: 1200px) {
  .oe-timeline-wheel-wrapper {
    --oe-tw-label-size: 50px;
    --oe-tw-circle-border: var(--oe-color-trans-light-10, rgba(255, 255, 255, 0.1));
  }
}

/* Circle container — absolutely centred within the wrapper */
.oe-timeline-wheel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: calc(var(--oe-tw-radius) * 2);
  height: calc(var(--oe-tw-radius) * 2);
  padding: var(--oe-tw-padding);
  box-sizing: content-box;
  top: 1.5rem;
}

/* Hide radio buttons */
.oe-timeline-wheel input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Rotating track (the ul) */
.oe-timeline-wheel__track {
  position: absolute;
  inset: var(--oe-tw-padding);
  aspect-ratio: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--oe-tw-circle-border);
  transition: transform 0.3s ease-in-out var(--oe-tw-duration);
}

/* Individual year items */
.oe-timeline-wheel__track li {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  transform-origin: center;
  display: grid;
  place-content: center;
  transform: rotate(calc(var(--i) * 360deg / var(--items)));
  pointer-events: none;
}

/* Year label */
.oe-timeline-wheel__track li > label {
  position: absolute;
  inset: 0;
  margin: auto;
  transform: translateY(var(--oe-tw-label-offset));
  width: var(--oe-tw-label-size);
  height: var(--oe-tw-label-size);
  cursor: pointer;
  pointer-events: initial;
  text-align: center;
  color: var(--oe-tw-label-color);
  font-size: clamp(0.75rem, 2vw + 0.1rem, 1rem);
  font-weight: 500;
  line-height: 1;
  transition: color var(--oe-tw-duration) ease-in-out;
}

/* Dot indicator on arc */
.oe-timeline-wheel__track li > label::before {
  content: '';
  position: absolute;
  top: var(--oe-tw-padding);
  left: 50%;
  translate: -50% 0;
  width: var(--oe-tw-label-dot-size);
  height: var(--oe-tw-label-dot-size);
  border-radius: 50%;
  background-color: currentColor;
  transition: background-color var(--oe-tw-duration) ease-in-out;
}

/* Connector line — grows down from dot on active item */
.oe-timeline-wheel__track li > label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 5px;
  width: 2px;
  height: var(--oe-tw-label-line-h);
  background-color: var(--oe-color-primary, #00addc);
  transition: height 300ms ease-in-out var(--oe-tw-line-delay, 0ms);
}

.oe-timeline-wheel__track li > label:hover {
  color: var(--oe-tw-label-color-active);
}

/* Year heading */
.oe-timeline-wheel__track > li > h2 {
  position: absolute;
  left: 50%;
  top: var(--oe-tw-title-top);
  margin: 0;
  padding: 0;
  transform: translate(-50%, 0);
  transform-origin: center;
  text-align: center;
  color: #ffffff;
  font-size: var(--oe-xl, clamp(1.95rem, 3vw + 1rem, 2.81rem));
  font-weight: 500;
  opacity: var(--oe-tw-title-opacity, 0);
  translate: 0 var(--oe-tw-title-y, 30px);
  transition:
    opacity var(--oe-tw-duration) ease-in-out var(--oe-tw-title-delay, 0ms),
    translate var(--oe-tw-duration) ease-in-out var(--oe-tw-title-delay, 0ms);
}

/* Body text */
.oe-timeline-wheel__track > li > p {
  position: absolute;
  left: 50%;
  top: var(--oe-tw-info-top);
  margin: 0;
  padding: 0;
  width: var(--oe-tw-info-width);
  transform: translate(-50%, 0);
  transform-origin: center;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--oe-sm, clamp(0.8rem, 1.5vw, 0.9rem));
  text-wrap: pretty;
  z-index: 2;
  opacity: var(--oe-tw-info-opacity, 0);
  transition: opacity var(--oe-tw-duration) ease-in-out var(--oe-tw-info-delay, 0ms);
}

/* Active item — update all state variables */
.oe-timeline-wheel__track li:has(input:checked) {
  --oe-tw-label-color: var(--oe-color-primary, #00addc);
  --oe-tw-label-line-h: var(--oe-tw-label-line-h-active);
  --oe-tw-line-delay: calc(var(--oe-tw-duration) * 2);
  --oe-tw-title-opacity: 1;
  --oe-tw-title-y: 0px;
  --oe-tw-title-delay: calc(var(--oe-tw-duration) * 3);
  --oe-tw-info-opacity: 1;
  --oe-tw-info-delay: calc(var(--oe-tw-duration) * 4);
}

/* ==================================================
   Component: Timeline Carousel
   Built on GenerateBlocks Carousel

   Required classes:
   - Add to the main GenerateBlocks Carousel block:
     oe-timeline-carousel

   Recommended classes inside each Carousel Item:
   - Inner Container:
     oe-timeline-item

   Optional classes:
   - Inner card Container:
     oe-timeline-card

   Optional custom indicator wrapper:
   - oe-timeline-item-indicators

   Optional custom indicator buttons generated by JS:
   - oe-timeline-item-indicator
================================================== */


/* --------------------------------------------------
   Base variables
-------------------------------------------------- */

.oe-timeline-carousel {
	--oe-timeline-line-color: rgba(255, 255, 255, 0.32);
	--oe-timeline-line-active-color: #00a7d8;

	--oe-timeline-marker-size: 18px;
	--oe-timeline-marker-border-size: 4px;
	--oe-timeline-marker-y: 9px;

	/*
		IMPORTANT:
		Match this value to the Carousel block's "Space Between" setting.
		For example, if the Carousel has 40px space between slides,
		leave this as 40px.
	*/
	--oe-timeline-space-between: 40px;

	--oe-timeline-item-top-space: 48px;

	--oe-timeline-card-padding: 24px;
	--oe-timeline-card-radius: 10px;
	--oe-timeline-card-background: rgba(255, 255, 255, 0.06);
	--oe-timeline-card-border: rgba(255, 255, 255, 0.16);
	--oe-timeline-card-active-border: rgba(0, 167, 216, 0.9);
	--oe-timeline-card-active-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);

	--oe-timeline-text-color: rgba(255, 255, 255, 0.82);
	--oe-timeline-text-muted-color: rgba(255, 255, 255, 0.58);
	--oe-timeline-heading-color: #ffffff;

	position: relative;
}


/* --------------------------------------------------
   GenerateBlocks Carousel item setup
-------------------------------------------------- */

.oe-timeline-carousel .gb-carousel-item {
	position: relative;
	overflow: visible;
	opacity: 0.58;
	transform: scale(0.985);
	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

/*
	This creates the actual connecting line.

	It is applied to the Carousel Item itself, rather than only to
	an inner timeline container, because this is more reliable with
	GenerateBlocks / Swiper spacing.
*/
.oe-timeline-carousel .gb-carousel-item::before {
	content: "";
	position: absolute;
	inset-block-start: var(--oe-timeline-marker-y);
	inset-inline-start: calc(var(--oe-timeline-marker-size) / 2);
	inline-size: calc(100% + var(--oe-timeline-space-between) - var(--oe-timeline-marker-size));
	block-size: 2px;
	background: var(--oe-timeline-line-color);
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
}

/* Remove the connector after the final real item */
.oe-timeline-carousel .gb-carousel-item:last-child::before {
	display: none;
}

/* Timeline marker dot */
.oe-timeline-carousel .gb-carousel-item::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--oe-timeline-marker-size);
	block-size: var(--oe-timeline-marker-size);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	border: var(--oe-timeline-marker-border-size) solid rgba(255, 255, 255, 0.35);
	box-sizing: border-box;
	z-index: 2;
	pointer-events: none;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}


/* --------------------------------------------------
   Active / neighbouring states from GenerateBlocks
-------------------------------------------------- */

.oe-timeline-carousel .gb-carousel-item.is-active {
	opacity: 1;
	transform: scale(1);
}

.oe-timeline-carousel .gb-carousel-item.is-previous,
.oe-timeline-carousel .gb-carousel-item.is-next {
	opacity: 0.78;
}

/* Active item marker */
.oe-timeline-carousel .gb-carousel-item.is-active::after {
	background: var(--oe-timeline-line-active-color);
	border-color: var(--oe-timeline-line-active-color);
	box-shadow: 0 0 0 8px rgba(0, 167, 216, 0.18);
	transform: scale(1.08);
}

/* Active item connector */
.oe-timeline-carousel .gb-carousel-item.is-active::before {
	background: var(--oe-timeline-line-active-color);
}

/*
	These classes are optional and are added by the JS version.
	They allow items before the active item to look "completed".
*/
.oe-timeline-carousel .gb-carousel-item.oe-is-before-active {
	opacity: 0.9;
}

.oe-timeline-carousel .gb-carousel-item.oe-is-before-active::before,
.oe-timeline-carousel .gb-carousel-item.oe-is-before-active::after {
	background: var(--oe-timeline-line-active-color);
	border-color: var(--oe-timeline-line-active-color);
}


/* --------------------------------------------------
   Inner timeline item
-------------------------------------------------- */

.oe-timeline-carousel .oe-timeline-item {
	position: relative;
	z-index: 1;
	padding-block-start: var(--oe-timeline-item-top-space);
	color: var(--oe-timeline-text-color);
}

/*
	Prevents older pseudo-element versions from double-rendering
	if they were previously applied to the inner item.
*/
.oe-timeline-carousel .oe-timeline-item::before,
.oe-timeline-carousel .oe-timeline-item::after {
	content: none;
}


/* --------------------------------------------------
   Optional timeline card styling
-------------------------------------------------- */

.oe-timeline-carousel .oe-timeline-card {
	padding: var(--oe-timeline-card-padding);
	border: 1px solid var(--oe-timeline-card-border);
	border-radius: var(--oe-timeline-card-radius);
	background: var(--oe-timeline-card-background);
	transition:
		border-color 220ms ease,
		box-shadow 220ms ease,
		transform 220ms ease,
		background-color 220ms ease;
}

.oe-timeline-carousel .gb-carousel-item.is-active .oe-timeline-card {
	border-color: var(--oe-timeline-card-active-border);
	box-shadow: var(--oe-timeline-card-active-shadow);
	transform: translateY(-4px);
}


/* --------------------------------------------------
   Timeline text elements
-------------------------------------------------- */

.oe-timeline-carousel .oe-timeline-date {
	margin: 0 0 0.65rem;
	color: var(--oe-timeline-heading-color);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
}

.oe-timeline-carousel .oe-timeline-title {
	margin: 0 0 0.75rem;
	color: var(--oe-timeline-heading-color);
	font-weight: 700;
	line-height: 1.25;
}

.oe-timeline-carousel .oe-timeline-text {
	margin: 0;
	color: var(--oe-timeline-text-color);
	line-height: 1.6;
}

.oe-timeline-carousel .gb-carousel-item:not(.is-active) .oe-timeline-date,
.oe-timeline-carousel .gb-carousel-item:not(.is-active) .oe-timeline-title,
.oe-timeline-carousel .gb-carousel-item:not(.is-active) .oe-timeline-text {
	color: var(--oe-timeline-text-muted-color);
}


/* --------------------------------------------------
   Footer layout for controls / pagination
-------------------------------------------------- */

.oe-timeline-carousel .oe-timeline-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-block-start: 28px;
}


/* --------------------------------------------------
   GenerateBlocks native carousel controls
-------------------------------------------------- */

.oe-timeline-carousel .gb-carousel-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		opacity 180ms ease,
		transform 180ms ease;
}

.oe-timeline-carousel .gb-carousel-control:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #003b70;
	transform: translateY(-1px);
}

.oe-timeline-carousel .gb-carousel-control:focus-visible {
	outline: 2px solid var(--oe-timeline-line-active-color);
	outline-offset: 3px;
}

.oe-timeline-carousel .gb-carousel-control:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}


/* --------------------------------------------------
   GenerateBlocks native carousel pagination

   Important:
   Native carousel dots represent carousel positions/snap points,
   not necessarily the total number of timeline items.
-------------------------------------------------- */

.oe-timeline-carousel .gb-carousel-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.oe-timeline-carousel .gb-carousel-dot {
	inline-size: 9px;
	block-size: 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.34);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition:
		inline-size 180ms ease,
		background-color 180ms ease,
		opacity 180ms ease;
}

.oe-timeline-carousel .gb-carousel-dot:hover {
	opacity: 0.82;
}

.oe-timeline-carousel .gb-carousel-dot.is-active-main,
.oe-timeline-carousel .gb-carousel-dot[aria-current="true"],
.oe-timeline-carousel .gb-carousel-dot.swiper-pagination-bullet-active {
	inline-size: 28px;
	background: var(--oe-timeline-line-active-color);
}


/* --------------------------------------------------
   Optional custom per-item indicators

   Use this when you want one indicator per actual timeline item.
   These buttons need to be created manually or generated with JS.
-------------------------------------------------- */

.oe-timeline-carousel .oe-timeline-item-indicators {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-block-start: 20px;
}

.oe-timeline-carousel .oe-timeline-item-indicator {
	appearance: none;
	inline-size: 9px;
	block-size: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.34);
	cursor: pointer;
	transition:
		inline-size 180ms ease,
		background-color 180ms ease,
		opacity 180ms ease,
		transform 180ms ease;
}

.oe-timeline-carousel .oe-timeline-item-indicator:hover {
	opacity: 0.82;
	transform: scale(1.08);
}

.oe-timeline-carousel .oe-timeline-item-indicator.is-active {
	inline-size: 28px;
	background: var(--oe-timeline-line-active-color);
}

.oe-timeline-carousel .oe-timeline-item-indicator:focus-visible {
	outline: 2px solid var(--oe-timeline-line-active-color);
	outline-offset: 4px;
}


/*
	Add this modifier class to the main Carousel block if you want to hide
	the native GenerateBlocks pagination and use custom per-item indicators.

	Main Carousel classes:
	oe-timeline-carousel oe-timeline-use-custom-indicators
*/

.oe-timeline-carousel.oe-timeline-use-custom-indicators .gb-carousel-pagination {
	display: none;
}


/* --------------------------------------------------
   Optional custom progress text

   Example output:
   1 of 8
-------------------------------------------------- */

.oe-timeline-carousel .oe-timeline-progress-text {
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}


/* --------------------------------------------------
   Accessibility helpers
-------------------------------------------------- */

.oe-timeline-carousel button {
	font: inherit;
}

.oe-timeline-carousel [aria-current="step"] {
	scroll-margin-inline: 24px;
}


/* --------------------------------------------------
   Responsive adjustments
-------------------------------------------------- */

@media (max-width: 1024px) {
	.oe-timeline-carousel {
		--oe-timeline-space-between: 32px;
		--oe-timeline-card-padding: 20px;
	}
}

@media (max-width: 767px) {
	.oe-timeline-carousel {
		--oe-timeline-space-between: 24px;
		--oe-timeline-marker-size: 16px;
		--oe-timeline-marker-border-size: 3px;
		--oe-timeline-marker-y: 8px;
		--oe-timeline-item-top-space: 42px;
	}

	.oe-timeline-carousel .gb-carousel-control {
		inline-size: 38px;
		block-size: 38px;
	}

	.oe-timeline-carousel .oe-timeline-footer {
		gap: 10px;
		margin-block-start: 24px;
	}
}


/* --------------------------------------------------
   Reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.oe-timeline-carousel .gb-carousel-item,
	.oe-timeline-carousel .gb-carousel-item::before,
	.oe-timeline-carousel .gb-carousel-item::after,
	.oe-timeline-carousel .oe-timeline-card,
	.oe-timeline-carousel .gb-carousel-control,
	.oe-timeline-carousel .gb-carousel-dot,
	.oe-timeline-carousel .oe-timeline-item-indicator {
		transition: none;
	}
}