/**
 * InvestingCube Blocks -- frontend styling for the Tout Section and
 * News Ticker blocks/shortcodes. Self-contained: does not depend on
 * any theme stylesheet. Mobile-first throughout.
 */

:root {
	--ic-accent: #00306e;
	--ic-secondary: #fbe610;
	--ic-ink: #14171f;
	--ic-body: #55606e;
	--ic-line: #e3e6ea;
	--ic-bg: #f5f6f8;
	--ic-surface: #ffffff;
}

[data-theme="dark"] {
	--ic-ink: #e5e7eb;
	--ic-body: #9ca3af;
	--ic-line: #2a2f3a;
	--ic-bg: #0f1218;
	--ic-surface: #171b23;
}

.ic-tout, .ic-ticker { font-family: inherit; color: var(--ic-ink); }
.ic-tout *, .ic-ticker * { box-sizing: border-box; }
.ic-tout img { max-width: 100%; height: auto; display: block; }

/* !important here is deliberate: the active theme (or another plugin)
   commonly sets its own global link color (this site's parent theme
   sets a blue #0000ff, for example) on a selector that ends up more
   specific or later in the cascade than a plain ".ic-tout a" rule --
   confirmed live that headline links otherwise rendered in the theme's
   link-blue instead of the intended ink/accent colors below. */
.ic-tout a,
.ic-ticker a {
	text-decoration: none !important;
	color: inherit !important;
}

/* ---------- Reveal-on-scroll ---------- */

.ic-reveal { opacity: 0; transform: translateY(14px); }
.ic-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
	.ic-reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
}

/* ---------- Pulse / live dot ---------- */

.ic-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; position: relative; }
.ic-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ic-pulse-ring 1.8s ease-out infinite; }
.ic-pulse--live { background: #ef4444; }
@keyframes ic-pulse-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ic-pulse::after { animation: none; } }

/* ==========================================================================
   Tout Section
   ========================================================================== */

.ic-tout { margin: 20px 0; }
.ic-tout--empty { padding: 24px; text-align: center; color: var(--ic-body); background: var(--ic-bg); border-radius: 8px; }

.ic-tout__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ic-tout__heading { font-size: 1.2rem; font-weight: 700; margin: 0; padding-left: 12px; border-left: 4px solid var(--ic-secondary); }
.ic-tout__see-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--ic-accent) !important; white-space: nowrap; }
.ic-tout__see-all:hover { text-decoration: underline !important; }

.ic-tout__filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
.ic-filter-btn { flex: 0 0 auto; padding: 6px 14px; border: 1px solid var(--ic-line); border-radius: 999px; background: var(--ic-surface); color: var(--ic-body); font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ic-filter-btn.is-active { background: var(--ic-accent); border-color: var(--ic-accent); color: #fff; }

/* -- list display -- */
.ic-tout__list { display: flex; flex-direction: column; }
.ic-tout-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ic-line); }
.ic-tout-row:last-child { border-bottom: none; }
.ic-tout-row__date { flex: 0 0 auto; width: 76px; font-size: 0.72rem; color: #9ca3af; }
.ic-tout-row__title { flex: 1; margin: 0; font-size: 0.92rem; line-height: 1.4; font-weight: 600; }
.ic-tout-row__title a { color: var(--ic-ink) !important; }
.ic-tout-row__title a:hover,
.ic-tout-row__title a:focus-visible { color: var(--ic-cat-color, var(--ic-accent)) !important; }
.ic-tout-row__cat { flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ic-cat-color, var(--ic-accent)); }

@media (max-width: 480px) {
	.ic-tout-row { flex-wrap: wrap; gap: 2px 10px; }
	.ic-tout-row__date { width: auto; order: 2; }
	.ic-tout-row__title { order: 1; flex-basis: 100%; }
	.ic-tout-row__cat { order: 3; }
}

/* -- card display -- */
.ic-tout__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .ic-tout__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ic-tout__grid { grid-template-columns: repeat(3, 1fr); } }

