/* ==========================================================================
   Author profile page — redesign
   Built from author-page-mockup-v5.html, wired to real WP template tags in
   author.php. Scoped to .archive.author (WordPress's own body class on this
   template), same convention as .single.single-post in single-post.css.
   ========================================================================== */

:root{
  --sp-orange-9: #F06514;
  --sp-orange-hover: #FF8935;
  --sp-orange-accent: #F07635;
  --sp-blue-9: #1F354B;

  --sp-heading-1: #1D1D20;
  --sp-heading-2: #282A30;
  --sp-text-body: #55575A;
  --sp-text-promo: #707073;

  --sp-peach-badge-bg: #FEF4EF;

  --sp-gray-3: #eff0f3; --sp-gray-5: #e0e1e6; --sp-gray-6: #d8d9e0; --sp-gray-9: #8b8d98; --sp-gray-11: #62636c;

  --sp-page-max: 85vw;
  /* Same fixed Divi Theme Builder header this site uses everywhere else —
     see single-post.css for the full explanation. The navy hero here sits
     right after it in the DOM exactly like the blog post's hero does, so it
     needs the same clearance or content renders underneath the sticky nav
     once the page scrolls. */
  --sp-fixed-header-h: 61px;

  --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px; --sp-space-5: 20px;
  --sp-space-6: 24px; --sp-space-7: 32px; --sp-space-8: 40px; --sp-space-9: 48px;
  --sp-space-11: 80px;

  --sp-radius-sm: 8px; --sp-radius-md: 14px; --sp-radius-pill: 999px;
}

/* ---------- Navy author hero ---------- */
/* Symmetric 25px top and bottom — deliberately NOT reserving
   --sp-fixed-header-h here. Matches the final, approved treatment of the
   blog post's own hero (single-post.css .article-hero): the hero's height
   already flexes with content on its own (no fixed height anywhere, just
   padding), and reserving the sticky nav's height only ever mattered for a
   transient moment *while actively scrolling* past this content, not at
   rest — the same brief, unavoidable pass-under any site with a sticky
   header has, already accepted as normal for the blog post page. */
.archive.author .author-hero{
  background:var(--sp-blue-9); text-align:center;
  padding:25px var(--sp-space-9) 25px;
}
.archive.author .hero-inner{ max-width:var(--sp-page-max); margin:0 auto; }
.archive.author .breadcrumb{ font-size:13px; color:rgba(255,255,255,0.65); margin-bottom:var(--sp-space-6); }
.archive.author .breadcrumb a{ color:rgba(255,255,255,0.65); text-decoration:none; }
.archive.author .breadcrumb a:hover{ color:#fff; }
.archive.author .breadcrumb .sep{ opacity:.5; margin:0 6px; }

.archive.author .author-avatar{
  width:84px; height:84px; border-radius:var(--sp-radius-pill);
  background:var(--sp-orange-9); color:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:28px; margin:0 auto var(--sp-space-5);
}
.archive.author .author-avatar img{ width:100%; height:100%; object-fit:cover; }
.archive.author .author-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sp-orange-accent); margin-bottom:var(--sp-space-3);
}
.archive.author h1.author-name{
  font-family:'Inter',sans-serif !important; font-size:40px !important; font-weight:600 !important;
  line-height:1.15 !important; color:#fff !important; margin:0 0 var(--sp-space-5); letter-spacing:-0.01em; padding:0;
}
.archive.author .author-bio{ font-size:16px; line-height:1.65; color:rgba(255,255,255,0.65); margin:0 0 var(--sp-space-6); }
.archive.author .author-linkedin-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18);
  color:#fff; font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:var(--sp-radius-pill);
  text-decoration:none; transition:background .15s ease;
}
.archive.author .author-linkedin-pill svg{ width:15px; height:15px; fill:currentColor; }
.archive.author .author-linkedin-pill:hover{ background:rgba(255,255,255,0.18); color:#fff !important; }

/* ---------- Search + filter row ---------- */
/* Stacked, not side-by-side — the search box needs its own full-width row
   (can't truly be "full width" while sharing a row with anything else), and
   the pill row below it is a dedicated horizontal scroll strip rather than
   wrapping across several lines. */
.archive.author .filter-bar{
  max-width:var(--sp-page-max); margin:0 auto; padding:var(--sp-space-8) var(--sp-space-9) var(--sp-space-6);
  display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-space-4);
}
.archive.author .search-box{
  display:flex; align-items:center; gap:10px; width:100%;
  border:1px solid var(--sp-gray-6); border-radius:var(--sp-radius-pill);
  padding:10px 18px;
  transition:border-color .15s ease;
}
.archive.author .search-box:focus-within{ border-color:var(--sp-orange-9); }
.archive.author .search-box svg{ width:16px; height:16px; stroke:var(--sp-gray-9); flex-shrink:0; }
.archive.author .search-box input{ border:none; outline:none; font-size:14px; font-family:inherit; width:100%; color:var(--sp-heading-2); background:transparent; }
.archive.author .search-box input::placeholder{ color:var(--sp-gray-9); }

