/*
 * Engagement, session-duration & internal-journey UX.
 * Loaded conditionally on singular views.
 */

/* ----------------------------------------------------------------- */
/*  Continue-reading card                                             */
/* ----------------------------------------------------------------- */
.rw-continue-reading {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 1.75rem 0;
	border: 1px solid var(--rw-color-border);
	border-radius: var(--rw-radius);
	overflow: hidden;
	background: var(--rw-color-bg);
}

@media (min-width: 600px) {
	.rw-continue-reading {
		grid-template-columns: 220px 1fr;
	}
}

.rw-continue-reading__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rw-color-bg-soft);
}

.rw-continue-reading__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rw-continue-reading__body {
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.rw-continue-reading__cat {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rw-color-primary);
	font-weight: 600;
}

.rw-continue-reading__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
}

.rw-continue-reading__title a {
	color: var(--rw-color-secondary);
	text-decoration: none;
}

.rw-continue-reading__title a:hover {
	color: var(--rw-color-primary);
}

.rw-continue-reading__reason {
	margin: 0;
	color: var(--rw-color-text-muted);
	font-size: 0.9rem;
}

.rw-continue-reading__meta {
	margin: 0.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	font-size: 0.85rem;
	color: var(--rw-color-text-muted);
}

.rw-continue-reading__cta {
	margin-left: auto;
	color: var(--rw-color-primary);
	text-decoration: none;
	font-weight: 600;
}

.rw-continue-reading__cta:hover {
	text-decoration: underline;
}

/* ----------------------------------------------------------------- */
/*  Topic-journey chain                                               */
/* ----------------------------------------------------------------- */
.rw-journey {
	margin: 2rem 0;
	padding: 1.25rem;
	background: var(--rw-color-bg-soft);
	border-radius: var(--rw-radius);
}

.rw-journey__head {
	margin-bottom: 1rem;
}

.rw-journey__title {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rw-color-text-muted);
}

.rw-journey__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	counter-reset: rw-journey;
}

@media (min-width: 800px) {
	.rw-journey__list {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 0.75rem;
	}
}

.rw-journey__step {
	position: relative;
}

.rw-journey__step-link {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.75rem 0.85rem;
	background: var(--rw-color-bg);
	border: 1px solid var(--rw-color-border);
	border-radius: var(--rw-radius);
	color: var(--rw-color-secondary);
	text-decoration: none;
	height: 100%;
}

.rw-journey__step-link:hover,
.rw-journey__step-link:focus-visible {
	border-color: var(--rw-color-primary);
	color: var(--rw-color-primary);
}

.rw-journey__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--rw-color-primary);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
}

.rw-journey__step-title {
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.3;
}

/* Connector arrows between steps on desktop. */
@media (min-width: 800px) {
	.rw-journey__step + .rw-journey__step::before {
		content: "→";
		position: absolute;
		left: -0.85rem;
		top: 50%;
		transform: translateY(-50%);
		color: var(--rw-color-border);
		font-size: 0.9rem;
		pointer-events: none;
	}
}

/* ----------------------------------------------------------------- */
/*  Inline recommendations                                            */
/* ----------------------------------------------------------------- */
.rw-inline-rec {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--rw-color-primary);
	background: var(--rw-color-bg-soft);
	border-radius: 0 var(--rw-radius) var(--rw-radius) 0;
}

.rw-inline-rec__label {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rw-color-primary);
}

.rw-inline-rec__title {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.rw-inline-rec__title a {
	color: var(--rw-color-secondary);
	text-decoration: none;
}

.rw-inline-rec__title a:hover,
.rw-inline-rec__title a:focus-visible {
	color: var(--rw-color-primary);
	text-decoration: underline;
}

.rw-inline-rec__body > * { margin-top: 0; }
.rw-inline-rec__body > * + * { margin-top: 0.4rem; }
.rw-inline-rec__body p:last-child { margin-bottom: 0; }

/* Type-specific accent colours — clearly distinct from any ad slot
 * so visitors can read them as content recommendations. */
.rw-inline-rec--like     { border-left-color: #6366f1; background: #eef2ff; }
.rw-inline-rec--like .rw-inline-rec__label { color: #4338ca; }
.rw-inline-rec--guide    { border-left-color: #0891b2; background: #ecfeff; }
.rw-inline-rec--guide .rw-inline-rec__label { color: #0e7490; }
.rw-inline-rec--step     { border-left-color: #059669; background: #ecfdf5; }
.rw-inline-rec--step .rw-inline-rec__label { color: #047857; }
.rw-inline-rec--resource { border-left-color: #d97706; background: #fffbeb; }
.rw-inline-rec--resource .rw-inline-rec__label { color: #b45309; }

/* ----------------------------------------------------------------- */
/*  Popular / trending / editor's pick block (theme-provided shell)   */
/* ----------------------------------------------------------------- */
.rw-popular,
.rw-trending,
.rw-editors-pick {
	margin: 2rem 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--rw-color-border);
}

.rw-popular__title,
.rw-trending__title,
.rw-editors-pick__title {
	margin: 0 0 1rem;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
}

.rw-popular__list,
.rw-trending__list,
.rw-editors-pick__list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 700px) {
	.rw-popular__list,
	.rw-trending__list,
	.rw-editors-pick__list {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* ----------------------------------------------------------------- */
/*  Reading-time chip                                                 */
/* ----------------------------------------------------------------- */
.rw-eeat-meta__reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--rw-color-bg-soft);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--rw-color-text-muted);
}

.rw-eeat-meta__reading-time::before {
	content: "\23F1";
	font-size: 0.85rem;
	line-height: 1;
}

/* ----------------------------------------------------------------- */
/*  Back-to-top button                                                */
/* ----------------------------------------------------------------- */
.rw-back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--rw-color-border);
	background: var(--rw-color-bg);
	color: var(--rw-color-secondary);
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
	z-index: 9980;
	font-size: 1.1rem;
	transition: transform 150ms var(--rw-ease, ease), opacity 150ms var(--rw-ease, ease);
}

.rw-back-to-top[hidden] {
	display: none;
}

.rw-back-to-top:hover,
.rw-back-to-top:focus-visible {
	background: var(--rw-color-primary);
	color: #fff;
	border-color: var(--rw-color-primary);
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.rw-back-to-top {
		right: 0.75rem;
		bottom: 0.85rem;
		width: 40px;
		height: 40px;
	}
}

/* ----------------------------------------------------------------- */
/*  Reduced motion                                                    */
/* ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rw-back-to-top { transition: none; }
}