/* =========================================================
   TRUE CARE TECHNOLOGY — Author Profile Page
   ========================================================= */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --blue:       #0d5cf5;
  --blue-dark:  #0b1e3f;
  --blue-mid:   #1a3a6e;
  --blue-light: #e8f0fe;
  --accent:     #1ea7ff;
  --white:      #ffffff;
  --gray-50:    #f8fafc;
  --gray-100:   #f1f5f9;
  --gray-200:   #e2e8f0;
  --gray-300:   #cbd5e1;
  --gray-400:   #94a3b8;
  --gray-500:   #64748b;
  --gray-600:   #475569;
  --gray-700:   #334155;
  --gray-800:   #1e293b;
  --gray-900:   #0f172a;

  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Archivo', sans-serif;
  --font-body:    'Inter', sans-serif;

  --sidebar-w:  280px;
  --sticky-top: 90px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:     0 4px 16px rgba(0,0,0,.10);
  --shadow-md:  0 8px 32px rgba(0,0,0,.12);
  --transition: 0.25s ease;
  --t:          cubic-bezier(.65,.05,.36,1);
}

/* ── Reset ──────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--gray-800); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }

strong { font-weight: 700; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.02em; cursor: pointer; border: 2px solid transparent;
  transition: all var(--transition); white-space: nowrap;
  text-transform: none;
}

.btn--white:hover { background: var(--blue-light); transform: translateY(-1px); }

/* ── Topbar ─────────────────────────────────────────────── */
/* .topbar { background: var(--blue-dark); font-size: 0.8rem; color: rgba(255,255,255,.75); }

.topbar i { color: var(--accent); margin-right: 6px; } */

.topbar__social a:hover { background: var(--blue); color: #fff; }

/* ── Header ─────────────────────────────────────────────── */
/* .site-header / .brand__name / .brand__sub / .nav a: shared.css owns these now. This
   page's --gray-200/--gray-500 tokens (#e2e8f0/#64748b) were subtly off from shared.css's
   canonical --line/--text-dim (#e3eaf3/#5a6a82), causing the header border and nav text
   color to drift slightly from every other page. */
.header__cta { display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px; font-size: .82rem; border-radius: 50px; text-transform: uppercase; letter-spacing: .05em; border: none; background: var(--blue); color: #fff; cursor: pointer; font-weight: 700; }

.menu-toggle span { width: 24px; height: 2px; background: var(--blue-dark); transition: all .3s var(--t); }

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .78rem; margin-bottom: 36px; flex-wrap: wrap; }
.breadcrumb a { color: rgba(255,255,255,.5); transition: color var(--transition); }

.breadcrumb i { font-size: .55rem; color: rgba(255,255,255,.25); }

/* ── Author Hero ────────────────────────────────────────── */
.author-hero {
  position: relative;
  background: var(--blue-dark);
  padding: 72px 0 88px;
  overflow: hidden;
}
.author-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 80% at 90% 40%, rgba(13,92,245,.22), transparent 65%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(30,167,255,.14), transparent 55%);
  pointer-events: none;
}
.author-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.author-hero__inner { position: relative; z-index: 2; }

.author-hero__profile {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Avatar */
.author-avatar {
  position: relative;
  flex-shrink: 0;
}
.author-avatar__img {
  width: 128px; height: 128px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.15);
  background: linear-gradient(135deg, #0d5cf5, #1ea7ff);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 3rem;
  color: rgba(255,255,255,.8);
  letter-spacing: 2px;
}
.author-avatar__img--rajesh {
  background: linear-gradient(135deg, #0b1e3f 0%, #0d5cf5 60%, #1ea7ff 100%);
}
.author-avatar__img--rajesh::after {
  content: "RP";
  font-family: var(--font-display);
  font-size: 2.8rem;
  color: rgba(255,255,255,.8);
  letter-spacing: 2px;
}
.author-avatar__badge {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--blue-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  color: #fff;
}

/* Hero Info */
.author-hero__info { flex: 1; min-width: 0; }

.author-hero__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: .7rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .7; }
}

.author-hero__name {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 4px;
}
.author-hero__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}
.author-hero__dept {
  font-size: .85rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 20px;
}
.author-hero__bio {
  font-size: .95rem;
  color: rgba(255,255,255,.65);
  line-height: 1.75;
  max-width: 600px;
  margin-bottom: 24px;
}
.author-hero__bio > *:last-child { margin-bottom: 0; }
.author-hero__bio p,
.author-hero__bio span,
.author-hero__bio strong,
.author-hero__bio em,
.author-hero__bio li { color: inherit; }

