/* ═══════════════════════════════════════════════════════════════
   Author Page + Team Page Styles
   Matches Lovable AuthorPage.tsx + AboutUs.tsx
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared utilities ───────────────────────────────────────── */
.sh-text-primary { color: var(--primary); }

.sh-author-initials-circle {
  display: flex; align-items: center; justify-content: center;
  background: hsl(152, 69%, 25%); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  border-radius: 50%;
}

/* ── "About the Author →" link in author boxes sitewide ───── */
.sh-author-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 700;
  color: var(--primary); text-decoration: none;
  transition: color 0.2s;
}
.sh-author-link:hover { color: hsl(152, 69%, 55%); }
.sh-author-link-arrow {
  display: inline-block; transition: transform 0.2s;
}
.sh-author-link:hover .sh-author-link-arrow { transform: translateX(3px); }


/* ═══════════════════════════════════════════════════════════════
   INDIVIDUAL AUTHOR PAGE
   ═══════════════════════════════════════════════════════════════ */
.sh-author-page {
  max-width: 1152px; margin: 0 auto;
  padding: 80px 16px 40px;
}

/* Breadcrumb */
.sh-author-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; color: hsl(220, 10%, 50%);
  margin-bottom: 32px;
}
.sh-author-breadcrumb a {
  color: hsl(220, 10%, 50%); text-decoration: none; transition: color 0.2s;
}
.sh-author-breadcrumb a:hover { color: var(--primary); }
.sh-author-breadcrumb-current { color: hsl(220, 10%, 90%); }

/* Mobile header */
.sh-author-mobile-header {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px;
}
.sh-author-mobile-info { flex: 1; }
.sh-author-mobile-avatar {
  width: 80px; height: 80px; border-radius: 12px; object-fit: cover;
  border: 1px solid hsl(220, 15%, 18%); flex-shrink: 0;
}

/* Mobile quick facts */
.sh-author-mobile-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  background: hsl(220, 20%, 7%); border: 1px solid hsl(220, 15%, 15%);
  border-radius: 12px; padding: 16px; margin-bottom: 32px;
}

/* Name & role */
.sh-author-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: hsl(220, 10%, 95%); margin: 0 0 4px;
}
.sh-author-name-lg { font-size: 2.25rem; }
.sh-author-role {
  color: hsl(220, 10%, 50%); font-size: 0.875rem; margin: 0 0 12px;
}
.sh-author-role-lg { font-size: 1.125rem; margin-bottom: 16px; }

/* Social buttons */
.sh-author-socials { display: flex; align-items: center; gap: 12px; }
.sh-author-socials-lg { margin-bottom: 32px; }
.sh-author-social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: hsl(220, 20%, 8%); border: 1px solid hsl(220, 15%, 18%);
  color: hsl(220, 10%, 90%); transition: all 0.2s; text-decoration: none;
}
.sh-author-social-btn:hover {
  color: var(--primary); border-color: hsl(152, 50%, 30%);
}
.sh-author-social-btn-lg { width: 40px; height: 40px; }

/* Two-column grid */
.sh-author-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
}

/* Content column */
.sh-author-short-bio {
  color: hsl(220, 10%, 60%); line-height: 1.7; margin-bottom: 32px;
}
.sh-author-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: hsl(220, 10%, 95%); margin: 0 0 16px;
}
.sh-author-section-title-mt { margin-top: 32px; }
.sh-author-paragraph {
  color: hsl(220, 10%, 60%); line-height: 1.7; margin-bottom: 16px;
}
.sh-author-abilities {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 8px;
}
.sh-author-abilities li {
  display: flex; align-items: flex-start; gap: 8px;
  color: hsl(220, 10%, 60%); font-size: 0.875rem; line-height: 1.6;
}
.sh-author-ability-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0; margin-top: 7px;
}

/* Sidebar — hidden on mobile */
.sh-author-sidebar { display: none; }
.sh-author-sidebar-photo {
  width: 100%; aspect-ratio: 4/5; border-radius: 16px; object-fit: cover;
  border: 1px solid hsl(220, 15%, 18%); margin-bottom: 24px;
}
.sh-author-sidebar-facts-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.125rem; color: hsl(220, 10%, 95%); margin: 0 0 16px;
}
.sh-author-sidebar-fact { margin-bottom: 12px; }
.sh-author-fact-label {
  font-family: var(--font-display); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--primary); margin: 0;
}
.sh-author-fact-value {
  font-size: 0.875rem; color: hsl(220, 10%, 90%); margin: 0;
}

