/**
 * KLASS — Public stylesheet
 *
 * Minimal, theme-agnostic styles. Uses currentColor and inherits font sizing
 * so the views badge blends with surrounding metadata without overriding the theme.
 */

/* -----------------------------------------------------------------------------
 * Views counter inline display — generic
 * -------------------------------------------------------------------------- */

.klass-views {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 0.9em;        /* slightly smaller than the surrounding date */
	line-height: 1;
	color: inherit;
	opacity: 0.7;
	vertical-align: baseline;
	white-space: nowrap;
}

.klass-views:hover {
	opacity: 1;
}

.klass-views__icon {
	flex-shrink: 0;
	display: inline-block;
	width: 0.9em;             /* match the digit height, not the cap height */
	height: 0.9em;
	color: currentColor;
}

.klass-views__count {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	line-height: 1;
}

/* -----------------------------------------------------------------------------
 * MediaPort theme integration
 *
 * `.info__box` is flex with space-between (date left, social-share right).
 * We wrap date+views into `.info__time-group` so they stay glued together
 * on the left side, while social-share keeps its right alignment.
 *
 * Views match the date row's font-size and line-height so the badge is
 * visually equal-weight to "18.05.2026 | 16:02" — not larger, not bolder.
 * -------------------------------------------------------------------------- */

.info__box .info__time-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.info__box .info__time-group .info__time {
	display: inline-flex;
	align-items: center;
}

.info__box .info__views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: inherit;
	opacity: 0.7;
	font-size: inherit;
	line-height: 1;
	white-space: nowrap;
}

.info__box .info__views::before {
	content: "·";
	margin-right: 2px;
	opacity: 0.6;
	font-weight: bold;
}

.info__box .info__views .klass-views {
	font-size: 0.9em;          /* slightly smaller than the date */
	line-height: 1;
	opacity: 1;                /* parent .info__views already sets opacity */
	gap: 3px;
}

/* Icon scales with the inherited (already reduced) font-size */
.info__box .info__views .klass-views__icon,
.info__box .info__views svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	color: currentColor;
	fill: currentColor;
	display: block;            /* prevents inline-baseline drift */
}

/* -----------------------------------------------------------------------------
 * Phase 2 placeholders — styles for feedback widget will go here.
 * -------------------------------------------------------------------------- */