/**
 * Ananyoo Accessible Events — [ananevt_timeline] (v1.5.0).
 * Five design presets: spine | alternate | compact | journey | rows.
 * Colours read from custom properties so Settings (or a theme) can restyle
 * everything without touching this file. Defaults are WCAG 2.2 AA on white.
 * No animations; focus rings on every interactive element.
 *
 * @author Shivaji Mitra (M/S. Anblik)
 */

.antl {
	--antl-line: #534ab7;
	--antl-line-soft: #e3ddf7;
	--antl-year-bg: #0e1b36;
	--antl-year-text: #ffffff;
	--antl-date-bg: #f4f2fd;
	--antl-date-text: #3b2e91;
	--antl-card-bg: #ffffff;
	--antl-card-border: rgba(14, 27, 54, 0.14);
	--antl-title: #0e1b36;
	--antl-text: #3c4a63;
	--antl-accent-bg: #534ab7;
	--antl-accent-text: #ffffff;
	margin: 1.5rem 0;
}
.antl__list { list-style: none; margin: 0; padding: 0; position: relative; }
.antl__yearrow { margin: 0 0 1rem; }
.antl__year {
	display: inline-block; background: var(--antl-year-bg); color: var(--antl-year-text);
	font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em;
	padding: 6px 16px; border-radius: 999px; position: relative; z-index: 1;
}
.antl__meta { margin: 0 0 0.45rem; }
.antl__date {
	display: inline-block; background: var(--antl-date-bg); color: var(--antl-date-text);
	font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 4px 11px; border-radius: 999px;
}
.antl__src {
	display: inline-block; border: 1.4px solid var(--antl-date-text); color: var(--antl-date-text);
	font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}
.antl__title { margin: 0.1rem 0 0.3rem; font-size: 1.05rem; color: var(--antl-title); line-height: 1.3; }
.antl__title a { color: inherit; text-decoration: none; }
.antl__title a:hover, .antl__title a:focus-visible { text-decoration: underline; }
.antl__title a:focus-visible { outline: 2.6px solid var(--antl-line); outline-offset: 3px; border-radius: 4px; }
.antl__excerpt { margin: 0 0 0.55rem; font-size: 0.9rem; color: var(--antl-text); }
.antl__more {
	display: inline-block; background: var(--antl-accent-bg); color: var(--antl-accent-text);
	font-weight: 800; font-size: 0.8rem; padding: 7px 16px; border-radius: 999px; text-decoration: none;
}
.antl__more:hover { text-decoration: underline; }
.antl__more:focus-visible { outline: 2.6px solid var(--antl-title); outline-offset: 2px; }
.antl__media { margin: 0 0 0.6rem; }
.antl__media img.antl__img, .antl__media img {
	display: block; width: 100%; height: auto; border-radius: 10px; aspect-ratio: 16 / 7; object-fit: cover;
}
.antl__entry--card {
	background: var(--antl-card-bg); border: 1.5px solid var(--antl-card-border);
	border-radius: 14px; padding: 16px 18px;
	box-shadow: 0 6px 18px -14px rgba(14, 27, 54, 0.5);
}
.antl__loadwrap { text-align: center; margin: 1.4rem 0 0; }
.antl__load {
	display: inline-block; background: var(--antl-accent-bg); color: var(--antl-accent-text);
	font-weight: 800; font-size: 0.9rem; padding: 11px 30px; border-radius: 999px; text-decoration: none;
}
.antl__load:hover { text-decoration: underline; }
.antl__load:focus-visible { outline: 2.6px solid var(--antl-title); outline-offset: 2px; }

