/* ============================================================
   author-page.css  —  NamasteCred Author Page
   Matches Figma design: blue hero, stats bar, expertise card,
   article cards, CTA banner. Desktop + mobile responsive.
   ============================================================ */

/* ── Google Fonts loaded via PHP wp_head ── */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --blue-primary : #0D74BA;
  --blue-dark    : #085A91;
  --blue-hero-bg : #0A3D6B;
  --blue-light   : #E2F0FC;
  --blue-mid     : #C5E0F5;
  --white        : #FFFFFF;
  --text-dark    : #1A1A2E;
  --text-body    : #3D4A5C;
  --text-muted   : #6B7A8D;
  --border       : #DDE6EF;
  --card-shadow  : 0 2px 12px rgba(13,116,186,.10);
  --radius-sm    : 8px;
  --radius-md    : 12px;
  --radius-lg    : 20px;
  --font-main    : 'Poppins', sans-serif;
  --max-w        : 1160px;
  --px           : clamp(16px, 4vw, 40px);
}

/* ── Reset / base ───────────────────────────────────────────── */
.author-page-wrap *,
.author-page-wrap *::before,
.author-page-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.author-page-wrap {
  font-family : var(--font-main);
  color       : var(--text-dark);
  line-height : 1.6;
  overflow-x  : hidden;
}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.aut-hero {
  background      : linear-gradient(135deg, #05284A 0%, #0A3D6B 40%, #0D74BA 100%);
  position        : relative;
  overflow        : hidden;
  padding-top     : 36px;
  padding-bottom  : 0;
}

/* Decorative circle — right side */
.aut-hero__deco {
  position       : absolute;
  right          : -80px;
  top            : -80px;
  width          : 420px;
  height         : 420px;
  border-radius  : 50%;
  background     : radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events : none;
}
.aut-hero__deco::after {
  content        : '';
  position       : absolute;
  right          : 60px;
  bottom         : -140px;
  width          : 260px;
  height         : 260px;
  border-radius  : 50%;
  border         : 1px solid rgba(255,255,255,.08);
}

.aut-hero__inner {
  max-width       : var(--max-w);
  margin          : 0 auto;
  padding         : 0 var(--px);
  display         : flex;
  align-items     : flex-end;
  justify-content : space-between;
  gap             : 32px;
  position        : relative;
  z-index         : 1;
}

/* ── Left column ── */
.aut-hero__left {
  flex          : 1;
  padding-bottom: 40px;
}

.aut-hero__badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 6px;
  background    : rgba(255,255,255,.15);
  border        : 1px solid rgba(255,255,255,.3);
  border-radius : 100px;
  padding       : 4px 14px 4px 10px;
  margin-bottom : 16px;
  backdrop-filter: blur(4px);
}
.aut-hero__badge-text {
  font-size    : 12px;
  font-weight  : 500;
  color        : rgba(255,255,255,.92);
  letter-spacing: .5px;
}

.aut-hero__name {
  font-size     : clamp(28px, 4vw, 44px);
  font-weight   : 700;
  color         : var(--white);
  line-height   : 1.15;
  margin-bottom : 8px;
}

.aut-hero__title {
  font-size     : clamp(13px, 1.5vw, 15px);
  font-weight   : 500;
  color         : rgba(255,255,255,.85);
  margin-bottom : 6px;
}

.aut-hero__edu {
  font-size     : 13px;
  color         : rgba(255,255,255,.70);
  margin-bottom : 24px;
}

/* Social buttons */
.aut-hero__socials {
  display   : flex;
  gap       : 10px;
  flex-wrap : wrap;
}

.aut-hero__soc-btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 38px;
  height          : 38px;
  border-radius   : 50%;
  background      : var(--white);
  box-shadow      : 0 2px 8px rgba(0,0,0,.18);
  transition      : transform .2s, box-shadow .2s;
  text-decoration : none;
}
.aut-hero__soc-btn svg {
  width  : 18px;
  height : 18px;
}
.aut-hero__soc-btn:hover {
  transform  : translateY(-2px);
  box-shadow : 0 4px 14px rgba(0,0,0,.25);
}

/* ── Photo ── */
.aut-hero__photo {
  flex-shrink : 0;
  width       : clamp(180px, 22vw, 280px);
  align-self  : flex-end;
}
.aut-hero__photo img {
  width         : 100%;
  display       : block;
  border-radius : var(--radius-md) var(--radius-md) 0 0;
  object-fit    : cover;
  object-position: top center;
  filter        : drop-shadow(0 -4px 20px rgba(0,0,0,.25));
}

