/**
 * VM Daily Programme Block
 *
 * Horizontal timeline. Scroll-triggered reveal:
 *   1. Track line grows left → right
 *   2. Dots pop in sequentially
 *   3. Text fades up, staggered per item
 *
 * The `.is-revealed` class is added by daily-programme.js when the
 * block enters the viewport. Each day uses a `--delay` custom property
 * (set inline in PHP) to stagger its animation.
 *
 * @package club-garrigue
 * @since 1.0.0
 */

/* ─── Block wrapper ─────────────────────────────────────────────── */

.vm-dp-block {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--large);
	/* overflow: hidden; */
	margin-top: 0 !important;
	padding: clamp(40px, 10vw, 140px) 30px !important;
	width: 100vw;
	max-width: unset !important;
	margin-top: 100px !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.vm-dp-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* ─── Header ─────────────────────────────────────────────────────── */

.vm-dp-header {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 52px;
}

.vm-dp-title {
	font-family: var(--font-serif);
	/* font-size: var(--wp--preset--font-size--huge); */
	line-height: 1.15;
	color: var(--ink);
	margin: 0;
}

.vm-dp-title em {
	font-style: italic;
	color: var(--wp--preset--color--accent);
}

/* ─── Timeline wrapper ───────────────────────────────────────────── */

.vm-dp-timeline {
	position: relative;
	width: 100%;
}

/* ─── Track line ─────────────────────────────────────────────────── */

.vm-dp-track {
	position: absolute;
	top: 7px; /* vertically centred on the dot (dot is 14px) */
	left: 0;
	right: 0;
	height: 1px;
	background-color: var(--wp--preset--color--silver-light);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.8s ease;
}

.vm-dp-block.is-revealed .vm-dp-track {
	transform: scaleX(1);
}

/* ─── Days list ──────────────────────────────────────────────────── */

.vm-dp-days {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 20px;
}

/* ─── Individual day ─────────────────────────────────────────────── */

.vm-dp-day {
	flex: 1;
	display: flex;
	flex-direction: column;

	/* Hidden state */
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity  0.45s ease calc(var(--delay, 0ms) + 400ms),
		transform 0.45s ease calc(var(--delay, 0ms) + 400ms);
}

/* The 400ms base delay lets the track line draw first */
.vm-dp-block.is-revealed .vm-dp-day {
	opacity: 1;
	transform: translateY(0);
}

/* ─── Dot ────────────────────────────────────────────────────────── */

.vm-dp-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	flex-shrink: 0;

	transform: scale(0);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
	            calc(var(--delay, 0ms) + 650ms); /* dots pop after text starts */
	
	margin-bottom: 22px;
}

.vm-dp-block.is-revealed .vm-dp-dot {
	transform: scale(1);
}

/* Hover: dot pulses */
.vm-dp-day:hover .vm-dp-dot {
	transform: scale(1.35);
	background-color: var(--wp--preset--color--accent-dark);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
	            background-color 0.2s ease;
}

/* ─── Day label ──────────────────────────────────────────────────── */

.vm-dp-day-label {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	transition: color 0.2s ease;
	margin-bottom: 10px;
}

.vm-dp-day:hover .vm-dp-day-label {
	color: var(--wp--preset--color--accent-dark);
}

/* ─── Day description ────────────────────────────────────────────── */

.vm-dp-day-desc {
	font-family: var(--font-sans);
	color: var(--wp--preset--color--stone);
	margin: 0;
	transition: color 0.2s ease;

    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
	padding-right: 0;
}

.vm-dp-day:hover .vm-dp-day-desc {
	color: var(--ink);
}

/* ─── Editor placeholder ─────────────────────────────────────────── */

.vm-dp-placeholder {
	padding: 1rem;
	background: #f9f9f9;
	border: 1px dashed #ccc;
	color: #888;
	font-style: italic;
	border-radius: 4px;
}

/* ─── Responsive — vertical stack below 600px ────────────────────── */

@container (max-width: 600px) {
	.vm-dp-days {
		flex-direction: column;
		gap: var(--wp--preset--spacing--medium);
	}

	.vm-dp-track {
		top: 0;
		left: 7px;
		right: auto;
		width: 1px;
		height: 100%;
		transform-origin: top center;
		transform: scaleY(0);
	}

	.vm-dp-block.is-revealed .vm-dp-track {
		transform: scaleY(1);
	}

	.vm-dp-day {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--medium);
	}

	.vm-dp-dot {
		margin-top: 2px;
	}
}

/* ─── Reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.vm-dp-track,
	.vm-dp-day,
	.vm-dp-dot {
		transition: none;
		transform: none;
		opacity: 1;
	}
}