/* Concept 1b measurements, tracking and translucent rings are literal because
 * the approved token set has no matching geometry, type-size or alpha tokens. */
.zededa-newsroom-stream__filters {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 32px;
}

/* Match every chip property at Kit specificity, including hover/focus defaults. */
.zededa-newsroom-stream__filter,
[class*="elementor-kit-"] button.zededa-newsroom-stream__filter,
[class*="elementor-kit-"] button.zededa-newsroom-stream__filter:is(:hover, :focus) {
	background: transparent;
	border: 0;
	border-radius: var(--border-radius-none);
	box-shadow: inset 0 0 0 1px rgba(19, 56, 68, 0.35);
	color: var(--color-container-blue);
	fill: currentColor;
	cursor: pointer;
	flex-shrink: 0;
	font-family: var(--typography-font-family-cta);
	font-size: 16px;
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.005em;
	text-transform: none;
	padding: 11px 18px;
	white-space: nowrap;
}

.zededa-newsroom-stream__filter.is-active,
[class*="elementor-kit-"] button.zededa-newsroom-stream__filter.is-active,
[class*="elementor-kit-"] button.zededa-newsroom-stream__filter.is-active:is(:hover, :focus) {
	background: var(--color-container-blue);
	color: var(--color-neutral-white);
	box-shadow: none;
}

.zededa-newsroom-row {
	display: grid;
	grid-template-columns: 168px 1fr;
	gap: 32px;
	padding: 32px 0;
	box-shadow: inset 0 1px 0 rgba(19, 56, 68, 0.2);
}

.zededa-newsroom-row__meta,
.zededa-newsroom-row__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 12px;
}

.zededa-newsroom-row__meta time {
	color: var(--color-container-blue);
	font-weight: var(--typography-font-weight-semibold);
	font-size: 16px;
}

.zededa-newsroom-row__body {
	gap: 10px;
	align-items: flex-start;
}

.zededa-newsroom-row__tag {
	align-self: flex-start;
	background: transparent;
	border: 0;
	border-radius: var(--border-radius-none);
	color: var(--color-container-blue);
	box-shadow: inset 0 0 0 1.5px rgba(19, 56, 68, 0.35);
	font-family: var(--typography-font-family-cta);
	font-weight: var(--typography-font-weight-bold);
	font-size: 15.206px;
	line-height: 1.45;
	letter-spacing: 0.10em;
	padding: 5px 8px;
	text-transform: uppercase;
}

.zededa-newsroom-row--press-release .zededa-newsroom-row__tag {
	color: var(--color-brand-primary);
	box-shadow: inset 0 0 0 1.5px var(--color-brand-primary);
}

.zededa-newsroom-row--news .zededa-newsroom-row__tag {
	color: var(--color-container-blue);
	box-shadow: inset 0 0 0 1.5px rgba(19, 56, 68, 0.35);
}

.zededa-newsroom-row--event .zededa-newsroom-row__tag {
	color: var(--color-container-blue);
	box-shadow: inset 0 0 0 1.5px var(--color-navigation-cta-background);
}

.zededa-newsroom-row__source {
	color: var(--color-text-dark-label);
	font-size: 16px;
}

.zededa-newsroom-row h3,
[class*="elementor-kit-"] .zededa-newsroom-row h3,
.zededa-newsroom-row h3 a,
[class*="elementor-kit-"] .zededa-newsroom-row h3 a {
	/* Local IBM Plex override required because style.css globally forces headings to Plus Jakarta Sans. */
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-weight: var(--typography-font-weight-bold);
	font-size: 26px;
	line-height: 1.45;
	letter-spacing: -0.005em !important;
	color: var(--color-container-blue);
	text-wrap: pretty;
	margin: 0;
}

.zededa-newsroom-row h3 a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.zededa-newsroom-stream__load-more { margin-top: 40px; }
/* Hidden must beat the CTA component display rule at every Kit specificity. */
.zededa-newsroom-stream__load-more[hidden] { display: none !important; }
.zededa-newsroom-stream.is-loading { opacity: .65; }