/* One scrollable strip instead of wrapping across several rows — pills
   listed alphabetically (see get_terms() orderby in author.php). No visible
   scrollbar, same treatment as .carousel-track for Related Articles. */
.archive.author .filter-pills{
  display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.archive.author .filter-pills::-webkit-scrollbar{ display:none; }
.archive.author .filter-pill{
  flex-shrink:0;
  font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:var(--sp-radius-pill);
  border:1px solid var(--sp-peach-badge-bg); background:var(--sp-peach-badge-bg); color:var(--sp-gray-9);
  text-decoration:none; display:inline-block; transition:all .15s ease;
}
.archive.author .filter-pill.active{ background:#fff; border-color:var(--sp-orange-9); color:var(--sp-orange-9) !important; }
.archive.author .filter-pill:not(.active):hover{ border-color:var(--sp-gray-6); color:var(--sp-heading-2) !important; }

/* ---------- Post grid (same card treatment as the blog post's Related Articles) ---------- */
.archive.author .post-grid-wrap{ max-width:var(--sp-page-max); margin:0 auto; padding:0 var(--sp-space-9) var(--sp-space-11); }
.archive.author .post-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-space-7); }
.archive.author .no-results{ text-align:center; padding:var(--sp-space-9) 0; color:var(--sp-gray-9); font-size:15px; }

.archive.author .rel-card{
  display:block; min-width:0; border:1px solid var(--sp-gray-5); border-radius:var(--sp-radius-md);
  overflow:hidden; background:#fff; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.archive.author .rel-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(30,41,59,0.1); border-color:var(--sp-gray-6); }
.archive.author .rel-card .rel-img-wrap{ overflow:hidden; }
.archive.author .rel-card .rel-img-wrap img,
.archive.author .rel-card .rel-img-wrap svg.sp-placeholder-img{ width:100%; aspect-ratio:300/170; object-fit:cover; display:block; transition:transform .25s ease; }
.archive.author .rel-card:hover .rel-img-wrap img,
.archive.author .rel-card:hover .rel-img-wrap svg.sp-placeholder-img{ transform:scale(1.04); }
.archive.author .rel-card:hover h3{ color:var(--sp-orange-accent) !important; }

.archive.author .rel-card-body{ padding:var(--sp-space-5); }
.archive.author .rel-tag{
  display:inline-block; background:var(--sp-gray-3); color:var(--sp-gray-11);
  font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:var(--sp-radius-pill);
  margin:0 0 var(--sp-space-3);
}
.archive.author .rel-card-body h3{
  font-size:16px; font-weight:700; color:var(--sp-heading-2); margin:0 0 var(--sp-space-2);
  line-height:1.35; padding-bottom:0; transition:color .18s ease;
}
.archive.author .rel-card-body p{ font-size:13.5px; line-height:1.55; color:var(--sp-text-body); margin:0 0 var(--sp-space-4); }
.archive.author .rel-meta{ font-size:12px; color:var(--sp-gray-9); }

/* ---------- Pagination — styling WP core's own the_posts_pagination() markup
   (.page-numbers/.prev/.next/.dots/.current) rather than reinventing it, so
   edge cases (single page, exact page counts, existing query args) are all
   handled by WordPress itself. ---------- */
.archive.author .pagination{ margin-top:var(--sp-space-9); }
.archive.author .pagination .nav-links{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.archive.author .pagination .page-numbers{
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 6px;
  border:1px solid var(--sp-gray-6); border-radius:var(--sp-radius-sm);
  background:#fff; color:var(--sp-heading-2); font-size:14px; font-weight:600;
  text-decoration:none; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.archive.author .pagination a.page-numbers:hover{ border-color:var(--sp-orange-9); color:var(--sp-orange-9); }
.archive.author .pagination .page-numbers.current{ background:var(--sp-orange-9); border-color:var(--sp-orange-9); color:#fff; }
.archive.author .pagination .page-numbers.dots{ border:none; background:none; color:var(--sp-gray-9); }
.archive.author .pagination .page-numbers.prev,
.archive.author .pagination .page-numbers.next{ font-size:13px; }

/* ---------- Responsive: same breakpoints as the blog post ---------- */
@media (max-width:1099px){
  .archive.author .post-grid{ grid-template-columns:repeat(2, 1fr); }
  .archive.author .filter-bar{ padding:var(--sp-space-7) var(--sp-space-6) var(--sp-space-5); }
  .archive.author .post-grid-wrap{ padding:0 var(--sp-space-6) var(--sp-space-9); }
  .archive.author .author-hero{ padding:25px var(--sp-space-6) 25px; }
}
@media (max-width:767px){
  .archive.author .post-grid{ grid-template-columns:1fr; gap:var(--sp-space-6); }
  .archive.author .filter-bar{ padding:var(--sp-space-6) var(--sp-space-5); }
  .archive.author .post-grid-wrap{ padding:0 var(--sp-space-5) var(--sp-space-8); }
  .archive.author .author-hero{ padding:25px var(--sp-space-5) 25px; }
  .archive.author h1.author-name{ font-size:30px !important; }
}