/* Shared styles for all blog pages */

/* Darker blog theme wrapper */
:root{
  --accent-1:#8b5cf6; /* violet */
  --accent-2:#60a5fa; /* sky */
  --accent-3:#22d3ee; /* cyan */
  --glass: rgba(255,255,255,.06);
  --glass-b: rgba(255,255,255,.12);
}
body.blog-page{
  background:
    radial-gradient(1200px 600px at 10% -10%, #0b102533, transparent 60%),
    radial-gradient(1000px 600px at 90% 10%, #1f3a8a33, transparent 60%),
    linear-gradient(180deg, #080d19, #0a1122);
}

.aurora-blog{ max-width: 980px; margin: 0 auto; padding: 24px; }
.aurora-blog .blog-hero h1{ font-size: 36px; margin: 0 0 8px; }
.aurora-blog .blog-hero p{ opacity: .85; margin: 0 0 24px; }

/* Breadcrumbs */
.breadcrumbs{ font-size:13px; margin:10px 0 22px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 12px; border:1px solid var(--glass-b); background: var(--glass); border-radius:12px; backdrop-filter: blur(6px) }
.breadcrumbs a{ color: inherit; opacity:.95; padding:4px 8px; border-radius:8px; transition:.2s ease; background: transparent }
.breadcrumbs a:hover{ background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(96,165,250,.18)); text-decoration:none }
.breadcrumbs .sep{ opacity:.45 }
.breadcrumbs span[aria-current="page"]{ opacity:.85; background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(96,165,250,.14)); padding:4px 8px; border-radius:8px }

/* Cards (blog index) */
.aurora-blog .cards{ display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap:20px }
@media (min-width: 900px){ .aurora-blog .cards{ grid-template-columns: repeat(1, minmax(0,1fr)); } }
.aurora-blog .card{ border-radius:20px; padding:24px; border:1px solid var(--glass-b); background:rgba(255,255,255,.03); backdrop-filter: blur(2px); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; box-shadow:0 8px 24px rgba(0,0,0,.25) }
.aurora-blog .card:hover{ transform: translateY(-4px); background: rgba(255,255,255,.05); box-shadow:0 12px 30px rgba(0,0,0,.35) }
.aurora-blog .card::after{ content:""; display:block; height:2px; margin-top:12px; background: linear-gradient(90deg, var(--accent-2), var(--accent-1), var(--accent-3)); opacity:.35; border-radius:999px }
.aurora-blog .card.hidden{ display:none }
.aurora-blog .card h2{ margin:0 0 6px; font-size:22px }
.aurora-blog .card .meta{ font-size:13px; opacity:.7; margin-bottom:8px }
.aurora-blog .card p{ margin:0 0 12px; opacity:.9; line-height:1.6 }

/* Load more */
.load-more { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px; border:1px solid transparent; cursor:pointer; font-weight:600; background: linear-gradient(135deg, var(--accent-2), var(--accent-1)); box-shadow:0 10px 24px rgba(0,0,0,.35); }
.load-more:hover{ filter:brightness(1.05) }
.load-more[disabled]{ opacity:.6; cursor:default }

/* Article base */
.aurora-blog article h1{ font-size:34px; margin:0 0 8px }
.aurora-blog article time{ font-size:14px; opacity:.75; display:block; margin-bottom:16px }
.aurora-blog article .lead{ padding:14px 16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-radius:14px; margin:0 0 18px }
.aurora-blog article .content{ font-size:18px; line-height:1.75; letter-spacing:.2px }
.aurora-blog article .content h2{ font-size:22px; margin:26px 0 12px; line-height:1.3; position:relative }
.aurora-blog article .content h2::after{ content:""; position:absolute; left:0; bottom:-6px; width:120px; height:3px; border-radius:999px; background: linear-gradient(90deg, var(--accent-2), var(--accent-1), var(--accent-3)); opacity:.45 }
.aurora-blog article h1{ background: linear-gradient(135deg, #dbeafe, #c7d2fe); -webkit-background-clip:text; background-clip:text; color:transparent }
.aurora-blog article .content h3{ font-size:18px; margin:20px 0 8px; line-height:1.3 }
.aurora-blog article .content p{ margin:0 0 14px }
.aurora-blog article .content ul, .aurora-blog article .content ol{ margin:0 0 14px 22px }

/* First paragraph drop cap */
.aurora-blog article .content p:first-of-type::first-letter{
  font-size: 1.9em;
  line-height: .9;
  padding-right: 6px;
  margin-top: 3px;
  float:left;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Fancy bullets */
.aurora-blog article .content ul{ list-style:none; padding-left:0; margin-left:0 }
.aurora-blog article .content ul li{ padding-left:22px; position:relative }
.aurora-blog article .content ul li::before{ content:""; position:absolute; left:0; top:11px; width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--accent-2), var(--accent-1)); box-shadow:0 0 0 3px rgba(139,92,246,.12) }

/* Horizontal divider */
.aurora-blog .divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); margin:18px 0; border:none }

