/* O-Wow Media Publications Manager — Frontend base styles.
 * Dynamic values (colors, spacing, typography) are injected inline by the
 * plugin from the admin settings; this file provides structural defaults. */

.owow-mpm-wrapper {
	--owow-cols-desktop: 3;
	--owow-cols-tablet: 2;
	--owow-cols-mobile: 1;
	box-sizing: border-box;
}

.owow-mpm-wrapper *,
.owow-mpm-wrapper *::before,
.owow-mpm-wrapper *::after {
	box-sizing: inherit;
}

/* Filters: modern card-style bar, title + controls on one row, alignable */
.owow-mpm-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	padding: 14px 18px;
	background: #f7f8fa;
	border: 1px solid #e9eaee;
	border-radius: 10px;
}

.owow-mpm-filters-align-left {
	justify-content: flex-start;
}

.owow-mpm-filters-align-center {
	justify-content: center;
}

.owow-mpm-filters-align-right {
	justify-content: flex-end;
}

.owow-mpm-filter-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: #3a3a3a;
	white-space: nowrap;
}

.owow-mpm-filter-title::before {
	content: "";
	width: 14px;
	height: 14px;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'%3E%3C/polygon%3E%3C/svg%3E");
	opacity: 0.75;
}

.owow-mpm-filter-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.owow-mpm-filters select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 9px 34px 9px 14px;
	border-radius: 7px;
	border: 1px solid #d8dae0;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	min-width: 170px;
	font-size: 14px;
	color: #3a3a3a;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.owow-mpm-filters select:hover {
	border-color: #b9bcc4;
}

.owow-mpm-filters select:focus {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}

.owow-mpm-filters select[multiple] {
	background-image: none;
	padding-right: 14px;
	min-height: 42px;
}

.owow-mpm-filter-submit {
	padding: 9px 18px;
	border-radius: 7px;
	border: 1px solid #d8dae0;
	background: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.owow-mpm-filter-submit:hover {
	background: #f0f0f0;
}

.owow-mpm-active-category-title {
	margin: 0 0 16px;
}

/* AJAX loading state for the grid container */
.owow-mpm-grid-container {
	position: relative;
	transition: opacity 0.15s ease;
}

.owow-mpm-grid-container.owow-mpm-is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Grid */
.owow-mpm-grid {
	display: grid;
	grid-template-columns: repeat(var(--owow-cols-desktop), 1fr);
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.owow-mpm-no-results {
	grid-column: 1 / -1;
	text-align: center;
	color: #6b7280;
	padding: 40px 0;
}

/* Card */
.owow-mpm-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	position: relative;
}

/* Clickable card: a full-card stretched link sits underneath (z-index 1),
 * while the title link and Read More button sit above it (z-index 2) so
 * they keep their own click targets and link destinations. */
.owow-mpm-card-clickable {
	cursor: pointer;
}

.owow-mpm-card-stretched-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.owow-mpm-card-clickable .owow-mpm-field-title a,
.owow-mpm-card-clickable .owow-mpm-field-image a,
.owow-mpm-card-clickable .owow-mpm-button {
	position: relative;
	z-index: 2;
}

.owow-mpm-field-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.owow-mpm-field-title a {
	text-decoration: none;
	color: inherit;
}

.owow-mpm-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	background: #f0f4ff;
	color: #1a73e8;
	font-size: 12px;
	margin: 0 6px 6px 0;
}

.owow-mpm-tag-badge {
	background: #f4f4f4;
	color: #555;
}

.owow-mpm-button {
	align-self: flex-start;
	margin-top: 8px;
}

/* --- Layout style variants --- */

/* Minimal: no card chrome, tighter spacing */
.owow-mpm-layout-minimal .owow-mpm-card {
	border: none !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-bottom: 1px solid #eee !important;
	border-radius: 0 !important;
}

/* Image-focused: image dominates, text overlays or sits tightly below */
.owow-mpm-layout-image .owow-mpm-field-image {
	margin: -20px -20px 12px;
}
.owow-mpm-layout-image .owow-mpm-field-image img {
	border-radius: 0;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Magazine: first card spans two columns/rows for a hero effect */
.owow-mpm-layout-magazine .owow-mpm-card:first-child {
	grid-column: span 2;
}
.owow-mpm-layout-magazine .owow-mpm-card:first-child .owow-mpm-field-image img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* Timeline: single column with a connecting line */
.owow-mpm-layout-timeline {
	grid-template-columns: 1fr !important;
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}
.owow-mpm-layout-timeline .owow-mpm-card {
	position: relative;
	padding-left: 32px;
	border: none !important;
	box-shadow: none !important;
	border-bottom: 1px solid #eee !important;
	border-radius: 0 !important;
}
.owow-mpm-layout-timeline .owow-mpm-card::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #1a73e8;
}
.owow-mpm-layout-timeline .owow-mpm-card::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 16px;
	bottom: -20px;
	width: 2px;
	background: #e2e2e2;
}

/* Masonry: staggered heights via CSS columns fallback */
.owow-mpm-layout-masonry {
	display: block !important;
	column-count: var(--owow-cols-desktop);
	column-gap: 24px;
}
.owow-mpm-layout-masonry .owow-mpm-card {
	display: inline-block;
	width: 100%;
	margin-bottom: 24px;
	break-inside: avoid;
}

@media (max-width: 1024px) {
	.owow-mpm-layout-masonry {
		column-count: var(--owow-cols-tablet);
	}
	.owow-mpm-layout-magazine .owow-mpm-card:first-child {
		grid-column: span 1;
	}
}

@media (max-width: 600px) {
	.owow-mpm-layout-masonry {
		column-count: var(--owow-cols-mobile);
	}
}

/* --- Pagination --- */

/* Numbered pagination */
.owow-mpm-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.owow-mpm-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 6px;
	border: 1px solid #d8dae0;
	background: #fff;
	color: #3a3a3a;
	text-decoration: none;
	font-size: 14px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.owow-mpm-page-link:hover {
	background: #f0f4ff;
	border-color: #1a73e8;
}

.owow-mpm-page-link.is-current {
	background: #1a73e8;
	border-color: #1a73e8;
	color: #fff;
	font-weight: 600;
}

.owow-mpm-page-ellipsis {
	padding: 0 4px;
	color: #9a9a9a;
}

/* Load More button */
.owow-mpm-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.owow-mpm-load-more {
	padding: 11px 28px;
	border-radius: 7px;
	border: 1px solid #d8dae0;
	background: #fff;
	color: #3a3a3a;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.owow-mpm-load-more:hover {
	background: #f0f4ff;
	border-color: #1a73e8;
}

.owow-mpm-load-more:disabled,
.owow-mpm-load-more.is-loading {
	opacity: 0.6;
	cursor: default;
}

/* Infinite scroll sentinel */
.owow-mpm-infinite-sentinel {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 32px;
	min-height: 40px;
}

.owow-mpm-infinite-loading {
	color: #9a9a9a;
	font-size: 13px;
}