/* Meet the Team — Command Deck test layout. Alliance Learning brand tokens
   (navy #323a49, Source Sans Pro / Oxygen already loaded sitewide).
   Light-mode only, matches the rest of the site.
   Department sections default to plain stacked flow (safe fallback if the
   deck JS ever fails) and only become a paged horizontal deck once
   #mtcd-deck gets the .mtcd-deck-active class from the controller script. */

.mtcd{
  --ink:#323a49;
  --muted:#697280;
  --bg:#ffffff;
  --surface:#ffffff;
  --line:#e1e4e8;
  --accent:#c8891f;
  --accent-ink:#7a5310;
  --accent-tint:#f6ead0;
}

.mtcd{ color:var(--ink); }

/* ---------- Banner (placeholder using the existing site banner image until
   Ryan/Jenny have a dedicated one) — sized the same way every other banner
   on the site is: full width, natural aspect ratio, no crop. ---------- */
.mtcd .mtcd-banner{ width:100%; }
.mtcd .mtcd-banner img{ display:block; width:100%; height:auto; }

/* ---------- Department chips: jump-to-slide nav, pinned above the deck
   (a banner will sit above this block once Ryan/Jenny have one ready) ---------- */
.mtcd .mtcd-chipbar{
  position:sticky; top:0; z-index:30;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.mtcd .mtcd-chiprow{
  display:flex; flex-wrap:wrap; gap:6px 6px; padding:9px 20px;
  max-width:1180px; margin:0 auto;
}
.mtcd .mtcd-chip{
  flex:0 0 auto; font-family:"Source Sans Pro", sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.02em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); color:var(--muted); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.mtcd .mtcd-chip:hover{ border-color:var(--accent); color:var(--ink); }
.mtcd .mtcd-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Progress bar ---------- */
.mtcd #mtcd-progress-track{
  height:3px; background:rgba(200,137,31,.15); margin-top:14px;
}
.mtcd #mtcd-progress-fill{
  height:100%; width:0%; background:var(--accent); transition:width .2s ease;
}

/* ---------- Deck / department slides ---------- */
/* Default: plain stacked sections — this is the safe fallback if JS never
   upgrades the deck (Jenny can still scroll and read everyone normally). */
.mtcd .mtcd-dept{
  max-width:1180px; margin:0 auto; padding:0 20px;
}
.mtcd .mtcd-dept-head{
  display:flex; align-items:center; gap:12px;
  padding:26px 0 12px; margin-top:6px; border-bottom:1px solid var(--line);
}
.mtcd .mtcd-dept-head h2{
  font-family:"Source Sans Pro", sans-serif; font-weight:700; font-size:19px;
  letter-spacing:.02em; text-transform:uppercase; margin:0;
}
.mtcd .mtcd-dept-count{
  font-size:12px; color:var(--accent-ink); background:var(--accent-tint);
  padding:2px 9px; border-radius:999px;
}

.mtcd .mtcd-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:14px; padding:16px 0 30px;
}
.mtcd .mtcd-card{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.mtcd .mtcd-card:hover{
  transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 8px 20px -8px rgba(50,58,73,.25);
}
.mtcd .mtcd-card .mtcd-frame{
  aspect-ratio:1/1; border-radius:7px; overflow:hidden; background:var(--line); margin-bottom:10px;
}
.mtcd .mtcd-card .mtcd-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.mtcd .mtcd-card .mtcd-name{ font-family:Oxygen, sans-serif; font-weight:700; font-size:14.5px; }
.mtcd .mtcd-card .mtcd-role{ font-family:Oxygen, sans-serif; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.35; }
.mtcd .mtcd-card .mtcd-underline{ height:2px; width:0; background:var(--accent); margin-top:8px; transition:width .2s; }
.mtcd .mtcd-card:hover .mtcd-underline{ width:26px; }

/* Deck mode: only turned on once JS confirms every slide id resolved */
#mtcd-deck.mtcd-deck-active{
  position:relative; overflow:hidden;
}
#mtcd-deck.mtcd-deck-active > .mtcd-dept{
  position:absolute; inset:0; height:100%; max-width:none;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(70px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1), visibility linear .5s;
  overflow-y:auto;
}
#mtcd-deck.mtcd-deck-active > .mtcd-dept > .mtcd-dept-inner{
  max-width:1180px; margin:0 auto; padding:0 20px 30px;
}
#mtcd-deck.mtcd-deck-active > .mtcd-dept.mtcd-slide-active{
  position:relative; opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0);
  z-index:2;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Soft fade at the bottom edge of a slide's own scroll area, so a partially
   visible row below the fold reads as "more below, scroll" rather than a
   hard clip through people's heads. Pinned to the visible edge (not the
   content) via position:sticky on the slide's own scrolling box. */
.mtcd .mtcd-fade{ display:none; }
#mtcd-deck.mtcd-deck-active > .mtcd-dept > .mtcd-fade{
  display:block; position:sticky; bottom:0; left:0; right:0;
  height:52px; margin-top:-52px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--surface) 88%);
}

.mtcd .mtcd-deck-controls{
  display:none; position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:1060; align-items:center; gap:8px;
  background:#fff; border-radius:999px; box-shadow:0 4px 16px rgba(0,0,0,.16);
  padding:4px 4px 4px 14px;
}
.mtcd .mtcd-deck-controls.mtcd-visible-controls{ display:flex; }
.mtcd .mtcd-nav-btn{
  font-family:"Source Sans Pro", sans-serif; font-weight:700; font-size:12.5px;
  border:none; background:#eef0f5; color:var(--ink);
  padding:7px 14px; border-radius:999px; cursor:pointer;
}
.mtcd .mtcd-nav-btn:hover:not(:disabled){ background:#e2e5ee; }
.mtcd .mtcd-nav-btn:disabled{ opacity:.35; cursor:not-allowed; }
.mtcd .mtcd-nav-btn-primary{ background:var(--ink); color:#fff; }
.mtcd .mtcd-nav-btn-primary:hover{ background:#40495d; }
.mtcd .mtcd-nav-counter{
  font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  font-size:11px; color:var(--muted); white-space:nowrap;
}