.phase-grid-childhood {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--grid-gap);
  margin-top:            var(--grid-gap);
  margin-bottom:         var(--grid-gap);
}

.childhood-item {
  cursor:   pointer;
  overflow: hidden;
  display:  block;
}

.childhood-item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;

  transition: opacity   var(--transition-base),
              transform var(--transition-slow);
}

.childhood-item:hover img {
  opacity:   0.8;
  transform: scale(1.03);
}

.childhood-lightbox {
  position: fixed;
  inset:    0;          /* top/right/bottom/left: 0 */
  z-index:  9998;       /* под bottom-bar (9999) */

  display:        flex;
  align-items:    center;
  justify-content: center;

  /* скрыт по умолчанию */
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--transition-slow);
}

.childhood-lightbox.active {
  opacity:        1;
  pointer-events: auto;
}

.childhood-lightbox__backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.92);
  cursor:     zoom-out;
}

.childhood-lightbox__content {
  position: relative;
  z-index:  1;
  max-width:  90vw;
  max-height: 90vh;
  margin-bottom: 40px;
}

.childhood-lightbox__img {
  max-width:   90vw;
  max-height:  calc(90vh - 40px);
  width:       auto;
  height:      auto;
  object-fit:  contain;
  display:     block;
  transition: opacity var(--transition-fast);
}

body.lightbox-open {
  overflow: hidden;
}

.bottom-bar__btn {
  font-family:    var(--font-mono);
  font-size:      var(--text-base);
  text-transform: uppercase;
  color:          inherit;
  cursor:         pointer;
  transition:     color var(--transition-base);
  padding:        0;
  background:     none;
  border:         none;
}

.bottom-bar__btn:hover {
  color: var(--accent);
}