/* ---------------------------------------------------------------
   ABOUT: SPECIALIST CARDS

   "Meet Our Home Care Insurance Specialists" on /about/. Loaded only
   there through $extra_css, so pages.css does not grow for one block.

   Each card: a navy band across the top, a circular headshot sitting
   on the band's lower edge inside a white ring, then name, title, bio
   and two equal-width pill buttons. Three cards per row from 1024px,
   stacked below that (see the end of this file).

   The buttons sit side by side while the card is wide enough to hold
   "Connect on LinkedIn" on one line in each half (a 480px container
   query), and stack as two full-width rows below it. At 390px the card
   body is under 300px, where two halves would force the label to wrap.
--------------------------------------------------------------- */

.page-about .team-section .section-head > h2:before {
  content: none;
}

/* Three classes deep so it beats the .section-head p rules in pages.css,
   which otherwise set this line in grey body type. */
.page-about .team-section .section-head > p.team-eyebrow {
  display: flex;
  max-width: none;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-family: var(--sk-heading);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sk-green-cta);
}

.page-about .team-section .section-head > p.team-eyebrow:before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: var(--sk-green);
  flex-shrink: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 0 32px;
  background: var(--sk-card-fill);
  border: 1px solid var(--sk-hairline-soft);
  border-radius: 22px;
  box-shadow: var(--sk-shadow-rest);
  overflow: hidden;
  text-align: center;
  container-type: inline-size;
}

.team-card__band {
  align-self: stretch;
  height: 104px;
  background: #0B0B45;
}

.team-card__photo {
  display: block;
  width: 160px;
  height: 160px;
  margin-top: -80px;
  border-radius: 50%;
  border: 5px solid #FFFFFF;
  box-shadow: 0 10px 24px -12px rgba(11, 11, 69, 0.35);
  overflow: hidden;
  background: #E9ECF4;
  flex-shrink: 0;
}

.team-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
  padding: 22px 32px 0;
}

.page-about .team-card__name {
  margin: 0 0 6px;
  font-family: var(--sk-heading);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0B0B45;
}

.team-card__title {
  margin: 0 0 18px;
  font-family: var(--sk-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #577B2A;
}

.team-card__bio {
  max-width: 46ch;
  margin: 0 0 26px;
  font-family: var(--sk-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--sk-body-copy);
}

.team-card__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  margin-top: auto;
}

/* 480px, not 400px, since the row went to three cards across at 1024px
   (Oct 13, 2026): a 410px card's two halves clipped "Connect on LinkedIn". */
@container (min-width: 480px) {
  .team-card__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.team-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 100px;
  border: 2px solid transparent;
  font-family: var(--sk-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.team-card__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.team-card__btn--linkedin,
.team-card__btn--linkedin:visited {
  background: #0A66C2;
  border-color: #0A66C2;
  color: #FFFFFF;
}

.team-card__btn--linkedin:hover,
.team-card__btn--linkedin:focus-visible {
  background: #004182;
  border-color: #004182;
  color: #FFFFFF;
}

.team-card__btn--phone,
.team-card__btn--phone:visited {
  background: transparent;
  border-color: #0B0B45;
  color: #0B0B45;
}

.team-card__btn--phone:hover,
.team-card__btn--phone:focus-visible {
  background: #0B0B45;
  color: #FFFFFF;
}

@media (max-width: 767px) {
  .team-card__body {
    padding: 20px 22px 0;
  }

  .page-about .team-card__name {
    font-size: 22px;
  }
}

/* Three specialists from Oct 13, 2026: one column below 1024px (each
   card capped so it does not stretch across a tablet), three across
   from 1024px. Two columns would leave the third card alone on a row. */
@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Andrew's block in "Who reviews the coverage guidance": the same card,
   one wide card under the copy. */
.team-card--lead {
  /* .team-card is an inline-size container, which has no intrinsic
     width: outside a grid it must be told how wide to be. */
  width: 100%;
  max-width: 720px;
  margin: var(--space-lg) auto 0;
}

.team-card--lead .team-card__bio {
  max-width: 60ch;
}

.team-card--lead .checklist {
  margin: 0 0 20px;
  text-align: left;
}

.team-card__book {
  margin: 0 0 18px;
  font-family: var(--sk-heading);
  font-size: 15px;
  font-weight: 600;
  color: #0B0B45;
}

.team-card__book a {
  color: inherit;
}

.team-card__book cite {
  font-style: italic;
}

/* The Amazon pill inside a card's button row takes the row's sizing. */
.team-card__actions .btn-amazon {
  min-height: 48px;
  padding: 0 18px;
  font-size: 14px;
}