/* Shared CLC components used across multiple public pages. */

.ss-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
  }

  .ss-profile-modal.is-open {
    display: flex;
  }

  .ss-profile-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 27, 37, .76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .ss-profile-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(220px, .78fr) minmax(0, 1.35fr);
    width: min(920px, 100%);
    height: min(760px, calc(100vh - 2rem));
    height: min(760px, calc(100dvh - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 1.7rem;
    background: #ffffff;
    box-shadow: 0 2rem 7rem rgba(0,0,0,.35);
  }

  .ss-profile-visual {
    position: relative;
    min-height: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(circle at 20% 15%, rgba(164,197,238,.42), transparent 34%),
      linear-gradient(145deg, #003880, #1275d9);
    overflow: hidden;
  }

  .ss-profile-visual::after {
    content: "";
    position: absolute;
    width: 18rem;
    height: 18rem;
    right: -9rem;
    top: -8rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
  }

  .ss-profile-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    object-position: center top;
    border-radius: 1.2rem;
    box-shadow: 0 1.2rem 3rem rgba(0,0,0,.28);
  }

  .ss-profile-initials {
    position: relative;
    z-index: 1;
    width: min(240px, 100%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: auto;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    color: #fafdff;
    font-family: Georgia, serif;
    font-size: clamp(4rem, 10vw, 7rem);
  }

  .ss-profile-copy {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    scroll-padding-bottom: 2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(18,117,217,.35) transparent;
  }

  .ss-profile-copy::-webkit-scrollbar {
    width: 8px;
  }

  .ss-profile-copy::-webkit-scrollbar-track {
    background: transparent;
  }

  .ss-profile-copy::-webkit-scrollbar-thumb {
    background: rgba(18,117,217,.35);
    border-radius: 20px;
  }

  .ss-profile-copy::-webkit-scrollbar-thumb:hover {
    background: rgba(18,117,217,.6);
  }

  .ss-profile-name {
    margin: 0 3rem 1.5rem 0;
	font-size: 25px !important;
    line-height: 1.25 !important;
	letter-spacing: -.045em;
    color: #003880;
  }

  .ss-profile-body {
    font-size: 1.04rem;
    line-height: 1.85;
    color: #60717a;
  }

  .ss-profile-body p:last-child {
    margin-bottom: 0;
  }

  .ss-profile-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(15,61,87,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #003880;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
  }

  .ss-profile-close:hover,
  .ss-profile-close:focus-visible {
    background: #fff;
    outline: 3px solid rgba(18,117,217,.22);
  }

  body.ss-profile-open {
    overflow: hidden !important;
  }

  .ss-profile-template {
    display: none !important;
  }

  @media (max-width: 767.98px) {
    .ss-profile-modal {
      padding: .5rem;
    }

    .ss-profile-dialog {
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr);
      width: 100%;
      height: calc(100vh - 1rem);
      height: calc(100dvh - 1rem);
      max-height: calc(100vh - 1rem);
      max-height: calc(100dvh - 1rem);
      border-radius: 1.25rem;
    }

    .ss-profile-visual {
      min-height: 0;
      height: clamp(150px, 27dvh, 220px);
      padding: 1.2rem;
    }

    .ss-profile-photo {
      width: min(230px, 72%);
      max-height: 260px;
      margin: 0 auto;
    }

    .ss-profile-initials {
      width: 160px;
    }

    .ss-profile-copy {
      height: auto;
      max-height: none;
      padding: 1.7rem;
      padding-bottom: 3.5rem;
      scroll-padding-bottom: 2.5rem;
    }

    .ss-profile-name {
      margin-right: 2.7rem;
    }
  }

/* Shared CLC blue footer treatment. */
.site-footer {
  background: radial-gradient(circle at 12% 18%, rgba(164, 197, 238, .34), transparent 28%),
              radial-gradient(circle at 86% 72%, rgba(60, 135, 214, .28), transparent 31%),
              linear-gradient(135deg, #003880 0%, #1050a9 52%, #1275d9 100%);
  color: #fff;
  margin-top: 60px;
  font-size: 18px;
}