/**
 * Elcogen Post Info Widget Styles
 *
 * Styles for post metadata display with blue left border.
 * Design: Figma node 40288:27884 (Metadata section)
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* Container - Figma specs */
.elcogen-post-info {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-baseline-24);
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body-large);
	color: var(--color-text-primary);
}

/* Individual metadata item with left border */
.elcogen-post-info__item {
	display: flex !important;
	align-items: center;
	gap: var(--spacing-baseline-12);
	padding-left: var(--spacing-baseline-12);
	border-left: 1px solid var(--color-cobalt-blue-400);
}

/* Label (e.g., "Published", "Author") */
.elcogen-post-info__label {
	font-family: var(--font-family-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: var(--font-size-body-large) !important;
	font-weight: var(--font-weight-regular) !important;
	line-height: var(--line-height-body-large) !important;
	color: var(--color-text-primary) !important;
}

/* Value (e.g., date, author name) */
.elcogen-post-info__value {
	font-family: var(--font-family-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: var(--font-size-body-large) !important;
	font-weight: var(--font-weight-bold) !important;
	line-height: var(--line-height-body-large) !important;
	color: var(--color-text-primary) !important;
}

/* Alignment options */
.elcogen-post-info--left {
	justify-content: flex-start;
}

.elcogen-post-info--center {
	justify-content: center;
}

.elcogen-post-info--right {
	justify-content: flex-end;
}

/* Responsive adjustments - Mobile */
@media (max-width: 47.9375rem) {
	.elcogen-post-info {
		gap: var(--spacing-baseline-16);
		font-size: var(--font-size-body-medium);
	}

	.elcogen-post-info__item {
		gap: var(--spacing-baseline-08);
		padding-left: var(--spacing-baseline-08);
	}

	.elcogen-post-info__label {
		font-size: var(--font-size-body-medium) !important;
		line-height: var(--line-height-body-medium) !important;
	}

	.elcogen-post-info__value {
		font-size: var(--font-size-body-medium) !important;
		line-height: var(--line-height-body-medium) !important;
	}
}