/* ---------- Design: SPINE (default) — one-side cards ---------- */
.antl--spine .antl__list { padding-left: 30px; }
.antl--spine .antl__list::before {
	content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
	width: 3px; border-radius: 3px; background: var(--antl-line);
}
.antl--spine .antl__item { position: relative; margin: 0 0 18px; }
.antl--spine .antl__yearrow { position: relative; margin: 26px 0 16px; }
.antl--spine .antl__yearrow:first-child { margin-top: 0; }
.antl--spine .antl__item::before {
	content: ""; position: absolute; left: -27px; top: 14px; width: 13px; height: 13px;
	border-radius: 50%; background: var(--antl-line);
	border: 3px solid var(--antl-card-bg); box-shadow: 0 0 0 2px var(--antl-line);
}
.antl--spine .antl__year { margin-left: -30px; }

/* ---------- Design: ALTERNATE — cards left/right of a centre line ---------- */
.antl--alternate .antl__list { padding: 6px 0; }
.antl--alternate .antl__list::before {
	content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px;
	width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--antl-line);
}
.antl--alternate .antl__item { position: relative; width: calc(50% - 34px); margin: 0 0 20px; }
/* v1.5.3 — the sides come from explicit odd/even classes set per ENTRY in PHP,
   so the left-right-left rhythm is never disturbed by the year pills between
   entries (nth-of-type used to count those too, pushing runs to one side). */
.antl--alternate .antl__item--odd { left: 0; }
.antl--alternate .antl__item--even { left: calc(50% + 34px); }
.antl--alternate .antl__item::before {
	content: ""; position: absolute; top: 16px; width: 13px; height: 13px; border-radius: 50%;
	background: var(--antl-line); border: 3px solid var(--antl-card-bg); box-shadow: 0 0 0 2px var(--antl-line);
}
.antl--alternate .antl__item--odd::before { right: -42px; }
.antl--alternate .antl__item--even::before { left: -42px; }
.antl--alternate .antl__yearrow { text-align: center; margin: 6px 0 22px; }
@media (max-width: 680px) {
	.antl--alternate .antl__list::before { left: 9px; margin: 0; }
	.antl--alternate .antl__item, .antl--alternate .antl__item--even { width: auto; left: 0; margin-left: 30px; }
	.antl--alternate .antl__item--odd::before,
	.antl--alternate .antl__item--even::before { left: -27px; right: auto; }
	.antl--alternate .antl__yearrow { text-align: left; }
}

/* ---------- Design: COMPACT — dates left, slim rows ---------- */
.antl--compact .antl__item { display: grid; grid-template-columns: 120px 26px 1fr; gap: 0 14px; position: relative; }
.antl--compact .antl__cdate {
	text-align: right; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em;
	color: var(--antl-date-text); padding-top: 4px; text-transform: uppercase;
}
.antl--compact .antl__rail { position: relative; }
.antl--compact .antl__rail::before {
	content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px;
	margin-left: -1.5px; background: var(--antl-line-soft);
}
.antl--compact .antl__rail::after {
	content: ""; position: absolute; left: 50%; top: 8px; width: 11px; height: 11px; margin-left: -5.5px;
	border-radius: 50%; background: var(--antl-line);
	border: 2.6px solid var(--antl-card-bg); box-shadow: 0 0 0 2px var(--antl-line);
}
.antl--compact .antl__body { padding: 0 0 22px; display: flex; gap: 14px; align-items: flex-start; }
.antl--compact .antl__media--thumb { flex: 0 0 92px; margin: 0; }
.antl--compact .antl__media--thumb img { aspect-ratio: 1 / 1; border-radius: 10px; }
.antl--compact .antl__title { font-size: 1rem; margin: 0 0 0.2rem; }
.antl--compact .antl__excerpt { margin-bottom: 0.4rem; font-size: 0.88rem; }
.antl--compact .antl__meta:empty { display: none; }
.antl--compact .antl__yearrow { margin: 4px 0 14px; }
@media (max-width: 560px) {
	.antl--compact .antl__item { grid-template-columns: 84px 22px 1fr; }
	.antl--compact .antl__cdate { font-size: 0.7rem; }
	.antl--compact .antl__media--thumb { flex-basis: 64px; }
}

