/* ==========================================================
   MAJOR MORALE
   SPONSORS ARCHIVE
========================================================== */


/* ==========================================================
   FULL-WIDTH SPONSORS PAGE
   NO SIDEBAR
========================================================== */

.mm-sponsors-page {
	display: block;

	width: 100%;
	max-width: 1400px;

	margin: 0 auto;
	padding: 34px 24px 46px;

	box-sizing: border-box;
}


/* ==========================================================
   ARCHIVE HEADER
========================================================== */

.mm-sponsors-archive__header {
	margin: 0 0 26px;
}

.mm-sponsors-archive__title {
	margin: 0;

	color: var(--e-global-color-primary);

	font-family: "Bitter", serif;
	font-size: clamp(34px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.05;
}


/*
 * No decorative line or star
 * beneath "Our Sponsors".
 */

.mm-sponsors-archive__description {
	max-width: 760px;

	margin-top: 10px;

	color: var(--e-global-color-text);

	font-size: 15px;
	line-height: 1.5;
}


/* ==========================================================
   SPONSOR GRID
   4 COLUMNS ON DESKTOP
========================================================== */

.mm-sponsors-grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 18px;
}


/* ==========================================================
   SPONSOR CARD
========================================================== */

.mm-sponsor-card {
	min-width: 0;
	margin: 0;

	background: var(--e-global-color-23304c8);

	border:
		1px solid var(--e-global-color-282dba4);

	border-radius: 12px;

	overflow: hidden;

	box-shadow:
		0 4px 12px rgba(0, 0, 0, .07);

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		border-color .18s ease;
}

.mm-sponsor-card:hover {
	transform: translateY(-2px);

	border-color: var(--e-global-color-accent);

	box-shadow:
		0 7px 18px rgba(0, 0, 0, .10);
}


/* ==========================================================
   ENTIRE CARD LINK
========================================================== */

.mm-sponsor-card__link,
.mm-sponsor-card__link:visited {
	display: block;

	height: 100%;

	color: var(--e-global-color-text);

	text-decoration: none;
}


/* ==========================================================
   CARD CONTENT
========================================================== */

.mm-sponsor-card__content {
	display: flex;
	flex-direction: column;

	height: 100%;

	padding: 17px 16px 15px;

	box-sizing: border-box;

	text-align: center;
}


/* ==========================================================
   BUSINESS NAME
========================================================== */

.mm-sponsor-card__title {
	margin: 0;

	color: var(--e-global-color-primary);

	font-family: "Bitter", serif;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.15;

	text-align: center;
}


/* ==========================================================
   GOLD LINE + STAR
   UNDER NAME / ABOVE LOGO
========================================================== */

.mm-sponsor-card__divider {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	width: 100%;

	margin: 11px 0 8px;
}

.mm-sponsor-card__divider-line {
	display: block;
	flex: 1;

	height: 1px;

	background: var(--e-global-color-accent);

	opacity: .65;
}

.mm-sponsor-card__divider-star {
	display: block;

	flex: 0 0 auto;

	color: var(--e-global-color-accent);

	font-size: 12px;
	line-height: 1;
}


/* ==========================================================
   LOGO AREA
========================================================== */

.mm-sponsor-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 105px;

	margin-bottom: 13px;

	box-sizing: border-box;
}


/*
 * No colored background behind logos.
 * Logos retain natural proportions.
 */

.mm-sponsor-card__image {
	display: block;

	width: auto;
	height: auto;

	max-width: 82%;
	max-height: 88px;

	object-fit: contain;
}


/* ==========================================================
   VIEW SPONSOR BUTTON
========================================================== */

.mm-sponsor-card__more {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;

	margin-top: auto;
	padding: 10px 14px;

	color: var(--e-global-color-primary);
	background: var(--e-global-color-accent);

	border-radius: 6px;

	font-family: "Bitter", serif;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;

	box-sizing: border-box;

	transition:
		background-color .18s ease,
		color .18s ease,
		transform .18s ease;
}

.mm-sponsor-card__more-text {
	color: var(--e-global-color-primary);
}


/* ==========================================================
   CUSTOM CSS CHEVRON
========================================================== */

.mm-sponsor-card__chevron {
	display: inline-block;

	width: 8px;
	height: 8px;

	border-top:
		2px solid var(--e-global-color-primary);

	border-right:
		2px solid var(--e-global-color-primary);

	transform: rotate(45deg);

	box-sizing: border-box;

	transition:
		transform .18s ease;
}


