/*
 * utilities.css — Helper classes, .mvc-btn system, .mvc-post-card base.
 * !important is permitted here — utility classes must win over component specificity.
 */

/* ── Visibility ──────────────────────────────────────────────────────────── */
.u-hidden            { display: none !important; }
.u-visible           { visibility: visible !important; }
.u-invisible         { visibility: hidden !important; }

.u-show-mobile       { display: none !important; }
.u-hide-mobile       { display: block !important; }

@media (max-width: 767px) {
	.u-show-mobile   { display: block !important; }
	.u-hide-mobile   { display: none !important; }
}

/* ── Spacing ─────────────────────────────────────────────────────────────── */
.u-mt-0  { margin-top: 0 !important; }
.u-mb-0  { margin-bottom: 0 !important; }
.u-mt-4  { margin-top: var(--space-4) !important; }
.u-mb-4  { margin-bottom: var(--space-4) !important; }
.u-mt-8  { margin-top: var(--space-8) !important; }
.u-mb-8  { margin-bottom: var(--space-8) !important; }
.u-mt-12 { margin-top: var(--space-12) !important; }
.u-mb-12 { margin-bottom: var(--space-12) !important; }

/* ── Text alignment ──────────────────────────────────────────────────────── */
.u-text-left    { text-align: left !important; }
.u-text-center  { text-align: center !important; }
.u-text-right   { text-align: right !important; }

/* ── Text color ──────────────────────────────────────────────────────────── */
.u-text-muted   { color: var(--color-text-muted) !important; }
.u-text-primary { color: var(--color-primary) !important; }
.u-text-accent  { color: var(--color-accent) !important; }
.u-text-white   { color: var(--color-white) !important; }

/* ── Font weight ─────────────────────────────────────────────────────────── */
.u-font-normal   { font-weight: var(--font-weight-normal) !important; }
.u-font-medium   { font-weight: var(--font-weight-medium) !important; }
.u-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.u-font-bold     { font-weight: var(--font-weight-bold) !important; }

/* ── Flex helpers ────────────────────────────────────────────────────────── */
.u-flex          { display: flex !important; }
.u-flex-center   { display: flex !important; align-items: center !important; justify-content: center !important; }
.u-flex-between  { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.u-flex-col      { display: flex !important; flex-direction: column !important; }
.u-items-center  { align-items: center !important; }
.u-gap-4         { gap: var(--space-4) !important; }
.u-gap-6         { gap: var(--space-6) !important; }
.u-gap-8         { gap: var(--space-8) !important; }

/* ── Width ───────────────────────────────────────────────────────────────── */
.u-w-full        { width: 100% !important; }
.u-max-w-prose   { max-width: 65ch !important; }

/* ── Aspect ratios ───────────────────────────────────────────────────────── */
.u-aspect-square  { aspect-ratio: 1 / 1; }
.u-aspect-video   { aspect-ratio: 16 / 9; }
.u-aspect-4-3     { aspect-ratio: 4 / 3; }
.u-aspect-3-2     { aspect-ratio: 3 / 2; }

/* ── Object fit ──────────────────────────────────────────────────────────── */
.u-object-cover   { object-fit: cover; width: 100%; height: 100%; }
.u-object-contain { object-fit: contain; width: 100%; height: 100%; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* Button system                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

.mvc-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--btn-py) var(--btn-px);
	font-family: var(--btn-font-family);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	letter-spacing: var(--btn-letter-spacing);
	text-transform: var(--mvc-btn-text-transform, none);
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--mvc-btn-radius, var(--btn-radius));
	border: 2px solid transparent;
	cursor: pointer;
	transition: var(--btn-transition);
	user-select: none;
	isolation: isolate;
}

.mvc-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		circle 80px at var(--glow-x, 50%) var(--glow-y, 50%),
		rgba(255,255,255,0.25) 0%,
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.2s ease;
	border-radius: inherit;
}

.mvc-btn:hover::before {
	opacity: 1;
}

.mvc-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.mvc-btn:active {
	transform: translateY(1px);
}

/* ── Size variants ───────────────────────────────────────────────────────── */
.mvc-btn--sm {
	padding: var(--btn-py-sm) var(--btn-px-sm);
	font-size: var(--btn-font-size-sm);
}

.mvc-btn--lg {
	padding: var(--btn-py-lg) var(--btn-px-lg);
	font-size: var(--btn-font-size-lg);
}

.mvc-btn--full {
	width: 100%;
}

/* ── Color variants ──────────────────────────────────────────────────────── */
.mvc-btn--primary {
	background: var(--mvc-color-btn-bg, var(--color-primary));
	color: var(--mvc-color-btn-text, var(--color-white)) !important;
	border-color: var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--color-primary)));
}

