/**
 * Split fiche layout: 50/50 image and content.
 *
 * Only enqueued when ACB_FICHE_LAYOUT is 'split'.
 */

.header-fiche-split {
  padding: 1rem 0;
}

.header-fiche-split__logo img {
  max-height: 56px;
  width: auto;
}

/* The global `body { overflow-x: hidden }` turns the body into a scroll
   container, which silently breaks `position: sticky` -- a sticky element
   then sticks to that container instead of the viewport. Clip the overflow
   on this page only, which contains the horizontal bleed without creating
   a scroll container. */
.fiche-split-page {
  overflow-x: clip;
}

.fiche-split {
  display: grid;
  grid-template-columns: 1fr;
}

.fiche-split__media {
  position: relative;
  /* The image slides in on load; keep it clipped to the column. */
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/*.fiche-split__credit {*/
/*  display: block;*/
/*  margin-top: 0.5rem;*/
/*  font-size: 0.8rem;*/
/*}*/

.fiche-split__content {
  padding: 2rem 1.5rem;
}

/* The given name and the surname are separate blocks, so the line break is
   placed by the markup rather than left to the browser -- which is what keeps
   a hyphenated surname whole without touching the text itself. */
.fiche-split__name {
  font-size: 24px;
  line-height: 1;
}

.fiche-split__given-name,
.fiche-split__surname {
  display: block;
  /* Each line is short by construction, but a long compound name can still
     need to wrap; balance keeps that overflow evenly split. */
  text-wrap: balance;
}

.fiche-split__age,
.fiche-split__membership {
    font-size: 1.25rem;
}

/* Panels stack normally on small screens: no fixed dots. */
.fiche-split__panel {
  padding-block: 2rem;
}

/* The intro fills the first screenful: the header sits above it and scrolls
   away with the page, so subtracting its height makes the panel end exactly
   at the fold. */
.fiche-split__panel--intro {
  display: grid;
  align-content: center;
}

.fiche-split__panel-title {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.fiche-split__dots {
  display: none;
}

.fiche-split__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  display: block;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.fiche-split__dot.is-active {
  background: currentColor;
  transform: scale(1.3);
}

/* Two columns from the lg breakpoint up, matching Bootstrap's 992px. */
@media (min-width: 992px) {
  .fiche-split {
    grid-template-columns: 40% 60%;
    max-inline-size: 1800px;
    margin-inline: auto;
  }

  /* The image stays in view while the content column scrolls. It keeps the
     full viewport height: the header scrolls away and never comes back, so
     the steady state is what matters, not the first screenful. */
  .fiche-split__media {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    align-self: start;
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  }

  .fiche-split__credit {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    margin-top: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }

  /* The content column keeps its natural height so the document -- not the
     column -- is the scroll container. That is what lets the sticky media
     column hold while the whole page scrolls. */
  .fiche-split__content {
    padding: 0;
  }

  .fiche-split__panel {
    padding: 1rem 4rem 1rem 3rem;

    &:last-child {
      padding-block-end: 0;
    }
  }

  .fiche-split__panel--intro {
    min-height: calc(60vh - var(--header-height));
    padding-block-start: 10rem;
  }

  .fiche-split__name {
    font-size: 3.375rem;
  }

  .fiche-split__panel-title {
    font-size: 2rem;
  }

  .profile__headline {
    font-size: 1.25rem;
  }

  .fiche-split__dots {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 5;
  }
}


/* @todo cancel overrides in main style */
.video-container,
.audio-td {
  gap: 1rem;
}

.profile__headline {
  text-wrap: balance;
  background: transparent;
  font-style: italic;
}

/* Split header. */
/*.header-fiche-split {*/
/*  padding: 1rem 0;*/
/*}*/

/*.header-fiche-split__logo img {*/
/*  max-height: 60px;*/
/*  width: auto;*/
/*}*/

/*.header-fiche-split__back {*/
/*  text-decoration: none;*/
/*}*/

/*.header-fiche-split__actions a {*/
/*  margin-left: 0.75rem;*/
/*}*/

/* Split footer. */
/*.footer-fiche-split {*/
/*  padding: 2rem 0 1rem;*/
/*}*/

/*.footer-fiche-split .footer-logo--main img {*/
/*  max-width: 320px;*/
/*  width: 100%;*/
/*  height: auto;*/
/*}*/

/*.footer-fiche-split .share {*/
/*  list-style: none;*/
/*  margin: 0;*/
/*  padding: 0;*/
/*}*/

/*.footer-fiche-split .footer-text {*/
/*  margin-top: 1.5rem;*/
/*  text-align: center;*/
/*}*/