/**
 * Post meta bar (Figma node 509:12091).
 *
 * Layout: flex row with `justify-content: space-between` so the .info group
 * pins to the right edge (RTL — first DOM child) and the .actions group
 * pins to the left edge (RTL — last DOM child).
 *
 * @package Hamechadesh
 */

.hm-meta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap; /* info + actions ALWAYS on one row, even on mobile */
	gap: 16px;
	margin-block-start: 20px;
	margin-block-end: 50px;
	padding-block: 16px;
	border-block-start: 0.5px solid rgba(56, 56, 56, 0.5);
	border-block-end: 0.5px solid rgba(56, 56, 56, 0.5);
	color: var(--hm-color-text);
	font-family: var(--hm-font-primary);
	font-weight: 300;
	/* Container queries below react to the bar's actual width (not the
	   viewport), so the breakpoints work correctly at any sidebar/column
	   width — including resized desktop windows. */
	container-type: inline-size;
	container-name: hm-meta-bar;
}

/* ===== Right group: time | date | author ===== */
.hm-meta-bar__info {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1;
	unicode-bidi: isolate;
}

.hm-meta-bar__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.hm-meta-bar__sep {
	flex-shrink: 0;
	width: 1px;
	height: 15px;
	background-color: var(--hm-color-text);
}

/* ===== Left group: comments + share ===== */
.hm-meta-bar__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Comment-link buttons — shared visual style.
   Used both inside the meta-bar (Figma node 615:17317) and as the
   end-of-article CTA below the post content. The meta-bar variant is
   vertically centred via the parent's `align-items: center`; the CTA gets
   its own wrapper for right-alignment in single.css. */
.hm-meta-bar__comments,
.hm-comments-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 25px;
	background-color: var(--hm-color-bg);
	border: 1px solid var(--hm-color-text);
	border-radius: 6px;
	color: var(--hm-color-text);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: opacity var(--hm-transition-fast);
}

.hm-meta-bar__comments:hover,
.hm-meta-bar__comments:focus-visible,
.hm-comments-cta:hover,
.hm-comments-cta:focus-visible {
	opacity: 0.85;
	color: var(--hm-color-text);
	text-decoration: none;
	outline: none;
}

.hm-meta-bar__comments-icon,
.hm-comments-cta__icon {
	flex-shrink: 0;
	width: 12px;
	height: 14px;
}

/* Share button — text on the right, orange circle on the left (Figma
   node 509:12079; DOM order in this file is reversed for RTL). */
.hm-meta-bar__share {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--hm-color-text);
	/* <button> doesn't inherit font by default — re-apply the site font. */
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 16px;
	line-height: 22px;
	text-align: start;
	transition: opacity var(--hm-transition-fast);
}

.hm-meta-bar__share:hover,
.hm-meta-bar__share:focus-visible {
	opacity: 0.85;
	outline: none;
}

.hm-meta-bar__share-text {
	white-space: nowrap;
}

/* Share button — round pill colored with the post's category color.
   Falls back to the theme orange when --hm-cat-color hasn't been set
   (e.g. on news-flash post type or other non-post contexts). */
.hm-meta-bar__share-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
	padding: 4px;
	background-color: var(--hm-cat-color, var(--hm-color-orange));
	border-radius: 50%;
	color: #ffffff;
}

.hm-meta-bar__share-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Mobile — tighten spacing + smaller fonts.
   The bar itself stays a single row (flex-wrap: nowrap on the base);
   the actions group stays row by default and only changes shape via
   the container-query stages below. */
@media (max-width: 767px) {
	.hm-meta-bar {
		gap: 16px;
		align-items: center;
	}

	.hm-meta-bar__info {
		gap: 8px;
		font-size: 13px;
	}

	.hm-meta-bar__actions {
		gap: 12px;
	}

	.hm-meta-bar__comments {
		padding: 5px 14px;
		font-size: 13px;
	}

	.hm-meta-bar__share {
		gap: 10px;
		font-size: 14px;
	}

	.hm-meta-bar__share-icon {
		width: 32px;
		height: 32px;
	}

	.hm-meta-bar__share-icon svg {
		width: 16px;
		height: 16px;
	}
}

/* ==========================================================================
   Progressive degradation — driven by the bar's actual width.
   Stage 1 (default): comments + share-with-text, side by side.
   Stage 2: hide the "שיתוף הכתבה" label, keep the orange icon.
   Stage 3: stack comments + share into two rows.
   ========================================================================== */

/* Stage 2 — bar is too narrow for both buttons with the share label. */
@container hm-meta-bar (max-width: 450px) {
	.hm-meta-bar__share-text {
		display: none;
	}
}

/* Stage 3 — bar is too narrow even with icon-only share. Stack actions. */
@container hm-meta-bar (max-width: 320px) {
	.hm-meta-bar__actions {
		flex-direction: column;
		align-items: flex-end; /* RTL: flex-end = LEFT (Lesson #1) */
		gap: 10px;
	}
}