/* About content (WYSIWYG from ACF) */
.sh-author-about-content h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: hsl(220, 10%, 95%); margin: 32px 0 16px;
}
.sh-author-about-content h2:first-child { margin-top: 0; }
.sh-author-about-content p {
  color: hsl(220, 10%, 60%); line-height: 1.7; margin-bottom: 16px;
}
.sh-author-about-content ul {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 8px;
}
.sh-author-about-content li {
  position: relative; padding-left: 14px;
  color: hsl(220, 10%, 60%); font-size: 0.875rem; line-height: 1.6;
}
.sh-author-about-content li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}

/* Initials large fallback in sidebar */
.sh-author-initials-large {
  display: flex; align-items: center; justify-content: center;
  background: hsl(152, 69%, 25%); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: 3rem; border-radius: 16px;
}

/* Desktop header — hidden on mobile */
.sh-author-desktop-header { display: none; }

/* ── Desktop breakpoint ─────────────────────────────────────── */
@media (min-width: 1024px) {
  .sh-author-page { padding: 80px 24px 40px; }
  .sh-author-mobile-header { display: none; }
  .sh-author-mobile-facts { display: none; }
  .sh-author-desktop-header { display: block; }
  .sh-author-sidebar {
    display: block; position: sticky; top: 96px; align-self: start;
  }
  .sh-author-grid {
    grid-template-columns: 1fr 320px; gap: 56px;
  }
  .sh-author-section-title { font-size: 1.5rem; }
  .sh-author-about-content h2 { font-size: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════════
   TEAM PAGE
   ═══════════════════════════════════════════════════════════════ */
.sh-team-page { color: hsl(220, 10%, 90%); }

/* Hero */
.sh-team-hero {
  position: relative; overflow: hidden;
  padding: 64px 16px 64px;
  background: linear-gradient(135deg, hsl(152, 69%, 41%, 0.1), var(--bg), var(--bg));
}
.sh-team-hero-inner {
  max-width: 1152px; margin: 0 auto; text-align: center;
}
.sh-team-badge {
  display: inline-block;
  padding: 6px 12px; margin-bottom: 24px;
  background: hsl(152, 69%, 41%, 0.2); border: 1px solid hsl(152, 69%, 41%, 0.3);
  border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary);
}
.sh-team-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.25rem; color: hsl(220, 10%, 95%); margin: 0 0 16px;
}
.sh-team-subtitle {
  color: hsl(220, 10%, 60%); font-size: 1rem; max-width: 640px;
  margin: 0 auto; line-height: 1.7;
}

/* Stats */
.sh-team-stats {
  background: hsl(220, 20%, 5%, 0.5);
  padding: 32px 16px;
}
.sh-team-stats-grid {
  max-width: 1152px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.sh-team-stat { text-align: center; }
.sh-team-stat-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--primary); margin-bottom: 4px;
}
.sh-team-stat-label { font-size: 0.75rem; color: hsl(220, 10%, 50%); }

/* Sections */
.sh-team-section {
  max-width: 1152px; margin: 0 auto; padding: 56px 16px;
}
.sh-team-section-center { text-align: center; margin-bottom: 40px; }
.sh-team-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: hsl(220, 10%, 95%); margin: 0 0 12px;
}
.sh-team-text {
  color: hsl(220, 10%, 60%); font-size: 0.875rem; line-height: 1.7;
  margin-bottom: 16px;
}
.sh-team-text-center { max-width: 512px; margin-left: auto; margin-right: auto; }

/* Mission grid */
.sh-team-mission-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
.sh-team-values-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.sh-team-value-card {
  background: hsl(220, 20%, 6%, 0.5); border: 1px solid hsl(220, 15%, 15%);
  padding: 20px; transition: border-color 0.3s;
}
.sh-team-value-card:hover { border-color: hsl(152, 50%, 30%); }
.sh-team-value-card h3 {
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  color: hsl(220, 10%, 95%); margin: 0 0 6px;
}
.sh-team-value-card p {
  font-size: 0.75rem; color: hsl(220, 10%, 50%); line-height: 1.6; margin: 0;
}

/* Rate section */
.sh-team-rate-section {
  background: hsl(220, 20%, 4%, 0.3);
  max-width: 100%; padding: 56px 16px;
}
.sh-team-rate-section .sh-team-section-center,
.sh-team-rate-section .sh-team-criteria-list,
.sh-team-rate-section .sh-team-criteria-note {
  max-width: 1152px; margin-left: auto; margin-right: auto;
}
.sh-team-criteria-list { display: flex; flex-direction: column; gap: 12px; }
.sh-team-criteria-row {
  background: hsl(220, 20%, 6%, 0.6); border: 1px solid hsl(220, 15%, 15%);
  padding: 20px; transition: border-color 0.3s;
}
.sh-team-criteria-row:hover { border-color: hsl(152, 50%, 30%); }
.sh-team-criteria-label {
  margin-bottom: 8px;
}
.sh-team-criteria-label h3 {
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  color: hsl(220, 10%, 95%); margin: 0;
}
.sh-team-criteria-row p {
  font-size: 0.875rem; color: hsl(220, 10%, 50%); line-height: 1.6; margin: 0;
}
.sh-team-criteria-note {
  margin-top: 24px; padding: 16px 20px;
  background: hsl(152, 69%, 41%, 0.05); border: 1px solid hsl(152, 69%, 41%, 0.2);
}
.sh-team-criteria-note p {
  font-size: 0.875rem; color: hsl(220, 10%, 60%); line-height: 1.6; margin: 0;
}
.sh-team-criteria-note strong { color: hsl(220, 10%, 95%); }

