/* structure_plain.css */

:root{
  --tp-max: 1400px;
  --ink: #101828;
  --muted: #5b6474;
  --accent: #06926D;
  /* --chip: #eef6f7; */
  --chip: #D09353;
  --nav-h: 80px;              /* <— adjust to your navbar height */
}

*{box-sizing:border-box}
.team-plain{ background:#fff; }
.tp-wrap{
  max-width: var(--tp-max);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 32px);
  color: var(--ink);
}

/* ---------- Headline ---------- */
.tp-head{
  display:grid;
  gap:18px;
  margin-bottom: clamp(16px, 3vw, 20px);
  text-align:center;                 /* center the headline */
}
.tp-title{
  margin:0;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: .2px;
}
.tp-title span{ color: var(--accent); }

/* ---------- Sticky Tabs (centered) ---------- */
.tp-tabs{
  position: sticky;                  /* stick under navbar */
  top: var(--nav-h);
  z-index: 5;
  background:#fff;

  display:flex;
  justify-content:center;            /* center tabs */
  gap: 4em;
  align-items:center;

  padding: 10px 6px;                 /* small breathing room when stuck */
  margin-inline: -6px;               /* negate side padding to align edge-to-edge */
  border-bottom: 1px solid #eef1f4;

  overflow-x:auto;                   /* allow horizontal scroll on small screens */
  scrollbar-width: thin;
  scrollbar-color: #c2d6db transparent;
}
.tp-tabs::-webkit-scrollbar{ height:8px }
.tp-tabs::-webkit-scrollbar-thumb{ background:#c2d6db; border-radius:8px }

.tp-tab{
  --pad-x: 14px;
  --pad-y: 10px;
  display:inline-block;
  text-decoration:none;
  color:#0b2033;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 5px;
  font-weight:700;
  font-size: clamp(13px, 1.4vw, 15px);
  border: 1px solid #dfe6ec;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid #D09353;
}
.tp-tab:hover{ 
  background: var(--chip); 
  border-color:#cbe7e1;
  border: 1px solid black; 
}
.tp-tab.is-active{
  background: var(--chip); 
  color: black;
  border-color: black;
}

/* ---------- People grid (no cards, no ring/hover) ---------- */
.tp-grid{
  list-style:none; 
  padding:0; 
  margin: clamp(10px, 2vw, 20px) 0 0;
  display:grid; 
  gap: clamp(18px, 3.2vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.tp-item{ text-align:center; }

/* Circular avatar without ring/hover effects */
.tp-avatar{
  --size: clamp(140px, 18vw, 190px);
  width: var(--size);
  height: var(--size);
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
}
.tp-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}

/* Name & role */
.tp-meta{ display:grid; gap:4px }
.tp-name{
  font-weight:800;
  letter-spacing:.2px;
  color: black;
  font-size: clamp(13px, 1.5vw, 16px);
}
.tp-role{
  color: var(--muted);
  color: #AF8654;
  letter-spacing:.06em;
  font-size: clamp(11px, 1.4vw, 15px);
}

/* Slightly wider spacing on big screens */
@media (min-width: 1200px){
  .tp-grid{ gap: 40px }
}