/**
 * Meta bar - Figma node 9:166
 *
 * Values are taken literally from the Figma canvas (72px tall, 14px text, 13px radius,
 * 24px icons, 24px inset), per direction to stay faithful to the design.
 *
 * One deliberate exception: WIDTH. The card is 740px on the canvas, but it is drawn
 * flush with the article title, and this site's content column (.container-800) is
 * 800px - so it fills its container rather than being pinned to 740px and sitting
 * inset from the title it is supposed to line up with.
 */

/*--------------------------------------------------------------
# HIDDEN - 2026-07-28, at the client's request. TEMPORARY.
#
# "Hide it for now, don't remove it" - so nothing is deleted: the shortcode still runs, the
# markup is still in the page, and every rule below is intact and still correct. Delete this
# ONE rule and the bar returns exactly as it was.
#
# Unscoped on purpose. It would have been easy to hide this only on single posts and leave it
# visible where we place the shortcode by hand (the /post-dev/ review page), but then the page
# we review the modules on would be showing something the live site does not. A review surface
# that disagrees with production is worse than no review surface.
#
# display:none rather than visibility:hidden - the bar has a 48px top margin and the block
# below it owns the gap underneath, so leaving the box in the flow would leave a gap with
# nothing in it.
#
# NOTE if this becomes permanent: the bar is hidden, not skipped. PostMetaBar still renders,
# which means the read-time count still runs the whole post through do_shortcode() on every
# request to measure something nobody can see. Cheap and memoised, but pure waste - at that
# point drop the shortcode call in single.php (or put the module behind a config.php flag like
# 'type_scale') instead of paying for it invisibly.
--------------------------------------------------------------*/
.iron-post-meta {
	display: none;
}

/* Sits in .site-masthead-generic, between .e-content-inner and .e-content-meta-actions
   (rendered by single.php). Canvas gap above the bar: 514 - 466 = 48px. */
.iron-post-meta {
	margin: 48px 0 0;
}

/* The gap below is owned by the next element: .e-content-meta-actions carries a 48px
   margin-top, which collapses with anything set here and wins. Scoping to the adjacent
   sibling gets the canvas gap (618 - 586 = 32px) without touching that class where it
   is used elsewhere. */
.iron-post-meta + .e-content-meta-actions {
	margin-top: 32px;
}

.iron-post-meta__list {
	display: flex;
	align-items: center;
	/* Items sit together from the left. The design's space-between spread the four items
	   across the full bar; with the topic hidden the remaining items read better grouped
	   than stretched into wide gaps, so they flow left on their natural spacing. */
	flex-wrap: wrap;
	gap: 12px 22px;
	min-height: 72px;
	margin: 0;
	padding: 10px 24px;
	list-style: none;
	background: #fff;
	border-radius: 13px;
	box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}

.iron-post-meta__item {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
}

/* The theme gives every `ul li` inside post content a red bullet - drawn as a 10x10
   background-image on a ::before, not as a list marker, so neither `list-style: none`
   nor a plain `content: none` removes it. Its selector
   (`.site-iron-main-generic ul li::before`) scores 0,1,3; this two-class selector scores
   0,2,1 and wins on class count, which is why it isn't written with !important. */
.iron-post-meta__list .iron-post-meta__item::before {
	content: none;
}

/* width:auto lets the browser derive each icon's width from its own viewBox ratio -
   the SVGs are 24px tall but different widths, and they carry
   preserveAspectRatio="none", so a fixed width would visibly distort them. */
.iron-post-meta__icon {
	display: block;
	flex: none;
	height: 24px;
	width: auto;
}

.iron-post-meta__label {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.5px;
	color: #000;
}

/* Once the items wrap there is no full bar left to distribute across, so space-between
   would stretch a short last row into odd gaps. */
@media (max-width: 600px) {
	.iron-post-meta__list {
		justify-content: flex-start;
		gap: 12px 20px;
		padding: 18px 20px;
	}

	.iron-post-meta__item {
		gap: 12px;
	}
}