/**
 * Easy Article Navigation
 *
 * Every rule is scoped to .ean.ean so a template selector such as
 * "#content a" or "img" does not restyle the cards. Properties that
 * templates usually force (color, margin, display) are set with
 * !important inside this scope only.
 *
 * Empty admin color fields inherit. Set a value, or set the same
 * custom property from the CSS class field:
 *
 *   --ean-label   label color
 *   --ean-title   title color
 *   --ean-meta    date and category color
 *   --ean-bg      card background
 *   --ean-border  card border color
 *   --ean-radius  card corner radius
 *   --ean-img     intro image width
 *   --ean-gap     space between the two cards
 *
 * Icons use Font Awesome (fa-solid). The icon element keeps the
 * Font Awesome family so a template font rule cannot replace it.
 */

.ean.ean {
	all: initial;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 1.25rem 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: normal !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-align: start !important;
	text-transform: none !important;
	direction: inherit !important;
	float: none !important;
	clear: both !important;
	container-type: inline-size;
	container-name: ean;
}

.ean.ean *,
.ean.ean *::before,
.ean.ean *::after {
	box-sizing: border-box !important;
}

.ean.ean .ean-series {
	all: unset;
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 12px !important;
	margin: 0 0 8px !important;
	color: inherit !important;
	font: inherit !important;
}

.ean.ean .ean-series-name {
	all: unset;
	font-weight: 600 !important;
	color: var(--ean-title, inherit) !important;
}

.ean.ean .ean-series-count {
	all: unset;
	font-size: 0.85em !important;
	color: var(--ean-meta, inherit) !important;
	white-space: nowrap !important;
}

.ean.ean .ean-progress {
	all: unset;
	display: block !important;
	height: 3px !important;
	margin: 0 0 14px !important;
	background: color-mix(in srgb, currentColor 18%, transparent) !important;
	border-radius: 99px !important;
	overflow: hidden !important;
}

.ean.ean .ean-progress-bar {
	all: unset;
	display: block !important;
	height: 3px !important;
	background: var(--ean-label, currentColor) !important;
}

.ean.ean .ean-row {
	all: unset;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--ean-gap, 12px) !important;
	width: 100% !important;
}

.ean.ean .ean-slot {
	all: unset;
	display: block !important;
	min-height: 1px !important;
}

.ean.ean a.ean-card {
	all: unset;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-height: 44px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--ean-border, color-mix(in srgb, currentColor 22%, transparent)) !important;
	border-radius: var(--ean-radius, 8px) !important;
	background: var(--ean-bg, transparent) !important;
	color: var(--ean-title, inherit) !important;
	font: inherit !important;
	line-height: 1.35 !important;
	text-align: start !important;
	text-decoration: none !important;
	cursor: pointer !important;
	float: none !important;
	max-width: none !important;
	box-shadow: none !important;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.ean.ean a.ean-card:hover {
	border-color: var(--ean-border, color-mix(in srgb, currentColor 45%, transparent)) !important;
	text-decoration: none !important;
}

.ean.ean a.ean-card:focus {
	outline: none !important;
}

.ean.ean a.ean-card:focus-visible {
	outline: 2px solid var(--ean-label, currentColor) !important;
	outline-offset: 2px !important;
}

.ean.ean a.ean-next {
	flex-direction: row-reverse !important;
	text-align: end !important;
}

.ean.ean .ean-thumb {
	all: unset;
	display: block !important;
	flex: 0 0 var(--ean-img, 84px) !important;
	width: var(--ean-img, 84px) !important;
	height: 64px !important;
	overflow: hidden !important;
	border-radius: 6px !important;
	background: color-mix(in srgb, currentColor 8%, transparent) !important;
}

.ean.ean .ean-img {
	all: unset;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.ean.ean .ean-copy {
	all: unset;
	display: block !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
}

.ean.ean .ean-label {
	all: unset;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin: 0 0 2px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	color: var(--ean-label, inherit) !important;
	line-height: 1.2 !important;
}

.ean.ean a.ean-next .ean-label {
	justify-content: flex-end !important;
}

.ean.ean .ean-label-text {
	all: unset;
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
}

.ean.ean .ean-card .ean-icon {
	all: unset;
	display: inline-block !important;
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
	font-weight: 900 !important;
	font-style: normal !important;
	font-size: 12px !important;
	line-height: 1 !important;
	color: inherit !important;
	width: auto !important;
	height: auto !important;
}

.ean.ean .ean-card .ean-icon::before {
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
	font-weight: 900 !important;
}

.ean.ean .ean-title {
	all: unset;
	display: block !important;
	margin: 0 !important;
	color: var(--ean-title, inherit) !important;
	font-size: 0.95em !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-decoration: none !important;
}

.ean.ean .ean-meta {
	all: unset;
	display: block !important;
	margin: 2px 0 0 !important;
	color: var(--ean-meta, inherit) !important;
	font-size: 0.8em !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	opacity: 0.8;
}

[dir="rtl"] .ean.ean a.ean-prev {
	flex-direction: row-reverse !important;
	text-align: end !important;
}

[dir="rtl"] .ean.ean a.ean-prev .ean-label {
	justify-content: flex-end !important;
}

[dir="rtl"] .ean.ean a.ean-next {
	flex-direction: row !important;
	text-align: start !important;
}

[dir="rtl"] .ean.ean a.ean-next .ean-label {
	justify-content: flex-start !important;
}

[dir="rtl"] .ean.ean .ean-icon {
	transform: scaleX(-1);
}

.ean.ean.ean-stack .ean-row {
	grid-template-columns: 1fr !important;
}

.ean.ean.ean-stack a.ean-card,
.ean.ean.ean-stack a.ean-card .ean-label,
[dir="rtl"] .ean.ean.ean-stack a.ean-card,
[dir="rtl"] .ean.ean.ean-stack a.ean-card .ean-label {
	flex-direction: row !important;
	justify-content: flex-start !important;
	text-align: start !important;
}

@container ean (max-width: 560px) {
	.ean.ean .ean-row {
		grid-template-columns: 1fr !important;
	}

	.ean.ean a.ean-card,
	.ean.ean a.ean-card .ean-label,
	[dir="rtl"] .ean.ean a.ean-card,
	[dir="rtl"] .ean.ean a.ean-card .ean-label {
		flex-direction: row !important;
		justify-content: flex-start !important;
		text-align: start !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ean.ean a.ean-card {
		transition: none !important;
	}
}