/* LULY Gallery V4
   - Restores the spinning Portfolio opening while keeping the searchable Vault archive.
   - Turns Full Archive into a smaller, uncropped, masonry-style gallery.
   - Lets Home/Portfolio showcase cards respect portrait/square/landscape source ratios. */

/* ---------- FULL ARCHIVE: image-first, no dark "censor" overlay ---------- */
body.luly-portfolio-page #luly-vault {
  padding-top: clamp(3.2rem, 5vw, 5.4rem);
  padding-bottom: clamp(6rem, 9vw, 9rem);
}

body.luly-portfolio-page #luly-vault .vault-grid-lines {
  opacity: .12;
}

body.luly-portfolio-page #luly-vault .vault-archive-heading {
  margin-bottom: 1rem;
}

/* Pinterest/editorial style wall: small cards, natural image proportions. */
body.luly-portfolio-page #luly-vault .vault-grid {
  display: block;
  columns: 210px 7;
  column-gap: clamp(.62rem, .9vw, .9rem);
}

body.luly-portfolio-page #luly-vault .vault-year-marker {
  display: none !important;
}

body.luly-portfolio-page #luly-vault .vault-item,
body.luly-portfolio-page #luly-vault .vault-card--standard,
body.luly-portfolio-page #luly-vault .vault-card--wide,
body.luly-portfolio-page #luly-vault .vault-card--portrait {
  display: inline-block;
  width: 100%;
  grid-column: auto;
  grid-row: auto;
  margin: 0 0 clamp(.62rem, .9vw, .9rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  overflow: hidden;
  border-radius: 14px;
  border-color: rgba(255,255,255,.075);
  background: rgba(14,9,6,.9);
  box-shadow: 0 9px 26px rgba(0,0,0,.18);
  vertical-align: top;
  contain: paint;
}

body.luly-portfolio-page #luly-vault .vault-item img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  filter: none;
  transform: none;
  background: #090604;
  transition: filter .28s ease, opacity .28s ease;
}

/* Old overlay is deliberately disabled: the artwork should be visible immediately. */
body.luly-portfolio-page #luly-vault .vault-card-shade {
  display: none !important;
}

body.luly-portfolio-page #luly-vault .vault-item::after {
  z-index: 2;
  opacity: 0;
  background: linear-gradient(180deg, transparent 72%, rgba(255,106,0,.045));
  transition: opacity .25s ease;
}

body.luly-portfolio-page #luly-vault .vault-card-copy {
  position: static;
  z-index: 3;
  display: block;
  padding: .66rem .72rem .72rem;
  transform: none;
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,106,0,.018));
  border-top: 1px solid rgba(255,255,255,.048);
}

body.luly-portfolio-page #luly-vault .vault-card-copy b {
  font-size: .78rem;
  line-height: 1.16;
}

body.luly-portfolio-page #luly-vault .vault-card-copy em {
  margin-top: .22rem;
  color: rgba(255,240,226,.43);
  font-size: .57rem;
}

body.luly-portfolio-page #luly-vault .vault-card-year {
  display: none !important;
}

body.luly-portfolio-page #luly-vault .vault-card-open {
  top: .5rem;
  right: .5rem;
  bottom: auto;
  z-index: 4;
  width: 29px;
  opacity: 0;
  transform: translateY(-3px);
  background: rgba(7,4,2,.72);
  transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}

@media (hover:hover) and (pointer:fine) {
  body.luly-portfolio-page #luly-vault .vault-item:hover {
    z-index: auto;
    border-color: rgba(255,132,36,.34);
    box-shadow: 0 18px 46px rgba(0,0,0,.28), 0 0 0 1px rgba(255,106,0,.035) inset;
    transform: translateY(-2px);
  }
  body.luly-portfolio-page #luly-vault .vault-item:hover::after { opacity: 1; }
  body.luly-portfolio-page #luly-vault .vault-item:hover img {
    transform: none;
    filter: saturate(1.045) contrast(1.015) brightness(1.015);
  }
  body.luly-portfolio-page #luly-vault .vault-item:hover .vault-card-copy { transform: none; }
  body.luly-portfolio-page #luly-vault .vault-item:hover .vault-card-open {
    opacity: 1;
    color: #fff;
    border-color: rgba(255,138,44,.38);
    background: rgba(13,7,3,.82);
    transform: translateY(0) rotate(4deg);
  }
}

/* Keep the excellent search/filter toolbar, but tighten the gap before the wall. */
body.luly-portfolio-page #luly-vault .vault-toolbar {
  margin-bottom: 1.15rem;
}

/* ---------- ADAPTIVE MEDIA: don't force portrait/square art into 16:9 ---------- */
/* Home cinematic orbit. JS supplies --media-ratio from the source image. */
body.luly-home-page .luly-orbit-card {
  aspect-ratio: var(--media-ratio, 1.7778);
  margin-top: 0;
  translate: 0 -50%;
}

body.luly-home-page .luly-orbit-card.media-portrait {
  --card-width: clamp(160px, 17vw, 260px);
}

body.luly-home-page .luly-orbit-card.media-square {
  --card-width: clamp(185px, 19vw, 285px);
}

body.luly-home-page .luly-orbit-card img {
  object-fit: cover;
}

/* Home mini galleries: the container follows the actual artwork ratio. */
body.luly-home-page .portfolio-tile img,
body.luly-home-page .deck-card img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Portfolio rotating ring: thumbnails remain wide, posters become real portrait cards. */
body.luly-portfolio-page .clean-image-spin .spin-card {
  aspect-ratio: var(--media-ratio, 1.7778);
}

body.luly-portfolio-page .clean-image-spin .spin-card.media-portrait {
  width: clamp(108px, 11.5vw, 174px);
}

body.luly-portfolio-page .clean-image-spin .spin-card.media-square {
  width: clamp(132px, 14vw, 205px);
}

body.luly-portfolio-page .clean-image-spin .spin-card-inner img {
  object-fit: cover;
}

/* The older/simple portfolio tiles also preserve the actual file ratio if reused later. */
body.luly-portfolio-page .portfolio-tile img,
body.luly-portfolio-page .deck-card img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  body.luly-portfolio-page #luly-vault .vault-grid { columns: 190px 4; }
}

@media (max-width: 575.98px) {
  body.luly-portfolio-page #luly-vault { padding-top: 2.4rem; }
  body.luly-portfolio-page #luly-vault .vault-grid {
    columns: 145px 2;
    column-gap: .55rem;
  }
  body.luly-portfolio-page #luly-vault .vault-item { margin-bottom: .55rem; border-radius: 12px; }
  body.luly-portfolio-page #luly-vault .vault-card-copy { padding: .55rem .58rem .6rem; }
  body.luly-portfolio-page #luly-vault .vault-card-copy b { font-size: .71rem; }
  body.luly-portfolio-page #luly-vault .vault-card-copy em { font-size: .53rem; }
  body.luly-portfolio-page .clean-image-spin .spin-card.media-portrait { width: clamp(92px, 27vw, 122px); }
}