/* ============================================================
   OCEAN HEALTH EXECUTIVES — Executive Leadership Grid
   Card grid + bio modal. Layout format modelled on the
   Omega HMS executive-leadership page, rendered in the
   Ocean Health Executives visual language.
   ============================================================ */

/* ─── STATIC MEDIA ──────────────────────────────────────── */
/* The About image is a 896x1280 portrait in a 585x500 landscape frame. Filling
   the frame with object-fit: cover would crop 40% of it away, so the frame is
   sized to the image instead: fixed height, width follows the aspect ratio, and
   the whole thing is centred in its column. Nothing is cropped. */
.it-about-thumb-inner:has(.oc-static-media) {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.it-about-thumb-inner .oc-static-media {
  display: block;
  width: auto;
  height: 500px;
  max-width: 100%;
  object-fit: contain;
  transform: none !important;
}

@media only screen and (max-width: 991px) {
  .it-about-thumb-inner .oc-static-media {
    height: auto;
    width: 100%;
    max-width: 420px;
  }
}

/* ─── ABOUT STAT BADGES ON PHONES ───────────────────────────
   main.css hides .it-about-info-wrap outright below 768px, because on desktop
   the badges are absolutely positioned at right:-10% and would hang off the
   side of a phone. Hiding drops two pieces of real About-section content on
   every phone. Put them back into normal flow under the image instead, where
   they need no overhang. Specificity (0,2,0) beats the theme's (0,1,0) rule,
   so no !important is required — but the theme rule must stay matched on
   max-width:767px or this will not override it. */
@media only screen and (max-width: 767px) {
  .it-about-thumb .it-about-info-wrap {
    display: flex;
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }

  /* the items keep Bootstrap's d-inline-flex (declared !important in the
     markup's utility class), so lay them out as the flex rows they already
     are rather than fighting the display value */
  .it-about-thumb .it-about-info-item {
    width: 100%;
    max-width: 320px;
    margin: 0;
    padding: 18px 22px;
    justify-content: center;
  }

  .it-about-thumb .it-about-info-item i {
    font-size: 38px;
    margin-right: 14px;
  }

  .it-about-thumb .it-about-info-item p {
    font-size: 15px;
  }
}

/* ─── LEADERSHIP SECTION ────────────────────────────────── */
.oc-lead-area {
  position: relative;
  padding-top: 130px;
  padding-bottom: 130px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fafe 46%, #ffffff 100%);
  overflow: hidden;
}

/* soft ocean light behind the grid */
.oc-lead-area::before,
.oc-lead-area::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.oc-lead-area::before {
  width: 620px;
  height: 620px;
  top: -220px;
  left: -240px;
  background: radial-gradient(circle, rgba(41, 182, 246, 0.13) 0%, rgba(41, 182, 246, 0) 68%);
}

.oc-lead-area::after {
  width: 720px;
  height: 720px;
  bottom: -300px;
  right: -280px;
  background: radial-gradient(circle, rgba(9, 126, 254, 0.10) 0%, rgba(9, 126, 254, 0) 68%);
}

.oc-lead-area>.container {
  position: relative;
  z-index: 2;
}

.oc-lead-heading {
  text-align: center;
  margin-bottom: 60px;
}

.oc-lead-heading .oc-lead-intro {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: 18px;
  line-height: 1.7;
  color: #4a5a6e;
}

/* ─── GRID ──────────────────────────────────────────────── */
/* Flex, not grid, so a short final row centres instead of leaving an empty
   cell. With 5 people in 3 columns the trailing gap was 40% of a row and sat
   in the terminal-scan position, where it read as a vacant role. */
.oc-lead-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  align-items: stretch;
}

.oc-lead-grid > .oc-lead-card {
  flex: 0 1 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
  min-width: 0;
}

/* ─── CARD ──────────────────────────────────────────────── */
.oc-lead-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f3f9fe 100%);
  border: 1px solid rgba(9, 126, 254, 0.10);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(3, 24, 58, 0.07);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.45s ease;
  will-change: transform;
}

/* :has(:focus-visible), NOT :focus-within — focus is restored to the trigger
   when a modal closes, and :focus-within would leave the card stuck in its
   raised state after a mouse click. :focus-visible keeps the affordance for
   keyboard users only. */
.oc-lead-card:hover,
.oc-lead-card:has(:focus-visible) {
  transform: translateY(-8px);
  border-color: rgba(41, 182, 246, 0.38);
  box-shadow: 0 22px 52px rgba(3, 24, 58, 0.16), 0 4px 14px rgba(41, 182, 246, 0.14);
}

.oc-lead-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #dfeefb;
}

/* card photos are pre-cropped to a consistent head-and-shoulders square */
.oc-lead-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.oc-lead-card:hover .oc-lead-card__media img {
  transform: scale(1.045);
}

/* hairline ocean edge where the photo meets the card body */
.oc-lead-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, #17b5f9 0%, #097efe 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.oc-lead-card:hover .oc-lead-card__media::after,
.oc-lead-card:has(:focus-visible) .oc-lead-card__media::after {
  opacity: 1;
}

