/* Gallery extras on top of css/base.css (which has .grid/.tile, .post, .badge,
   .check and the colour tokens): the post carousel, the share-code box and the
   upload drop zone. */

/* profile grid */
.tile__pending { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; font-size: .85rem; color: var(--ink-2); }
.pager { justify-content: center; margin-top: 20px; }

/* post carousel (one or more pictures and videos) */
.post__media { position: relative; min-width: 0; }
.carousel { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; min-height: 300px; }
.carousel__slide img, .carousel__slide video { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.carousel__pending { color: #ccc; padding: 60px 20px; text-align: center; }
.carousel__nav { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; align-items: center; gap: 10px; pointer-events: none; }
.carousel__btn { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: #111; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__count { background: rgba(0, 0, 0, .55); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: .78rem; }
.post-caption { overflow-wrap: anywhere; margin-bottom: 4px; }

/* share code */
.share-box { border-top: 1px solid var(--line); padding-top: 16px; }
.share-box h3 { margin-bottom: 4px; }
.share-box__code { font-size: 1.3rem; letter-spacing: .08em; margin: 4px 0 10px; }
.share-box__actions { margin-top: 10px; gap: 8px; }
.share-box__actions form { margin: 0; }

/* upload */
.dropzone { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 28px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.field > .dropzone { display: grid; font-weight: 400; margin-bottom: 0; }
.dropzone .icon { width: 32px; height: 32px; color: var(--ink-3); margin-bottom: 4px; }
.dropzone:hover, .dropzone.is-over { border-color: var(--ink-3); background: var(--surface-2); }
.dropzone input[type="file"] { margin-top: 12px; }
.upload-preview { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.upload-preview:empty { display: none; }

/* one card per chosen file (static/gallery/editor.js): preview, edit tools, description */
.edit-card { display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.edit-card__stage { display: grid; place-items: center; background: var(--surface-3); border-radius: var(--radius-sm); overflow: hidden; }
.edit-card__stage--name { gap: 4px; padding: 16px; font-size: .85rem; color: var(--ink-2); overflow-wrap: anywhere; text-align: center; }
.edit-card__video { display: block; max-width: 100%; max-height: 360px; }
.edit-card .field { margin-bottom: 0; }
.edit-frame { position: relative; max-width: 100%; touch-action: none; overflow: hidden; }
.edit-frame canvas { display: block; width: 100%; height: 100%; }
.crop { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); outline: 1px solid #fff; cursor: move; }
.crop:focus-visible { outline: 2px solid var(--focus); }
.crop__handle { position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; cursor: nwse-resize; }
.crop__handle::after { content: ""; position: absolute; inset: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .4); border-radius: 2px; }
.edit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .85rem; }
.edit-tools__item { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.edit-tools select { width: auto; padding: 4px 8px; font-size: .85rem; }
.edit-tools__range input { width: 110px; accent-color: var(--primary); }

/* descriptions on the edit page */
.describe { border: 0; padding: 0; margin: 0 0 16px; }
.describe legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.describe__row { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.describe__thumb { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); color: var(--ink-3); }
.describe__thumb img { width: 100%; height: 100%; object-fit: cover; }
.describe__field { flex: 1; min-width: 0; margin-bottom: 0; }
.delete-preview { margin: 0 auto 16px; border-radius: var(--radius-sm); }

/* locked private posts: a tiny pre-blurred picture from the server, scaled up */
.tile--locked { background: var(--surface-3); }
.tile--locked img { filter: saturate(.85); transform: scale(1.15); }
.tile__locked { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 4px; color: #fff; font-size: .8rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .18); }
/* This file is linked from the page body, after css/exhibition.css, so its
   classic-only locked-tile rules need undoing there: exhibition tiles don't
   clip (the scaled blur would spill out) and have no backing (it would show
   as a grey box behind the label). */
[data-design="exhibition"] .tile--locked { background: none; }
[data-design="exhibition"] .tile--locked > img { transform: none; }
.tile__locked .icon { width: 26px; height: 26px; stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.locked-preview { position: relative; width: 160px; aspect-ratio: 1; margin: 0 auto 16px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
.locked-preview img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.locked-preview__mark { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .18); }
.locked-preview__mark .icon { width: 32px; height: 32px; stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

/* archive and scheduled posts */
.sched-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.sched-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media > form { margin: 0; flex: none; align-self: center; }
.post-state { margin-bottom: 12px; }
.archive-link { justify-content: flex-end; margin-bottom: 8px; }
.post-state p { margin: 0 0 8px; }
.post-state form, .post__foot form { margin: 0; }
input[type="datetime-local"] { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; color-scheme: light dark; }
.field--error input[type="datetime-local"] { border-color: var(--danger); }

/* Profile grid with tile sizes (Post.tile_cols/tile_rows: 1 or 2 each).
   The section is a size container, so a cell's width is known in CSS and rows
   can be fixed: a 2-wide tile is exactly two cells plus the gap, and a row
   holding only big tiles can't collapse. 2 is the most a tile spans and every
   grid has at least 2 columns, so nothing ever overflows. "dense" lets small
   tiles fill the holes big ones leave. --label is the space under each picture
   for its caption (exhibition design only). */
.grid-wrap { container-type: inline-size; }
.grid.grid--sized {
  --cols: 3; --gx: 4px; --gy: 4px; --label: 0px;
  --cell: calc((100cqw - (var(--cols) - 1) * var(--gx)) / var(--cols));
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc(var(--cell) + var(--label));
  grid-auto-flow: row dense;
  gap: var(--gy) var(--gx);
}
.grid--sized > .tile { aspect-ratio: auto; min-height: 0; }
.grid--sized > .tile--w2 { grid-column: span 2; }
.grid--sized > .tile--h2 { grid-row: span 2; }
.grid--sized .tile__pending { height: 100%; }
@media (max-width: 480px) {
  .grid.grid--sized { --gx: 2px; --gy: 2px; }
}

/* Exhibition: picture on top, a fixed-height label under it. */
[data-design="exhibition"] .grid.grid--sized { --gx: 28px; --gy: 36px; --label: calc(10px + 2.7rem); }
[data-design="exhibition"] .grid--sized > .tile > img,
[data-design="exhibition"] .grid--sized > .tile > .tile__pending,
[data-design="exhibition"] .grid--sized > .tile--locked:not(:has(> img))::before { flex: 1 1 0; min-height: 0; height: auto; aspect-ratio: auto; }
[data-design="exhibition"] .grid--sized .tile__label { flex: none; height: 2.7rem; overflow: hidden; }
[data-design="exhibition"] .grid--sized .tile__locked { inset: 0 0 var(--label) 0; aspect-ratio: auto; }
@media (max-width: 735px) {
  [data-design="exhibition"] .grid.grid--sized { --cols: 2; --gx: 14px; --gy: 24px; }
}

/* Layout editor (static/gallery/layout.js), owner only. */
.layout-hint { font-size: .85rem; margin-right: auto; }
.grid--sized.is-editing > .tile { cursor: default; outline: 1px dashed var(--line-strong); outline-offset: 2px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grid--sized.is-editing > .tile:focus-visible { outline: 2px solid var(--focus); }
.grid--sized.is-editing > .tile::after { display: none; }
.grid--sized.is-editing > .tile.is-resizing { outline: 2px solid var(--ink); z-index: 2; }
.grid--sized.is-editing img { pointer-events: none; }
.tile__resize { position: absolute; right: 0; bottom: 0; z-index: 3; width: 44px; height: 44px; cursor: nwse-resize; touch-action: none; }
.tile__resize::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; border-radius: 0 0 3px 0; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .8)); }
.tile__size { position: absolute; left: 6px; bottom: 6px; z-index: 3; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .75rem; font-weight: 600; pointer-events: none; }
[data-design="exhibition"] .tile__resize { bottom: var(--label); }
[data-design="exhibition"] .tile__size { bottom: calc(var(--label) + 6px); }