.mvc-btn--primary:hover {
	background: var(--mvc-color-btn-bg-hover, var(--color-primary-dark));
	border-color: var(--mvc-color-btn-bg-hover, var(--color-primary-dark));
	color: var(--mvc-color-btn-text, var(--color-white)) !important;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.mvc-btn--secondary {
	background: var(--mvc-color-btn2-bg, transparent);
	color: var(--mvc-color-btn2-text, var(--color-primary)) !important;
	border-color: var(--mvc-color-btn2-border, var(--color-primary));
}

.mvc-btn--secondary:hover {
	background: var(--mvc-color-btn2-hover-bg, var(--mvc-color-btn2-border, var(--color-primary)));
	color: var(--mvc-color-btn2-hover-text, var(--color-white)) !important;
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.mvc-btn--accent {
	background: var(--color-accent);
	color: var(--color-gray-900);
	border-color: var(--color-accent);
}

.mvc-btn--accent:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

.mvc-btn--ghost {
	background: transparent;
	color: var(--color-text) !important;
	border-color: var(--color-border-strong);
}

.mvc-btn--ghost:hover {
	background: var(--color-gray-100);
	border-color: var(--color-gray-300);
	color: var(--mvc-color-btn-ghost-hover-text, #0f172a) !important;
}

.mvc-btn--inverse {
	background: var(--color-white);
	color: var(--color-primary);
	border-color: var(--color-white);
}

.mvc-btn--inverse:hover {
	background: var(--color-gray-100);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* ── Disabled state ──────────────────────────────────────────────────────── */
.mvc-btn:disabled,
.mvc-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Post card base                                                              */
/* ─────────────────────────────────────────────────────────────────────────── */

.mvc-post-card {
	display: flex;
	flex-direction: column;
	background: var(--card-bg, #fff);
	border: 1px solid var(--card-border, #e2e8f0);
	border-radius: var(--card-radius, 0.5rem);
	box-shadow: var(--card-shadow, none);
	overflow: hidden;
	transition: box-shadow var(--duration-normal, 250ms) var(--ease-default, ease),
	            transform  var(--duration-normal, 250ms) var(--ease-default, ease);
}

.mvc-post-card:hover {
	box-shadow: var(--card-hover-shadow, 0 4px 12px rgba(0,0,0,0.1));
	transform: translateY(-3px);
}

.mvc-post-card__image {
	position: relative;
	overflow: hidden;
}

.mvc-post-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-default);
}

.mvc-post-card:hover .mvc-post-card__image img {
	transform: scale(1.04);
}

.mvc-post-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--card-padding, 1.5rem);
}

.mvc-post-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	font-weight: var(--font-weight-medium);
}

.mvc-post-card__title {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
	line-height: var(--leading-snug);
	margin-bottom: var(--space-3);
}

.mvc-post-card__title a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-colors);
}

.mvc-post-card__title a:hover {
	color: var(--color-primary);
}

.mvc-post-card__excerpt {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4, 1rem);
}

.mvc-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1, 0.25rem);
	margin-top: auto;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--duration-fast, 150ms) ease,
	            gap var(--duration-fast, 150ms) ease;
}

.mvc-post-card__more:hover {
	color: var(--color-primary-dark, var(--color-primary));
	gap: var(--space-2, 0.5rem);
}

.mvc-post-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.mvc-post-card__link {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	transition: var(--transition-colors);
}

.mvc-post-card__link:hover {
	color: var(--color-primary-dark);
}

/* ── Term list (taxonomy badge row) ──────────────────────────────────────── */
.mvc-term-list {
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1-5);
}

.mvc-term-list__item {
	margin: 0;
	padding: 0;
}

.mvc-term-list__link,
.mvc-term-list__label {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	line-height: 1;
	padding: 3px var(--space-2);
	border-radius: var(--radius-full);
	background-color: var(--color-surface-raised);
	color: var(--color-text-muted);
	text-decoration: none;
	border: 1px solid var(--color-border);
}

.mvc-term-list__link:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-primary);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Star rating                                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.mvc-star-rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--color-accent);
}

.mvc-star-rating__star {
	font-size: 1.1em;
	line-height: 1;
}

.mvc-star-rating__star--empty {
	color: var(--color-gray-300);
}

/* mvc_get_star_rating() output: <span class="mvc-stars">…<span class="mvc-star mvc-star--full|half|empty"></span>…</span> */
.mvc-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1;
}

.mvc-star {
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	font-size: 1.1em;
	line-height: 1;
	color: #d1d5db; /* empty fallback */
}

.mvc-star::before {
	content: "\2605"; /* ★ */
	display: inline-block;
	width: 100%;
	height: 100%;
	line-height: 1;
}

.mvc-star--full {
	color: #f5a623; /* gold */
}

.mvc-star--half {
	color: #d1d5db;
	position: relative;
}

.mvc-star--half::after {
	content: "\2605";
	color: #f5a623;
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
}

.mvc-star--empty {
	color: #d1d5db;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Tag / badge                                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.mvc-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.65em;
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height: 1.5;
	background: var(--color-primary-subtle);
	color: var(--color-primary);
}

.mvc-badge--accent {
	background: var(--color-accent-subtle);
	color: var(--color-accent-dark);
}

.mvc-badge--success {
	background: var(--color-success-subtle);
	color: var(--color-success);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Scroll-to-top                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

.mvc-scroll-top {
	position: fixed;
	bottom: var(--space-8);
	right: var(--space-8);
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity var(--duration-normal) var(--ease-default),
	            transform var(--duration-normal) var(--ease-default);
}

.mvc-scroll-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.mvc-scroll-top:hover {
	background: var(--color-primary-dark);
	box-shadow: var(--shadow-xl);
}