/**
 * Layout primitives, container system, and 12-column grid
 *
 * @package Meet_Partner_Theme
 * @since 1.0.0
 */

.mpt-container {
	width: 100%;
	max-width: var(--mpt-container-content);
	margin-inline: auto;
	padding-inline: var(--mpt-spacing-lg);
}

.mpt-container--wide {
	max-width: var(--mpt-container-max);
}

.mpt-section {
	padding-block: var(--mpt-spacing-section);
	position: relative;
}

.mpt-section--dark {
	background-color: var(--mpt-color-primary-bg);
	color: var(--mpt-dark-text-primary);
}

.mpt-section--secondary-dark {
	background-color: var(--mpt-color-secondary-bg);
	color: var(--mpt-dark-text-primary);
}

/* Light Section: D-UX9 section background model with AD-18 contrast */
.mpt-section--light {
	background-color: var(--mpt-color-light-bg);
	color: var(--mpt-light-text-secondary);
}

.mpt-section--light h1,
.mpt-section--light h2,
.mpt-section--light h3,
.mpt-section--light h4,
.mpt-section--light h5,
.mpt-section--light h6 {
	color: var(--mpt-light-text-primary);
}

.mpt-section--light a:not(.mpt-btn) {
	color: var(--mpt-light-text-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mpt-section--light a:not(.mpt-btn):hover,
.mpt-section--light a:not(.mpt-btn):focus {
	color: var(--mpt-color-heading);
	text-decoration: underline;
}

.mpt-section--light .mpt-text-muted,
.mpt-section--light small {
	color: var(--mpt-light-text-secondary);
}

/* 12-Column Responsive Grid Foundation */
.mpt-grid-12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--mpt-grid-gap);
}

.mpt-col-12 { grid-column: span 12; }
.mpt-col-8 { grid-column: span 8; }
.mpt-col-6 { grid-column: span 6; }
.mpt-col-4 { grid-column: span 4; }
.mpt-col-3 { grid-column: span 3; }

@media (max-width: 992px) {
	.mpt-col-8,
	.mpt-col-6,
	.mpt-col-4,
	.mpt-col-3 {
		grid-column: span 6;
	}
}

@media (max-width: 768px) {
	.mpt-col-8,
	.mpt-col-6,
	.mpt-col-4,
	.mpt-col-3 {
		grid-column: span 12;
	}
}

.mpt-main-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mpt-grid-gap);
}

@media (min-width: 992px) {
	.mpt-main-layout--with-sidebar {
		grid-template-columns: 8fr 4fr;
	}
}