/**
 * Our People - Profile Header Module
 *
 * Styles for template-parts/modules/our_people_header_module.php
**/

.our_people_header_module {
  padding: 60px 0 80px;
}

.people-header__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  /*background: #e7e7e7;*/
  overflow: hidden;
  animation: people-header-wrap-in 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.people-header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: people-header-image-in 3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Fade + slide up, settling from a pronounced zoom-in on page load. */
@keyframes people-header-image-in {
  from {
    opacity: 0;
    transform: translateY(80px) scale(1.22);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Fade the image wrapper up on load, slightly ahead of the image itself. */
@keyframes people-header-wrap-in {
  from {
    opacity: 0;
    transform: translateY(56px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Hold the reveal at its first frame while the page-transition overlay (or,
   on the homepage, the logo preloader) is still covering the screen, so it
   only starts once the user can actually see it. Both classes are removed
   by their respective plugin/theme JS when their own overlay clears. */
body.has-page-transition .people-header__image,
body.has-page-transition .people-header__image img,
body.has-page-loader .people-header__image,
body.has-page-loader .people-header__image img {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .people-header__image,
  .people-header__image img { animation: none; }
}
.people-header__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b5b5b5;
  font-size: 64px;
}

.people-header__name {
  /*font-family: var(--farani-heading-font);*/
  font-family: var(--farani-body-font);
  font-weight: 400;
  font-size: 44px;
  line-height: 60px;
  color: var(--farani-burgundy, #401115);
  margin-bottom: 8px;
}

.people-header__role {
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 18px;
  color: var(--farani-orange, #e95a3a);
  margin-bottom: 24px;
}

.people-header__meta {
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  margin: 0 0 32px;
}
.people-header__meta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
}
.people-header__meta-row dt {
  flex: 0 0 140px;
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--farani-text-grey, #585858);
}
.people-header__meta-row dd {
  margin: 0;
  font-family: var(--farani-body-font);
  font-size: 14px;
  color: var(--farani-burgundy, #401115);
}
.people-header__meta-row dd a { color: inherit; }
.people-header__meta-row dd a:hover { color: var(--farani-orange, #e95a3a); }

.people-header__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.people-header__btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  font-family: var(--farani-body-font);
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: var(--transition);
}
/* Colour slide rollover — sweeps in from the right at a 45deg angle on hover */
.people-header__btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  transform: skewX(45deg);
  transform-origin: top right;
  transition: width .4s ease;
  z-index: -1;
}
.people-header__btn:hover::before { width: calc(100% + 56px); }

.people-header__btn--primary {
  background: var(--farani-orange, #e95a3a);
  color: var(--white, #fff);
}
.people-header__btn--primary::before { background: var(--farani-burgundy, #401115); }

.people-header__btn--secondary {
  background: transparent;
  color: var(--farani-burgundy, #401115);
  border: 1px solid #d9d9d9;
  transition: var(--transition), color .2s ease, border-color .2s ease;
}
.people-header__btn--secondary::before { background: var(--farani-burgundy, #401115); }
.people-header__btn--secondary:hover {
  color: var(--white, #fff);
  border-color: var(--farani-burgundy, #401115);
}

.people-header__social {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.people-header__social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--farani-burgundy, #401115);
  color: var(--white, #fff);
  font-size: 15px;
  transition: var(--transition);
}
.people-header__social li a:hover { background: var(--farani-orange, #e95a3a); }
.people-border hr {border:0;border-bottom:1px solid #401115;}

/* Content column (col-lg-7) fade-in-from-right on page load — desktop
   only, matching the image column's own on-load reveal. Each element
   staggers slightly so the block cascades in rather than moving as one
   slab. The heading itself keeps its site-wide clip-path wipe (additions.css)
   independently — this only adds a slide/fade to the h1 as a whole. */
@media (min-width: 992px) {
  .people-header__name,
  .people-header__role,
  .people-header__meta,
  .people-header__ctas,
  .people-header__social {
    opacity: 0;
    transform: translateX(56px);
    animation: peopleHeaderContentIn 1s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .people-header__name  { animation-delay: .15s; }
  .people-header__role  { animation-delay: .3s; }
  .people-header__meta  { animation-delay: .45s; }
  .people-header__ctas  { animation-delay: .6s; }
  .people-header__social { animation-delay: .75s; }

  /* Hold at the first frame until the page-transition overlay/preloader
     clears — same has-page-transition / has-page-loader body classes used
     by .people-header__image above and page_header_module.css. */
  body.has-page-transition .people-header__name,
  body.has-page-transition .people-header__role,
  body.has-page-transition .people-header__meta,
  body.has-page-transition .people-header__ctas,
  body.has-page-transition .people-header__social,
  body.has-page-loader .people-header__name,
  body.has-page-loader .people-header__role,
  body.has-page-loader .people-header__meta,
  body.has-page-loader .people-header__ctas,
  body.has-page-loader .people-header__social {
    animation-play-state: paused;
  }
}

@keyframes peopleHeaderContentIn {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .people-header__name,
  .people-header__role,
  .people-header__meta,
  .people-header__ctas,
  .people-header__social {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
@media (max-width: 1536px) {

}

@media (max-width: 1366px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 992px) {
  .our_people_header_module { padding: 40px 0 50px; }
  .people-header__image { margin-bottom: 32px; max-width: 360px; }
  .people-header__name { font-size: 36px; }
}

@media (max-width: 768px) {
  .people-header__meta-row { flex-wrap: wrap; gap: 4px; }
  .people-header__meta-row dt { flex-basis: 100%; }
}

@media (max-width: 600px) {
  .people-header__ctas { flex-direction: column; }
  .people-header__btn { width: 100%; }
}