/* ════════════════════════════════════════════════════════════
   STATS BAR
   ════════════════════════════════════════════════════════════ */
.aut-stats-wrap {
  background : var(--white);
  box-shadow : 0 4px 24px rgba(13,116,186,.10);
}

.aut-stats {
  max-width       : var(--max-w);
  margin          : 0 auto;
  padding         : 28px var(--px);
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0;
  flex-wrap       : wrap;
}

.aut-stat {
  display     : flex;
  align-items : center;
  gap         : 16px;
  padding     : 12px 40px;
  flex        : 1 1 200px;
  min-width   : 180px;
}

.aut-stat__icon svg {
  width  : 67px;
  height : 67px;
}

.aut-stat > div {
  display        : flex;
  flex-direction : column;
  gap            : 2px;
}

.aut-stat__num {
  font-size   : clamp(22px, 3vw, 30px);
  font-weight : 700;
  color       : var(--blue-primary);
  display     : block;
  line-height : 1;
}

.aut-stat__lbl {
  font-size  : 13px;
  color      : var(--text-muted);
  font-weight: 500;
  display    : block;
}

.aut-stat__div {
  width        : 1px;
  height       : 56px;
  background   : var(--border);
  flex-shrink  : 0;
  align-self   : center;
}

/* ════════════════════════════════════════════════════════════
   PULL QUOTE
   ════════════════════════════════════════════════════════════ */
.aut-quote-wrap {
  max-width  : var(--max-w);
  margin     : 0 auto;
  padding    : 48px var(--px) 36px;
  position   : relative;
}

.aut-quote-mark {
  font-family  : 'Palanquin Dark', sans-serif;
  font-size    : 120px;
  line-height  : 0.6;
  color        : var(--blue-light);
  position     : absolute;
  top          : 40px;
  left         : calc(var(--px) - 8px);
  user-select  : none;
  pointer-events: none;
}

.aut-quote {
  font-size      : clamp(16px, 2.2vw, 22px);
  font-weight    : 600;
  font-style     : italic;
  color          : var(--blue-dark);
  line-height    : 1.55;
  padding-left   : 56px;
  border         : none;
  position       : relative;
  z-index        : 1;
}

/* ════════════════════════════════════════════════════════════
   ABOUT + EXPERTISE
   ════════════════════════════════════════════════════════════ */
.aut-about {
  max-width       : var(--max-w);
  margin          : 0 auto;
  padding         : 12px var(--px) 56px;
  display         : grid;
  grid-template-columns: 1fr 340px;
  gap             : 48px;
  align-items     : start;
}

/* ── About content ── */
.aut-about__heading {
  font-size     : clamp(20px, 2.5vw, 26px);
  font-weight   : 700;
  color         : var(--text-dark);
  margin-bottom : 24px;
}

.aut-about__sec {
  margin-bottom : 24px;
}

.aut-about__sec h3 {
  font-size     : 14px;
  font-weight   : 600;
  color         : var(--blue-primary);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom : 8px;
}

.aut-about__sec p {
  font-size   : 14.5px;
  color       : var(--text-body);
  line-height : 1.75;
}

/* ── Expertise sidebar ── */
.aut-expertise {
  background    : var(--white);
  border        : 1px solid var(--border);
  border-radius : var(--radius-lg);
  box-shadow    : var(--card-shadow);
  padding       : 28px 24px;
  position      : sticky;
  top           : 20px;
}

.aut-expertise__heading {
  font-size     : 17px;
  font-weight   : 700;
  color         : var(--text-dark);
  margin-bottom : 22px;
  padding-bottom: 14px;
  border-bottom : 2px solid var(--blue-light);
}

.aut-exp-group {
  display       : flex;
  gap           : 14px;
  align-items   : flex-start;
  margin-bottom : 22px;
}

.aut-exp-icon {
  flex-shrink   : 0;
  width         : 38px;
  height        : 38px;
  border-radius : 8px;
  background    : var(--blue-light);
  display       : flex;
  align-items   : center;
  justify-content: center;
  margin-top    : 2px;
}
.aut-exp-icon svg {
  width  : 20px;
  height : 20px;
}

.aut-exp-label {
  display       : block;
  font-size     : 13px;
  font-weight   : 600;
  color         : var(--text-dark);
  margin-bottom : 8px;
}

.aut-exp-list {
  list-style : none;
  display    : flex;
  flex-direction: column;
  gap        : 6px;
}

