/**
 * Timeline widget styles.
 *
 * Layout is entirely normal document flow (blocks stack with a
 * margin-bottom, the spine is an absolutely positioned line inside a
 * position: relative parent whose height is just whatever its
 * children add up to) — no hand-tuned pixel offsets per block, the
 * bug this widget replaces in custom-style.css's old .timeline-item
 * setup. Add, remove, or resize a block and everything after it just
 * moves — nothing to recalculate.
 *
 * The flip/grow/spotlight interaction itself (Step 8) is pure JS —
 * this file only has the resting-state look and the couple of base
 * properties (perspective, backface-visibility) that animation needs
 * already in place on the right elements.
 */

.tl-timeline {
	position: relative;
	padding: 60px 0;
}

.tl-spine {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #0274be;
	transform: translateX(-50%);
	z-index: 0;
}

/* ==========================================================
   YEAR MARKERS
========================================================== */

.tl-year {
	position: relative;
	z-index: 2;
	width: fit-content;
	margin: 10px auto 50px;
	text-align: center;
	background: #0274be;
	color: #fff;
	font-weight: 700;
	font-size: 1.3rem;
	padding: 6px 28px;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.tl-year:first-child {
	margin-top: 0;
}

/* ==========================================================
   BLOCKS
========================================================== */

.tl-block {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 35px;
}

.tl-block:last-child {
	margin-bottom: 0;
}

/* Pulls a block up into the vertical space of the one before it —
   but ONLY when it's actually on the opposite side, so it doesn't
   collide with it. .tl-block--left + .tl-block--right and the
   reverse are what express "opposite side, right after each other"
   in CSS — two consecutive blocks on the SAME side just get normal
   spacing (margin-bottom, no overlap) instead, since they'd
   genuinely collide otherwise.
   Also naturally skips the first block of each year: that one
   follows a .tl-year marker, not another .tl-block, so neither of
   these selectors match it — no separate override needed to stop it
   dragging up under the year pill.
   Value is a first guess, written without being able to see the
   actual result live; likely needs tuning once you do. */
.tl-block--left + .tl-block--right,
.tl-block--right + .tl-block--left {
	margin-top: -220px;
}

.tl-block--left {
	justify-content: flex-start;
}

.tl-block--right {
	justify-content: flex-end;
}

.tl-block-point {
	position: absolute;
	left: 50%;
	/* Fixed distance from the block's own top, not 50% — 50% would
	   track the block's height, which is really just the card's own
	   height (point/connector/date are all position: absolute, so
	   none of them contribute to that height themselves). Anchoring
	   to the vertical center therefore always lands exactly on the
	   card's center too, which is the bug: the card needs to sit
	   BELOW this cluster, not straddle it. */
	top: 30px;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #0274be;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px #0274be;
	z-index: 2;
}

.tl-block-connector {
	position: absolute;
	top: 30px;
	height: 3px;
	width: calc(50% - 55px);
	background: #0274be;
	z-index: 1;
}

/* left: 50% anchors the element's LEFT edge to the spine, so it
   extends RIGHTWARD from there — that's what a --right block needs
   (reaching toward its card on the right). right: 50% anchors the
   RIGHT edge to the spine, extending LEFTWARD — what --left needs.
   Easy to get backwards (did, the first time this was written) since
   it's the opposite of what "left"/"right" sound like they should
   mean here — it's about which edge is pinned, not which direction
   the card is on. */
.tl-block--left .tl-block-connector {
	right: 50%;
}

.tl-block--right .tl-block-connector {
	left: 50%;
}

.tl-block-date {
	position: absolute;
	/* Same fixed-offset reasoning as .tl-block-point above — sits
	   just above the point/connector line (top: 30px), not "50% -
	   40px" of a height that used to just be the card's own height. */
	top: -14px;
	background: #0274be;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 3px 14px;
	border-radius: 10px 10px 0 0;
	z-index: 2;
	white-space: nowrap;
}

.tl-block--left .tl-block-date {
	right: calc(50% + 15px);
}

.tl-block--right .tl-block-date {
	left: calc(50% + 15px);
}

/* ==========================================================
   CARD (front face — the back lives in .tl-blocks-backs,
   see below, and only becomes visible via Step 8's JS)
========================================================== */

.tl-block-card {
	position: relative;
	/* Lower than .tl-block-point (2), .tl-block-date (2), and
	   .tl-block-connector (1) on purpose — the card sits BEHIND the
	   spine line and the date pill wherever they overlap, not in
	   front of them. Card comes after both in the HTML, so without
	   this it would paint on top despite the lower/equal z-index
	   those have. */
	z-index: 0;
	/* Clears the point/connector/date cluster sitting near the
	   block's top (see .tl-block-point's own comment) — without
	   this, the card (the only flex item with real height) would
	   still vertically straddle that cluster instead of sitting
	   below it. */
	margin-top: 56px;
	/* Capped narrower than the old calc(50% - 70px) — that stretched
	   with the timeline's own width and ended up wide/short. A fixed
	   cap keeps it closer to square (taller relative to its width)
	   regardless of how wide the timeline itself is, while still
	   shrinking on narrower screens via the calc() half. */
	width: min(340px, calc(50% - 70px));
	aspect-ratio: 4 / 5;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	text-align: left;
	background: #fff;
	border: none;
	border-radius: 16px;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
	-webkit-tap-highlight-color: transparent;
	/* Groundwork for Step 8's flip — the actual rotation is a class
	   JS toggles, not applied here, but the card needs to already be
	   a 3D-transform-ready element for that to look right when it
	   happens rather than snapping. */
	transform-style: preserve-3d;
	transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ), box-shadow 0.35s ease, opacity 0.35s ease;
}

