/**
 * WPMediaVerse Pro — Pinterest Masonry Layout
 *
 * CSS-columns masonry. No JavaScript required for the grid itself.
 * Dark mode via [data-theme="dark"] — matches the Instagram layout convention.
 *
 * @package WPMediaVersePro
 * @since   1.1.0
 */

/* ==========================================================================
   0. Pinterest Profile Page
   ========================================================================== */

.mvs-pinterest-profile {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 16px;
}

/* ==========================================================================
   1. Custom Properties
   ========================================================================== */

:root {
	--mvs-pin-bg: var(--mvs-surface-2);
	--mvs-pin-card-bg: var(--mvs-surface);
	--mvs-pin-card-radius: 16px;
	--mvs-pin-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	--mvs-pin-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.18);
	--mvs-pin-card-gap: 16px;
	--mvs-pin-cols: 4;
	--mvs-pin-text: var(--mvs-text);
	--mvs-pin-text-secondary: #767676;
	--mvs-pin-avatar-size: 24px;
	--mvs-pin-body-padding: 12px;
	--mvs-pin-img-radius-top: 16px;
	--mvs-pin-title-size: 14px;
	--mvs-pin-meta-size: 12px;
}

/* Fire on every Wbcom dark signal — the pre-1.8.0 [data-theme="dark"]-only
   selector was dead on buddyx/reign, so the muted #767676 secondary text in
   :root never flipped and washed out on dark cards. */
[data-theme="dark"],
[data-bn-theme="dark"],
[data-bx-mode="dark"],
html.dark-mode,
body.dark-mode {
	--mvs-pin-bg: #121212;
	--mvs-pin-card-bg: #1e1e1e;
	/* Was var(--mvs-text) (a light token used as a card surface). Pinterest
	   cards stay dark in dark mode like the IG/feed cards. */
	--mvs-pin-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	--mvs-pin-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
	/* Was var(--mvs-surface-2) — dark surface token as text color (dark-on-dark). */
	--mvs-pin-text: #f5f5f5;
	--mvs-pin-text-secondary: #a0a0a0;
}

/* ==========================================================================
   2. Page Wrapper
   ========================================================================== */

.mvs-pinterest-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 24px;
}

/* ==========================================================================
   3. Feed Container — CSS Columns Masonry
   ========================================================================== */

.mvs-pinterest-feed {
	column-count: var(--mvs-pin-cols);
	column-gap: var(--mvs-pin-card-gap);
	padding: 0 var(--mvs-pin-card-gap);
	background: var(--mvs-pin-bg);
}

/* ==========================================================================
   3. Card
   ========================================================================== */

.mvs-pinterest-card {
	display: inline-block; /* required for CSS columns to work */
	width: 100%;
	background: var(--mvs-pin-card-bg);
	border-radius: var(--mvs-pin-card-radius);
	box-shadow: var(--mvs-pin-card-shadow);
	margin-bottom: var(--mvs-pin-card-gap);
	break-inside: avoid;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.mvs-pinterest-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--mvs-pin-card-shadow-hover);
}

/* ==========================================================================
   4. Card Image
   ========================================================================== */

.mvs-pinterest-card__img-wrap {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--mvs-pin-img-radius-top) var(--mvs-pin-img-radius-top) 0 0;
	background: var(--mvs-border);
}

.mvs-pinterest-card__img-wrap img,
.mvs-pinterest-card__img-wrap video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--mvs-pin-img-radius-top) var(--mvs-pin-img-radius-top) 0 0;
	object-fit: cover;
}

/* ==========================================================================
   5. Card Body
   ========================================================================== */

.mvs-pinterest-card__body {
	padding: var(--mvs-pin-body-padding);
}

/* ==========================================================================
   6. Card Title
   ========================================================================== */

.mvs-pinterest-card__title {
	font-size: var(--mvs-pin-title-size);
	font-weight: 600;
	color: var(--mvs-pin-text);
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

/* ==========================================================================
   6b. Card Description
   ========================================================================== */

.mvs-pinterest-card__desc {
	font-size: var(--mvs-pin-meta-size);
	color: var(--mvs-pin-text-secondary);
	margin: 0 0 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.4;
}

/* ==========================================================================
   7. Card Footer — Author left, Stats right
   ========================================================================== */

.mvs-pinterest-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}

.mvs-pinterest-card__author {
	display: flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.mvs-pinterest-card__author-avatar {
	width: var(--mvs-pin-avatar-size);
	height: var(--mvs-pin-avatar-size);
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.mvs-pinterest-card__author-name {
	font-size: var(--mvs-pin-meta-size);
	color: var(--mvs-pin-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   8. Card Stats
   ========================================================================== */

.mvs-pinterest-card__stats {
	font-size: var(--mvs-pin-meta-size);
	color: var(--mvs-pin-text-secondary);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.mvs-pinterest-card__stat {
	display: flex;
	align-items: center;
	gap: 3px;
}

/* ==========================================================================
   9. Responsive Breakpoints
   ========================================================================== */

/* 3 columns — tablet landscape */
@media (max-width: 1024px) {
	.mvs-pinterest-feed {
		--mvs-pin-cols: 3;
	}
}

/* 2 columns — tablet portrait */
@media (max-width: 768px) {
	.mvs-pinterest-page {
		padding: 0 16px;
	}

	.mvs-pinterest-feed {
		--mvs-pin-cols: 2;
		padding: 0;
		--mvs-pin-card-gap: 12px;
	}
}

/* 1 column — mobile */
@media (max-width: 480px) {
	.mvs-pinterest-feed {
		--mvs-pin-cols: 1;
		padding: 0 12px;
	}

	.mvs-pinterest-card {
		margin-bottom: 12px;
	}
}

/* ==========================================================================
   10. Empty State
   ========================================================================== */

.mvs-pinterest-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: var(--mvs-pin-text-secondary);
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */

.mvs-pinterest-pagination {
	padding: 24px var(--mvs-pin-card-gap);
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ==========================================================================
   12. Load More
   ========================================================================== */

.mvs-load-more {
	text-align: center;
	padding: 32px 0;
}

.mvs-load-more-btn {
	display: inline-block;
	padding: 12px 32px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}