/* Social Links */
.author-hero__social { display: flex; gap: 10px; flex-wrap: wrap; }
.author-social-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  font-family: var(--font-heading); font-size: .8rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  transition: all var(--transition);
  backdrop-filter: blur(6px);
}
.author-social-link:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; }
.author-social-link--linkedin:hover { background: #0077b5; border-color: #0077b5; }
.author-social-link--x:hover { background: #000; border-color: #000; }
.author-social-link--mail:hover { background: var(--blue); border-color: var(--blue); }

/* Hero Stats */
.author-hero__stats {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.author-stat { padding: 0 40px 0 0; }
.author-stat:first-child { padding-left: 0; }
.author-stat__num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: #fff;
  line-height: 1;
  display: block;
}
.author-stat__label {
  font-family: var(--font-heading);
  font-size: .75rem; font-weight: 600;
  color: rgba(255,255,255,.45);
  letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.4;
}
.author-stat__div { width: 1px; height: 50px; background: rgba(255,255,255,.12); margin-right: 40px; }

/* ── Page Body ──────────────────────────────────────────── */

/* ── Sidebar ────────────────────────────────────────────── */

/* Author card */
.sidebar-card--author {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 100%);
  border-color: transparent;
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
}
.sidebar-author__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.1rem;
  color: rgba(255,255,255,.8);
  border: 2px solid rgba(255,255,255,.15);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.sidebar-author__avatar--rajesh { background: linear-gradient(135deg, #0d5cf5, #1ea7ff); }
.sidebar-author__avatar--rajesh::after { content: "RP"; }
.sidebar-author__info { min-width: 0; }
.sidebar-author__name { font-family: var(--font-heading); font-size: .85rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.sidebar-author__role { display: inline-block; padding: 2px 8px; background: rgba(30,167,255,.2); border: 1px solid rgba(30,167,255,.3); border-radius: 12px; font-size: .68rem; font-family: var(--font-heading); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }

/* TOC heading */
.sidebar-card__heading { font-family: var(--font-heading); font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-400); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-100); }

/* Expertise tags */
.expertise-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.expertise-tag {
  padding: 4px 10px; border-radius: 20px;
  background: var(--blue-light); color: var(--blue);
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  letter-spacing: .3px; transition: all var(--transition);
}
.expertise-tag:hover { background: var(--blue); color: #fff; }

/* Industry list */
.industry-list { display: flex; flex-direction: column; gap: 10px; }
.industry-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--gray-600);
  padding: 6px 8px; border-radius: var(--radius);
  transition: all var(--transition);
}
.industry-list li:hover { background: var(--blue-light); color: var(--blue); }
.industry-list li i { color: var(--blue); width: 16px; text-align: center; font-size: .82rem; }

/* CTA card */

/* ── Content Main ───────────────────────────────────────── */
.content-main { min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ── Content Block ──────────────────────────────────────── */
.content-block {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 44px 48px;
  box-shadow: var(--shadow-sm);
}
.block-header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
/* Same fix as shared.css's .section-num, which this rule is a copy of: --blue-light (#e8f0fe)
   is a background tint, so on .content-block's white ground the numeral rendered at 1.15:1 and
   was effectively invisible. --blue (#0d5cf5) gives 5.43:1. */
.block-num { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--blue, #0d5cf5); letter-spacing: 1px; min-width: 40px; }
.block-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--blue-dark); letter-spacing: -.02em; }
.block-divider { height: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--accent) 60%, transparent 100%); border-radius: 2px; margin-bottom: 28px; }
.block-body { font-size: .97rem; color: var(--gray-600); line-height: 1.8; margin-bottom: 18px; }
.block-body:last-child { margin-bottom: 0; }

/* ── Career Timeline ────────────────────────────────────── */
.career-timeline {
  position: relative;
  margin-top: 36px;
  padding-left: 28px;
}
.career-timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 6px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-light) 100%);
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--gray-100);
}
.timeline-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.timeline-item__dot {
  position: absolute;
  left: -28px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  transition: all var(--transition);
}
.timeline-item--current .timeline-item__dot {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(13,92,245,.15);
}
.timeline-item:hover .timeline-item__dot { background: var(--blue); transform: scale(1.2); }
.timeline-item__year {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--blue);
  margin-bottom: 4px;
}
.timeline-item__role { font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--gray-800); margin-bottom: 2px; }
.timeline-item__company { font-size: .82rem; color: var(--gray-400); font-weight: 600; margin-bottom: 8px; }
.timeline-item__desc { font-size: .88rem; color: var(--gray-600); line-height: 1.65; }