.aut-exp-list li {
  font-size    : 12.5px;
  color        : var(--text-body);
  padding-left : 14px;
  position     : relative;
  line-height  : 1.4;
}
.aut-exp-list li::before {
  content    : '';
  position   : absolute;
  left       : 0;
  top        : 7px;
  width      : 6px;
  height     : 6px;
  border-radius: 50%;
  background : var(--blue-primary);
  opacity    : .55;
}

/* ════════════════════════════════════════════════════════════
   ARTICLES — tabs + cards
   ════════════════════════════════════════════════════════════ */
.aut-articles {
  background : #F5F9FD;
  padding    : 48px 0 60px;
}

.aut-articles__inner {
  max-width : var(--max-w);
  margin    : 0 auto;
  padding   : 0 var(--px);
}

.aut-articles__heading {
  font-size     : clamp(20px, 2.5vw, 26px);
  font-weight   : 700;
  color         : var(--text-dark);
  margin-bottom : 28px;
}

/* ── Tabs ── */
.aut-tabs {
  display       : inline-flex;
  position      : relative;
  background    : var(--white);
  border        : 1px solid var(--border);
  border-radius : 100px;
  padding       : 4px;
  margin-bottom : 32px;
  gap           : 0;
}

.aut-tab {
  position      : relative;
  z-index       : 1;
  border        : none;
  background    : transparent;
  border-radius : 100px;
  padding       : 9px 28px;
  font-family   : var(--font-main);
  font-size     : 14px;
  font-weight   : 500;
  cursor        : pointer;
  transition    : color .25s;
  white-space   : nowrap;
}

.aut-tab--active   { color: var(--white); }
.aut-tab--inactive { color: var(--text-muted); }
.aut-tab--inactive:hover { color: var(--blue-primary); }

.aut-tab-indicator {
  position      : absolute;
  top           : 4px;
  bottom        : 4px;
  border-radius : 100px;
  background    : var(--blue-primary);
  transition    : left .28s cubic-bezier(.4,0,.2,1),
                  width .28s cubic-bezier(.4,0,.2,1);
  z-index       : 0;
}

/* ── Article card ── */
.aut-card {
  display       : flex;
  gap           : 20px;
  background    : var(--white);
  border-radius : var(--radius-md);
  box-shadow    : var(--card-shadow);
  overflow      : hidden;
  margin-bottom : 20px;
  transition    : box-shadow .2s, transform .2s;
}
.aut-card:hover {
  box-shadow : 0 6px 24px rgba(13,116,186,.16);
  transform  : translateY(-2px);
}

/* Thumbnail — fixed size */
.aut-card__thumb {
  flex-shrink : 0;
  width       : 160px;
  min-height  : 140px;
  overflow    : hidden;
}
.aut-card__thumb img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  transition : transform .35s ease;
}
.aut-card:hover .aut-card__thumb img { transform: scale(1.04); }

.aut-card__thumb-placeholder {
  width      : 100%;
  height     : 100%;
  background : var(--blue-light);
}

/* Body */
.aut-card__body {
  flex           : 1;
  padding        : 18px 20px 18px 0;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
  min-height     : 140px;
}

.aut-card__body-top {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
  flex           : 1;
}

.aut-card__tag {
  display       : inline-block;
  background    : var(--blue-light);
  color         : var(--blue-primary);
  font-size     : 11px;
  font-weight   : 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding       : 3px 10px;
  border-radius : 100px;
  align-self    : flex-start;
}

.aut-card__title {
  font-size   : 15px;
  font-weight : 600;
  line-height : 1.4;
  color       : var(--text-dark);
  margin      : 0;
}
.aut-card__title a {
  color           : inherit;
  text-decoration : none;
}
.aut-card__title a:hover { color: var(--blue-primary); }

.aut-card__excerpt {
  font-size   : 13px;
  color       : var(--text-muted);
  line-height : 1.6;
  display     : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow    : hidden;
}

.aut-card__meta {
  display : flex;
  gap     : 14px;
  font-size: 12px;
  color   : var(--text-muted);
}

.aut-card__readmore {
  font-size       : 13px;
  font-weight     : 600;
  color           : var(--blue-primary);
  text-decoration : none;
  align-self      : flex-start;
  margin-top      : 6px;
  transition      : color .2s, gap .2s;
  display         : inline-flex;
  align-items     : center;
  gap             : 4px;
}
.aut-card__readmore::after {
  content    : '→';
  transition : transform .2s;
}
.aut-card__readmore:hover::after { transform: translateX(3px); }