@media (max-width: 767px) {
	.zededa-newsroom-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------------------------------------------------------------------------
 * Newsroom page layout (stream + events rail)
 *
 * Lives here because the layout only exists on pages that render the stream,
 * so it ships with the stream's stylesheet rather than adding another enqueue.
 *
 * The grid is on the page layout's boxed wrapper; the stream and rail columns
 * themselves are direct full-width containers and have no inner-wrapper dependency.
 *
 * `.e-con` is in the selector because Elementor styles `.e-con > .e-con-inner`
 * at that specificity; a bare class loses to it.
 * ------------------------------------------------------------------------ */
.e-con.zededa-newsroom-layout > .e-con-inner {
	display: grid;
	/* 380px rail and 72px gutter are design-specified; no spacing token matches. */
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 72px;
	align-items: start;
}

/* Elementor newsroom rail cards, scoped so editorial cards elsewhere stay untouched. */
.zededa-newsroom-layout .zededa-newsroom-card__label .elementor-heading-title {
	color: var(--color-container-blue) !important;
	font-family: 'Plus Jakarta Sans', sans-serif !important;
	font-size: 20px !important;
	font-weight: var(--typography-font-weight-bold) !important;
	letter-spacing: -0.02em !important;
	line-height: 1.1 !important;
	margin: 0 !important;
	text-transform: uppercase;
}

.zededa-newsroom-layout .zededa-newsroom-card__title .elementor-heading-title {
	color: var(--color-neutral-white) !important;
	/* Local IBM Plex override required because style.css globally forces headings to Plus Jakarta Sans. */
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 26px !important;
	font-weight: var(--typography-font-weight-bold) !important;
	letter-spacing: -0.005em !important;
	line-height: 1.45 !important;
	margin: 0 !important;
}

.zededa-newsroom-layout .zededa-newsroom-card__body,
.zededa-newsroom-layout .zededa-newsroom-card__body .elementor-widget-container,
.zededa-newsroom-layout .zededa-newsroom-card__body p {
	color: var(--color-text-dark-label) !important;
	font-family: 'IBM Plex Sans', sans-serif !important;
	font-size: 18px !important;
	font-weight: var(--typography-font-weight-medium) !important;
	letter-spacing: -0.005em;
	line-height: 1.45;
}

.zededa-newsroom-layout .zededa-newsroom-card__body p {
	margin: 0;
}

.zededa-newsroom-layout .zededa-newsroom-card--contact .zededa-newsroom-card__body,
.zededa-newsroom-layout .zededa-newsroom-card--contact .zededa-newsroom-card__body .elementor-widget-container,
.zededa-newsroom-layout .zededa-newsroom-card--contact .zededa-newsroom-card__body p {
	color: var(--color-neutral-white) !important;
	font-size: 16px !important;
	opacity: 0.8;
}

.zededa-newsroom-layout .zededa-newsroom-card--contact .zededa-newsroom-card__body a {
	color: inherit !important;
	text-decoration: underline;
}

/*
 * container-styles.css forces --container-padding-block (!important) on every
 * top-level background section. The comp's newsroom body is 40px top / 96px
 * bottom. A boxed Elementor container already applies its own vertical
 * padding (with the tablet/mobile overrides) to `.e-con-inner`, so zero the
 * forced outer padding rather than stacking both. The doubled class beats
 * that rule's :is() specificity.
 */
.e-con.zededa-newsroom-layout.zededa-newsroom-layout {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Rail drops below the stream from 1024px down. */
@media (max-width: 1024px) {
	.e-con.zededa-newsroom-layout > .e-con-inner {
		grid-template-columns: minmax(0, 1fr);
		/* Preserve the responsive gutter; no approved spacing token was supplied. */
		gap: 48px;
	}
}