/* Attachments: image previews and file chips under a message, the lightbox
   that opens pictures and PDFs, and the All Files page. */

.attachments { margin: 19.8px 0 0; }

/* Images: one fills the width; galleries wrap in thirds (halves for 2 or 4) */

.attachments__gallery { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }

.attachment-image { flex: 1 0 33%; max-width: calc(33% - 10px); margin: 0; min-width: 0; }
.attachments__gallery--halves .attachment-image { flex-basis: 50%; max-width: calc(50% - 10px); }
.attachments__gallery--single .attachment-image { flex-basis: 100%; max-width: 100%; }

.attachment-image__link { display: block; border-radius: 10px; overflow: hidden; background: rgb(var(--warm-rgb) / 0.4); cursor: zoom-in; }
.attachment-image__link:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }

.attachment-image__img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.attachments__gallery:not(.attachments__gallery--single) .attachment-image__img { height: 180px; max-height: none; object-fit: cover; }

.attachment-image__caption {
  margin: 6.6px 0 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 15.4px;
  line-height: 21.56px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* File chips */

.attachments__files, .files-grid { display: flex; flex-wrap: wrap; }

.file-chip {
  display: flex;
  flex-direction: column;
  width: calc(25% - 10px);
  min-width: 150px;
  max-width: 200px;
  margin: 0 6px 6px 0;
  border-radius: 10px;
  background: rgb(var(--warm-rgb) / 0.4);
  color: var(--color-ink);
  text-decoration: none;
}

.file-chip:hover { background: rgb(var(--warm-rgb) / 0.6); }
.file-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }

.file-chip__art { position: relative; display: block; padding-top: 45%; }
.file-chip__icon { position: absolute; top: 1.5em; left: 37.5%; width: 25%; height: auto; color: var(--color-ink); }

.file-chip__caption {
  display: block;
  min-width: 0;
  margin: 0.625em 1.25em;
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.file-chip__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip__size { display: block; margin-top: 2px; color: var(--color-muted); font-weight: 400; }

.entry__body .file-chip { font-size: 17.6px; }

/* Lightbox */

.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: rgb(24 19 36 / 0.95);
  color: #fff;
  cursor: zoom-out;
}

.lightbox::backdrop { background: transparent; }
.lightbox:not([open]) { display: none; }

.lightbox__stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 4.5rem 1rem; }

.lightbox__content {
  max-width: 90vw;
  max-height: 75vh;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.33s ease;
  cursor: default;
}

.lightbox__content--loaded { opacity: 1; }
.lightbox__content--pdf { width: min(900px, 90vw); height: 75vh; border: none; background: var(--color-sheet); }

.lightbox__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid rgb(var(--sheet-rgb) / 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lightbox-spin 0.8s linear infinite;
}

.lightbox__spinner[hidden] { display: none; }

@keyframes lightbox-spin { to { rotate: 360deg; } }

.lightbox__button {
  position: fixed;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(var(--sheet-rgb) / 0.14);
  color: #fff;
  cursor: pointer;
}

.lightbox__button:hover { background: rgb(var(--sheet-rgb) / 0.26); }
.lightbox__button:focus { outline: none; }
.lightbox__button:focus-visible { box-shadow: 0 0 0 2px #a4d2ff; }
.lightbox__button[hidden] { display: none; }
.lightbox__icon { width: 22px; height: 22px; }

.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { bottom: 1rem; left: 1rem; }
.lightbox__next { bottom: 1rem; right: 1rem; }

.lightbox__footer {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: calc(100vw - 140px);
  cursor: default;
}

.lightbox__name { max-width: 100%; overflow: hidden; font-size: 15.4px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; }

.lightbox__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5.28px 14.08px;
  border-radius: 33px;
  background: #fff;
  color: #1c1917;
  font-size: 15.4px;
  font-weight: 500;
  text-decoration: none;
}

.lightbox__download:focus { outline: none; }
.lightbox__download:focus-visible { box-shadow: 0 0 0 2px #a4d2ff; }
.lightbox__download-icon { width: 16px; height: 16px; }

/* All Files */

.files-heading { position: relative; margin: 0 0 44px; font-size: 44px; line-height: 44px; font-weight: 700; text-align: center; }
.files-heading::before { content: ""; position: absolute; inset: 22px 0 auto; height: 1px; background: var(--color-rule); }
.files-heading span { position: relative; padding: 0 11px; background: var(--color-sheet); }

.files-grid { padding-bottom: 55px; font-size: 17.6px; }
.files-grid .file-chip { width: calc(20% - 6px); max-width: none; }

.files-blank {
  display: grid;
  place-items: center;
  min-height: 715px;
  margin-bottom: 55px;
  border-radius: 46.2px;
  background:
    radial-gradient(circle at 20% 22%, rgb(214 211 209 / 0.55) 0 70px, transparent 71px),
    radial-gradient(circle at 82% 20%, rgb(48 114 221 / 0.16) 0 100px, transparent 101px),
    radial-gradient(circle at 76% 84%, rgb(48 114 221 / 0.18) 0 80px, transparent 81px),
    repeating-linear-gradient(90deg, transparent 0 54px, rgb(var(--ink-rgb) / 0.04) 54px 55px),
    #faf8f5;
}

.files-blank__card {
  width: 534px;
  max-width: 100%;
  padding: 61.6px;
  border-radius: 46.2px;
  background: var(--color-sheet);
  box-shadow: 0 0 33px rgb(var(--warm-rgb) / 0.3);
  text-align: center;
}

.files-blank__icon { width: 56px; height: 56px; color: var(--color-ink); }
.files-blank__text { margin: 13.2px 0 0; font-size: 30.8px; line-height: 43.12px; }
.files-blank__text strong { font-weight: 700; }

@media (max-width: 720px) {
  .attachment-image, .attachments__gallery--halves .attachment-image { flex-basis: 50%; max-width: calc(50% - 4px); }
  .file-chip, .files-grid .file-chip { width: calc(50% - 6px); min-width: 0; }
  .files-heading { font-size: 33px; line-height: 33px; }
  .files-heading::before { top: 16.5px; }
  .files-blank { min-height: 480px; border-radius: 26px; }
  .files-blank__card { padding: 33px 26px; border-radius: 26px; }
  .files-blank__text { font-size: 22px; line-height: 30.8px; }
}