/* MOSE — "Encuentros" events page. Scoped under .mose-enc.
   Identity: a trail-race "timing sheet". Archivo for the headline + event
   names; Space Mono (the brand's technical face) for the whole data layer —
   date bibs, type pills, CTAs, the month year-stamp. Brand pink as the live
   accent (filled pills + the bib filling on hover). Tokens from :root. */

.mose-enc {
	--enc-mono: "Space Mono", ui-monospace, monospace;
	--enc-line: rgba( 26, 26, 26, 0.14 );
	background: var(--mose-media-bg, #f3f3f3);
	font-family: var(--mose-font, "Archivo", sans-serif);
	color: var(--mose-dark, #1a1a1a);
	padding: 56px 32px 96px;
	min-height: 70vh;
}

.mose-enc__wrap {
	max-width: 1140px;
	margin: 0 auto;
}

/* ---- hero ---- */
.mose-enc__hero {
	position: relative;
	text-align: left;
	margin-bottom: clamp( 64px, 9vh, 112px );
}
.mose-enc__hero-text {
	position: relative;
	z-index: 1;
	max-width: 60%;
}
.mose-enc__band { margin-bottom: 16px; } /* tight gap: title → description */
/* hero image: out of flow, so it never inflates the hero height (events stay
   tight below). It overlaps to the right, shown whole (uncropped), the white
   field multiplying into the grey paper and the left edge fading toward copy. */
.mose-enc__hero-img {
	position: absolute;
	right: 0;
	/* sized off the title + description block but scaled up; vertically
	   centred on the hero so the extra height grows into the whitespace
	   above/below the copy without bleeding into the events list. */
	top: 50%;
	transform: translateY( -50% );
	height: clamp( 240px, 30vw, 340px );
	width: auto;
	max-width: 52%;
	z-index: 0;
	pointer-events: none;
	mix-blend-mode: multiply;
	-webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 24% );
	mask-image: linear-gradient( 90deg, transparent 0%, #000 24% );
}
.mose-enc__title {
	position: relative;
	z-index: 1;
	font-weight: 800;
	font-size: clamp( 36px, 5.4vw, 62px );
	line-height: 1;
	letter-spacing: -0.01em; /* caps tracking, matches the PDP product title */
	text-transform: uppercase;
	margin: 0;
	color: var(--mose-dark, #1a1a1a);
}
.mose-enc__intro { max-width: 820px; }
.mose-enc__intro p {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.6;
	color: #2c2c2c;
}
.mose-enc__intro p:last-child { margin-bottom: 0; }
.mose-enc__intro strong { font-weight: 700; color: var(--mose-pink, #fc0075); }

/* ---- month groups ---- */
.mose-enc__month { margin-bottom: 28px; }

.mose-enc__mtitle {
	margin: 0 0 2px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--mose-dark, #1a1a1a);
	font-weight: 700;
	font-size: clamp( 22px, 3vw, 30px );
	line-height: 1.15;
}
.mose-enc__mname {
	letter-spacing: -0.01em;
	color: var(--mose-dark, #1a1a1a);
}
.mose-enc__myr {
	font-family: var(--enc-mono);
	font-size: 0.4em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--mose-pink, #fc0075);
	vertical-align: super;
	margin-left: 4px;
}

.mose-enc__rows { display: flex; flex-direction: column; }

/* ---- event row ---- */
.mose-enc__row {
	display: grid;
	grid-template-columns: minmax( 104px, auto ) 1fr auto;
	align-items: center;
	gap: 30px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--enc-line);
	text-decoration: none;
	color: inherit;
}

/* date "bib" — the signature element */
.mose-enc__date { display: flex; }
.mose-enc__bib {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--enc-mono);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.01em;
	color: var(--mose-dark, #1a1a1a);
	border: 1.5px solid var(--mose-dark, #1a1a1a);
	border-radius: 0; /* square — matches the brand's sharp corners */
	padding: 9px 13px;
	white-space: nowrap;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
a.mose-enc__row:hover .mose-enc__bib {
	border-color: var(--mose-pink, #fc0075);
	color: #fff;
	/* solid pink base keeps the number legible; a faint white diagonal sheen
	   scrolls across it — same conveyor motion as the product "cat bar". */
	background-color: var(--mose-pink, #fc0075);
	background-image: linear-gradient( 45deg,
		rgba( 255, 255, 255, 0.26 ) 25%, transparent 25%, transparent 50%,
		rgba( 255, 255, 255, 0.26 ) 50%, rgba( 255, 255, 255, 0.26 ) 75%, transparent 75% );
	background-size: 16px 16px;
	animation: mose-enc-belt 0.55s linear infinite;
}
@keyframes mose-enc-belt { to { background-position: 16px 0; } }

/* event name */
.mose-enc__name {
	font-weight: 700;
	font-size: clamp( 15px, 1.5vw, 18px );
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--mose-dark, #1a1a1a);
	line-height: 1.3;
}
.mose-enc__place {
	font-weight: 400;
	color: #9a9a9a;
}

/* right side: CTA + filled tag */
.mose-enc__meta {
	display: flex;
	align-items: center;
	gap: 22px;
	justify-content: flex-end;
	white-space: nowrap;
}
.mose-enc__cta {
	font-family: var(--enc-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mose-dark, #1a1a1a);
	transition: color 0.16s ease;
}
a.mose-enc__row:hover .mose-enc__cta { color: var(--mose-pink, #fc0075); }
.mose-enc__cta--soon { color: #a6a6a6; }

.mose-enc__tag {
	font-family: var(--enc-mono);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 0; /* square pill — matches the brand's sharp corners */
	color: #fff;
	border: 1.5px solid transparent;
}
.mose-enc__tag--carrera   { background: var(--mose-pink, #fc0075); }
.mose-enc__tag--socialrun { background: var(--mose-dark, #1a1a1a); }
.mose-enc__tag--evento    { background: #9a9a9a; }

.mose-enc__empty {
	font-family: var(--enc-mono);
	color: #777;
	font-size: 14px;
	letter-spacing: 0.03em;
	padding: 24px 0;
}

/* ---- mobile ---- */
@media ( max-width: 680px ) {
	.mose-enc { padding: 40px 20px 72px; }
	.mose-enc__hero { margin-bottom: 24px; }
	.mose-enc__hero-text {
		position: relative;
		z-index: 1;
		max-width: 100%;
	}
	/* phone: image sits faintly BEHIND the copy as a watermark, so it adds no
	   height and the events ride up. */
	.mose-enc__hero-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate( -50%, -50% );
		width: 96%;
		max-width: 96%;
		height: auto;
		margin: 0;
		z-index: 0;
		opacity: 0.2;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.mose-enc__row {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"bib name"
			"bib meta";
		column-gap: 18px;
		row-gap: 12px;
		align-items: center;
		padding: 18px 0;
	}
	.mose-enc__date { grid-area: bib; align-self: center; }
	.mose-enc__name { grid-area: name; }
	.mose-enc__meta {
		grid-area: meta;
		justify-content: flex-start;
		gap: 16px;
	}
	.mose-enc__bib { font-size: 15px; padding: 8px 10px; }
}

/* respect reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.mose-enc__bib, .mose-enc__cta { transition: none; }
	a.mose-enc__row:hover .mose-enc__bib { animation: none; background-image: none; }
}