/* ===========================================================
   Roster page — 2024 Minnesota Vikings
   Builds on style.css (tokens, ticker, header, buttons, footer)
   =========================================================== */

:root{
  --r-bar:#2b2a33;
  --r-grp:#4f2683;
  --r-sub:#5e3196;
  --r-sub-head:#f1eff7;
  --r-zebra:#ecedf4;
  --r-line:#d2d2de;
}

body.page-roster{background:#fbfbfd}

/* ---------- breadcrumbs ---------- */
.rb-crumbs{background:var(--r-bar)}
.rb-crumbs ol{list-style:none;margin:0;padding:9px 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.rb-crumbs a{color:rgba(255,255,255,.45);transition:color var(--t-fast)}
.rb-crumbs a:hover{color:#fff}
.rb-crumbs [aria-current]{color:#fff}

/* ---------- page hero ---------- */
.rb-hero{position:relative;isolation:isolate;background:#140f22;color:#fff;overflow:hidden}
.rb-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:center 34%}
.rb-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(20,12,38,.94) 0%,rgba(28,15,54,.82) 42%,rgba(28,15,54,.30) 100%)}
.rb-hero .wrap{padding-top:42px;padding-bottom:42px}
.rb-hero h1{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,6vw,66px);line-height:.96;letter-spacing:.01em;
  margin:12px 0 12px;text-shadow:0 3px 22px rgba(0,0,0,.5)
}
.rb-hero .rb-lede{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.84);max-width:520px}

/* quick facts strip */
.rb-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding:0;list-style:none}
.rb-facts li{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:10px 16px;min-width:112px
}
.rb-facts b{display:block;font-family:var(--display);font-weight:700;font-size:23px;
  line-height:1.05;letter-spacing:.01em;color:var(--gold)}
.rb-facts span{display:block;font-family:var(--display);font-weight:500;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:3px}

/* ---------- body ---------- */
.rb-body{padding:var(--space-4) 0 var(--space-5)}

/* ---------- filter bar ---------- */
.rb-filter-head{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:20px}
.rb-filter{display:inline-flex;flex-wrap:wrap;background:#eceef3;border-radius:6px;padding:4px;gap:2px}
.rb-filter button{
  padding:11px 20px;border-radius:4px;min-height:44px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:#3a3a46;
  transition:background var(--t-fast),color var(--t-fast)
}
.rb-filter button:hover{background:rgba(79,38,131,.1)}
.rb-filter button[aria-pressed="true"],
.rb-filter button[aria-pressed="true"]:hover{background:var(--r-grp);color:#fff}
.rb-count{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-muted)}

/* ---------- group + position tables ---------- */
.rb-group+.rb-group{margin-top:30px}
.rb-bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--r-grp);color:#fff;border-radius:4px;padding:12px 16px;margin-bottom:14px;
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.07em;
  text-transform:uppercase
}
.rb-bar-n{font-weight:500;font-size:11.5px;letter-spacing:.15em;color:var(--gold)}

.rb-block+.rb-block{margin-top:16px}
.rb-cat{background:var(--r-sub);color:#fff;border-radius:4px 4px 0 0;padding:9px 16px;
  font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.12em;
  text-transform:uppercase}
.rb-scroll{overflow-x:auto;background:#fff;border-radius:0 0 4px 4px;
  box-shadow:0 1px 3px rgba(20,15,40,.07)}
table.rb-table{width:100%;border-collapse:collapse;min-width:700px}
table.rb-table thead th{background:var(--r-sub-head);color:var(--r-sub);padding:9px 10px;
  text-align:center;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase}
table.rb-table thead th:first-child{width:56px}
table.rb-table thead th:nth-child(2){text-align:left;padding-left:16px}
table.rb-table thead th:last-child{text-align:left}
table.rb-table tbody th{text-align:left;padding:8px 10px;font-weight:500;font-size:14px;
  color:var(--text)}
table.rb-table tbody td{text-align:center;padding:8px 10px;font-size:14px;color:#41414d;
  white-space:nowrap}
table.rb-table td.rb-no{font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--r-grp);width:56px}
table.rb-table td.rb-college{text-align:left;white-space:normal;min-width:150px}
table.rb-table tbody th,table.rb-table tbody td{border-bottom:1px solid var(--r-line)}
table.rb-table tbody tr:last-child th,table.rb-table tbody tr:last-child td{border-bottom:0}
table.rb-table tbody tr:nth-child(even) th,
table.rb-table tbody tr:nth-child(even) td{background:var(--r-zebra)}

/* neutral silhouette avatar — no real player likenesses on this site */
.rb-p{display:flex;align-items:center;gap:10px}
.rb-av{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#e9e6f1;border:2px solid var(--purple);overflow:hidden}
.rb-av svg{width:20px;height:20px;color:#8c86a0}
.rb-name{white-space:nowrap}
.rb-rook{display:inline-block;margin-left:7px;vertical-align:1px;background:var(--gold);
  color:#231800;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.12em;
  padding:2px 6px;border-radius:2px}

/* ---------- coaching staff ---------- */
.rb-coaches{margin-top:36px}
.rb-coach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rb-coach{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--r-line);
  border-radius:var(--radius);padding:14px;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.rb-coach:hover{border-color:#d6cfe8;box-shadow:0 6px 18px rgba(20,15,40,.09);transform:translateY(-2px)}
.rb-coach .rb-av{width:46px;height:46px}
.rb-coach .rb-av svg{width:30px;height:30px}
.rb-coach h3{font-size:15.5px;font-weight:700;color:#1b1b26;line-height:1.3}
.rb-coach p{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple);margin-top:3px}

/* ---------- note ---------- */
.rb-note{margin-top:26px;background:#fff;border:1px solid var(--r-line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:14px 16px;font-size:13px;line-height:1.6;color:var(--text-muted)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .rb-coach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .rb-filter{width:100%}
  .rb-filter button{flex:1 1 auto;padding:11px 12px;font-size:12px;letter-spacing:.03em}
  .rb-facts li{flex:1 1 auto;min-width:0}
  .rb-coach-grid{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .rb-coach{transition:none}
  .rb-coach:hover{transform:none}
}