/*
 * Photos: the file input that adds them and the grid of thumbnails (shared/_photos).
 * The native file input keeps the browser's camera/gallery picker on phones;
 * only its button is styled, like .btn--secondary.
 */
.file-input {
  max-width: 100%;
  color: var(--color-text-muted);
  font-size: var(--text-sm);

  &::file-selector-button {
    height: var(--control-height-sm);
    margin-right: var(--space-3);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border: var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--color-text);
    font: inherit;
    font-weight: var(--weight-medium);
    cursor: pointer;
  }

  &::file-selector-button:hover {
    background: var(--color-surface-hover);
  }

  &:focus-visible {
    outline: none;
  }

  &:focus-visible::file-selector-button {
    border-color: var(--color-focus);
    box-shadow: var(--focus-ring);
  }
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.photo-grid__item {
  position: relative;

  img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
  }

  /* The ✕ that deletes a photo, over its corner */
  form {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
  }

  .btn {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }
}

/* "Añadir fotos" in a card's header: a label styled as a button around a hidden file input,
   so tapping it opens the camera or gallery and the form sends as soon as photos are picked */
.photo-upload__button {
  cursor: pointer;

  &:focus-within {
    box-shadow: var(--focus-ring);
  }
}