/* PriceONN — Related Intelligence (Aurora Cards)
 * Scoped Aurora Card system for "Related Intelligence" sections on
 * deep-look-single (desktop + mobile). Mirrors blog/deep-look list pages. */

.ri-aurora { margin-top: 32px; }

.ri-aurora .related-posts-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ri-aurora .related-posts-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; color: #fff; margin: 0;
}
.ri-aurora .related-posts-title svg { width: 18px; height: 18px; color: #4A9EFF; }
.ri-aurora .related-posts-view-all {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: rgba(255,255,255,0.55); text-decoration: none;
    transition: color .15s ease;
}
.ri-aurora .related-posts-view-all:hover { color: #4A9EFF; }
.ri-aurora .related-posts-view-all svg { width: 14px; height: 14px; }

/* Grid */
.ri-aurora .ri-aurora-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .ri-aurora .ri-aurora-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ri-aurora .ri-aurora-grid { grid-template-columns: 1fr; gap: 12px; } }

/* Aurora card */
.ri-aurora .blog-au-card {
    background: linear-gradient(180deg, #0f1628 0%, #0c1220 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    transition: border-color .2s, transform .2s;
    position: relative;
    container-type: inline-size;
}
.ri-aurora .blog-au-card:hover { border-color: rgba(59,138,255,0.35); transform: translateY(-2px); }

.ri-aurora .blog-au-banner {
    aspect-ratio: 16/10; min-height: 150px;
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(59,138,255,0.22), transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(0,255,204,0.14), transparent 65%),
        linear-gradient(135deg,#0a1a3e 0%,#142a5e 55%,#0a1a3e 100%);
}
.ri-aurora .blog-au-banner::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
    background-size: 32px 32px;
}
.ri-aurora .blog-au-banner::after {
    content: ''; position: absolute;
    bottom: -20%; left: -10%; width: 120%; height: 60%;
    background: linear-gradient(70deg,transparent 40%,rgba(59,138,255,0.4) 50%,transparent 60%);
    filter: blur(30px); opacity: 0.8;
}
.ri-aurora .blog-au-banner-top {
    position: relative; z-index: 2; padding: 10px 12px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ri-aurora .blog-au-logo-img { display: block; height: 28px; width: 28px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.ri-aurora .blog-au-symbol {
    font-family: 'Michroma','Inter',sans-serif; font-size: 9px; letter-spacing: 0.15em;
    color: #fff; opacity: 0.9; padding: 3px 9px;
    background: rgba(10,14,26,0.65); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
}
.ri-aurora .blog-au-banner-center {
    position: relative; z-index: 2; flex: 1;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 16px 14px 40px; gap: 0;
}
.ri-aurora .blog-au-category {
    position: absolute;
    left: 14px; bottom: 12px; z-index: 3;
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #00ffcc; background: rgba(0,255,204,0.12); border: 1px solid rgba(0,255,204,0.28);
    padding: 4px 10px; border-radius: 4px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ri-aurora .blog-au-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(15px, 5.6cqi, 22px);
    font-weight: 400; line-height: 1.22;
    color: #fff; margin: 0;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Palettes — cycling navy / ocean / emerald */
.ri-aurora .blog-au-card[data-palette="ocean"] .blog-au-banner {
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(6,182,212,0.28), transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(34,211,238,0.14), transparent 65%),
        linear-gradient(135deg,#0a2e3e 0%,#14465e 55%,#0a2e3e 100%);
}
.ri-aurora .blog-au-card[data-palette="ocean"] .blog-au-banner::after {
    background: linear-gradient(70deg,transparent 40%,rgba(6,182,212,0.45) 50%,transparent 60%);
}
.ri-aurora .blog-au-card[data-palette="ocean"] .blog-au-category {
    color: #a5f3fc; background: rgba(165,243,252,0.1); border-color: rgba(165,243,252,0.3);
}
.ri-aurora .blog-au-card[data-palette="emerald"] .blog-au-banner {
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(16,185,129,0.28), transparent 60%),
        radial-gradient(ellipse 70% 50% at 80% 80%, rgba(132,204,22,0.16), transparent 65%),
        linear-gradient(135deg,#052e22 0%,#0a4a3e 55%,#052e22 100%);
}
.ri-aurora .blog-au-card[data-palette="emerald"] .blog-au-banner::after {
    background: linear-gradient(70deg,transparent 40%,rgba(16,185,129,0.45) 50%,transparent 60%);
}
.ri-aurora .blog-au-card[data-palette="emerald"] .blog-au-category {
    color: #a7f3d0; background: rgba(167,243,208,0.12); border-color: rgba(167,243,208,0.3);
}

/* Body */
.ri-aurora .blog-au-body {
    padding: 12px 14px 14px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
}
.ri-aurora .blog-au-excerpt {
    font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ri-aurora .blog-au-footer {
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: rgba(255,255,255,0.5);
}
.ri-aurora .blog-au-meta { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; }
.ri-aurora .blog-au-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.3); }

/* Aurora animations — pulse / candle / stream */
.ri-aurora .blog-au-card[data-anim="pulse"] .blog-au-banner {
    background-size: 130% 130%, 130% 130%, 100% 100%;
    animation: ri-aurora-orb-drift 8s ease-in-out infinite;
    will-change: background-position;
}
.ri-aurora .blog-au-card[data-anim="pulse"] .blog-au-banner::after {
    animation: ri-aurora-sweep 5s ease-in-out infinite;
    will-change: transform, opacity;
}
@keyframes ri-aurora-orb-drift {
    0%   { background-position: 14% 18%, 86% 82%, 0 0; }
    25%  { background-position: 32% 8%,  68% 92%, 0 0; }
    50%  { background-position: 8%  34%, 92% 66%, 0 0; }
    75%  { background-position: 28% 12%, 72% 88%, 0 0; }
    100% { background-position: 14% 18%, 86% 82%, 0 0; }
}
@keyframes ri-aurora-sweep {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50%      { transform: translate(8%, -6%) scale(1.18); opacity: 1; }
}
.ri-aurora .blog-au-card[data-anim="candle"] .blog-au-banner::after {
    bottom: 0; left: 0; right: 0;
    width: 100%; height: 50%;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='80' viewBox='0 0 320 80' preserveAspectRatio='none'><line x1='10' y1='24' x2='10' y2='60' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='7' y='34' width='6' height='20' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='30' y1='20' x2='30' y2='68' stroke='rgba(248,113,113,0.92)' stroke-width='1'/><rect x='27' y='36' width='6' height='28' fill='rgba(248,113,113,0.78)' stroke='rgba(248,113,113,0.92)' stroke-width='0.6'/><line x1='50' y1='32' x2='50' y2='64' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='47' y='40' width='6' height='12' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='70' y1='22' x2='70' y2='62' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='67' y='26' width='6' height='22' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='90' y1='36' x2='90' y2='72' stroke='rgba(248,113,113,0.92)' stroke-width='1'/><rect x='87' y='42' width='6' height='12' fill='rgba(248,113,113,0.78)' stroke='rgba(248,113,113,0.92)' stroke-width='0.6'/><line x1='110' y1='26' x2='110' y2='76' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='107' y='40' width='6' height='14' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='130' y1='28' x2='130' y2='60' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='127' y='32' width='6' height='12' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='150' y1='22' x2='150' y2='64' stroke='rgba(248,113,113,0.92)' stroke-width='1'/><rect x='147' y='42' width='6' height='6' fill='rgba(248,113,113,0.78)' stroke='rgba(248,113,113,0.92)' stroke-width='0.6'/><line x1='170' y1='34' x2='170' y2='74' stroke='rgba(248,113,113,0.92)' stroke-width='1'/><rect x='167' y='40' width='6' height='24' fill='rgba(248,113,113,0.78)' stroke='rgba(248,113,113,0.92)' stroke-width='0.6'/><line x1='190' y1='30' x2='190' y2='64' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='187' y='34' width='6' height='12' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='210' y1='26' x2='210' y2='76' stroke='rgba(248,113,113,0.92)' stroke-width='1'/><rect x='207' y='44' width='6' height='16' fill='rgba(248,113,113,0.78)' stroke='rgba(248,113,113,0.92)' stroke-width='0.6'/><line x1='230' y1='22' x2='230' y2='56' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='227' y='28' width='6' height='12' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='250' y1='34' x2='250' y2='70' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='247' y='42' width='6' height='18' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='270' y1='36' x2='270' y2='76' stroke='rgba(248,113,113,0.92)' stroke-width='1'/><rect x='267' y='48' width='6' height='16' fill='rgba(248,113,113,0.78)' stroke='rgba(248,113,113,0.92)' stroke-width='0.6'/><line x1='290' y1='26' x2='290' y2='62' stroke='rgba(74,222,128,0.92)' stroke-width='1'/><rect x='287' y='30' width='6' height='12' fill='rgba(74,222,128,0.78)' stroke='rgba(74,222,128,0.92)' stroke-width='0.6'/><line x1='310' y1='22' x2='310' y2='68' stroke='rgba(248,113,113,0.92)' stroke-width='1'/><rect x='307' y='32' width='6' height='24' fill='rgba(248,113,113,0.78)' stroke='rgba(248,113,113,0.92)' stroke-width='0.6'/></svg>") repeat-x bottom;
    background-size: 320px 100%;
    filter: none; opacity: 0.32;
    animation: ri-aurora-stream 22s linear infinite;
    pointer-events: none;
}
@keyframes ri-aurora-stream { from { background-position-x: 0; } to { background-position-x: -320px; } }

/* Stream variant — animated line chart */
.ri-aurora .blog-au-card .aurora-chart-stream {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 42%; overflow: hidden; pointer-events: none; z-index: 2; opacity: 0.45;
}
.ri-aurora .blog-au-card .aurora-chart-stream svg {
    width: 200%; height: 100%; display: block;
    animation: ri-aurora-chart-roll 18s linear infinite;
    will-change: transform;
}
.ri-aurora .blog-au-card .aurora-chart-dot {
    opacity: 0;
    animation: ri-aurora-dot-blink 9s ease-in-out infinite;
}
.ri-aurora .blog-au-card .aurora-chart-dot.d2 { animation-delay: 2.2s; }
.ri-aurora .blog-au-card .aurora-chart-dot.d3 { animation-delay: 4.4s; }
.ri-aurora .blog-au-card .aurora-chart-dot.d4 { animation-delay: 6.6s; }
@keyframes ri-aurora-chart-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes ri-aurora-dot-blink {
    0%, 12%, 88%, 100% { opacity: 0; }
    25%, 75%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ri-aurora .blog-au-card[data-anim] .blog-au-banner,
    .ri-aurora .blog-au-card[data-anim] .blog-au-banner::after,
    .ri-aurora .blog-au-card .aurora-chart-stream svg,
    .ri-aurora .blog-au-card .aurora-chart-dot {
        animation: none !important;
    }
}