/**
 * @file
 * Person header component.  It's meant to be within the page header..
 *
 */

.person-header {
  background-color: transparent;
  color: var(--white);
  -webkit-margin-before: var(--size-6);
  margin-block-start: var(--size-6);
  margin-inline: auto;
  max-width: var(--size-mobile);
}

@media (min-width: 768px) {
  .person-header {
    display: grid;
    grid-gap: var(--size-10);
    gap: var(--size-10);

    /* To avoid text going outside the grid parameters, we're setting specific
    dimensions and ensure text wraps properly. */
    grid-template-columns: var(--size-60) calc(100% - 280px);
    margin-inline: initial;
    max-width: var(--size-laptop);
  }
}

@media (min-width: 768px) {
  .person-header {
    display: grid;
    grid-gap: var(--size-10);
    gap: var(--size-10);

    /* To avoid text going outside the grid parameters, we're setting specific
    dimensions and ensure text wraps properly. */
    grid-template-columns: var(--size-60) calc(100% - 280px);
    margin-inline: initial;
    max-width: var(--size-laptop);
  }
}

@media (--tablet) {
  .person-header {
    display: grid;
    grid-gap: var(--size-10);
    gap: var(--size-10);

    /* To avoid text going outside the grid parameters, we're setting specific
    dimensions and ensure text wraps properly. */
    grid-template-columns: var(--size-60) calc(100% - 280px);
    margin-inline: initial;
    max-width: var(--size-laptop);
  }
}

.pl .person-header {
  background-color: var(--ucla-blue);
  padding: var(--size-5);
}

.person__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-8);
  font-weight: var(--font-weight-600);
}

.person__title {
  text-wrap: balance;
}

.person__contact {
  -webkit-margin-before: var(--size-6);
  margin-block-start: var(--size-6);
}

@media (min-width: 640px) {
  .person__contact {
    display: grid;
    grid-gap: var(--size-2);
    gap: var(--size-2);
    grid-template-columns: 1fr;
    width: var(--size-mobile);
  }
}

@media (min-width: 640px) {
  .person__contact {
    display: grid;
    grid-gap: var(--size-2);
    gap: var(--size-2);
    grid-template-columns: 1fr;
    width: var(--size-mobile);
  }
}

@media (--mobile) {
  .person__contact {
    display: grid;
    grid-gap: var(--size-2);
    gap: var(--size-2);
    grid-template-columns: 1fr;
    width: var(--size-mobile);
  }
}

@media (min-width: 1024px) {
  .person__contact {
    gap: var(--size-1);
    grid-template-columns: 1fr 1fr;
  }
}

@media (--laptop) {
  .person__contact {
    gap: var(--size-1);
    grid-template-columns: 1fr 1fr;
  }
}

.person__website {
  -webkit-margin-before: var(--size-6);
  margin-block-start: var(--size-6);
}

.person__label {
  display: block;
  font-weight: var(--font-weight-600);
}

.person__address {
  font-style: normal;
  -webkit-margin-before: var(--size-1);
  margin-block-start: var(--size-1);
  -webkit-margin-after: var(--size-3);
  margin-block-end: var(--size-3);
}

.person__address span {
  display: block;
}

.person__contact--connect {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.person__phone,
.person__email {
  -webkit-margin-after: var(--size-3);
  margin-block-end: var(--size-3);
}

@media (min-width: 1024px) {
  .person__phone,
  .person__email {
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
}

@media (--laptop) {
  .person__phone,
  .person__email {
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
}

.person__phone a,
.person__email a {
  color: var(--ucla-yellow);
  font-weight: var(--font-weight-700);
  white-space: nowrap;
}

.person__office-hours {
  -webkit-margin-after: var(--size-3);
  margin-block-end: var(--size-3);
}

@media (min-width: 1024px) {
  .person__office-hours {
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
}

@media (--laptop) {
  .person__office-hours {
    -webkit-margin-after: 0;
    margin-block-end: 0;
  }
}