/* Admin listing & stay management forms (Admin::ListingsController /
   Admin::StaysController). The moderation queue table lives in
   components/shell.css + components/tables.css; this file owns only the
   create/edit form layout so it doesn't grow an unrelated component. */

/* Two-column field grid inside the form card. The card is a query container
   (.bido-table-card sets container-type: inline-size), so the grid collapses to
   one column on a narrow card without a viewport breakpoint. */
.bido-admin-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}

/* Fields that read better full width: title, category, description, photos. */
.bido-admin-form .bido-admin-form-wide {
  grid-column: 1 / -1;
}

/* Single-field forms (add-a-stay URL, stay description) skip the grid and just
   keep a comfortable reading measure. */
.bido-admin-form-narrow {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  max-width: 48rem;
}

.bido-admin-form-photos {
  padding: 16px;
  border-top: 1px solid var(--bx-line);
}

.bido-admin-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
  gap: 12px;
  margin-top: 10px;
}

.bido-admin-photo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bido-admin-photo .photo-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bx-r);
}

.bido-admin-photo-remove {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--bx-text-xs);
  color: var(--bx-ink-3);
}

@container (max-width: 34rem) {
  .bido-admin-form {
    grid-template-columns: minmax(0, 1fr);
  }
}