/* BonusRiver – Author page */
:root {
  --au-border: rgba(17,24,39,0.10);
  --au-shadow: 0 10px 22px rgba(17,24,39,0.08);
  --au-surface: #fff;
  --au-text: rgba(17,24,39,0.72);
  --au-title: #111827;
  --au-accent: #0AA6D6;
  --au-accent2: #055A78;
  --au-radius: 20px;
}

body { background: #F5F7FB; font-family: Inter, system-ui, sans-serif; }

.au-container { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* Hero */
.au-hero {
  padding: 44px 0 28px;
  background: radial-gradient(900px 520px at 50% 0%, rgba(10,166,214,0.14), transparent 60%);
  border-bottom: 1px solid rgba(17,24,39,0.08);
}

.au-profile {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: start;
}

.au-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(10,166,214,0.25);
  box-shadow: 0 10px 22px rgba(17,24,39,0.10);
}

.au-name {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--au-title);
  margin: 0 0 4px;
}

.au-role {
  font-size: 1rem;
  font-weight: 700;
  color: var(--au-accent2);
  margin-bottom: 12px;
}

.au-bio {
  color: var(--au-text);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 0 14px;
}

.au-expertise { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.au-skill {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(10,166,214,0.10);
  border: 1px solid rgba(10,166,214,0.22);
  color: var(--au-accent2);
  font-weight: 700;
  font-size: 0.85rem;
}

.au-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.au-social { display: flex; gap: 10px; }
.au-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(17,24,39,0.06);
  border: 1px solid rgba(17,24,39,0.10);
  color: rgba(17,24,39,0.65);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.15s;
}
.au-social a:hover { background: rgba(10,166,214,0.12); color: var(--au-accent2); }

/* Main content */
.au-main { padding: 32px 0 60px; }

.au-section { margin-bottom: 32px; }
.au-section-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--au-accent2);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.au-section-title i { color: var(--au-accent); }

/* Casino review cards grid */
.au-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.au-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: var(--au-surface);
  border: 1px solid var(--au-border);
  box-shadow: var(--au-shadow);
  text-decoration: none;
  transition: all 0.18s;
}
.au-card:hover {
  border-color: rgba(10,166,214,0.25);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(17,24,39,0.12);
}

.au-card-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(17,24,39,0.08);
  padding: 4px;
}

.au-card-name { font-weight: 900; color: var(--au-title); font-size: 0.95rem; }
.au-card-meta { color: rgba(17,24,39,0.6); font-size: 0.85rem; font-weight: 600; }
.au-star { color: #F4B400; }

/* Blog post list */
.au-posts { display: grid; gap: 10px; }

.au-post {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--au-surface);
  border: 1px solid var(--au-border);
  text-decoration: none;
  transition: all 0.18s;
}
.au-post:hover {
  border-color: rgba(10,166,214,0.25);
  background: rgba(10,166,214,0.03);
}

.au-post-title { font-weight: 800; color: var(--au-title); font-size: 0.95rem; margin-bottom: 4px; }
.au-post-meta {
  display: flex; gap: 12px;
  color: rgba(17,24,39,0.55);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 640px) {
  .au-profile { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .au-bio { max-width: 100%; }
  .au-expertise { justify-content: center; }
  .au-social { justify-content: center; }
}

/* Dark theme overrides */
html[data-theme="dark"] body { background: #0f1219; }
html[data-theme="dark"] .au-hero { background: radial-gradient(900px 520px at 50% 0%, rgba(10,166,214,0.08), transparent 60%); border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .au-name { color: #f0f0f0; }
html[data-theme="dark"] .au-role { color: #4db8d9; }
html[data-theme="dark"] .au-bio { color: rgba(255,255,255,0.65); }
html[data-theme="dark"] .au-skill { background: rgba(10,166,214,0.12); border-color: rgba(10,166,214,0.25); color: #4db8d9; }
html[data-theme="dark"] .au-section-title { color: #4db8d9; }
html[data-theme="dark"] .au-card { background: #1a1f2e; border-color: rgba(255,255,255,0.08); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
html[data-theme="dark"] .au-card:hover { border-color: rgba(10,166,214,0.3); }
html[data-theme="dark"] .au-card-name { color: #f0f0f0; }
html[data-theme="dark"] .au-card-meta { color: rgba(255,255,255,0.5); }
html[data-theme="dark"] .au-card-logo { background: #252b3d; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .au-post { background: #1a1f2e; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .au-post:hover { border-color: rgba(10,166,214,0.3); background: rgba(10,166,214,0.06); }
html[data-theme="dark"] .au-post-title { color: #f0f0f0; }
html[data-theme="dark"] .au-post-meta { color: rgba(255,255,255,0.45); }
html[data-theme="dark"] .au-social a { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.6); }
html[data-theme="dark"] .au-social a:hover { background: rgba(10,166,214,0.15); color: #4db8d9; }