/*
  initi8: the leadership biographies.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Six dialogs, one per person, opened by the "Read more" link already on each
  card. On the original these are Divi Pixel popups driven by plugin
  JavaScript. A conversion drops the JavaScript, so the sections read as hidden
  at every breakpoint and the compiler removed them as dead theme markup: six
  links pointing at nothing and about 1,240 words about six named people gone
  from both language trees.

  Rebuilt without any JavaScript at all. The links point at #joe-coughlan and
  the rest, so :target does the work the plugin used to: the dialog whose id is
  in the address bar is the one that shows. That means it survives the next
  conversion, it works with JavaScript off, it is linkable and it is in the
  history, so the browser's own Back button closes it.

  Accessibility, since this is a dialog in all but name:
    - the backdrop and the close control are both links to #, so the dialog can
      be dismissed by pointer or keyboard without a script
    - the content is in the page rather than injected, so it is in the
      accessibility tree and in llms-full.txt whether or not anyone opens it
    - it is scrollable in its own right, because five paragraphs and a
      photograph do not fit a laptop screen
*/

.i8-bio {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 4vh, 3rem) clamp(0.75rem, 4vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.i8-bio:target { display: flex; }

/* The backdrop is a link, so a click anywhere outside the panel closes it and
   no script is needed to notice the click. */
.i8-bio__scrim {
  position: fixed;
  inset: 0;
  background: rgba(1, 21, 47, 0.72);
  backdrop-filter: blur(2px);
}

.i8-bio__panel {
  position: relative;
  width: min(1000px, 100%);
  margin: auto;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(1, 31, 75, 0.35);
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* Photograph beside the prose on a wide screen, above it on a narrow one.
   Logical properties throughout, so the Arabic tree mirrors without a
   single rule of its own. */
.i8-bio__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

@media (min-width: 700px) {
  .i8-bio__head { grid-template-columns: 1fr auto; }
}

.i8-bio__name {
  margin: 0 0 0.25em;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.2;
  color: #05adef;
}

/* A heading, as it is on the original: the person's role is part of the
   document outline, not a bold line of prose. */
.i8-bio__role {
  margin: 0 0 1.2em;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.3;
  color: #011f4b;
  font-weight: 700;
}

.i8-bio__photo {
  width: min(320px, 100%);
  height: auto;
  border-radius: 4px;
  justify-self: start;
}

@media (min-width: 700px) {
  .i8-bio__photo { justify-self: end; order: 2; }
  .i8-bio__text { order: 1; }
}

.i8-bio__text p {
  margin: 0 0 1.1em;
  color: #12305e;
  line-height: 1.75;
  font-size: clamp(0.95rem, 1.5vw, 1.02rem);
}

.i8-bio__cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 14px 30px;
  border-radius: 999px;
  background: #0f8ab5;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background 0.2s ease;
}

.i8-bio__cta:hover,
.i8-bio__cta:focus-visible { background: #011f4b; color: #ffffff; }

.i8-bio__close {
  position: absolute;
  top: 0.5rem;
  inset-inline-end: 0.75rem;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: #6b7b95;
  text-decoration: none;
  border-radius: 50%;
}

.i8-bio__close:hover,
.i8-bio__close:focus-visible { color: #011f4b; background: #eef4fa; }

.i8-bio__panel :focus-visible,
.i8-bio__close:focus-visible {
  outline: 2px solid #2ebaf0;
  outline-offset: 3px;
}

/* Closed, the dialog must not be reachable by tab or read out as page content
   sitting between the cards. display:none on the container already does both;
   this is belt and braces for the panel itself. */
.i8-bio:not(:target) .i8-bio__panel { visibility: hidden; }