/* Authors list */
.sh-team-authors-list { display: flex; flex-direction: column; gap: 16px; }
.sh-team-author-card {
  background: hsl(220, 20%, 6%, 0.6); border: 1px solid hsl(220, 15%, 15%);
  padding: 20px; transition: border-color 0.3s;
  display: flex; flex-direction: column; gap: 16px;
}
.sh-team-author-card:hover { border-color: hsl(152, 50%, 30%); }
.sh-team-author-avatar-col {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.sh-team-author-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid hsl(152, 69%, 41%, 0.2);
}
.sh-team-author-name-block h3 {
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  color: hsl(220, 10%, 95%); margin: 0;
}
.sh-team-author-name-block p {
  font-size: 0.75rem; font-weight: 500; margin: 0;
}
.sh-team-author-bio {
  font-size: 0.875rem; color: hsl(220, 10%, 50%); line-height: 1.6;
  margin: 0 0 12px;
}
.sh-team-author-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.sh-team-author-tags { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.sh-team-author-tag {
  font-size: 0.625rem; font-weight: 500;
  padding: 4px 10px;
  background: hsl(152, 69%, 41%, 0.1); color: var(--primary);
  border: 1px solid hsl(152, 69%, 41%, 0.2);
}

/* Editorial process */
.sh-team-process-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px;
}
.sh-team-process-card {
  position: relative;
  background: hsl(220, 20%, 6%, 0.5); border: 1px solid hsl(220, 15%, 15%);
  padding: 20px; transition: border-color 0.3s;
}
.sh-team-process-card:hover { border-color: hsl(152, 50%, 30%); }
.sh-team-process-num {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 900;
  color: hsl(152, 69%, 41%, 0.15); position: absolute; top: 12px; right: 16px;
}
.sh-team-process-card h3 {
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 700;
  color: hsl(220, 10%, 95%); margin: 24px 0 8px;
}
.sh-team-process-card p {
  font-size: 0.75rem; color: hsl(220, 10%, 50%); line-height: 1.6; margin: 0;
}

/* Contact CTA */
.sh-team-cta {
  background: hsl(220, 20%, 5%, 0.5);
  padding: 56px 16px; text-align: center;
}
.sh-team-cta h2 {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: hsl(220, 10%, 95%); margin: 0 0 12px;
}
.sh-team-cta p {
  font-size: 0.875rem; color: hsl(220, 10%, 50%); max-width: 448px;
  margin: 0 auto 24px; line-height: 1.6;
}
.sh-btn--primary {
  display: inline-flex; padding: 12px 24px;
  background: var(--primary); color: hsl(220, 20%, 4%);
  font-family: var(--font-display); font-weight: 700; font-size: 0.875rem;
  text-decoration: none; transition: background 0.2s;
}
.sh-btn--primary:hover { background: hsl(152, 69%, 35%); }

/* ── Desktop breakpoints ────────────────────────────────────── */
@media (min-width: 640px) {
  .sh-team-title { font-size: 3rem; }
  .sh-team-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .sh-team-stat-value { font-size: 1.875rem; }
  .sh-team-author-card { flex-direction: row; gap: 20px; padding: 24px; }
  .sh-team-author-avatar-col {
    flex-direction: column; align-items: center; width: 112px; gap: 8px; text-align: center;
  }
  .sh-team-author-avatar { width: 80px; height: 80px; }
  .sh-team-criteria-row {
    display: flex; align-items: flex-start; gap: 16px;
  }
  .sh-team-criteria-label { width: 224px; flex-shrink: 0; }
}

@media (min-width: 1024px) {
  .sh-team-hero { padding: 96px 24px 96px; }
  .sh-team-title { font-size: 3.75rem; }
  .sh-team-section { padding: 56px 24px; }
  .sh-team-mission-grid { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .sh-team-section-title { font-size: 1.875rem; }
  .sh-team-process-grid { grid-template-columns: repeat(4, 1fr); }
  .sh-team-cta h2 { font-size: 1.5rem; }
}