/*
 * The speaker info section.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.speaker-info {
  align-items:flex-start;
  display:flex;
  gap:calc(var(--grid-column-width)*2);
  justify-content:space-between;
  margin-top:32px;
  padding-inline:var(--offset-x);
  position:relative;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-info {
    gap:calc(var(--grid-column-width)*1);
    margin-top:24px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-info {
    flex-direction:column;
    gap:40px;
    margin-top:16px;
  }
}

.speaker-contacts {
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  left:0;
  position:-webkit-sticky;
  position:sticky;
  top:var(--header-height);
  width:calc(var(--grid-column-width)*3.75 + var(--grid-gap)*2.75);
}

@media screen and (max-width:1440px) {

  .speaker-contacts {
    width:calc(var(--grid-column-width)*4 + var(--grid-gap)*3);
  }
}

@media screen and (max-width:1199px) {

  .speaker-contacts {
    position:static;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-info .speaker-contacts {
    width:100%;
  }
}

@media screen and (max-width:1440px) {

  .speaker-contacts__socials-wrapper {
    margin-top:48px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-contacts__socials-wrapper {
    margin-top:32 px;
  }
}

.speaker-contacts__card {
  background-color:#181818;
}

.speaker-contacts__card,
.speaker-contacts__image-container {
  overflow:hidden;
  position:relative;
  width:100%;
}

.speaker-contacts__image {
  aspect-ratio:3/4;
  display:block;
  filter:grayscale(1);
  height:auto;
  object-fit:cover;
  width:100%;
}

.speaker-contacts__text {
  border-left:3px solid #e1251b;
  color:#fff;
  margin:18px 16px 22px;
  padding-left:17px;
  position:relative;
}

@media screen and (max-width:1440px) {

  .speaker-contacts__text {
    margin:14px 14px 18px;
    padding-left:14px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-contacts__text {
    margin:14px 14px 18px;
    padding-left:14px;
  }
}

.speaker-contacts__name {
  font-size:clamp(20px,4px + 1.25vw,28px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.08;
  text-transform:none;
}

@media screen and (max-width:1440px) {

  .speaker-contacts__name {
    font-size:22px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-contacts__name {
    font-size:24px;
  }
}

.speaker-contacts__company {
  font-size:15px;
  margin-top:8px;
  opacity:.85;
}

@media screen and (max-width:1440px) {

  .speaker-contacts__company {
    font-size:14px;
    margin-top:6px;
  }
}

.speaker-contacts__socials-wrapper {
  margin-top:48px;
  position:relative;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-contacts__socials-wrapper {
    margin-top:32px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-contacts__socials-wrapper {
    margin-top:24px;
  }
}

.speaker-contacts__socials-menu {
  display:flex;
  flex-direction:column;
  width:100%;
}

.speaker-contacts__socials-btn,
.speaker-contacts__socials-item {
  align-items:center;
  background-color:#e1251b;
  color:#fff;
  display:flex;
  height:40px;
  justify-content:center;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-contacts__socials-btn,
  .speaker-contacts__socials-item {
    height:32px;
  }
}

.speaker-contacts__socials-btn {
  transition:color .3s ease,background-color .3s ease;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .speaker-contacts__socials-btn:not(:disabled):hover {
    background-color:#181818;
    color:#fff;
  }
}

.speaker-contacts__socials-item span {
  transition:opacity .3s ease;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .speaker-contacts__socials-item:not(:disabled):hover span {
    opacity:.4;
  }
}

.speaker-contacts__share-wrapper {
  margin-top:48px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-contacts__share-wrapper {
    margin-top:40px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-contacts__share-wrapper {
    margin-top:32px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-contacts__share-wrapper {
    margin-top:24px;
  }
}

.speaker-contacts__share-label {
  opacity:.4;
}

.speaker-contacts__share-container {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:24px;
  width:calc(var(--grid-column-width)*4 + var(--grid-gap)*3);
}

@media screen and (max-width:1440px) {

  .speaker-contacts__share-container {
    gap:12px;
    width:calc(var(--grid-column-width)*3.5 + var(--grid-gap)*2.5);
  }
}

@media screen and (max-width:1199px) {

  .speaker-contacts__share-container {
    margin-top:16px;
    width:calc(var(--grid-column-width)*3.25 + var(--grid-gap)*2.25);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-contacts__share-container {
    gap:16px;
    margin-top:24px;
    width:calc(var(--grid-column-width)*18 + var(--grid-gap)*17);
  }
}

.speaker-contacts__share-item {
  transition:opacity .3s ease;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .speaker-contacts__share-item:not(:disabled):hover {
    opacity:.4;
  }
}

.speaker-bio {
  flex-grow:1;
}

.speaker-bio__name-container {
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-bio__name-container {
    gap:16px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-bio__name-container {
    gap:12px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-bio__name-container {
    display:none;
    gap:12px;
  }
}

.speaker-bio__position {
  opacity:.4;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-bio__position {
    font-size:16px;
  }
}

.speaker-bio__name-container--mobile {
  display:none;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-bio__name-container--mobile {
    display:flex;
    gap:16px;
    margin-bottom:40px;
    margin-top:0;
  }
}

.speaker-events_container {
  align-items:stretch;
  display:flex;
  gap:12px;
  justify-content:space-between;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-events_container {
    gap:8px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-events_container {
    flex-direction:column;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-events_container {
    gap:4px;
  }
}

.speaker-bio__eyebrow {
  border-bottom:2px solid #e1251b;
  color:#e1251b;
  display:inline-block;
  font-size:14px;
  letter-spacing:.08em;
  padding-bottom:10px;
  text-transform:uppercase;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-bio__eyebrow {
    font-size:13px;
  }
}

.speaker-bio__description {
  display:flex;
  flex-direction:column;
  gap:32px;
  line-height:1.4;
  margin-top:36px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .speaker-bio__description {
    margin-top:64px;
  }
}

@media screen and (max-width:1199px) {

  .speaker-bio__description {
    gap:24px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-bio__description {
    font-size:15px;
    gap:16px;
    margin-top:0;
  }
}

.speaker-bio__name {
  font-weight:400;
  text-transform:none;
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .speaker-bio__name {
    font-size:28px;
    width:calc(var(--grid-column-width)*15 + var(--grid-gap)*14);
  }
}

.speaker-bio__description,
.speaker-bio__name-container {
  padding-right:calc(var(--grid-column-width)*5.7);
}

@media screen and (max-width:1199px) {

  .speaker-bio__description,
  .speaker-bio__name-container {
    padding-right:0;
  }
}