/* Journal media keeps the uploaded image's own proportions. This layer loads
   after the legacy square-stack rules and intentionally owns only feed media. */

#diaryList .diary-media-fold > .diary-media:not(.single),
#diaryList .diary-entry .diary-media.single {
  --diary-active-ratio: 1.3333;
  width: min(58vw, 190px, calc(var(--diary-active-ratio) * 260px)) !important;
  min-width: 0 !important;
  max-width: 190px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 260px !important;
  aspect-ratio: var(--diary-active-ratio) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
}

#diaryList .diary-entry .diary-media.single {
  margin: 11px 0 9px !important;
  box-shadow: none !important;
}

#diaryList .diary-media-fold > .diary-media:not(.single) {
  box-shadow:
    4px 4px 0 rgba(255,255,255,.98),
    4px 4px 0 1px rgba(40,40,36,.08),
    8px 8px 0 rgba(255,255,255,.96),
    8px 8px 0 1px rgba(40,40,36,.055) !important;
}

#diaryList .diary-media-fold > .diary-media:not(.single) > button[data-photo-index],
#diaryList .diary-entry .diary-media.single > button[data-photo-index] {
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#diaryList .diary-media-fold > .diary-media:not(.single) > button > img,
#diaryList .diary-entry .diary-media.single > button > img {
  inset: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 12px !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Expanded stacks show every image at its own aspect ratio. */
#diaryList .diary-media-fold > .diary-media.is-expanded:not(.single) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(68vw, 240px) !important;
  min-width: 0 !important;
  max-width: 240px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  gap: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#diaryList .diary-media-fold > .diary-media.is-expanded:not(.single) > button[data-photo-index] {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: min(68vw, 240px, calc(var(--diary-photo-ratio, 1.3333) * 340px)) !important;
  min-width: 0 !important;
  max-width: 240px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 340px !important;
  aspect-ratio: var(--diary-photo-ratio, 1.3333) !important;
  transform: none !important;
  border-radius: 12px !important;
  background: transparent !important;
}

#diaryList .diary-media-fold > .diary-media.is-expanded:not(.single) > button > img {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px !important;
  background: transparent !important;
  object-fit: contain !important;
}

@media (orientation: landscape) and (max-height: 500px) {
  #diaryList .diary-media-fold > .diary-media:not(.single),
  #diaryList .diary-entry .diary-media.single {
    width: min(34vw, 180px, calc(var(--diary-active-ratio) * 190px)) !important;
    max-width: 180px !important;
    max-height: 190px !important;
  }
}