/**
 * Homepage Wildebeest Migration section.
 * Scoped to .migration-section — do not leak into other homepage blocks.
 */

body.stk-kenya .stk-home > section.migration-section,
.migration-section {
	--migration-bg: #1a120b;
	--migration-bg-secondary: #382a1a;
	--migration-orange: #d97706;
	--migration-gold: #e7a745;
	--migration-cream: #f7c673;
	--migration-white: #fff;
	--migration-muted: #d9d1c6;
	position: relative;
	isolation: isolate;
	min-height: 500px;
	overflow-x: clip;
	color: var(--migration-white);
	background:
		linear-gradient(90deg, rgba(20, 12, 5, 0.98), rgba(43, 27, 13, 0.96)),
		var(--migration-bg);
}

.migration-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--migration-bg-image);
	background-size: cover;
	background-position: center right;
	opacity: 0.16;
}

.migration-section__inner {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin: 0 auto;
	padding: 30px 40px;
}

.migration-container {
	display: grid;
	gap: 36px;
}

@media (min-width: 1200px) {
	.migration-container {
		grid-template-columns: minmax(330px, 0.85fr) minmax(0, 2.15fr);
		gap: 50px;
		align-items: stretch;
	}

	.migration-calendar {
		border-left: 1px solid rgba(255, 255, 255, 0.12);
		padding-left: 36px;
	}
}

.migration-intro__eyebrow {
	margin: 0 0 0.7rem;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--migration-gold);
}

.migration-intro__title {
	margin: 0;
	font-family: var(--font-heading, Inter, sans-serif);
	font-size: clamp(38px, 3vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--migration-white);
}

.migration-intro__rule {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 1rem 0 1.15rem;
	color: #d88916;
}

.migration-intro__rule span {
	display: block;
	width: 2.4rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.migration-intro__copy {
	margin: 0;
	max-width: 430px;
	font-size: 13.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
}

.migration-intro__copy a {
	color: var(--migration-cream);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.migration-intro__copy a:hover,
.migration-intro__copy a:focus-visible {
	color: var(--migration-white);
}

.migration-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 1.45rem 0 1.5rem;
}

.migration-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.55rem 1.1rem;
	border-radius: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.migration-btn:focus-visible {
	outline: 2px solid var(--migration-gold);
	outline-offset: 3px;
}

.migration-btn--primary {
	background: #c96d00;
	border: 1px solid #c96d00;
	color: #fff;
}

.migration-btn--primary:hover {
	background: #e07a00;
	border-color: #e07a00;
	color: #fff;
}

.migration-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	color: #fff;
}

.migration-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

.migration-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.migration-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}
}

.migration-facts li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.migration-facts__icon {
	color: #e67e22;
	flex-shrink: 0;
	margin-top: 0.1rem;
}

.migration-facts strong {
	display: block;
	margin: 0 0 0.15rem;
	font-size: 0.86rem;
	color: var(--migration-white);
}

.migration-facts__text {
	display: block;
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--migration-muted);
}

.migration-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.35rem;
}

.migration-calendar__title {
	margin: 0;
	font-family: var(--font-heading, Inter, sans-serif);
	font-size: 24px;
	font-weight: 700;
	color: #f0a42a;
}

.migration-calendar__title::after {
	content: "";
	display: block;
	width: 3.2rem;
	height: 2px;
	margin-top: 0.45rem;
	background: var(--migration-gold);
}

.migration-calendar__nav {
	display: none;
}

.migration-calendar__swipe {
	display: none;
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--migration-gold);
}

.migration-calendar-viewport {
	overflow: visible;
}

.migration-calendar-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 22px 0 6px;
	list-style: none;
}

@media (min-width: 1200px) {
	.migration-calendar-track {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.migration-calendar-track > li {
	position: relative;
	z-index: 2;
	list-style: none;
}

.migration-month-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 14px 10px 16px;
	background: rgba(33, 21, 10, 0.65);
	border: 1px solid rgba(217, 143, 36, 0.22);
	border-radius: 12px;
	text-align: center;
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.migration-month-card:hover {
	transform: translateY(-3px);
	border-color: rgba(230, 126, 34, 0.6);
	background: rgba(50, 30, 12, 0.82);
}

.migration-month-card.is-prime {
	border-color: #d88916;
	background: linear-gradient(180deg, rgba(182, 95, 10, 0.32), rgba(56, 31, 10, 0.85));
	box-shadow: 0 0 22px rgba(218, 126, 20, 0.2);
}

.migration-month-card__badge {
	position: absolute;
	top: -0.15rem;
	left: 50%;
	transform: translate(-50%, -70%);
	white-space: nowrap;
	padding: 0.18rem 0.5rem;
	border-radius: 999px;
	background: #d88916;
	color: #1a120b;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.migration-month-card__photo {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 0 0.7rem;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid rgba(231, 167, 69, 0.75);
	background: #2a1c14;
}

.migration-month-card.is-prime .migration-month-card__photo {
	border-color: #edc700;
}

.migration-month-card__photo img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.25s ease;
}

.migration-month-card:hover .migration-month-card__photo img {
	transform: scale(1.03);
}

.migration-month-card strong {
	display: block;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--migration-white);
}

.migration-month-card__place,
.migration-month-card__stage {
	display: block;
	margin-top: 0.2rem;
}

.migration-month-card__place {
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--migration-cream);
}

.migration-month-card__stage {
	font-size: 0.74rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}

.migration-month-card__note {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.68rem;
	color: var(--migration-gold);
}

.migration-month-card__pill {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.18rem 0.5rem;
	border: 1px solid var(--migration-gold);
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--migration-gold);
}

.migration-calendar__disclaimer {
	margin: 0.7rem 0 1rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.62);
}

.migration-guide-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 18px 22px;
	border: 1px solid rgba(217, 143, 36, 0.28);
	border-radius: 10px;
	background: rgba(20, 12, 6, 0.45);
}

.migration-guide-bar p {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

.migration-guide-bar__icon {
	color: var(--migration-gold);
	flex-shrink: 0;
}

.migration-guide-bar__cta {
	flex-shrink: 0;
	color: #f2a62b;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.migration-guide-bar__cta:hover,
.migration-guide-bar__cta:focus-visible {
	color: var(--migration-cream);
}

@media (max-width: 1199px) {
	.migration-section__inner {
		padding: 25px 28px;
	}
}

@media (max-width: 767px) {
	.migration-section__inner {
		padding: 20px 18px;
	}

	.migration-intro__title {
		font-size: 34px;
	}

	.migration-intro__actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.migration-calendar-track {
		grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
		gap: 10px;
	}

	.migration-month-card__photo,
	.migration-month-card__photo img {
		width: 56px;
		height: 56px;
	}

	.migration-guide-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
	}
}

@media (max-width: 600px) {
	.migration-section::before {
		display: none;
	}

	body.stk-kenya .stk-home > section.migration-section,
	.migration-section {
		background-color: rgba(18, 11, 5, 0.93);
	}
}

@media (prefers-reduced-motion: reduce) {
	.migration-month-card,
	.migration-month-card__photo img,
	.migration-btn {
		transition: none;
	}

	.migration-month-card:hover {
		transform: none;
	}

	.migration-month-card:hover .migration-month-card__photo img {
		transform: none;
	}
}