/* TOGGLE (inside navbar) */
.caption-toggles {
  display: flex;
  align-items: center;
}

.caption-toggle {
  position: relative;
  width: 11px;
  height: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out, opacity 0.3s ease;
  cursor: pointer;
}

.caption-toggle.is-open {
  transform: rotate(45deg);
}

.caption-toggle:hover {
  opacity: 0.30;
}

.caption-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.caption-icon::before,
.caption-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease-out;
}

.caption-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* PANEL */
.caption-panel {
  position: absolute;
  top: calc(12px + 1.5px + 15px); /* landmarks padding + dot height + spacing */
  right: 15px;
  bottom: calc(15px + 5px + 1em + 5px); /* navbar bottom + navbar padding-top + line height + navbar padding-bottom */
  width: calc(33.333vw - 15px);
  background: var(--bg-color);
  color: var(--text-color);
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  border-radius: 3px;
}

.caption-panel.is-active-slide {
  visibility: visible;
}

.caption-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

.caption-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  padding: var(--padding-base);
}

.caption-inner,
.caption-content {
  max-width: 80ch;
}

/* CONTENU DU PROJET */
.cap-section {
  margin-bottom: var(--spacing-md);
}

.caption-content .cap-term {
  display: none;
}

/* LISTE DES PROJETS */
.caption-projects-list {
  max-width: 80ch;
}

.caption-projects-list .project-link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: 1;
}

.caption-projects-list .project-link:hover {
  opacity: 0.3;
}

.caption-grid {
  display: grid;
  grid-template-columns: var(--grid-col-label-tablet) 1fr;
  gap: var(--grid-gap-row) var(--grid-gap-col);
}

.cap-row {
  display: contents;
}

/* iMAC */
@media (min-width: 2100px) {
  .caption-panel {
    width: calc(25vw - 15px);
    font-size: var(--font-size-display);
  }
}

/* TABLETTE */
@media (max-width: 1024px) {
  .caption-panel {
    width: calc(50vw - 15px);
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .caption-toggle {
    width: 11px;
    height: 11px;
  }

  .caption-toggle:hover {
    opacity: 1;
  }

  /* Enlarged touch area */
  .caption-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: transparent;
    z-index: -1;
  }

  .caption-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100dvh;
    font-size: var(--font-size-mobile);
    border-radius: 0;
  }

  .caption-scroll {
    padding: var(--padding-base);
    padding-left: 21px; /* navbar-inner padding (12px) + navbar-left padding (9px) */
  }

  .caption-inner{
    padding-top: var(--spacing-sm);
  }
  
  .caption-grid {
    grid-template-columns: var(--grid-col-label-mobile) 1fr;
    gap: var(--spacing-sm) 16px;
  }

  .caption-projects-list .project-link {
    text-decoration: none;
  }
}