/**
 * TCW Timeline — self-contained, Elementor-safe styles.
 *
 * Scoped entirely under .tcw-timeline so nothing leaks into the theme.
 * (The reference used a global `*{}` reset — that is deliberately scoped
 * here to `.tcw-timeline *` so it can't touch the rest of the page.)
 *
 * Palette is exposed as CSS custom properties on .tcw-timeline so the
 * Elementor Style controls can override individual tokens via selectors.
 */

/* ============ SCOPE + TOKENS ============ */
.tcw-timeline{
	--tcwtl-accent:#c0392b;   /* dot + year color */
	--tcwtl-text:#444444;     /* body text */
	--tcwtl-card-bg:#ffffff;  /* card background */
	--tcwtl-line:#d4b8b8;     /* center spine */
	--tcwtl-media-h:140px;    /* image / icon area height */
	--tcwtl-icon-size:52px;   /* icon glyph size */
}
.tcw-timeline *,
.tcw-timeline *::before,
.tcw-timeline *::after{ box-sizing:border-box; }

/* ============ WRAP + SPINE ============ */
.tcw-timeline .tcwtl-wrap{
	position:relative;
	padding:40px 16px;
	max-width:820px;
	margin:0 auto;
}
.tcw-timeline .tcwtl-wrap::before{
	content:'';
	position:absolute; left:50%; top:0; bottom:0;
	width:1px;
	background:linear-gradient(to bottom, transparent, var(--tcwtl-line) 60px, var(--tcwtl-line) calc(100% - 60px), transparent);
	transform:translateX(-50%);
}

/* ============ ROWS ============ */
.tcw-timeline .tcwtl-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	row-gap:0;
	column-gap:48px;
	position:relative;
	margin-bottom:32px;
}
.tcw-timeline .tcwtl-row.tcwtl-right .tcwtl-card{ grid-column:2; grid-row:1; }
.tcw-timeline .tcwtl-row.tcwtl-left  .tcwtl-card{ grid-column:1; grid-row:1; }

/* ============ DOT + CONNECTOR ============ */
.tcw-timeline .tcwtl-dot{
	position:absolute; left:50%; top:28px;
	width:9px; height:9px; border-radius:50%;
	background:var(--tcwtl-accent);
	border:2px solid #fff;
	box-shadow:0 0 0 1px var(--tcwtl-accent);
	transform:translateX(-50%);
	z-index:2;
}
.tcw-timeline .tcwtl-row.tcwtl-right .tcwtl-dot::after,
.tcw-timeline .tcwtl-row.tcwtl-left  .tcwtl-dot::after{
	content:''; position:absolute; top:3px; height:1px;
	background:#ddd; width:20px;
}
.tcw-timeline .tcwtl-row.tcwtl-right .tcwtl-dot::after{ left:7px; }
.tcw-timeline .tcwtl-row.tcwtl-left  .tcwtl-dot::after{ right:7px; }

/* ============ CARD ============ */
.tcw-timeline .tcwtl-card{
	background:var(--tcwtl-card-bg);
	border:0.5px solid rgba(0,0,0,0.1);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 2px 12px rgba(0,0,0,0.06);
	transition:box-shadow .2s;
}
.tcw-timeline .tcwtl-card:hover{ box-shadow:0 4px 20px rgba(0,0,0,0.11); }

/* image OR icon media area — both share the same height */
.tcw-timeline .tcwtl-card img{
	width:100%;
	height:var(--tcwtl-media-h);
	object-fit:cover;
	display:block;
}
.tcw-timeline .tcwtl-media{
	width:100%;
	height:var(--tcwtl-media-h);
	display:flex; align-items:center; justify-content:center;
	background:rgba(192,57,43,0.06);
}
.tcw-timeline .tcwtl-media svg{
	width:var(--tcwtl-icon-size); height:var(--tcwtl-icon-size);
	fill:var(--tcwtl-accent); color:var(--tcwtl-accent);
}
.tcw-timeline .tcwtl-media i{
	font-size:var(--tcwtl-icon-size);
	line-height:1;
	color:var(--tcwtl-accent);
}

.tcw-timeline .tcwtl-card-body{ padding:12px 14px 14px; }
.tcw-timeline .tcwtl-year{
	font-size:20px; font-weight:700; letter-spacing:.1em;
	text-transform:uppercase; color:var(--tcwtl-accent);
	margin:0 0 5px;
}
.tcw-timeline .tcwtl-text{
	font-size:18px; line-height:1.2; color:var(--tcwtl-text);
	margin:0;
}

/* ============ RESPONSIVE ============ */
/* Breakpoint matches Elementor's default "Mobile" (<=767px) so the layout
   never gets stuck in the cramped two-column desktop grid on phones/tablets. */
@media (max-width:767px){
	.tcw-timeline .tcwtl-wrap{ padding:28px 12px; }
	/* spine hugs the far left */
	.tcw-timeline .tcwtl-wrap::before{ left:9px; transform:none; }
	/* single, full-width column with just enough left room for the spine */
	.tcw-timeline .tcwtl-row{ grid-template-columns:1fr; column-gap:0; padding-left:34px; }
	.tcw-timeline .tcwtl-row.tcwtl-right .tcwtl-card,
	.tcw-timeline .tcwtl-row.tcwtl-left  .tcwtl-card{ grid-column:1; grid-row:1; }
	.tcw-timeline .tcwtl-dot{ left:9px; top:22px; transform:none; }
	.tcw-timeline .tcwtl-row.tcwtl-right .tcwtl-dot::after,
	.tcw-timeline .tcwtl-row.tcwtl-left  .tcwtl-dot::after{ left:6px; right:auto; width:18px; }
}