/* =============================================================
   Afrobora — multipage additions
   Interior page hero, home "explore" band, and the Team grid.
   Inherits variables + .container/.section/.btn from tokens.css
   and styles.css.
   ============================================================= */

/* ---- interior page hero ---- */
.page-hero{ padding:74px 0 30px; }
.page-eyebrow{
  font-family:var(--mono, ui-monospace); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink, #1D4ED8); display:inline-flex; align-items:center; gap:8px;
}
.page-eyebrow::before{ content:""; width:7px; height:7px; border-radius:999px;
  background:var(--accent-2, #F97316); box-shadow:0 0 0 4px var(--accent-warm, #FFF7ED); }
.page-title{
  font-family:var(--serif, Georgia, serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(30px, 5vw, 50px); line-height:1.08; margin:16px 0 0; max-width:20ch; text-wrap:balance;
}
.page-lead{ margin:16px 0 0; color:var(--muted, #62656d); font-size:clamp(16px,2vw,18px); max-width:60ch; }

/* ---- home explore band ---- */
.explore-head{ max-width:640px; margin-bottom:28px; }
.explore-head h2{ font-family:var(--serif, Georgia, serif); font-weight:600; font-size:clamp(24px,3.4vw,34px); margin-top:12px; text-wrap:balance; }
.explore-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){ .explore-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .explore-grid{ grid-template-columns:1fr; } }
.explore-card{
  display:flex; flex-direction:column; gap:8px; padding:22px;
  border:1px solid var(--line, #e3e3df); border-radius:var(--radius, 14px);
  background:var(--surface, #fff); box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; color:inherit;
}
.explore-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent, #2563EB); }
.explore-ic{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px;
  background:linear-gradient(135deg, var(--accent, #2563EB), var(--accent-2, #F97316)); color:#fff; margin-bottom:4px;
}
.explore-card h3{ font-size:18px; font-weight:600; }
.explore-card p{ font-size:14px; color:var(--muted, #62656d); line-height:1.5; flex:1; }
.explore-go{ font-family:var(--mono, ui-monospace); font-size:12.5px; color:var(--accent-ink, #1D4ED8); display:inline-flex; align-items:center; gap:6px; }

/* ---- team grid ---- */
.team-section{ padding-top:20px; }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{
  border:1px solid var(--line, #e3e3df); border-radius:var(--radius-lg, 20px); background:var(--surface, #fff);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .2s ease;
}
.team-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.team-photo{ position:relative; aspect-ratio:4/3; background:
  linear-gradient(135deg, color-mix(in srgb, var(--accent, #2563EB) 16%, var(--surface,#fff)), color-mix(in srgb, var(--accent-2, #F97316) 16%, var(--surface,#fff)));
  display:grid; place-items:center; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-initials{ font-family:var(--serif, Georgia, serif); font-size:52px; color:var(--surface, #fff);
  text-shadow:0 2px 12px rgba(0,0,0,.18); }
.team-info{ padding:18px 20px 20px; }
.team-info h3{ font-size:18px; font-weight:600; }
.team-role{ font-family:var(--mono, ui-monospace); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-ink, #1D4ED8); margin-top:3px; }
.team-bio{ font-size:14px; color:var(--muted, #62656d); line-height:1.55; margin-top:10px; }
.team-social{ display:flex; gap:8px; margin-top:14px; }
.team-social a{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--line, #e3e3df); color:var(--muted, #62656d);
  font-weight:700; transition:background .15s, color .15s, border-color .15s;
}
.team-social a:hover{ background:var(--accent, #2563EB); color:#fff; border-color:var(--accent, #2563EB); }
.team-social svg{ width:15px; height:15px; }
.team-empty{ text-align:center; color:var(--muted, #62656d); padding:40px 0; }

/* ---- 404 ---- */
.page-404{ padding:80px 0; }
.page-404-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }