/* Team profiles: Board of Directors, Leadership, Employees (partials/team-profile.blade.php).
   Same palette as the rest of the site: #a39586 lines and labels, beige tints, a deeper tone of the
   same brown for names and reading text. Typefaces are the ones these pages always used: name and
   position in SangBleuVersailles, everything else in TTCommons (weights as in main.css).
   main.css sets *{line-height:100%}, so every text block sets its own line-height. */
.teamProfile{
  --team-ink: #85776a;
  --team-name: #8f8172;
  --team-line: rgba(163, 149, 134, .35);
  --team-tint: #e6ded4;
  position: relative;
  margin: 8rem 0 0;
}
.teamProfile + .teamProfile{margin-top: 7rem; padding-top: 7rem; border-top: 1px solid var(--team-line)}
.aboutContent .mediumTitle + .teamProfile{margin-top: 5rem}
/* Last profile right before the footer (Directors, Employees): room before the footer */
.teamProfile:last-child{padding-bottom: 14rem}

/* Head: photo on a beige block shifted down-right, text sits on the photo's baseline */
.teamProfile__head{display: grid; grid-template-columns: minmax(0, 28%) minmax(0, 1fr); gap: 0 5rem; align-items: end}
.teamProfile__head.noPhoto{grid-template-columns: minmax(0, 1fr)}
.teamProfile__photo{position: relative; margin: 0 1.8rem 1.8rem 0; isolation: isolate}
.teamProfile__photo::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--team-tint);
  transform: translate(1.8rem, 1.8rem);
  transition: transform .6s ease;
}
.teamProfile:hover .teamProfile__photo::before{transform: translate(1.2rem, 1.2rem)}
.teamProfile__photo img{display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%}

.teamProfile__intro{padding: 0 0 1.8rem}
.teamProfile__intro::before{content: ''; display: block; width: 4.8rem; height: 1px; margin: 0 0 2.4rem; background: #a39586}
.teamProfile__name{margin: 0; font-family: SangBleuVersailles; font-size: 3.6rem; font-weight: 300; line-height: 1.15; color: var(--team-name)}
.teamProfile__role{margin: .8rem 0 0; font-family: SangBleuVersailles; font-size: 2.2rem; font-weight: 300; line-height: 1.3; color: #a39586}
.teamProfile__since{margin: 2rem 0 0; font-size: 1.8rem; line-height: 1.4; color: #a39586}

/* Bio */
.teamProfile__bio{margin: 4.5rem 0 0; max-width: 78ch}
.aboutContent .teamProfile__bio p.text{margin: 0 0 1.8rem; font-size: 2rem; line-height: 1.5; color: var(--team-ink)}
.aboutContent .teamProfile__bio p.text + p.text{margin-top: 0}

/* Section labels followed by a hairline, like the About menu lines */
.teamProfile__label{
  display: flex; align-items: center; gap: 2rem; margin: 0 0 1.8rem;
  font-size: 1.9rem; font-weight: 500; line-height: 1.4; color: #a39586;
}
.teamProfile__label::after{content: ''; flex: 1; height: 1px; background: var(--team-line)}

.teamProfile__experience{margin: 4.5rem 0 0}
.teamTable{width: 100%; border-collapse: collapse}
.teamTable th{padding: 0 3rem 1rem 0; text-align: left; white-space: nowrap; font-size: 1.8rem; font-weight: 500; line-height: 1.4; color: #a39586}
.teamTable td{
  padding: 1.1rem 3rem 1.1rem 0; vertical-align: top; border-top: 1px solid var(--team-line);
  font-size: 1.8rem; line-height: 1.45; color: var(--team-ink);
}
.teamTable.noHead tr:first-child td{border-top: none}
.teamTable td:first-child{color: var(--team-name); font-weight: 400}
.teamTable th:last-child, .teamTable td:last-child{padding-right: 0; white-space: nowrap}
.teamTable td[colspan]{white-space: normal}

.teamProfile__lists{display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap: 0 5rem; margin: 4.5rem 0 0}
.teamProfile__list ul{margin: 0; padding: 0; list-style: none}
.teamProfile__list li{
  position: relative; padding: 1.1rem 0 1.1rem 2.4rem; border-top: 1px solid var(--team-line);
  font-size: 1.8rem; line-height: 1.45; color: var(--team-ink);
}
.teamProfile__list li:first-child{border-top: none; padding-top: 0}
.teamProfile__list li::before{content: ''; position: absolute; left: 0; top: 1.8rem; width: .8rem; height: .8rem; border-radius: 50%; background: #a39586}
.teamProfile__list li:first-child::before{top: .7rem}

@media (max-width: 925px){
  .teamProfile{margin-top: 6rem}
  .teamProfile + .teamProfile{margin-top: 6rem; padding-top: 6rem}
  .teamProfile:last-child{padding-bottom: 10rem}
  .teamProfile__head{grid-template-columns: minmax(0, 1fr)}
  .teamProfile__photo{width: 46%; margin-bottom: 4rem}
  .teamProfile__intro{padding: 0}
  .teamProfile__name{font-size: 3rem}
  .teamProfile__role{font-size: 2.2rem}
  .teamProfile__bio, .teamProfile__experience, .teamProfile__lists{margin-top: 4rem}
  .teamProfile__lists{grid-template-columns: minmax(0, 1fr); gap: 3.5rem}

  /* Experience rows as small blocks: company and period on top, the rest below */
  .teamTable thead{display: none}
  .teamTable, .teamTable tbody{display: block}
  .teamTable tr{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 2rem; padding: 1.3rem 0; border-top: 1px solid var(--team-line)}
  .teamTable tr:first-child{border-top: none; padding-top: 0}
  .teamTable td{display: block; padding: 0; border: none; font-size: 2rem}
  .teamTable td:not(:first-child):not(:last-child){grid-column: 1 / -1; font-size: 1.9rem}
  .teamTable td:last-child:not(:first-child){grid-row: 1; grid-column: 2; color: #a39586}
  .teamTable td[colspan]{grid-column: 1 / -1}
}