/* team-bios.css — the bio sheet behind each sales rep's name on /team/.
 *
 * Markup: src/lib/team-bios.ts. Behavior: public/assets/vanilla/team-bios.js.
 *
 * The sheet is the team card the reader just clicked, opened up — every value below is either the
 * card's own (measured on /team/ 2026-10-16: white panel, padding 34/32, shadow 0 15px 50px
 * rgba(0,0,0,.15), red Bricolage name, uppercase Bricolage label, 1px dashed rgba(0,0,0,.125) rule,
 * 10px red squares in the panel's right-hand corners, portrait standing 65px proud of the panel,
 * section tint rgba(243,24,39,.03)) or the site's eyebrow and body-text tokens.
 *
 * Contrast (CONVENTIONS.md "Accessible colour values"): red TEXT below large size is #dd1421
 * (5.00:1 on white); #f31827 is used only for the 44px name, rules, squares and button borders.
 *
 * Every selector inside the sheet starts with .fs-bio so it outranks the kit's element rules
 * (.fs-kit-6099 h2 and friends) without !important.
 */

/* ---- on the card ------------------------------------------------------------------------------ */
.fs-bio-trigger:hover,
.fs-bio-trigger:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.fs-bio-portrait { cursor: pointer; }

html.fs-bio-open { overflow: hidden; }

/* ---- the sheet: the whole viewport (owner rule — a modal takes the whole viewport) ------------- */
.fs-bio {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: #000;
  overflow: hidden;
}
.fs-bio[open],
html:not(.fs-bio-js) .fs-bio:target {
  display: flex;
  flex-direction: column;
}
/* No script: the name's #link shows the sheet through :target, above the sticky header. */
html:not(.fs-bio-js) .fs-bio:target { z-index: 2147483000; }
.fs-bio::backdrop { background: rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: no-preference) {
  .fs-bio[open] { animation: fs-bio-in .24s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes fs-bio-in {
  from { opacity: 0; transform: translateY(16px); }
}

/* ---- top bar ---------------------------------------------------------------------------------- */
.fs-bio .fs-bio-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  /* lines the bar's contents up with the card's 1120px column below */
  padding: 14px max(40px, calc((100% - 1120px) / 2 + 40px));
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.fs-bio .fs-bio-eyebrow {
  margin: 0 auto 0 0;
  font-family: var(--fse-global-typography-8109c29-font-family), sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #dd1421;
}
.fs-bio .fs-bio-eyebrow span {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid #f31827;
}
.fs-bio .fs-bio-step,
.fs-bio .fs-bio-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 44px;
  min-width: 44px;
  border: 2px solid #f31827;
  border-radius: 40px;
  background: #fff;
  color: #dd1421;
  font-family: var(--fse-global-typography-accent-font-family), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.fs-bio .fs-bio-step:hover { background: #f31827; color: #fff; }
/* The site's primary button: the header's Service Request gradient. */
.fs-bio .fs-bio-close {
  padding: 0 20px 0 15px;
  border-color: transparent;
  background: linear-gradient(90deg, #f31827 0%, #8d0e17 100%);
  color: #fff;
}
.fs-bio .fs-bio-close:hover { background: #8d0e17; }
.fs-bio .fs-bio-step svg,
.fs-bio .fs-bio-close svg { width: 18px; height: 18px; flex: none; }
.fs-bio a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* ---- body: the card, opened up ---------------------------------------------------------------- */
.fs-bio .fs-bio-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(243, 24, 39, .03);
}
.fs-bio .fs-bio-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 40px 96px;
  box-sizing: border-box;
}
/* The portrait and contact stay in view while the bio scrolls — when there is room for them. */
@media (min-height: 640px) and (min-width: 900px) {
  .fs-bio .fs-bio-side { position: sticky; top: 24px; }
}
.fs-bio .fs-bio-photo {
  display: block;
  width: 280px;
  height: 340px;
  max-width: none;
  object-fit: cover;
}
.fs-bio .fs-bio-panel {
  position: relative;
  margin-top: 65px;
  padding: 48px 56px 56px;
  background: #fff;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .15);
}
.fs-bio .fs-bio-panel::before,
.fs-bio .fs-bio-panel::after {
  content: "";
  position: absolute;
  right: 0;
  width: 10px;
  height: 10px;
  background: #f31827;
}
.fs-bio .fs-bio-panel::before { top: 0; }
.fs-bio .fs-bio-panel::after { bottom: 0; }

.fs-bio .fs-bio-head {
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(0, 0, 0, .125);
}
.fs-bio .fs-bio-name {
  margin: 0;
  font-family: var(--fse-global-typography-primary-font-family), sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: #f31827;
}
.fs-bio .fs-bio-name:focus { outline: none; }
.fs-bio .fs-bio-title {
  margin: 10px 0 0;
  font-family: var(--fse-global-typography-primary-font-family), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #000;
}

.fs-bio .fs-bio-sec { margin-top: 36px; }
/* The site's eyebrow, on white: Bricolage 16/700, 0.3em, red text over a shrink-to-fit red rule. */
.fs-bio .fs-bio-h {
  display: inline-block;
  margin: 0 0 16px;
  padding-bottom: 3px;
  border-bottom: 1px solid #f31827;
  font-family: var(--fse-global-typography-8109c29-font-family), sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #dd1421;
}
.fs-bio .fs-bio-sec p,
.fs-bio .fs-bio-sec li {
  font-family: var(--fse-global-typography-text-font-family), sans-serif;
  font-size: var(--fse-global-typography-text-font-size, 20px);
  font-weight: 400;
  line-height: var(--fse-global-typography-text-line-height, 32px);
  letter-spacing: var(--fse-global-typography-text-letter-spacing, .16px);
  color: #000;
}
.fs-bio .fs-bio-sec p {
  max-width: 640px;
  margin: 0 0 16px;
}
.fs-bio .fs-bio-sec p:last-child { margin-bottom: 0; }
.fs-bio .fs-bio-sec ul {
  max-width: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fs-bio .fs-bio-sec li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 26px;
}
.fs-bio .fs-bio-sec li:last-child { margin-bottom: 0; }
/* The card's corner square, as the bullet. */
.fs-bio .fs-bio-sec li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 8px;
  height: 8px;
  background: #f31827;
}
.fs-bio .fs-bio-quote {
  max-width: 640px;
  margin: 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid #f31827;
}
.fs-bio .fs-bio-quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--fse-global-typography-primary-font-family), sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4a4a4a;
}