.tl-block-card:hover,
.tl-block-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.tl-block-card:focus-visible {
	outline: 2px solid #0274be;
	outline-offset: 3px;
}

/* Card "turning away" as the spotlight opens — paired with the
   spotlight's own opposite rotation in timeline.js, so the two read
   as one continuous flip even though they're different elements. */
.tl-block-card--flipped {
	transform: rotateY(90deg);
	opacity: 0;
	pointer-events: none;
}

.tl-block-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.tl-block-card:hover .tl-block-image,
.tl-block-card:focus-visible .tl-block-image {
	transform: scale(1.06);
}

.tl-block-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.28) 45%,
		rgba(0, 0, 0, 0) 75%
	);
}

.tl-block-title {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 18px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	/* Default (no-image) look: plain dark text on the card's own
	   white background — .tl-block-card--has-image overrides this
	   below, once there's actually a photo behind it to sit on top
	   of. Without this fallback, a block with no image would show
	   white-on-white, invisible text. */
	color: #222;
}

.tl-block-card--has-image .tl-block-title {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Cards with no image at all skip the hero-photo treatment entirely
   — plain white card, title visible on its own background instead of
   overlaid on a photo that doesn't exist. align-items reverts from
   flex-end (pins the title to the bottom over a photo) to center,
   since there's no image filling the rest of the space to justify
   pinning the title down low. */
.tl-block-card:not(.tl-block-card--has-image) {
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* ==========================================================
   BACKS (off-screen source content — Step 8's JS moves/shows
   the active one inside the spotlight overlay)
========================================================== */

.tl-blocks-backs {
	display: none;
}

/* Only ever added by timeline-editor.js, never present on the real
   frontend — makes a block's back (invisible by default, see above)
   visible and roughly presentable *inside the Elementor editor's own
   canvas only*, so there's an actual visible drop zone to drag
   widgets into instead of an invisible, seemingly-broken empty area.
   Always visible now (no click-to-open/close — see
   timeline-editor.js's own docblock for why that was dropped). Not
   guaranteed to look identical to the real spotlight-opened state on
   the frontend — this is an editing convenience, not a live preview
   of the flip/grow animation itself. */
.tl-block-back--editor-preview {
	display: block !important;
	position: static !important;
	margin: 0 0 20px;
	padding: 20px;
	border: 1px dashed #0274be;
	border-radius: 8px;
	background: rgba(2, 116, 190, 0.04);
}

/* The data-block-label attribute is set by timeline-editor.js's
   onAddChild(), not stored anywhere in the widget's real settings —
   purely a visual label for telling backs apart in the editor. Using
   content: attr() rather than inserting a real DOM element keeps it
   from ever being mistaken for actual, draggable/editable content. */
.tl-block-back--editor-preview::before {
	content: attr(data-block-label);
	display: block;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(2, 116, 190, 0.25);
	font-size: 0.9rem;
	font-weight: 700;
	color: #0274be;
}

.tl-blocks-backs:has(.tl-block-back--editor-preview) {
	display: block;
}

/* ==========================================================
   SPOTLIGHT OVERLAY (Step 8 toggles .tl-overlay--active and
   moves/clones the relevant .tl-block-back into view — the
   resting/hidden state and the dark backdrop itself live here)
========================================================== */

.tl-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	z-index: 100;
}

.tl-overlay.tl-overlay--active {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================
   SPOTLIGHT (the enlarged card itself — created and positioned
   entirely by timeline.js; see that file's own docblock for why
   it lives in <body> rather than inside .tl-timeline)
========================================================== */

.tl-spotlight {
	position: fixed;
	z-index: 101;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	overflow: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
	padding: 32px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition:
		top 0.5s cubic-bezier( 0.4, 0, 0.2, 1 ),
		left 0.5s cubic-bezier( 0.4, 0, 0.2, 1 ),
		width 0.5s cubic-bezier( 0.4, 0, 0.2, 1 ),
		height 0.5s cubic-bezier( 0.4, 0, 0.2, 1 ),
		transform 0.5s cubic-bezier( 0.4, 0, 0.2, 1 ),
		opacity 0.3s ease,
		visibility 0.5s;
}

.tl-spotlight--active {
	opacity: 1;
	visibility: visible;
	top: 50% !important;
	left: 50% !important;
	width: min(700px, 90vw) !important;
	height: min(600px, 80vh) !important;
	transform: translate(-50%, -50%) rotateY(0deg) !important;
}

/* Prevents the page behind the spotlight from scrolling while it's
   open — toggled on <body> by timeline.js. */
.tl-scroll-locked {
	overflow: hidden;
}

/* Users who've asked the OS/browser to reduce motion still get the
   state change, just without the flip/grow motion itself. */
@media (prefers-reduced-motion: reduce) {

	.tl-block-card,
	.tl-block-image,
	.tl-overlay,
	.tl-spotlight {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================
   MOBILE (up to 768px)
   Spine moves to the left edge, every block aligns left
   regardless of its own block_side setting — alternating
   left/right needs the width a phone screen doesn't have.
========================================================== */
@media (max-width: 768px) {

	.tl-timeline {
		padding: 30px 0;
	}

	.tl-spine {
		left: 20px;
		transform: none;
	}

	.tl-year {
		margin: 10px 0 30px 4px;
		font-size: 1.1rem;
		padding: 5px 20px;
	}

	.tl-block {
		margin-bottom: 20px;
		justify-content: flex-start !important;
		padding-left: 45px;
	}

	.tl-block--left + .tl-block--right,
	.tl-block--right + .tl-block--left {
		margin-top: 0;
	}

	.tl-block-point {
		left: 20px;
	}

	.tl-block-connector,
	.tl-block--left .tl-block-connector,
	.tl-block--right .tl-block-connector {
		left: 20px;
		right: auto;
		width: 25px;
	}

	.tl-block-date,
	.tl-block--left .tl-block-date,
	.tl-block--right .tl-block-date {
		position: static;
		display: inline-block;
		margin-bottom: 6px;
	}

	.tl-block-card {
		width: 100%;
		margin-top: 0;
		/* Shorter than the desktop 4/5 — at full mobile width, that
		   ratio would make the card quite tall. */
		aspect-ratio: 4 / 3;
	}

	.tl-block-title {
		font-size: 1rem;
		padding: 14px;
	}
}