/* Marina Dittrich | Grouped artwork details viewer.
   Art pages only; shared styles.css, nav and footer remain unchanged. */
.gallery .cl-artwork-with-details { min-width: 0; }
.gallery .cl-artwork-with-details > img,
.gallery .cl-artwork-with-details > a > img,
.gallery .cl-artwork-with-details > figure img { display: block; width: 100%; }
.cl-artwork-details-button {
  display: block; width: fit-content; max-width: 100%; margin: .55rem auto 0;
  padding: .3rem .7rem; border-radius: 99px;
  border: 1px solid #af9260; background: #fdf7e9; color: #284154;
  font: 600 .78rem/1.4 system-ui, sans-serif; letter-spacing: .02em;
  cursor: pointer;
}
.cl-artwork-details-button:hover, .cl-artwork-details-button:focus-visible {
  background: #f7e5bd; outline-offset: 3px;
}
body.cl-viewer-open { overflow: hidden; }
.cl-detail-viewer[hidden], .cl-detail-viewer__thumbs[hidden] { display: none !important; }
.cl-detail-viewer {
  position: fixed; inset: 0; z-index: 15000;
  display: flex; justify-content: center; align-items: center;
  padding: min(2vh, 16px) min(2vw, 18px);
  background: rgba(3, 12, 18, .96); color: #f8f8f8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cl-detail-viewer__dialog {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(100%, 1280px); height: min(96dvh, 980px);
  min-height: 0; gap: .55rem;
}
.cl-detail-viewer__toolbar {display: flex; align-items: center; justify-content: flex-end; gap: 1rem; min-height: 34px;}
.cl-detail-viewer__hint {flex: 1; color: #d6e0e6; font-size: .8rem; line-height: 1.3; text-align: left; margin: 0;}
.cl-detail-viewer button { font-family: inherit; cursor: pointer; }
.cl-detail-viewer button:focus-visible {outline: 3px solid #f7c561; outline-offset: 2px;}
.cl-detail-viewer__close {
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  background: rgba(255,255,255,.11); color: #fff;
  font-size: 30px; width: 40px; height: 40px; line-height: 1;
}
.cl-detail-viewer__close:hover {background: rgba(255,255,255,.24);}
.cl-detail-viewer__stage {position: relative; min-height: 0; display: flex; justify-content: center; align-items: center;}
.cl-detail-viewer__image {
  display: block; height: auto; width: auto;
  max-height: 100%; max-width: calc(100% - 96px);
  object-fit: contain; border-radius: 2px;
  box-shadow: 0 0 28px rgba(0,0,0,.55);
}
.cl-detail-viewer__arrow {
  position: absolute; z-index: 1; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32);
  border-radius: 7px; background: rgba(18,30,41,.8); color: #fff;
  width: 42px; height: 58px; font-size: 25px;
}
.cl-detail-viewer__prev {left: 0;}
.cl-detail-viewer__next {right: 0;}
.cl-detail-viewer__arrow:hover {background: #345063;}
.cl-detail-viewer__caption {text-align: center; margin: 0; font-size: clamp(.88rem,1.4vw,1.1rem); line-height: 1.3;}
.cl-detail-viewer__thumbs {
  display: flex; justify-content: center; gap: .75rem; align-items: stretch;
  max-width: 100%; overflow-x: auto; padding: .3rem 0 .55rem;
}
.cl-detail-viewer__thumb {
  flex: 0 0 96px; padding: 5px 5px 4px; min-width: 0;
  border: 2px solid transparent; border-radius: 8px;
  background: rgba(255,255,255,.09); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.cl-detail-viewer__thumb img {
  display: block; width: 80px; height: 56px; object-fit: cover; border-radius: 3px;
}
.cl-detail-viewer__thumb span {font-size: .72rem; line-height: 1.25; text-align: center;}
.cl-detail-viewer__thumb[aria-pressed="true"] {border-color: #e9b150; background: rgba(233,177,80,.19);}
@media (max-width: 620px) {
  .cl-detail-viewer__dialog {height: 94dvh; gap: .4rem;}
  .cl-detail-viewer__image {max-width: calc(100% - 60px);}
  .cl-detail-viewer__arrow {width: 30px; height: 46px; font-size: 19px;}
  .cl-detail-viewer__thumbs {justify-content: flex-start; gap: .35rem;}
  .cl-detail-viewer__thumb {flex-basis: 78px;}
  .cl-detail-viewer__thumb img {width: 65px; height: 52px;}
  .cl-detail-viewer__hint {font-size: .69rem;}
}


/* Art v4: respect the proportions of Marina's paintings (no forced crop).
   The thumbnails are small files; natural image aspect ratios are preserved.
   This applies ONLY on art.html and art-en.html, never on other galleries. */
body .page { max-width: 1120px; }
body .page .gallery {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.2rem;
  align-items: start;
}
body .page .gallery > img,
body .page .gallery > a > img,
body .page .gallery > .cl-artwork-with-details > img,
body .page .gallery > .cl-artwork-with-details > a > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
}
@media (max-width: 700px) {
  body .page .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
  }
}