/*
 * 95-multi-art.css
 * --------------------------------------------------------------
 * Styles for the multi-art (Instagram-style carousel) feature:
 *   - admin upload form: MULTI-ART toggle, preview-grid tiles
 *   - gallery modal: arrows, dot indicators, click-zones, counter
 *   - modal download dialog: extra multi-art buttons
 *
 * Loaded last in the cascade so it can override the existing
 * patches without touching the original files.
 */

/* ---------- Admin: MULTI-ART toggle (inline next to DESCRIPTION) ---------- */

/* The parent .admin-description-field inherits .admin-field's
 * `display: grid` (single column), so anything inside stacks
 * vertically by default — that's why MULTI-ART was rendering
 * BELOW [ DESCRIPTION ] instead of next to it.
 *
 * We override to a flex row here so:
 *   1. [ DESCRIPTION ] button   ─┐  same row, side by side
 *   2. MULTI-ART label          ─┘
 *   3. EMPTY status (flex-basis:100%) wraps to the next line.
 *
 * Hidden inputs are flex items too but have zero size so they
 * don't affect layout. */
.admin-description-field {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  row-gap: 6px;
}
.admin-description-field .admin-description-opener {
  justify-self: auto;
  flex: 0 0 auto;
}
.admin-description-field .admin-description-status {
  flex-basis: 100%;
  margin: 0;
}

/* Reuse the existing DOWNLOADABLE checkbox styling
 * (admin-downloadable-cb / admin-downloadable-text) so MULTI-ART
 * looks identical and we don't reinvent the wheel. */
.admin-multi-art-inline-label,
.admin-downloadable-inline-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------- Admin: multi-art preview grid (vertical, up to 6 in a row) ---------- */

.admin-multi-art-field {
  margin-top: 10px;
  /* The parent .admin-form is a multi-column CSS grid; without
   * spanning all columns the multi-art field would be squeezed
   * into one ~70px-wide column and the tiles would render tiny.
   * Span the entire row so the preview grid uses the full form
   * width — same trick as .admin-title-file-row above. */
  grid-column: 1 / -1;
}
/* Tiles are sized via auto-fill so the grid always fits the
 * available width: ~6 columns at full desktop width, dropping
 * to 4 on the typical screenshot viewport, then 3 / 2 on
 * mobile. The minmax() floor matches the spec screenshot
 * (≈140px wide, vertical portrait). */
.admin-multi-art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
}
@media (max-width: 600px) {
  .admin-multi-art-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
}

.admin-multi-tile {
  position: relative;
  width: 100%;
  /* Vertical portrait, like the Instagram carousel previews on
   * the spec screenshot. */
  aspect-ratio: 2 / 3;
  background: #050505;
  border: 1px solid #1f1f1f;
  overflow: hidden;
  padding: 0;
  cursor: default;
}
.admin-multi-tile__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #050505;
}
.admin-multi-tile__remove {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  border: 1px solid #4a2a2a;
  background: rgba(0, 0, 0, 0.75);
  color: #d8a0a0;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.admin-multi-tile__remove:hover {
  background: #1a0606;
  color: #e0b8b8;
  border-color: #6a3030;
}
.admin-multi-tile--add {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #2a2a2a;
  background: transparent;
  color: #777;
  font-size: 28px;
  cursor: pointer;
  font-family: var(--mono, "Departure Mono", monospace);
  font-weight: 200;
  line-height: 1;
}
.admin-multi-tile--add:hover {
  border-color: #6cf;
  color: #6cf;
  background: rgba(108, 207, 255, 0.05);
}

/* ---------- Modal carousel overlay ---------- */

.modal-inner__media {
  position: relative;
}

#modalInner {
  position: relative;
}

.modal-inner__media > .modal-carousel-arrow,
.modal-mobile-stage > .modal-carousel-arrow {
  z-index: 212;
  pointer-events: auto;
}

/* Arrows sit in the gutter beside the art, not on top of it */
.modal-inner__media > .modal-carousel-arrow--prev,
.modal-mobile-stage > .modal-carousel-arrow--prev {
  left: auto;
  right: 100%;
  margin-right: 14px;
}

.modal-inner__media > .modal-carousel-arrow--next,
.modal-mobile-stage > .modal-carousel-arrow--next {
  right: auto;
  left: 100%;
  margin-left: 14px;
}

.poster-card-variant-dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.poster-card-variant-dot {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  box-sizing: border-box;
}

.poster-card-variant-dot.is-active {
  background: #6cf;
  border-color: #6cf;
}

.poster-card {
  position: relative;
}

/* Click-zones: cover left/right halves of the media surface but
 * leave the central 30% alone so users can still interact with
 * the media (right-click / video controls / etc.). */
.modal-carousel-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  z-index: 4;
  cursor: pointer;
  background: transparent;
  /* No visible affordance by default — arrows are the visible cue. */
}
.modal-carousel-zone--left { left: 0; }
.modal-carousel-zone--right { right: 0; }

.modal-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.55);
  color: #f0f0f0;
  cursor: pointer;
  font-family: var(--mono, "Departure Mono", monospace);
  font-size: 28px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.modal-carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}
.modal-carousel-arrow--prev { left: 8px; right: auto; }
.modal-carousel-arrow--next { right: 8px; left: auto; }

.modal-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 10px;
  border-radius: 1px;
}
.modal-carousel-dot {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.modal-carousel-dot.is-active {
  background: #6cf;
  border-color: #6cf;
}
.modal-carousel-dot:hover { border-color: #fff; }

.modal-carousel-counter {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
  font-family: var(--mono, "Departure Mono", monospace);
  font-size: 11px;
  color: #d8d8d8;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  letter-spacing: 0.06em;
}

/* On phones the arrows feel cluttered next to the swipe gesture,
 * so we shrink them and lean on the dots + swipe instead. */
@media (max-width: 720px) {
  .modal-carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
  .modal-carousel-arrow--prev { left: 4px; }
  .modal-carousel-arrow--next { right: 4px; }
  .modal-carousel-counter {
    right: 8px;
    top: 8px;
    font-size: 10px;
  }
}

/* ---------- Modal download dialog: extra multi buttons ---------- */

.modal-download-dialog-btn--multi {
  /* Re-use the existing dialog button skin; we only need extra
   * spacing because there are now up to 4 buttons in the dialog. */
  margin-top: 4px;
}