@layer components {
	/* The events rail is a floating strip inside the container.
	   --rail-offset controls the gap to the hero floor; negative overlaps. */
	.rail-wrap { position: relative; z-index: 2; margin-top: var(--rail-offset); background: var(--gray-section); }
	.rail { box-shadow: var(--shadow-float); background: var(--white); }

	.rail__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding-inline: var(--sp-4) var(--sp-2);
		background: var(--black-panel);
		color: var(--white-text);
	}
	.rail__title {
		position: relative;
		font-size: var(--fs-small);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-ui);
		text-transform: uppercase;
		line-height: 1;
		padding-top: 2px;
	}
	.rail__title::after { content: ""; position: absolute; left: 0; bottom: -14px; width: 100%; height: var(--bw-accent); background: var(--red); }
	.rail__controls { display: flex; align-items: center; gap: var(--sp-3); }
	.rail__all {
		display: inline-flex; align-items: center; gap: 6px;
		font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase;
		color: var(--white-text);
	}
	.rail__all .icon { width: 1.2em; height: 1.2em; }
	.rail__btn {
		display: none;
		width: 30px; height: 30px;
		place-items: center;
		border: var(--bw-hair) solid var(--on-dark-faint);
		color: var(--white-text);
		transition: background-color var(--dur) var(--ease);
	}
	.rail__btn:hover { background: var(--on-dark-line); }
	.rail__btn:disabled { opacity: 0.3; cursor: default; }
	.rail__btn .icon { width: 16px; height: 16px; }
	.rail__btn + .rail__btn { margin-left: -1px; }

	.rail__track {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.rail__track::-webkit-scrollbar { display: none; }

	.game-card {
		position: relative;
		flex: 0 0 76%;
		scroll-snap-align: start;
		min-width: 0;
	}
	/* Slanted divider (design DNA) */
	.game-card + .game-card::before {
		content: "";
		position: absolute;
		top: 0; bottom: 0; left: 0;
		width: var(--bw-hair);
		background: var(--gray-line);
		transform: skewX(-12deg);
		transform-origin: top;
	}
	.game-card__link {
		display: flex;
		align-items: center;
		gap: 14px;
		height: 118px;
		padding: var(--sp-4) var(--sp-5);
		color: var(--gray-ink);
		transition: background-color var(--dur) var(--ease);
	}
	.game-card__link:hover { background: #fff; }
	.game-card__logo { flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
	.game-card__logo-img { width: 100%; height: 100%; object-fit: contain; }
	.game-card__logo-empty { width: 40px; height: 40px; border: var(--bw-hair) solid var(--gray-line); }
	.game-card__body { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; min-width: 0; }
	.game-card__date { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
	.game-card__opponent { font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: var(--fw-extra); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.game-card__opponent em { font-weight: var(--fw-medium); text-transform: lowercase; color: var(--gray-body); }
	.game-card__sport, .game-card__meta { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); }
	.game-card__pipe { margin-inline: 8px; color: var(--gray-line); }
	.game-card__result { color: var(--gray-ink); font-weight: var(--fw-extra); }

	@media (min-width: 480px) { .game-card { flex-basis: 56%; } }
	@media (min-width: 768px) {
		.game-card { flex-basis: 33.3334%; }
		.rail__btn { display: grid; }
		.rail__head { padding-inline: var(--sp-5) var(--sp-3); }
	}
	@media (min-width: 1024px) { .game-card { flex-basis: 25%; } }
	@media (min-width: 1280px) { .game-card { flex-basis: 20%; } }
}

@layer components {
	/* Final-score variant of the rail card: same card, mini scoreboard in the middle lines. */
	.game-card__sport-inline { margin-left: 8px; color: var(--gray-meta); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); font-size: var(--fs-label); }
	.game-card__score { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; min-width: 120px; padding-right: 6px; font-size: var(--fs-small); font-weight: var(--fw-semi); letter-spacing: 0.02em; text-transform: uppercase; color: var(--gray-meta); line-height: 1.1; }
	.game-card__score strong { font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: var(--fw-extra); color: var(--gray-meta); }
	.game-card__score.is-winner, .game-card__score.is-winner strong { color: var(--gray-ink); }
	.game-card__result { font-weight: var(--fw-extra); color: var(--gray-ink); }
	.game-card__result--w { color: var(--red); }
	.game-card--live .game-card__meta { color: var(--red); }
	.game-card--off .game-card__meta { color: var(--red); }
}