/* ── Filter Bar ─────────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 5px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  width: fit-content;
}
.filter-pill {
  padding: 10px 22px; border: none; background: transparent; border-radius: 50px;
  font-family: var(--font-heading); font-weight: 700; font-size: .88rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500);
  cursor: pointer; transition: all .3s var(--t); white-space: nowrap;
}
.filter-pill:hover { color: var(--blue); background: var(--blue-light); }
.filter-pill.active { background: var(--blue); color: #fff; box-shadow: 0 6px 20px rgba(13,92,245,.3); }

/* ── Articles Grid ──────────────────────────────────────── */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* ── Post Card ──────────────────────────────────────────── */
.post-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 18px;
  overflow: hidden;
  transition: all .4s var(--t);
  position: relative;
  display: flex; flex-direction: column;
}
.post-card::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 0; height: 3px; background: var(--blue);
  transition: width .4s var(--t); z-index: 2;
}
.post-card:hover { transform: translateY(-8px); border-color: var(--blue); box-shadow: 0 24px 50px rgba(13,92,245,.14); }
.post-card:hover::before { width: 100%; }
.post-card.hidden { display: none; }

.post-card__thumb {
  aspect-ratio: 16/9; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.post-card__thumb--metal      { background: linear-gradient(135deg, #0b1e3f, #1a3a6e); }
.post-card__thumb--metal-dark { background: linear-gradient(135deg, #060f20, #0b1e3f); }
.post-card__thumb--xray       { background: linear-gradient(135deg, #122c54, #1ea7ff); }
.post-card__thumb--weigh      { background: linear-gradient(135deg, #0d5cf5, #0942b8); }
.post-card__thumb--roller     { background: linear-gradient(135deg, #0b2040, #122c54); }
.post-card__thumb--industry   { background: linear-gradient(135deg, #0d4fa0, #0d5cf5); }
.post-card__thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
}
.post-card__thumb-icon { font-size: 2.8rem; color: rgba(255,255,255,.85); position: relative; z-index: 1; filter: drop-shadow(0 4px 16px rgba(0,0,0,.3)); }
.post-card__read-time {
  position: absolute; bottom: 14px; right: 14px;
  padding: 5px 12px; background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 50px;
  font-family: var(--font-heading); font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.9); z-index: 2;
  display: flex; align-items: center; gap: 5px;
}
.post-card__read-time i { color: var(--accent); font-size: .65rem; }

.post-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.post-card__title { font-size: 1rem; font-weight: 800; margin-bottom: 8px; line-height: 1.35; transition: color var(--transition); font-family: var(--font-heading); color: var(--gray-800); }
.post-card:hover .post-card__title { color: var(--blue); }
.post-card__excerpt { color: var(--gray-500); font-size: .86rem; line-height: 1.65; margin-bottom: 14px; flex: 1; }
.post-card__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); transition: gap var(--transition); margin-top: auto; }
.post-card__link:hover { gap: 14px; }

.post-tag { display: inline-block; padding: 4px 10px; background: rgba(13,92,245,.08); color: var(--blue); border-radius: 50px; font-size: .68rem; font-weight: 700; letter-spacing: .15em; margin-bottom: 10px; }
.post-tag--compliance { background: rgba(8,145,178,.1); color: #0e7490; } /* #0891b2 was 3.27:1 on the tint */
.post-tag--howto { background: rgba(13,92,245,.06); color: #0942b8; }

.post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.post-meta__date, .post-meta__views { font-size: .78rem; color: var(--gray-400); display: flex; align-items: center; gap: 5px; }
.post-meta__date i, .post-meta__views i { color: var(--blue); font-size: .7rem; }
.post-meta__sep { color: var(--gray-300); font-size: .75rem; }

/* ── CTA Section ────────────────────────────────────────── */

.cta-section::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 100% at 90% 50%, rgba(13,92,245,.3), transparent 70%),
    radial-gradient(ellipse 30% 80% at 10% 50%, rgba(30,167,255,.15), transparent 60%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 50px 50px;
  pointer-events: none;
}

/* ── Footer ─────────────────────────────────────────────── */
/* Matches home.css's footer (the site's reference design) — overrides shared.css's "Family B"
   footer block. Literal colors instead of var(--accent): this page redefines --accent to a
   lighter highlight (#1ea7ff) for its own unrelated content, not the true brand blue home.css's
   footer uses for its underline/hover accents. */
.footer {
  background: var(--blue-dark);
  color: rgba(255,255,255,0.75);
  padding-top: 90px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.footer__grid { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 50px; padding-bottom: 70px; }
.footer__brand { flex: 0 1 240px; min-width: 200px; }
.footer__col { flex: 1 1 160px; min-width: 140px; }
.footer__brand p { color: rgba(255,255,255,0.65); margin: 22px 0; font-size: 0.95rem; line-height: 1.7; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: var(--white); transition: all .3s var(--transition);
}
.footer__social a:hover { background: var(--blue); color: var(--white); transform: translateY(-4px); }
.footer__col-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: none;
  font-size: 1rem; letter-spacing: 0.05em; margin-bottom: 20px;
  color: var(--white); position: relative; padding-bottom: 12px;
}
.footer__col-title::after { background: var(--blue); }
.footer__col ul li a {
  color: rgba(255,255,255,0.65); font-size: 0.92rem;
  transition: all .25s var(--transition); display: inline-flex; align-items: center; gap: 6px;
}
.footer__contact p { color: rgba(255,255,255,0.65); font-size: 0.92rem; margin-bottom: 16px; line-height: 1.7; }
.footer__contact a {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.65); font-size: 0.92rem; margin-bottom: 10px;
  transition: none;
}
.footer__contact a:hover { color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 22px 0; }
.footer__bottom-inner {
  display: flex; justify-content: space-between; align-items: normal;
  flex-wrap: wrap; gap: 12px; font-size: 0.85rem; color: rgba(255,255,255,0.5);
}

/* ── Back To Top ────────────────────────────────────────── */

.back-to-top:hover { background: #0b4fd9; transform: translateY(-2px); }

/* ── Scroll Reveal ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .page-body__inner { grid-template-columns: 1fr; }
  .sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-height: none; overflow-y: visible; }
  .sidebar-card--author { grid-column: 1 / -1; }
  .sidebar-card--cta    { grid-column: 1 / -1; }
  .nav, .header__cta { display: none; }
  .menu-toggle { display: flex; }
  .nav.open {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: #ffffff; border-top: 1px solid var(--line);
    padding: 20px; box-shadow: 0 10px 30px rgba(11, 30, 63, 0.08);
  }
  .nav.open ul { flex-direction: column; gap: 0; }
  .nav.open a { display: flex; width: 100%; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .mega { display: none; }
  .author-hero__stats { flex-wrap: wrap; }
  .author-stat__div { display: none; }
  .author-stat { padding: 0 28px 0 0; }
  .footer__grid { flex-wrap: wrap; gap: 40px; }
  .footer__brand { flex: 1 1 100%; }
  .footer__col { flex: 1 1 calc(50% - 20px); min-width: 200px; }
}
@media (max-width: 768px) {
  .author-hero__profile { flex-direction: column; gap: 24px; }
  .content-block { padding: 32px 28px; }
  .articles-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .content-block { padding: 28px 24px; }
  .footer { padding-top: 44px; }
  .footer__grid { flex-direction: column; }
  .footer__brand, .footer__col { flex: 1 1 auto; width: 100%; min-width: 0; }
  .cta-section__actions { flex-direction: column; align-items: center; }
  .cta-section__stats { gap: 20px; }
  .author-hero__name { font-size: 2.4rem; }
  .filter-bar { border-radius: 16px; }
}
@media (max-width: 480px) {
  .content-block { padding: 20px 16px; }
  .author-avatar__img { width: 96px; height: 96px; font-size: 2.2rem; }
  .author-stat__num { font-size: 2.4rem; }
  .author-stat { padding: 0 20px 0 0; }
}

/* -----------------------------------------------------------------
   Local overrides for selectors shared.css intentionally omits: these
   names (.btn--primary, .section-title, .breadcrumb a:hover) are also
   used by the "Family A" listing pages with different values under
   the same specificity — keeping both versions in shared.css would
   let source order decide the winner on every page. Defining them
   here instead, after shared.css loads, restores this page's intended
   look regardless of file order.
   (.container used to be duplicated here too, identically to shared.css's
   version — harmless on its own, but because .topbar__inner/.header__inner
   also carry the "container" class, this file's later-loaded .container
   rule was winning the padding shorthand over shared.css's topbar/header
   padding, collapsing the topbar and header to 0 vertical padding on
   every "Family B" detail page. Removed; shared.css's .container is
   identical in value, so nothing here actually needed it.)
   ----------------------------------------------------------------- */
.section-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--blue-dark); letter-spacing: -0.02em; }
.btn--primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn--primary:hover { background: #0b4fd9; border-color: #0b4fd9; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,92,245,.35); }
.breadcrumb a:hover { color: var(--accent); }

.back-to-top { border: none; cursor: pointer; font-size: .9rem; visibility: hidden; }

a { transition: none; }
body { overflow-x: clip; }