/* ==========================================================
   CARD HOVER
========================================================== */

.mm-sponsor-card__link:hover
.mm-sponsor-card__title {
	color: var(--e-global-color-secondary);
}


/*
 * Keep the button gold on hover.
 * Give it a subtle lift instead of reversing the colors.
 */

.mm-sponsor-card__link:hover
.mm-sponsor-card__more {
	color: var(--e-global-color-primary);
	background: var(--e-global-color-accent);

	transform: translateY(-1px);
}

.mm-sponsor-card__link:hover
.mm-sponsor-card__more-text {
	color: var(--e-global-color-primary);
}

.mm-sponsor-card__link:hover
.mm-sponsor-card__chevron {
	border-color: var(--e-global-color-primary);

	transform:
		translateX(2px)
		rotate(45deg);
}


/* ==========================================================
   KEYBOARD FOCUS
========================================================== */

.mm-sponsor-card__link:focus-visible {
	outline:
		3px solid var(--e-global-color-accent);

	outline-offset: 3px;

	border-radius: 12px;
}


/* ==========================================================
   PAGINATION
========================================================== */

.mm-sponsors-archive .navigation.pagination {
	margin-top: 30px;
}

.mm-sponsors-archive .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	gap: 6px;
}

.mm-sponsors-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 34px;
	height: 34px;

	padding: 0 10px;

	color: var(--e-global-color-primary);
	background: var(--e-global-color-23304c8);

	border:
		1px solid var(--e-global-color-282dba4);

	border-radius: 20px;

	font-size: 13px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;

	box-sizing: border-box;
}

.mm-sponsors-archive .page-numbers:visited {
	color: var(--e-global-color-primary);
}

.mm-sponsors-archive .page-numbers.current {
	color: var(--e-global-color-secondary);
	background: var(--e-global-color-accent);

	border-color: var(--e-global-color-accent);
}

.mm-sponsors-archive a.page-numbers:hover {
	color: var(--e-global-color-23304c8);
	background: var(--e-global-color-primary);

	border-color: var(--e-global-color-primary);
}


/* ==========================================================
   <= 1200
   3 COLUMNS
========================================================== */

@media (max-width: 1200px) {

	.mm-sponsors-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}

}


/* ==========================================================
   <= 880
   2 COLUMNS
========================================================== */

@media (max-width: 880px) {

	.mm-sponsors-page {
		padding-right: 20px;
		padding-left: 20px;
	}

	.mm-sponsors-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.mm-sponsor-card__title {
		font-size: 18px;
	}

}


/* ==========================================================
   <= 620
   1 COLUMN
========================================================== */

@media (max-width: 620px) {

	.mm-sponsors-page {
		padding:
			25px 15px 36px;
	}

	.mm-sponsors-archive__header {
		margin-bottom: 20px;
	}

	.mm-sponsors-archive__title {
		font-size: 32px;
	}

	.mm-sponsors-grid {
		grid-template-columns: 1fr;

		gap: 14px;
	}


	/* Slightly more compact cards on mobile */

	.mm-sponsor-card__content {
		padding: 15px;
	}

	.mm-sponsor-card__title {
		font-size: 18px;
	}

	.mm-sponsor-card__divider {
		margin:
			9px 0 7px;
	}

	.mm-sponsor-card__logo {
		height: 95px;

		margin-bottom: 11px;
	}

	.mm-sponsor-card__image {
		max-width: 80%;
		max-height: 78px;
	}

	.mm-sponsor-card__more {
		padding:
			10px 12px;
	}

}


/* ==========================================================
   <= 480
========================================================== */

@media (max-width: 480px) {

	.mm-sponsors-page {
		padding-right: 12px;
		padding-left: 12px;
	}

	.mm-sponsors-archive__title {
		font-size: 29px;
	}

	.mm-sponsor-card__content {
		padding: 14px;
	}

	.mm-sponsor-card__title {
		font-size: 17px;
	}

	.mm-sponsor-card__logo {
		height: 90px;
	}

	.mm-sponsor-card__image {
		max-width: 78%;
		max-height: 74px;
	}

	.mm-sponsor-card__more {
		font-size: 13px;
	}

}