/* ==========================================================================
   In-article related story ("Read also") — inc/core/inline-related.php
   Six designs; colours, fonts and corners come from the active demo's tokens,
   so every one works in light and dark mode.
   ========================================================================== */
.ep-irel {
	--irel-r: var(--sk-radius, var(--radius, 12px));
	--irel-line: var(--irel-border-c, var(--border-color, var(--border, rgba(127, 127, 127, .2))));
	--irel-soft: var(--bg-section-alt, color-mix(in srgb, var(--text-main) 5%, transparent));
	--irel-accent: var(--accent-text, var(--accent));
	/* Colours › Read Also Box (empty = these defaults) */
	--irel-label: var(--irel-label-c, var(--irel-accent));
	--irel-hover: var(--irel-hover-c, var(--irel-accent));
	--irel-title: var(--irel-title-c, var(--text-main));
	clear: both; margin: 2em 0; padding: 0; font-family: var(--font-body);
}
.ep-irel a, .ep-irel a:hover { text-decoration: none !important; box-shadow: none !important; background-image: none !important; }
.ep-irel .ep-irel__link { display: flex; align-items: center; gap: 16px; color: var(--irel-title) !important; }
.ep-irel__media { flex: 0 0 auto; display: block; overflow: hidden; background: var(--irel-soft); }
.ep-irel__img { display: block; width: 100%; height: 100%; margin: 0 !important; object-fit: cover; border-radius: 0 !important; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ep-irel__link:hover .ep-irel__img { transform: scale(1.05); }
.ep-irel__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.ep-irel__label { display: flex; align-items: center; gap: 8px; color: var(--irel-label); font: 700 .72rem/1.2 var(--sk-label-font, var(--font-body)); letter-spacing: .1em; text-transform: uppercase; }
.ep-irel__label em { font-style: normal; color: var(--text-muted); font-weight: 600; }
.ep-irel__label em::before { content: "·"; margin-right: 8px; color: var(--text-muted); }
.ep-irel__title { color: var(--irel-title); font: 700 1.08rem/1.35 var(--font-heading); letter-spacing: -.01em; transition: color .2s; }
.ep-irel__link:hover .ep-irel__title { color: var(--irel-hover); }
.ep-irel__go { flex: 0 0 auto; color: var(--text-muted); font-size: 1.25rem; transition: transform .2s, color .2s; }
.ep-irel__link:hover .ep-irel__go { color: var(--irel-hover); transform: translate(2px, -2px); }

/* 1. Card — thumbnail + headline in a bordered card */
.ep-irel--card .ep-irel__link { padding: 12px; border: 1px solid var(--irel-line); border-radius: var(--irel-r); background: var(--irel-bg-c, var(--bg-card, var(--bg-body))); transition: border-color .2s, box-shadow .2s; }
.ep-irel--card .ep-irel__link:hover { border-color: color-mix(in srgb, var(--irel-hover-c, var(--accent)) 45%, var(--irel-line)); box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .45); }
.ep-irel--card .ep-irel__media { width: 132px; aspect-ratio: 4 / 3; border-radius: calc(var(--irel-r) * .7); }

/* 2. Minimal — hairlines above and below, small square thumb */
.ep-irel--minimal .ep-irel__link { padding: 16px 0; border-top: 1px solid var(--irel-line); border-bottom: 1px solid var(--irel-line); }
.ep-irel--minimal .ep-irel__media { order: 3; width: 64px; height: 64px; border-radius: 10px; }
.ep-irel--minimal .ep-irel__go { display: none; }
.ep-irel--minimal .ep-irel__title { font-size: 1.05rem; }

/* 3. Accent bar — coloured left edge, compact */
.ep-irel--accent .ep-irel__link { padding: 6px 0 6px 18px; border-left: 4px solid var(--irel-border-c, var(--accent)); }
.ep-irel--accent .ep-irel__media { width: 72px; height: 72px; border-radius: calc(var(--irel-r) * .6); }
.ep-irel--accent .ep-irel__title { font-size: 1.12rem; text-transform: var(--sk-title-tt, none); }

/* 4. Soft box — tinted panel with a larger image */
.ep-irel--boxed .ep-irel__link { padding: 14px; border-radius: calc(var(--irel-r) * 1.2); background: var(--irel-bg-c, color-mix(in srgb, var(--accent) 7%, var(--bg-body))); }
.ep-irel--boxed .ep-irel__media { width: 150px; aspect-ratio: 16 / 10; border-radius: var(--irel-r); }
.ep-irel--boxed .ep-irel__link:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-body)); }
.ep-irel--boxed.has-bg .ep-irel__link:hover { background: color-mix(in srgb, var(--irel-hover-c, var(--accent)) 6%, var(--irel-bg-c, var(--bg-body))); }

/* 5. Editorial — one serif-feel line, no image */
.ep-irel--editorial .ep-irel__link { display: block; padding: 2px 0; }
.ep-irel--editorial .ep-irel__body { display: inline; }
.ep-irel--editorial .ep-irel__label { display: inline; margin-right: .4em; font: italic 600 1.05em/1.5 var(--font-heading); letter-spacing: 0; text-transform: none; }
.ep-irel--editorial .ep-irel__title { display: inline; font: 600 1.05em/1.5 var(--font-heading); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--irel-hover-c, var(--accent)) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ep-irel--editorial .ep-irel__link:hover .ep-irel__title { text-decoration-color: currentColor; }

/* 6. Stack — label + up to three headlines */
.ep-irel--list { padding: 18px 20px; border: 1px solid var(--irel-line); border-radius: var(--irel-r); background: var(--irel-bg-c, none); }
.ep-irel--list .ep-irel__label { margin-bottom: 10px; }
.ep-irel__list { margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: irel; }
.ep-irel.ep-irel--list .ep-irel__list li { position: relative; margin: 0 !important; padding: 9px 0 9px 30px !important; border-top: 1px solid var(--irel-line); counter-increment: irel; list-style: none !important; }
.ep-irel.ep-irel--list .ep-irel__list li:first-child { border-top: 0; padding-top: 2px !important; }
.ep-irel.ep-irel--list .ep-irel__list li::before { content: counter(irel, decimal-leading-zero); position: absolute; left: 0; top: 14px; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; color: var(--irel-label); font: 800 .78rem/1 var(--font-heading); font-variant-numeric: tabular-nums; transform: none; }
.ep-irel.ep-irel--list .ep-irel__list li:first-child::before { top: 7px; }
.ep-irel__list li::marker { content: none; }
.ep-irel.ep-irel--list .ep-irel__list a { color: var(--irel-title) !important; font: 600 1rem/1.4 var(--font-heading); transition: color .2s; }
.ep-irel.ep-irel--list .ep-irel__list a:hover { color: var(--irel-hover) !important; }

/* A background colour from Colours › Read Also Box on the open designs (minimal, accent bar, editorial) */
.ep-irel.has-bg:is(.ep-irel--minimal, .ep-irel--accent, .ep-irel--editorial) .ep-irel__link { background: var(--irel-bg-c, transparent); padding-left: 16px; padding-right: 16px; border-radius: calc(var(--irel-r) * .8); }

@media (max-width: 600px) {
	.ep-irel--card .ep-irel__media, .ep-irel--boxed .ep-irel__media { width: 96px; }
	.ep-irel--card .ep-irel__go, .ep-irel--boxed .ep-irel__go { display: none; }
	.ep-irel__title { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ep-irel__img, .ep-irel__go { transition: none; }
}
@media print { .ep-irel { display: none; } }