/* ==========================================================================
   Continue Reading - the News Grid source

   The card styling is the grid's own; this is only the title and the
   progress bar laid along the bottom of each card's image - the place
   readers already look for "how far did I get" on video sites.
   Logical properties, so it mirrors for right-to-left without a copy.
   ========================================================================== */

.arena-continue {
	--arena-continue-bar: 4px;
	--arena-continue-fill: var(--arena-accent, #c8102e);
	--arena-continue-track: rgba(255, 255, 255, .6);
}

/* "Hide the grid" with nothing to continue yet. */
.arena-continue.arena-continue--empty {
	display: none;
}

.arena-continue .arena-continue__title {
	margin: 0 0 16px;
	color: var(--arena-ink, #14181f);
	font-family: var(--arena-font-head, Georgia, serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.arena-continue .arena-continue__bar-host {
	position: relative;
}

.arena-continue .arena-continue__bar {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: 0;
	height: var(--arena-continue-bar);
	overflow: hidden;
	background: var(--arena-continue-track);
	pointer-events: none;
}

.arena-continue .arena-continue__bar::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--arena-continue-p, 0%);
	background: var(--arena-continue-fill);
}