/* ---------- Design: JOURNEY — big photos, date pill on the photo ---------- */
.antl--journey .antl__list { padding-left: 34px; }
.antl--journey .antl__list::before {
	content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
	width: 4px; border-radius: 4px; background: var(--antl-line);
}
.antl--journey .antl__item { position: relative; margin: 0 0 30px; max-width: 560px; }
.antl--journey .antl__item::before {
	content: ""; position: absolute; left: -29px; top: 22px; width: 15px; height: 15px; border-radius: 50%;
	background: var(--antl-line); border: 3.5px solid var(--antl-card-bg); box-shadow: 0 0 0 2.5px var(--antl-line);
}
.antl--journey .antl__yearrow { position: relative; margin: 8px 0 22px; }
.antl--journey .antl__year { margin-left: -34px; }
.antl--journey .antl__media { position: relative; margin: 0 0 0.7rem; }
.antl--journey .antl__media img {
	aspect-ratio: 16 / 8; border-radius: 16px;
	box-shadow: 0 14px 30px -18px rgba(14, 27, 54, 0.55);
}
.antl--journey .antl__media .antl__date {
	position: absolute; left: 14px; top: 14px; background: var(--antl-year-bg); color: var(--antl-year-text);
	font-size: 0.74rem; padding: 6px 13px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.antl--journey .antl__title { font-size: 1.15rem; }

/* ---------- Design: ROWS — magazine split cards ---------- */
.antl--rows .antl__list { padding-left: 30px; }
.antl--rows .antl__list::before {
	content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
	width: 3px; border-radius: 3px; background: var(--antl-line);
}
.antl--rows .antl__item { position: relative; margin: 0 0 22px; }
.antl--rows .antl__item::before {
	content: ""; position: absolute; left: -27px; top: 26px; width: 13px; height: 13px; border-radius: 50%;
	background: var(--antl-line); border: 3px solid var(--antl-card-bg); box-shadow: 0 0 0 2px var(--antl-line);
}
.antl--rows .antl__yearrow { position: relative; margin: 6px 0 18px; }
.antl--rows .antl__year { margin-left: -30px; }
.antl--rows .antl__entry--card { display: grid; grid-template-columns: 250px 1fr; gap: 0; align-items: center; overflow: hidden; padding: 0; border-radius: 16px; }
/* v1.5.1 — the photo is a tidy fixed-ratio thumbnail beside the story, never
   stretched to the card height (the old height:100% could run away inside the
   grid and blur any image into a tall smear). */
.antl--rows .antl__entry--card .antl__media { margin: 0; padding: 14px; }
.antl--rows .antl__entry--card .antl__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.antl--rows .antl__entry--card .antl__body { padding: 16px 18px; }
.antl--rows .antl__item--even .antl__entry--card { grid-template-columns: 1fr 250px; }
.antl--rows .antl__item--even .antl__entry--card .antl__media { order: 2; }
.antl--rows.antl--noimg .antl__entry--card, .antl--rows .antl__entry--nomedia { grid-template-columns: 1fr; }
@media (max-width: 640px) {
	.antl--rows .antl__entry--card { grid-template-columns: 1fr !important; }
	.antl--rows .antl__entry--card .antl__media { order: 0 !important; padding-bottom: 0; }
	.antl--rows .antl__entry--card .antl__media img { aspect-ratio: 16 / 8; }
}

/* Cards used outside their photo variants keep normal padding. */
.antl--spine .antl__entry--card, .antl--alternate .antl__entry--card { padding: 16px 18px; }

/* Windows High Contrast / forced colors */
@media (forced-colors: active) {
	.antl__list::before, .antl__item::before, .antl__rail::before, .antl__rail::after { background: CanvasText; box-shadow: none; }
	.antl__year, .antl__date, .antl__src, .antl__more, .antl__load { border: 1px solid CanvasText; }
}