/* ---- contact, under the portrait --------------------------------------------------------------- */
.fs-bio .fs-bio-contact {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  background: #fff;
  box-shadow: 0 15px 50px rgba(0, 0, 0, .1);
}
.fs-bio .fs-bio-contact li { margin: 0; }
.fs-bio .fs-bio-contact li + li { border-top: 1px dashed rgba(0, 0, 0, .125); }
/* 200px for the value: every @fitsupply.com address fits on one line at 15px (widest 190px,
   measured), and the two @discountonlinefitness.com ones break only at the <wbr> after the @. */
.fs-bio .fs-bio-contact a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  color: #000;
  text-decoration: none;
}
.fs-bio .fs-bio-ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f31827 0%, #8d0e17 100%);
  color: #fff;
}
.fs-bio .fs-bio-ico svg { width: 16px; height: 16px; }
.fs-bio .fs-bio-k {
  font-family: var(--fse-global-typography-8109c29-font-family), sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #dd1421;
}
.fs-bio .fs-bio-v {
  font-family: var(--fse-global-typography-text-font-family), sans-serif;
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.fs-bio .fs-bio-contact a:hover .fs-bio-v { text-decoration: underline; text-underline-offset: 3px; }

/* ---- small laptop ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .fs-bio .fs-bio-bar { padding-left: 24px; padding-right: 24px; }
  .fs-bio .fs-bio-card { padding: 40px 24px 72px; }
  .fs-bio .fs-bio-panel { margin-top: 52px; padding: 40px 36px 44px; }
  .fs-bio .fs-bio-name { font-size: 36px; }
}

/* ---- tablet and phone: one white card — portrait beside the name, contact, then the bio -------- */
@media (max-width: 899px) {
  .fs-bio .fs-bio-card {
    position: relative; /* the panel's corner squares land on the card's corners */
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-areas: "photo head" "contact contact";
    column-gap: 24px;
    margin: 24px;
    padding: 32px 32px 40px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .15);
  }
  .fs-bio .fs-bio-side,
  .fs-bio .fs-bio-panel { display: contents; }
  .fs-bio .fs-bio-photo { grid-area: photo; width: 150px; height: 182px; }
  .fs-bio .fs-bio-head { grid-area: head; align-self: end; padding-bottom: 6px; border-bottom: 0; }
  .fs-bio .fs-bio-name { font-size: 34px; line-height: 1.15; letter-spacing: 0; }
  .fs-bio .fs-bio-contact {
    grid-area: contact;
    margin-top: 24px;
    background: rgba(243, 24, 39, .04);
    box-shadow: none;
  }
  .fs-bio .fs-bio-sec { grid-column: 1 / -1; margin-top: 32px; }
}
@media (max-width: 599px) {
  .fs-bio .fs-bio-bar { gap: 8px; padding: 10px 16px; }
  .fs-bio .fs-bio-eyebrow { font-size: 12px; letter-spacing: .2em; }
  .fs-bio .fs-bio-close { width: 44px; padding: 0; }
  .fs-bio .fs-bio-close span { display: none; }
  .fs-bio .fs-bio-card {
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 16px;
    margin: 16px;
    padding: 24px 20px 32px;
  }
  .fs-bio .fs-bio-photo { width: 104px; height: 126px; }
  .fs-bio .fs-bio-name { font-size: 28px; }
  .fs-bio .fs-bio-title { margin-top: 6px; font-size: 13px; }
  .fs-bio .fs-bio-contact { margin-top: 20px; }
  .fs-bio .fs-bio-sec { margin-top: 28px; }
  /* 12px at 0.15em keeps "Knowledge and Passion for Fitness" on one line from a 375px phone up. */
  .fs-bio .fs-bio-h { margin-bottom: 12px; font-size: 12px; line-height: 15px; letter-spacing: .15em; }
}