/*
 * Timeline (inc/sections/timeline.php), after the reference drawing in Paula's round 2 brief.
 * Rows run in date order: form, dialogues, short films, verdict.
 * Marker positions are CSS variables computed from the real dates (inc/timeline-axis.php):
 * form deadline at 0, contest verdict at 70 %, the last 30 % is room for the labels.
 */

.timeline { margin-top: var(--wp--preset--spacing--50) !important; padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.timeline__title { margin-bottom: 1.5rem; }

.tl-row {
	--pos: 0%;
	display: grid; grid-template-columns: minmax(11rem, 30%) 1fr; align-items: center; gap: 1rem;
	min-height: 64px; border-top: 1px solid var(--wp--preset--color--arena);
}
.tl-row > * { margin: 0 !important; }
.tl-row--shorts { --pos: var(--tl-shorts, 33%); }
.tl-row--verdict { --pos: var(--tl-verdict, 70%); }

.tl-label { font-weight: 600; }
.tl-row--form .tl-label { font-weight: 800; }

.tl-date {
	position: relative; align-self: stretch; display: flex; align-items: center;
	padding-left: calc(var(--pos) + 1.75rem);
	/* Weekly grid lines, like the reference drawing. */
	background: repeating-linear-gradient(to right, var(--wp--preset--color--arena) 0 1px, transparent 1px var(--tl-week, 12.9%));
}
.tl-date::before, .tl-date::after {
	content: ""; position: absolute; left: var(--pos); top: 50%; width: 16px; height: 16px;
	transform: translate(-1px, -50%) rotate(45deg); border-radius: 2px;
	background: var(--wp--preset--color--crema); border: 2px solid #b8ab9b;
}
.tl-date::after { display: none; }
/* The key date: mustard, bold. */
.tl-row--form .tl-date { font-weight: 800; }
.tl-row--form .tl-date::before { background: var(--wp--preset--color--oro); border-color: #c99a00; }

/* Dialogues before their dates are set: a soft bar over the first half of November. */
.tl-row--dialogs .tl-date { padding-left: var(--tl-q1, 16.6%); align-items: flex-start; padding-top: 0.6rem; color: var(--wp--preset--color--ciruela); font-weight: 600; }
.tl-row--dialogs .tl-date::before { left: var(--tl-q1, 16.6%); width: calc(var(--tl-q2, 42.4%) - var(--tl-q1, 16.6%)); top: auto; bottom: 12px; height: 10px; transform: none; border: 0; border-radius: 999px; background: rgb(78 34 102 / 0.28); }

/* Dialogues once both dates are set (body.dialogs-confirmed): one plum marker per dialogue. */
.dialogs-confirmed .tl-row--dialogs .tl-date { padding-left: calc(var(--tl-d2) + 1.75rem); align-items: center; padding-top: 0; }
.dialogs-confirmed .tl-row--dialogs .tl-date::before,
.dialogs-confirmed .tl-row--dialogs .tl-date::after {
	display: block; top: 50%; bottom: auto; width: 16px; height: 16px; border-radius: 2px;
	transform: translate(-1px, -50%) rotate(45deg); background: var(--wp--preset--color--ciruela); border: 2px solid var(--wp--preset--color--ciruela);
}
.dialogs-confirmed .tl-row--dialogs .tl-date::before { left: var(--tl-d1); }
.dialogs-confirmed .tl-row--dialogs .tl-date::after { left: var(--tl-d2); }

/* Phones: a plain vertical list, every marker at the start. */
@media (max-width: 700px) {
	.tl-row { --pos: 0% !important; grid-template-columns: 1fr; gap: 0.25rem; padding-block: 0.75rem; }
	.tl-date { background: none; padding-left: 1.75rem; }
	.tl-row--dialogs .tl-date { padding-left: 1.75rem; padding-top: 0; padding-bottom: 1rem; }
	.tl-row--dialogs .tl-date::before { left: 0; width: 60%; bottom: 0; height: 6px; }
	.dialogs-confirmed .tl-row--dialogs .tl-date { padding-left: 1.75rem; padding-bottom: 0; }
	.dialogs-confirmed .tl-row--dialogs .tl-date::before { left: 0; }
	.dialogs-confirmed .tl-row--dialogs .tl-date::after { display: none; }
}