.ic-card { background: var(--ic-surface); border: 1px solid var(--ic-line); border-radius: 8px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
@media (prefers-reduced-motion: reduce) { .ic-card { transition: none; } }
.ic-card:hover, .ic-card:focus-within { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.ic-card__media { display: block; aspect-ratio: 16/10; background: var(--ic-line); overflow: hidden; }
.ic-card__img { width: 100%; height: 100%; object-fit: cover; }
.ic-card__img--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg,#eef1f5,#e2e6ec); }
.ic-card__body { padding: 14px 16px 16px; }
.ic-card__cat { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ic-cat-color, var(--ic-accent)) !important; margin-bottom: 6px; }
.ic-card__title { font-size: 1rem; line-height: 1.35; margin: 0 0 8px; font-weight: 700; }
.ic-card__title a { color: var(--ic-ink) !important; }
.ic-card__title a:hover,
.ic-card__title a:focus-visible { color: var(--ic-cat-color, var(--ic-accent)) !important; }
.ic-card__byline { display: flex; gap: 6px; font-size: .76rem; color: var(--ic-body); margin: 0 0 8px; }
.ic-card__author { font-weight: 600; }
.ic-card__meta { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: #9ca3af; }
.ic-card__new { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: #16a34a; }

/* ==========================================================================
   News Ticker
   ========================================================================== */

/* Fixed, explicit height: every inner row (label, viewport, track,
   lanes, items) fills 100% of it and centers via flexbox -- rather than
   relying on padding math to line everything up, which is what let the
   label and the ticker items drift to slightly different heights and
   made the text look off-center. */
.ic-ticker {
	position: relative;
	display: flex;
	align-items: stretch;
	height: 46px;
	background: #0b0e14;
	color: #fff;
	border-radius: 6px;
	overflow: hidden;
	margin: 20px 0;
}
.ic-ticker--empty { display: block; background: var(--ic-bg); color: var(--ic-body); padding: 16px; border-radius: 6px; text-align: center; height: auto; }

.ic-ticker__label {
	flex: 0 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-right: 1px solid rgba(255,255,255,.15);
	white-space: nowrap;
}

/* JS-driven marquee: .ic-ticker__track's transform is set directly by
   frontend.js on every animation frame (not a CSS @keyframes loop) so
   auto-scroll, hover/focus/visibility pausing, and pointer-dragging all
   share one consistent position value instead of fighting over the
   same CSS property from two different systems. The marquee runs
   regardless of prefers-reduced-motion (a real news ticker's motion is
   informational, not decorative flourish) -- hover, keyboard focus, and
   dragging all stop it instantly for anyone who wants it still. */
.ic-ticker__viewport {
	position: relative;
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-width: 0;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
}
.ic-ticker__viewport.is-dragging { cursor: grabbing; }

/* Too few items to fill the width -- center the single lane instead of
   auto-scrolling from flush-left, which otherwise leaves a lopsided
   empty gap on the right. */
.ic-ticker.is-static .ic-ticker__viewport { justify-content: center; cursor: default; }
.ic-ticker.is-static .ic-ticker__viewport::before,
.ic-ticker.is-static .ic-ticker__viewport::after { display: none; }
.ic-ticker.is-static .ic-ticker__lane[aria-hidden="true"] { display: none; }

/* Soft edge fade hints that there's more content to either side --
   also doubles as a visual cue this is draggable/scrollable. */
.ic-ticker__viewport::before,
.ic-ticker__viewport::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 24px;
	z-index: 2;
	pointer-events: none;
}
.ic-ticker__viewport::before { left: 0; background: linear-gradient(90deg, #0b0e14, transparent); }
.ic-ticker__viewport::after { right: 0; background: linear-gradient(270deg, #0b0e14, transparent); }

.ic-ticker__track {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	will-change: transform;
}

.ic-ticker__lane {
	display: flex;
	align-items: center;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

@media (max-width: 480px) {
	.ic-ticker { height: 40px; }
}

.ic-ticker__lane li { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 28px 10px 0; font-size: .85rem; white-space: nowrap; }
.ic-ticker__lane a { font-weight: 600; color: #fff !important; }
.ic-ticker__lane a:hover, .ic-ticker__lane a:focus-visible { text-decoration: underline; }
.ic-ticker__lane time { color: rgba(255,255,255,.5); font-size: .75rem; }

.ic-ticker__lane li.ic-ticker__item--new {
	animation: ic-ticker-highlight 2.4s ease-out;
}

@keyframes ic-ticker-highlight {
	0% { background: rgba(251, 230, 16, .35); border-radius: 4px; }
	100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	/* The marquee's own auto-scroll deliberately keeps running under
	   reduced motion (see frontend.js) -- only the decorative new-item
	   highlight animation is suppressed here. */
	.ic-ticker__lane li.ic-ticker__item--new { animation: none; background: rgba(251, 230, 16, .35); border-radius: 4px; }
}

.ic-ticker__announcer {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

/* ---------- Focus visibility ---------- */

.ic-tout a:focus-visible,
.ic-tout button:focus-visible,
.ic-ticker a:focus-visible {
	outline: 2px solid var(--ic-accent);
	outline-offset: 2px;
}