/* -------------------------------------------
   TENETS MODULE (tabs + content)
   Matches PHP classes:
   .tenets, .tenets__header, .tenets__title, .tenets__subtitle
   .tenets__wrap, .tenets__nav, .tenets__tab, .tenets__tab-icon, .tenets__tab-label
   .tenets__panel, .tenets__panel-inner, .tenets__panel-title, .tenets__panel-text
------------------------------------------- */

.tenets {
  position: relative;
  margin: 20px 0 3.375rem;
}

.tenets__header {
  margin-top:36px;
  margin-bottom: 36px;
}

.tenets__title {
  margin: 0 0 8px;
}

.tenets__subtitle {
  margin: 0;
}

/* Layout: panel left, tabs right */
.tenets__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Desktop: content left, buttons right */
.tenets__panel { order: 1; }
.tenets__nav   { order: 2; }

/* Mobile: keep tabs above content */
@media (max-width: 900px) {
  .tenets__nav   { order: 1; }
  .tenets__panel { order: 2; }
}

/* Left panel */
.tenets__panel {
  background: rgba(0,0,0,0.03);
  padding: 28px;
  min-height: 240px;
}

.tenets__panel-title {
  margin: 0 0 18px;
  font-family: "Presti Text", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 2.5rem, 56px);
}

.tenets__panel-text {
  margin: 0;
  line-height: 1.55;
  opacity: 0.92;
  font-size: clamp(18px, 1.0rem, 24px);
}

.tenets__panel-text p:first-child { margin-top: 0; }
.tenets__panel-text p:last-child { margin-bottom: 0; }

/* Fade transition on panel inner (JS toggles .is-fading here) */
.tenets__panel-inner {
  opacity: 1;
  transition: opacity 220ms ease;
  will-change: opacity;
}
.tenets__panel-inner.is-fading {
  opacity: 0;
}

/* Right tabs column */
.tenets__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Default (inactive) tabs: dark bg + white text */
.tenets__tab {
  display: flex;
  align-items: center;
  gap: 14px;

  width: 100%;
  padding: 20px 18px;

  border: 1px solid rgba(0,0,0,0.12);
  background: #3f5560;
  color: #ffffff;

  cursor: pointer;
  text-align: left;

  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    transform 160ms ease,
    opacity 220ms ease;
}

.tenets__tab:hover {
  transform: translateY(-1px);
}

.tenets__tab-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
}

.tenets__tab-icon img,
.tenets__tab-icon svg {
  width: 64px;
  height: 64px;
  display: block;
}

.tenets__tab-label {
  font-size: clamp(18px, 1.25rem, 24px);
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

/* Active tab uses CSS variables set by JS */
.tenets__tab.is-active {
  background: var(--tenet-bg, #ffffff);
  color: var(--tenet-title, #2b3a40);
  border-color: rgba(0,0,0,0.10);
}

/* Mobile: stack tabs above panel */
@media (max-width: 900px) {
  .tenets__wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tenets__nav {
    order: 1;
  }

  .tenets__panel {
    order: 2;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tenets__tab,
  .tenets__panel-inner {
    transition: none !important;
  }
  .tenets__tab:hover {
    transform: none;
  }
}


/* Credit Team Style Adjustments */



@media screen and (min-width: 75.0625em) {
    .page-id-2111 .popup-focus-2__hierarchy-step {
        column-gap: clamp(40px, 5rem, 5rem);
    }
}
.page-id-2111 .popup-focus-2__hierarchy-step {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(40px, 2.5rem, 2.5rem);
    row-gap: 2rem;
}


.page-id-2111 .popup-focus-2__hierarchy-step .preview-person {
    flex-basis: 15.25rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.page-id-2111 .popup-focus-2__hierarchy-step .preview-person .preview-person__texts {
    text-align: left;
}

.page-id-2111 .popup-focus-2__hierarchy-step:not(:last-child) .preview-person__img-wrapper {
    margin-right: 1.25rem;
}



@media print, screen and (max-width: 64.0613em) {
    .page-id-2111 .popup-focus-2__hierarchy-step {
        column-gap: 1.625rem;
    }
}

@media print, screen and (max-width: 40.0613em) {
    .page-id-2111 .popup-focus-2__hierarchy-step {
        grid-template-columns: 1fr !important;
        column-gap: 1.25rem;
    }
}

@media print, screen and (max-width: 64.0613em) {
    .page-id-2111 .popup-focus-2__hierarchy-step .preview-person__img-wrapper {
        width: 6.25rem;
        height: 6.25rem;
    }
}


.page-id-58 .team-member-preview__title, .page-id-58 .team-member-preview__job-title { text-align: center; }