/*
 * Timeline Pan v3 – Frontend Styles
 * Responsive | Image | PDF | Gallery | Lightbox-ready
 */

/* ── Custom properties ── */
.timeline-pan {
	--tp-accent:   #e84c1e;
	--tp-line:     #dde3ea;
	--tp-navy:     #1a2a3a;
	--tp-card-bg:  #ffffff;
	--tp-shadow:   0 2px 14px rgba(26,42,58,.09);
	--tp-radius:   10px;
	--tp-gap:      44px;
	--tp-marker-w: 52px;
	position:  relative;
	max-width: 900px;
	margin:    0 auto;
	padding:   8px 0 24px;
}
.timeline-pan.alignwide { max-width:1100px; }
.timeline-pan.alignfull { max-width:100%; }

/* ── Vertical line ── */
.timeline-pan::before {
	content:''; position:absolute; top:0; bottom:0;
	left:50%; transform:translateX(-50%);
	width:3px;
	background:linear-gradient(to bottom,transparent,var(--tp-line) 5%,var(--tp-line) 95%,transparent);
	border-radius:2px; pointer-events:none;
}
.timeline-pan.layout-left::before,
.timeline-pan.layout-right::before { left:calc(var(--tp-marker-w)/2); transform:none; }

/* ── Item ── */
.timeline-pan .tp-item { display:flex; align-items:flex-start; position:relative; margin-bottom:var(--tp-gap); }
.timeline-pan.layout-alternating .tp-item:nth-child(odd)  { flex-direction:row; }
.timeline-pan.layout-alternating .tp-item:nth-child(even) { flex-direction:row-reverse; }
.timeline-pan.layout-left  .tp-item { flex-direction:row; }
.timeline-pan.layout-right .tp-item { flex-direction:row-reverse; }

/* ── Marker ── */
.timeline-pan .tp-marker { flex:0 0 var(--tp-marker-w); display:flex; justify-content:center; padding-top:14px; z-index:2; }
.timeline-pan .tp-icon {
	width:38px; height:38px; border-radius:50%;
	background:var(--tp-accent); color:#fff; font-size:15px; line-height:1;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 0 0 4px #fff,0 0 0 6px var(--tp-accent);
	transition:transform .25s ease; flex-shrink:0;
}
.timeline-pan .tp-item:hover .tp-icon { transform:scale(1.1); }

/* ── Card ── */
.timeline-pan .tp-card {
	flex:1; background:var(--tp-card-bg); border-radius:var(--tp-radius);
	padding:18px 22px 16px; box-shadow:var(--tp-shadow);
	border-left:4px solid var(--tp-accent);
	transition:box-shadow .2s ease,transform .2s ease;
	min-width:0; position:relative;
}
.timeline-pan.layout-alternating .tp-item:nth-child(even) .tp-card,
.timeline-pan.layout-right .tp-item .tp-card { border-left:none; border-right:4px solid var(--tp-accent); text-align:right; }
.timeline-pan .tp-item:hover .tp-card { box-shadow:0 6px 28px rgba(26,42,58,.14); transform:translateY(-2px); }

/* ── Arrows ── */
.timeline-pan.layout-alternating .tp-item:nth-child(odd) .tp-card::before,
.timeline-pan.layout-left .tp-item .tp-card::before {
	content:''; position:absolute; top:18px; left:-10px;
	border:10px solid transparent; border-right-color:var(--tp-card-bg); border-left:0;
}
.timeline-pan.layout-alternating .tp-item:nth-child(even) .tp-card::before,
.timeline-pan.layout-right .tp-item .tp-card::before {
	content:''; position:absolute; top:18px; right:-10px;
	border:10px solid transparent; border-left-color:var(--tp-card-bg); border-right:0;
}

/* ── Meta ── */
.timeline-pan .tp-card-meta { margin-bottom:12px; }
.timeline-pan .tp-year { display:inline-block; background:var(--tp-navy); color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:4px; margin-bottom:7px; line-height:1.6; }
.timeline-pan .tp-title { font-size:1.05rem; font-weight:700; color:var(--tp-navy); margin:0; line-height:1.3; }

/* ── Content ── */
.timeline-pan .tp-card-content { font-size:.9rem; color:#3a4a5a; line-height:1.65; }
.timeline-pan .tp-card-content > * + * { margin-top:.75em; }
.timeline-pan .tp-desc { margin:0; }
.timeline-pan .tp-desc p { margin:.5em 0 0; }

/* ── Image ── */
.timeline-pan .tp-image { margin-top:10px; }
.timeline-pan .tp-image img { max-width:100%; border-radius:8px; height:auto; display:block; transition:opacity .2s; }
.timeline-pan .tp-image a:hover img { opacity:.9; }

/* ── PDFs ── */
.timeline-pan .tp-pdfs { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.timeline-pan .tp-pdf-link {
	display:inline-flex; align-items:center; gap:8px;
	background:#f4f6f8; border:1px solid #e0e5ea; border-radius:8px;
	padding:8px 12px; font-size:.82rem; color:var(--tp-navy);
	text-decoration:none; transition:.15s;
}
.timeline-pan .tp-pdf-link:hover { background:#e8ecf0; border-color:#bcc5ce; }
.timeline-pan .tp-pdf-icon { font-size:18px; flex-shrink:0; }
.timeline-pan .tp-pdf-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline-pan .tp-pdf-dl { color:#999; font-size:.78rem; flex-shrink:0; }

/* ── Gallery ── */
.timeline-pan .tp-gallery { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.timeline-pan .tp-gallery-thumb { display:block; flex-shrink:0; border-radius:6px; overflow:hidden; transition:transform .2s,box-shadow .2s; }
.timeline-pan .tp-gallery-thumb:hover { transform:scale(1.04); box-shadow:0 4px 16px rgba(0,0,0,.18); }
.timeline-pan .tp-gallery-thumb img { width:80px; height:80px; object-fit:cover; display:block; }

/* ── Right-side text alignment fix ── */
.timeline-pan.layout-alternating .tp-item:nth-child(even) .tp-card-content,
.timeline-pan.layout-right .tp-item .tp-card-content { text-align:left; }

/* ── Responsive ── */
@media (max-width:640px) {
	.timeline-pan::before { left:calc(var(--tp-marker-w)/2); transform:none; }
	.timeline-pan .tp-item,
	.timeline-pan.layout-alternating .tp-item:nth-child(even) { flex-direction:row !important; }
	.timeline-pan .tp-card,
	.timeline-pan.layout-alternating .tp-item:nth-child(even) .tp-card,
	.timeline-pan.layout-right .tp-item .tp-card {
		border-right:none !important; border-left:4px solid var(--tp-accent) !important; text-align:left !important;
	}
	.timeline-pan.layout-alternating .tp-item:nth-child(even) .tp-card::before,
	.timeline-pan.layout-right .tp-item .tp-card::before {
		right:auto !important; left:-10px !important;
		border-left:0 !important; border-right-color:var(--tp-card-bg) !important;
	}
	.timeline-pan .tp-gallery-thumb img { width:64px; height:64px; }
}

@media (prefers-reduced-motion:reduce) {
	.timeline-pan .tp-icon, .timeline-pan .tp-card,
	.timeline-pan .tp-gallery-thumb, .timeline-pan .tp-image img { transition:none; }
}