/**
 * Basic Modal Setup — ported from the stellae resource. Layout/
 * animation mechanics untouched (see dist/scripts/modal-basic.js). Color
 * tokens swapped to this site's palette — the modal card is a light
 * surface regardless of the page's dark/light mode (same convention as the
 * logo-wall "Display All" cards and the s002 stat cards in light mode).
 * The "Demo Buttons" section from the resource isn't ported — this site
 * triggers modals from directional-list rows, not standalone demo buttons.
 */

.modal {
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  padding: 2em 1em;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
  transition: all 0.2s linear;
}

.modal[data-modal-group-status="active"] {
  opacity: 1;
  visibility: visible;
}

.modal__dark {
  opacity: .5;
  pointer-events: auto;
  cursor: pointer;
  /* REQUIRED SWAP: resource's #131313 -> this site's dark token. */
  background-color: var(--b100);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.modal__card {
  pointer-events: auto;
  /* REQUIRED SWAP: resource's #efeeec -> this site's established light-card
     neutral (logo-wall--static__item, s002-stat in light mode). */
  background-color: #f2f2f2;
  color: var(--b100);
  border-radius: 2em;
  width: 100%;
  max-width: 54em;
  max-height: 100%;
  padding: .75em;
  display: none;
  position: relative;
}

.modal__card[data-modal-status="active"] {
  display: flex;
}

.modal__scroll {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  /* REQUIRED SWAP: resource's #e2e1df -> a shade of the card neutral above,
     keeping the resource's subtle inner-panel depth effect. */
  background-color: #e8e8e8;
  border-radius: 1.25em;
  flex-flow: column;
  width: 100%;
  max-height: 100%;
  display: flex;
  position: relative;
  overflow: scroll;
}

.modal__content {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  padding: 2em;
  display: flex;
}

.modal__image {
  border-radius: .75em;
  width: 100%;
  height: auto;
  display: block;
}

.modal__h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1.175;
}

.modal__p {
  color: var(--b80);
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1.5;
}

.modal__btn-close {
  background-color: #f2f2f2;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  height: 3.5em;
  display: flex;
  position: absolute;
  top: 2.5em;
  right: 2.5em;
  cursor: pointer;
}

.modal__btn-close-bar {
  background-color: currentColor;
  width: .125em;
  height: 40%;
  position: absolute;
  transform: rotate(45deg);
}

.modal__btn-close-bar.is--second {
  transform: rotate(-45deg);
}