/* Mappe — squares on the chronik column. The picture fills the square,
   cropped from the center. Title and year sit under it. */

.cv-mappe {
  position: fixed;
  top: var(--cv-menu-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: var(--cv-bg);
  color: var(--cv-text);
  font-family: var(--cv-font-family);
  font-size: var(--cv-font-size);
}

.cv-mappe[hidden] {
  display: none;
}

.cv-mappe-scroll {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  padding: 1.35rem var(--cv-page-padding, 28px) 3rem;
  scrollbar-color: rgba(244, 240, 232, 0.35) transparent;
}

.cv-mappe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--cv-column-width));
  column-gap: var(--cv-column-gap);
  row-gap: var(--cv-column-gap);
  justify-content: start;
}

.cv-mappe-cell {
  min-width: 0;
}

.cv-mappe-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(244, 240, 232, 0.045);
  cursor: pointer;
}

.cv-mappe-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.7s ease;
}

.cv-mappe-open:hover img,
.cv-mappe-open:focus-visible img {
  transform: scale(1.05);
}

.cv-mappe-open:hover,
.cv-mappe-open:focus-visible {
  background: rgba(244, 240, 232, 0.09);
}

.cv-mappe-open:focus-visible {
  outline: 1px solid var(--cv-accent, #c4623a);
  outline-offset: 3px;
}

.cv-mappe-title {
  margin: 0.45rem 0 0;
  font: inherit;
  font-size: 1em;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--cv-heading, #f4f0e8);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.cv-mappe-cell:hover .cv-mappe-title,
.cv-mappe-open:focus-visible ~ .cv-mappe-title {
  color: var(--cv-accent, #c4623a);
}

.cv-mappe-year {
  margin: 0.18rem 0 0;
  color: var(--cv-text, #b7b1a8);
  font-size: 0.92em;
  line-height: 1.3;
}

.cv-mappe-empty {
  margin: 0;
  color: var(--cv-text-light);
}

body.cv-mappe-active #cv-menu-main .cv-menu-search-wrap {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cv-mappe-open img {
    transition: none;
  }

  .cv-mappe-open:hover img,
  .cv-mappe-open:focus-visible img {
    transform: none;
  }
}