/**
 * Desktop Styles (min-width: 992px)
 *
 * This file contains responsive overrides for desktop screens.
 * All styles should be wrapped in appropriate media queries.
 *
 * Guidelines:
 * - Keep selectors specific to avoid conflicts
 * - Group related components together
 * - Comment sections for maintainability
 */

/* ==========================================================================
   DESKTOP STYLES (min-width: 992px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Standard Desktop (992px - 1199px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {

	/* Layout */
	body:not(.community-pro-homepage) .content-sidebar-wrap {
		display: block !important;
	}

	/* MemberPress Profile Navigation */
	.profile-page #mepr-account-nav {
		display: flex !important;
		justify-content: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
	}

	/* Profile page content area overflows at this breakpoint — constrain it */
	.profile-page .content {
		max-width: 100% !important;
	}

	/* MemberPress Account Table - Card Layout (table too wide for this viewport) */
	.mepr-account-table,
	.mepr-account-table tbody {
		display: block !important;
		width: 100% !important;
	}

	.mepr-account-table thead {
		display: none !important;
	}

	.profile-page .mp_wrapper table.mepr-account-table td {
		border-left: none !important;
	}

	.mepr-account-table tbody tr {
		display: block !important;
		width: 100% !important;
		margin-bottom: 16px !important;
		border: 1px solid var(--community-color-border) !important;
		border-radius: 8px !important;
		padding: 16px !important;
		background: var(--bg-white, #fff) !important;
	}

	.mepr-account-table tbody td {
		display: flex !important;
		justify-content: space-between !important;
		padding: 8px 0 !important;
		border-bottom: 1px solid var(--community-color-border) !important;
		white-space: normal !important;
	}

	.mepr-account-table tbody td:last-child {
		border-bottom: none !important;
	}

	.mepr-account-table tbody td::before {
		content: attr(data-label) !important;
		font-weight: 600 !important;
		color: var(--community-color-text-primary) !important;
		flex-shrink: 0 !important;
		margin-right: 16px !important;
	}

	body:not(.community-pro-homepage) .sidebar-primary {
		float: none !important;
        max-width: 100% !important;
        margin: 0 auto;
	}

	.pagination {
		margin-bottom: 30px !important;
	}
}

/* Widget row carousel stacking — 3 carousel widgets overflow below 1480px */
@media (min-width: 992px) and (max-width: 1479px) {
	.widget-layout-row:has(.media-carousel-wrapper) {
		flex-direction: column;
		max-width: 100%;
	}

	.widget-layout-row:has(.media-carousel-wrapper) > * {
		max-width: 100%;
		overflow: hidden;
	}

	/* Use tablet card widths — stacked cards have full width like tablet layout */
	.widget-layout-row:has(.media-carousel-wrapper) .media-posts-grid.carousel-enabled[style*="--carousel-tablet"] .media-post-card {
		width: calc((100% / var(--carousel-tablet, 2)) - 12px);
	}

	.widget-layout-row:has(.media-carousel-wrapper) .media-posts-grid.carousel-enabled:not([style*="--carousel-tablet"]) .media-post-card {
		width: calc(50% - 12px);
	}
}

@media (max-width: 1199px) {
	/* Grid - Listing pages */
	.archive-grid,
	.directorist-archive-contents .directorist-archive-items.directorist-archive-grid-view .directorist-row,
	.directorist-contents-wrap .directorist-archive-items.directorist-archive-grid-view .directorist-row,
	.directorist-archive-items .directorist-row {
		grid-template-columns: repeat(1, minmax(280px, 1fr)) !important;
	}
}

@media (min-width: 1200px) and (max-width: 1399px) {
	/* MemberPress Account Table - Card Layout (table still too wide with sidebar) */
	.mepr-account-table,
	.mepr-account-table tbody {
		display: block !important;
		width: 100% !important;
	}

	.mepr-account-table thead {
		display: none !important;
	}

	.profile-page .mp_wrapper table.mepr-account-table td {
		border-left: none !important;
	}

	.mepr-account-table tbody tr {
		display: block !important;
		width: 100% !important;
		margin-bottom: 16px !important;
		border: 1px solid var(--community-color-border) !important;
		border-radius: 8px !important;
		padding: 16px !important;
		background: var(--bg-white, #fff) !important;
	}

	.mepr-account-table tbody td {
		display: flex !important;
		justify-content: space-between !important;
		padding: 8px 0 !important;
		border-bottom: 1px solid var(--community-color-border) !important;
		white-space: normal !important;
	}

	.mepr-account-table tbody td:last-child {
		border-bottom: none !important;
	}

	.mepr-account-table tbody td::before {
		content: attr(data-label) !important;
		font-weight: 600 !important;
		color: var(--community-color-text-primary) !important;
		flex-shrink: 0 !important;
		margin-right: 16px !important;
	}

	body:not(.community-pro-homepage) .sidebar-primary {
		flex: none;
		max-width: 100% !important;
		margin: 0 auto !important;
	}
}

@media (min-width: 1200px) and (max-width: 1499px) {
	/* Grid - Listing pages */
	.archive-grid,
	.directorist-archive-contents .directorist-archive-items.directorist-archive-grid-view .directorist-row,
	.directorist-contents-wrap .directorist-archive-items.directorist-archive-grid-view .directorist-row,
	.directorist-archive-items .directorist-row {
		grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
	}

	body:not(.community-pro-homepage) .sidebar-primary {
		flex: none;
		max-width: 100% !important;
		margin: 0 auto !important;
	}
}

@media (min-width: 1500px) {
	/* Grid - Listing pages */
	.archive-grid,
	.directorist-archive-contents .directorist-archive-items.directorist-archive-grid-view .directorist-row,
	.directorist-contents-wrap .directorist-archive-items.directorist-archive-grid-view .directorist-row,
	.directorist-archive-items .directorist-row {
		grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
	}
}