/* ── Pagination ── */
.aut-pagination {
  display        : flex;
  justify-content: center;
  gap            : 6px;
  margin-top     : 32px;
  flex-wrap      : wrap;
}

.aut-pagination a,
.aut-pagination span {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  min-width       : 36px;
  height          : 36px;
  padding         : 0 10px;
  border-radius   : var(--radius-sm);
  font-size       : 13px;
  font-weight     : 500;
  text-decoration : none;
  border          : 1px solid var(--border);
  background      : var(--white);
  color           : var(--text-body);
  transition      : background .2s, color .2s, border-color .2s;
}

.aut-pagination .current,
.aut-pagination a:hover {
  background   : var(--blue-primary);
  color        : var(--white);
  border-color : var(--blue-primary);
}

/* No posts */
.aut-no-posts {
  text-align : center;
  padding    : 48px 20px;
  color      : var(--text-muted);
  font-size  : 15px;
}

/* ════════════════════════════════════════════════════════════
   CTA BANNER
   ════════════════════════════════════════════════════════════ */
.aut-cta {
  background : linear-gradient(135deg, #05284A 0%, #0A3D6B 50%, #0D74BA 100%);
  padding    : 64px var(--px);
  position   : relative;
  overflow   : hidden;
}

.aut-cta::before {
  content        : '';
  position       : absolute;
  right          : -100px;
  top            : -100px;
  width          : 500px;
  height         : 500px;
  border-radius  : 50%;
  background     : radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events : none;
}

.aut-cta__inner {
  max-width  : 640px;
  margin     : 0 auto;
  text-align : center;
  position   : relative;
  z-index    : 1;
}

.aut-cta__h2 {
  font-size     : clamp(22px, 3vw, 32px);
  font-weight   : 700;
  color         : var(--white);
  margin-bottom : 14px;
  line-height   : 1.3;
}

.aut-cta__sub {
  font-size     : 15px;
  color         : rgba(255,255,255,.80);
  margin-bottom : 32px;
  line-height   : 1.7;
}

.aut-cta__btn {
  display         : inline-block;
  background      : var(--white);
  color           : var(--blue-dark);
  font-family     : var(--font-main);
  font-size       : 15px;
  font-weight     : 600;
  padding         : 14px 36px;
  border-radius   : 100px;
  text-decoration : none;
  transition      : background .2s, transform .2s, box-shadow .2s;
  box-shadow      : 0 4px 16px rgba(0,0,0,.20);
  margin-bottom   : 16px;
}
.aut-cta__btn:hover {
  background  : #E2F0FC;
  transform   : translateY(-2px);
  box-shadow  : 0 8px 24px rgba(0,0,0,.25);
}

.aut-cta__note {
  font-size : 13px;
  color     : rgba(255,255,255,.60);
  margin-top: 12px;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 960px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .aut-about {
    grid-template-columns : 1fr;
    gap                   : 32px;
  }
  .aut-expertise {
    position : static;
  }
  .aut-stat { padding: 12px 20px; }
  .aut-stat__div { display: none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 640px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Hero */
  .aut-hero__inner {
    flex-direction : column-reverse;
    align-items    : center;
    padding-bottom : 0;
    gap            : 20px;
  }
  .aut-hero__left { padding-bottom: 24px; text-align: center; }
  .aut-hero__socials { justify-content: center; }
  .aut-hero__photo {
    width : 160px;
    align-self: center;
  }
  .aut-hero__photo img { border-radius: var(--radius-md); }

  /* Stats */
  .aut-stats {
    flex-direction : column;
    gap            : 0;
    padding        : 16px var(--px);
  }
  .aut-stat {
    width      : 100%;
    padding    : 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .aut-stat:last-child { border-bottom: none; }
  .aut-stat__div { display: none; }

  /* Quote */
  .aut-quote-mark { font-size: 80px; }
  .aut-quote { padding-left: 36px; font-size: 16px; }

  /* Article card — stacked on tiny screens */
  .aut-card { flex-direction: column; }
  .aut-card__thumb { width: 100%; height: 160px; }
  .aut-card__body { padding: 14px 16px 16px; }

  /* Tabs */
  .aut-tabs { width: 100%; }
  .aut-tab  { flex: 1; text-align: center; padding: 9px 0; }

  /* CTA */
  .aut-cta { padding: 48px var(--px); }
  .aut-cta__btn { display: block; width: 100%; max-width: 300px; margin: 0 auto 16px; }
}