.oc-lead-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 26px 30px 28px;
}

.oc-lead-card__name {
  font-family: var(--tp-ff-teko, "Teko"), sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #12233d;
  margin: 0;
}

/* always rendered (empty for people without credentials) so the role
   line sits at the same height across every card in a row */
.oc-lead-card__creds {
  display: block;
  /* must equal line-height, not a guess: a shorter min-height collapses the
     empty span on a card with no credentials and drops its role line out of
     alignment with the rest of the row */
  min-height: 26px;
  margin-top: 6px;
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* #1e88e5 measured 3.68:1 on the card gradient — below AA. */
  color: #0b5fbd;
}

.oc-lead-card__role {
  margin: 12px 0 0;
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2e2d2d;
}

.oc-lead-card__bio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  /* #097efe measured 3.87:1 on the card gradient — below AA for 15px text. */
  color: #0b5fbd;
  background: none;
  border: 0;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  text-align: left;
  /* inline-flex in a column parent stretches to the full content width, which
     drew a 318px focus ring around ~100px of text. Keep the box on the content. */
  align-self: flex-start;
  transition: color 0.3s ease;
}

.oc-lead-card__bio:hover,
.oc-lead-card__bio:focus-visible {
  color: #084a94;
}

.oc-lead-card__bio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17b5f9 0%, #0d8cc0 100%);
  color: #ffffff;
  flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s ease;
}

.oc-lead-card__bio:hover .oc-lead-card__bio-icon,
.oc-lead-card__bio:focus-visible .oc-lead-card__bio-icon {
  transform: translate(3px, -3px);
  box-shadow: 0 6px 16px rgba(23, 181, 249, 0.42);
}

