/*
 * PriceONN — Aurora Cards (news variant)
 *
 * Extracted from pages/news.php inline styles. Used by news-single.php's
 * related-news widget and any other listing that wants the same design.
 *
 * Markup contract:
 *   <a class="news-au-card" data-palette="navy|ocean|emerald" [data-anim="pulse|stream|candle"]>
 *     <div class="news-au-banner [news-au-banner--image]" [style="background-image:..."]>
 *       <div class="news-au-banner-top"><img class="news-au-logo-img"><span class="news-au-symbol"></span></div>
 *       <div class="news-au-banner-center">
 *         <span class="news-au-category"></span>
 *         <h3 class="news-au-title"></h3>
 *       </div>
 *       [optional aurora-chart-stream svg]
 *     </div>
 *     <div class="news-au-body">
 *       <p class="news-au-excerpt"></p>
 *       <div class="news-au-footer">
 *         <span class="news-au-meta"></span>
 *         <span class="news-au-meta-dot"></span>
 *         <span class="news-au-meta"></span>
 *       </div>
 *     </div>
 *   </a>
 */

.news-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 0.2s;
    position: relative;
    container-type: inline-size;
}
.news-au-card:hover { border-color: rgba(59,138,255,0.35); }

.news-au-banner {
    aspect-ratio: 16 / 10; min-height: 170px;
    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%);
}
.news-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;
}
.news-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;
}
.news-au-banner-top {
    position: relative; z-index: 2; padding: 10px 12px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.news-au-logo-img { display: block; height: 30px; width: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.news-au-symbol {
    font-family: 'Michroma','Inter',sans-serif; font-size: 9.5px; 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;
}
.news-au-banner-center {
    position: relative; z-index: 2; flex: 1;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 20px 14px 42px; gap: 0;
}
.news-au-category {
    position: absolute;
    left: 14px; bottom: 12px;
    z-index: 3;
    font-size: 9.5px; 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);
}
.news-au-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(17px, 6.4cqi, 26px);
    font-weight: 400; line-height: 1.2;
    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;
}
.news-au-banner--image {
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.news-au-banner--image::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 78% 72% at 50% 50%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%);
    background-image: radial-gradient(ellipse 78% 72% at 50% 50%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%);
    z-index: 1;
}
.news-au-banner--image::after { display: none; }
.news-au-banner--image .news-au-banner-top,
.news-au-banner--image .news-au-banner-center { z-index: 2; }

/* Palettes — cycling navy / ocean / emerald */
.news-au-card[data-palette="ocean"] .news-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%);
}
.news-au-card[data-palette="ocean"] .news-au-banner::after {
    background: linear-gradient(70deg, transparent 40%, rgba(6,182,212,0.45) 50%, transparent 60%);
}
.news-au-card[data-palette="ocean"] .news-au-category {
    color: #a5f3fc; background: rgba(165,243,252,0.1); border-color: rgba(165,243,252,0.3);
}
.news-au-card[data-palette="emerald"] .news-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%);
}
.news-au-card[data-palette="emerald"] .news-au-banner::after {
    background: linear-gradient(70deg, transparent 40%, rgba(16,185,129,0.45) 50%, transparent 60%);
}
.news-au-card[data-palette="emerald"] .news-au-category {
    color: #a7f3d0; background: rgba(167,243,208,0.12); border-color: rgba(167,243,208,0.3);
}
.news-au-card[data-palette] .news-au-banner.news-au-banner--image {
    background-size: cover; background-position: center; background-repeat: no-repeat;
}

.news-au-body {
    padding: 12px 14px 14px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1;
}
.news-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;
}
.news-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);
}
.news-au-meta { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; }
.news-au-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.3); }

/* Aurora animations — candle (red/green) / candle-mono (white) / stream (line chart).
   Pulse is intentionally not used by news-single.php's related-news widget;
   the listing page (pages/news.php) keeps its own pulse rules inline. */

/* Candle — multi-color (red/green) candlestick band */
.news-au-card[data-anim="candle"] .news-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: news-aurora-candle-roll 22s linear infinite;
    will-change: background-position;
    pointer-events: none;
}

/* Candle (monochrome) — same candlestick band, single white color */
.news-au-card[data-anim="candle-mono"] .news-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(255,255,255,0.85)' stroke-width='1'/><rect x='7' y='34' width='6' height='20' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='30' y1='20' x2='30' y2='68' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='27' y='36' width='6' height='28' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='50' y1='32' x2='50' y2='64' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='47' y='40' width='6' height='12' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='70' y1='22' x2='70' y2='62' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='67' y='26' width='6' height='22' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='90' y1='36' x2='90' y2='72' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='87' y='42' width='6' height='12' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='110' y1='26' x2='110' y2='76' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='107' y='40' width='6' height='14' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='130' y1='28' x2='130' y2='60' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='127' y='32' width='6' height='12' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='150' y1='22' x2='150' y2='64' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='147' y='42' width='6' height='6' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='170' y1='34' x2='170' y2='74' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='167' y='40' width='6' height='24' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='190' y1='30' x2='190' y2='64' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='187' y='34' width='6' height='12' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='210' y1='26' x2='210' y2='76' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='207' y='44' width='6' height='16' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='230' y1='22' x2='230' y2='56' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='227' y='28' width='6' height='12' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='250' y1='34' x2='250' y2='70' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='247' y='42' width='6' height='18' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='270' y1='36' x2='270' y2='76' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='267' y='48' width='6' height='16' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='290' y1='26' x2='290' y2='62' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='287' y='30' width='6' height='12' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/><line x1='310' y1='22' x2='310' y2='68' stroke='rgba(255,255,255,0.85)' stroke-width='1'/><rect x='307' y='32' width='6' height='24' fill='rgba(255,255,255,0.55)' stroke='rgba(255,255,255,0.85)' stroke-width='0.6'/></svg>") repeat-x bottom;
    background-size: 320px 100%;
    filter: none; opacity: 0.42;
    animation: news-aurora-candle-roll 22s linear infinite;
    will-change: background-position;
    pointer-events: none;
}

@keyframes news-aurora-candle-roll {
    from { background-position-x: 0; }
    to   { background-position-x: -320px; }
}

@media (prefers-reduced-motion: reduce) {
    .news-au-card[data-anim] .news-au-banner::before,
    .news-au-card[data-anim] .news-au-banner::after { animation: none !important; }
}

/* Aurora line chart with dots on vertices (stream anim) */
.news-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;
}
.news-au-card .aurora-chart-stream svg {
    width: 200%;
    height: 100%;
    display: block;
    animation: news-aurora-chart-roll 18s linear infinite;
    will-change: transform;
}
.news-au-card .aurora-chart-dot {
    opacity: 0;
    filter: drop-shadow(0 0 4px currentColor);
    animation: news-aurora-dot-blink 9s ease-in-out infinite;
}
.news-au-card .aurora-chart-dot.d2 { animation-delay: 2.2s; }
.news-au-card .aurora-chart-dot.d3 { animation-delay: 4.4s; }
.news-au-card .aurora-chart-dot.d4 { animation-delay: 6.6s; }
@keyframes news-aurora-chart-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes news-aurora-dot-blink {
    0%, 42%   { opacity: 0; }
    48%, 56%  { opacity: 1; }
    62%, 100% { opacity: 0; }
}