/* Callouts */
.callout{ border:1px solid var(--glass-b); background:rgba(255,255,255,.03); padding:14px 16px; border-radius:12px; display:flex; gap:10px; align-items:flex-start; box-shadow:0 6px 18px rgba(0,0,0,.24) }
.callout .ico{ width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, var(--accent-2), var(--accent-1)); display:inline-block; opacity:.9 }
.callout.info{ border-color: rgba(96,165,250,.35); background: linear-gradient(180deg, rgba(96,165,250,.10), rgba(139,92,246,.08)) }
.callout.warn{ border-color: rgba(245,158,11,.45); background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,.06)) }
.callout.ok{ border-color: rgba(34,197,94,.45); background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.06)) }

/* Strong emphasis */
.aurora-blog article .content strong{ color:#e8eeff }

/* Rich content */
.aurora-blog blockquote{ position:relative; margin:16px 0; padding:18px 18px 18px 20px; border-left:4px solid transparent; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.25) }
.aurora-blog blockquote::before{ content:"\201C"; position:absolute; top:-10px; left:10px; font-size:54px; line-height:1; opacity:.12; background:linear-gradient(135deg, var(--accent-2), var(--accent-1)); -webkit-background-clip:text; background-clip:text; color:transparent }
.aurora-blog blockquote{ border-image: linear-gradient(180deg, var(--accent-2), var(--accent-1)) 1 }
.aurora-blog blockquote footer{ margin-top:10px; opacity:.8; font-size:14px }
.aurora-blog pre{ background:#0e1730; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; overflow:auto }
.aurora-blog code{ background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px }
.aurora-blog table{ width:100%; border-collapse:separate; border-spacing:0; margin:14px 0; overflow:hidden; border:1px solid var(--glass-b); border-radius:14px; background:rgba(255,255,255,.02) }
.aurora-blog th, .aurora-blog td{ padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08) }
.aurora-blog thead th{ background:linear-gradient(135deg, rgba(96,165,250,.18), rgba(139,92,246,.18)); text-align:left }
.aurora-blog tbody tr:nth-child(even){ background:rgba(255,255,255,.03) }
.aurora-blog tbody tr:hover{ background:rgba(255,255,255,.05) }
.aurora-blog tbody tr:last-child td{ border-bottom:none }
.aurora-blog img{ max-width:100%; border-radius:12px; display:block; margin:10px auto }
.hero-figure{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--glass-b); background: radial-gradient(800px 400px at 20% -10%, rgba(96,165,250,.12), transparent 60%), radial-gradient(700px 400px at 100% 10%, rgba(139,92,246,.10), transparent 60%), rgba(255,255,255,.02); box-shadow:0 16px 40px rgba(0,0,0,.35); margin:12px auto 18px; max-width: 560px }
.hero-figure img{ width:100%; height:auto; display:block; opacity:.96 }
.hero-figure--sm{ max-width: 460px }
.hero-figure .cap{ font-size:12px }

@media (max-width: 720px){
  .hero-figure{ max-width: 94%; }
}

/* Float variants for text wrap */
.hero-figure--left{ float:left; max-width: 420px; margin:6px 18px 10px 0 }
.hero-figure--right{ float:right; max-width: 420px; margin:6px 0 10px 18px }
@media (max-width: 1020px){
  .hero-figure--left, .hero-figure--right{ float:none; margin:12px auto 18px; max-width:560px }
}
.hero-figure .cap{ font-size:12px }
.hero-figure .cap{ position:absolute; left:14px; bottom:14px; font-size:13px; opacity:.9; padding:6px 10px; border-radius:10px; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px) }
.aurora-blog details{ border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.04) }
.aurora-blog details+details{ margin-top:10px }
.aurora-blog summary{ cursor:pointer; font-weight:600 }
.aurora-blog a{ text-decoration:none; transition: color .2s ease, background .2s ease, box-shadow .2s ease }
.aurora-blog a:hover{ text-decoration:none; color:#e6f0ff }

mark{ background: linear-gradient(90deg, rgba(34,211,238,.25), rgba(96,165,250,.25)); padding:0 .25em; border-radius:.3em }
kbd{ display:inline-block; font-size:12px; padding:0 6px; border-radius:6px; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06) }

/* Utilities */
.note{ border:1px solid rgba(255,255,255,.12); padding:12px 14px; border-radius:12px; background: rgba(255,255,255,.04) }
.badge2{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); opacity:.8; margin-left:8px }