.oc-lead-card__bio:focus-visible {
  outline: 2px solid #097efe;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─── MODAL ─────────────────────────────────────────────── */
/* above the site preloader, the social rail and the Voiceflow chat bubble,
   all of which paint at the root stacking context */
.oc-lead-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.oc-lead-modal.is-open {
  display: flex;
}

.oc-lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 24, 58, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.oc-lead-modal.is-visible .oc-lead-modal__backdrop {
  opacity: 1;
}

.oc-lead-modal__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  width: 100%;
  max-width: 1060px;
  max-height: calc(100vh - 64px);
  background: #ffffff;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(3, 24, 58, 0.45);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

.oc-lead-modal.is-visible .oc-lead-modal__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* the dialog takes programmatic focus on open — no visible ring for that */
.oc-lead-modal__dialog:focus {
  outline: none;
}

/* soften the top edge the bio scrolls under */
.oc-lead-modal__dialog::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 42%;
  height: 26px;
  background: linear-gradient(180deg, #ffffff 35%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

/* The longest bio hides 32% of itself below the fold behind a clean edge that
   reads as "content ends here". This fade is the cue that it does not; JS
   removes it once the reader reaches the bottom. */
.oc-lead-modal__dialog::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 42%;
  height: 56px;
  background: linear-gradient(0deg, #ffffff 18%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.oc-lead-modal__dialog.is-scroll-end::after,
.oc-lead-modal__dialog.is-no-overflow::after {
  opacity: 0;
}

.oc-lead-modal__media {
  position: relative;
  background: #dfeefb;
  min-height: 100%;
}

.oc-lead-modal__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.oc-lead-modal__content {
  padding: 48px 50px 46px;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  -webkit-overflow-scrolling: touch;
}

.oc-lead-modal__content::-webkit-scrollbar {
  width: 6px;
}

.oc-lead-modal__content::-webkit-scrollbar-thumb {
  background: rgba(9, 126, 254, 0.28);
  border-radius: 3px;
}

/* White on the brand gradient measured 2.33:1 at the light stop — barely half
   of AA. Same ocean hue, darkened until white clears 4.5:1 across the whole
   ramp (4.96:1 light stop, 7.60:1 dark stop), and 10px lifted to 12px. */
.oc-lead-modal__badge {
  display: inline-block;
  padding: 9px 20px;
  background: linear-gradient(135deg, #1178a8 0%, #0b5a80 100%);
  color: #ffffff;
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 30px;
  margin-bottom: 18px;
  box-shadow: 0 4px 15px rgba(11, 90, 128, 0.28);
}

.oc-lead-modal__name {
  font-family: var(--tp-ff-teko, "Teko"), sans-serif;
  font-size: 54px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
  color: #12233d;
  margin: 0;
}

.oc-lead-modal__creds {
  display: block;
  margin-top: 8px;
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0b5fbd;
}

.oc-lead-modal__rule {
  width: 64px;
  height: 3px;
  border-radius: 2px;
  margin: 24px 0 26px;
  background: linear-gradient(90deg, #17b5f9 0%, #097efe 100%);
}

.oc-lead-modal__bio p {
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 16px;
  line-height: 1.78;
  color: #2e2d2d;
  margin: 0 0 18px;
}

.oc-lead-modal__bio p:last-child {
  margin-bottom: 0;
}

.oc-lead-modal__highlights-label {
  display: block;
  margin: 28px 0 16px;
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #12233d;
}

.oc-lead-modal__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oc-lead-modal__highlights li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 16px;
  font-family: var(--tp-ff-poppins, "Poppins"), sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2e2d2d;
}

.oc-lead-modal__highlights li:last-child {
  margin-bottom: 0;
}

.oc-lead-modal__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #17b5f9 0%, #097efe 100%);
}

.oc-lead-modal__highlights strong {
  font-weight: 600;
  color: #12233d;
}

.oc-lead-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(9, 126, 254, 0.20);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #12233d;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.oc-lead-modal__close:hover,
.oc-lead-modal__close:focus-visible {
  background: linear-gradient(135deg, #17b5f9 0%, #0d8cc0 100%);
  border-color: transparent;
  color: #ffffff;
  transform: rotate(90deg);
}

body.oc-lead-modal-open {
  overflow: hidden;
}

/* the chat bubble paints above everything from its own shadow root, so it
   has to be hidden rather than out-stacked while a bio is open */
body.oc-lead-modal-open #voiceflow-chat {
  display: none !important;
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .oc-lead-grid {
    gap: 24px;
  }

  .oc-lead-card__body {
    padding: 24px 26px 26px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .oc-lead-grid {
    gap: 26px;
  }

  .oc-lead-grid > .oc-lead-card {
    flex-basis: calc((100% - 26px) / 2);
    max-width: calc((100% - 26px) / 2);
  }

  .oc-lead-area {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media only screen and (max-width: 991px) {
  /* The dialog itself must NOT scroll. It used to, which carried the
     absolutely-positioned close button off-screen (measured at y = -970px
     after scrolling a long bio) and left a 12px backdrop sliver as the only
     exit — a dead end on a phone, where there is no Escape key. The dialog is
     now a fixed-height grid and only the bio column scrolls, exactly as on
     desktop, so the close button never leaves the viewport. */
  .oc-lead-modal__dialog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92dvh;
    overflow: hidden;
  }

  /* single column: the photo, not the bio, is under the top edge */
  .oc-lead-modal__dialog::before {
    display: none;
  }

  /* the bio column is full width here, so the bottom cue must be too */
  .oc-lead-modal__dialog::after {
    left: 0;
  }

  /* The dialog is single-column here, so the photo occupies a full-width row.
     A fixed landscape height ran object-fit: cover across portrait sources —
     every headshot is between 0.597 and 0.75 aspect — and discarded 50-60% of
     each image, slicing through faces. Measured at 390px wide: the 358x240
     band kept only 40% of Peder's photo, cutting off both crown and chin.
     The requirement here is the whole photograph, every time, so this is
     `contain`, not a better-chosen crop: no aspect ratio can fit sources from
     0.597 to 0.75 into one box without trimming something. Letterboxing is
     what buys the guarantee, and the tinted panel behind makes it read as a
     frame. Height is in dvh so the photo scales with the device instead of
     squeezing the bio column, which is minmax(0, 1fr) and collapses silently. */
  .oc-lead-modal__media {
    height: 52dvh;
    min-height: 0;
    background: #eaf4fc;
  }

  .oc-lead-modal__media img {
    object-fit: contain;
    object-position: center;
  }

  .oc-lead-modal__content {
    padding: 34px 30px 36px;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
  }

  .oc-lead-modal__name {
    font-size: 42px;
  }
}

@media only screen and (max-width: 767px) {
  .oc-lead-area {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .oc-lead-grid {
    gap: 24px;
  }

  .oc-lead-grid > .oc-lead-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  .oc-lead-heading {
    margin-bottom: 44px;
  }

  .oc-lead-heading .oc-lead-intro {
    font-size: 16px;
  }

  .oc-lead-card {
    border-radius: 26px;
  }

  .oc-lead-card__body {
    padding: 24px 24px 26px;
  }

  .oc-lead-card__name {
    font-size: 28px;
  }

  /* 4dvh/16px inset guarantees a real backdrop target on both axes; the old
     12px sliver was under the 44px minimum on every edge. */
  .oc-lead-modal {
    padding: 4dvh 16px;
  }

  .oc-lead-modal__dialog {
    border-radius: 24px;
    max-height: 92dvh;
  }

  .oc-lead-modal__name {
    font-size: 36px;
  }

  /* stays 44x44 — it is the primary escape on a touch device */
  .oc-lead-modal__close {
    top: 14px;
    right: 14px;
  }
}

/* 768-991px is still the single-column dialog but the dialog is wide (728px on
   a 768px tablet), so a full-width contain box would pillarbox a portrait with
   ~190px of empty panel each side. Cap the frame and centre it. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .oc-lead-modal__media {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .oc-lead-card,
  .oc-lead-card__media img,
  .oc-lead-card__bio-icon,
  .oc-lead-modal__backdrop,
  .oc-lead-modal__dialog,
  .oc-lead-modal__close {
    transition: none !important;
  }

  .oc-lead-card:hover {
    transform: none;
  }

  .oc-lead-card:hover .oc-lead-card__media img {
    transform: none;
  }
}