/**
 * @file
 * Widget de tira de thumbnails com seletor de foto padrão.
 */

/* ---- Título da seção ----------------------------------------------------- */

.user-photos-strip-label {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #444;
}

/* ---- Tira de thumbnails -------------------------------------------------- */

.user-photos-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.user-photos-empty {
  color: #666;
  font-style: italic;
}

/* ---- Card de foto -------------------------------------------------------- */

.user-photos-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* O .form-type--radio (ou .form-type-radio) envolve input + label.
   Tratamos o bloco inteiro como o card clicável. */
.user-photos-item .form-type--radio,
.user-photos-item .form-type-radio {
  position: relative;
  cursor: pointer;
}

/* Oculta o círculo do radio sem tirá-lo do fluxo de acessibilidade */
.user-photos-item .form-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Label = thumbnail — recebe borda ao ser selecionado */
.user-photos-item .form-type--radio label,
.user-photos-item .form-type-radio label {
  display: block;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 6px;
  padding: 2px;
  transition: border-color 0.15s, background-color 0.15s;
}

/* Destaque na foto padrão selecionada */
.user-photos-item .form-type--radio:has(input[type="radio"]:checked) label,
.user-photos-item .form-type-radio:has(input[type="radio"]:checked) label {
  border-color: #0678be;
  background-color: #e8f4fd;
}

/* Thumbnail contido dentro do label */
.user-photos-item .form-type--radio label .media,
.user-photos-item .form-type-radio label .media,
.user-photos-item .form-type--radio label img,
.user-photos-item .form-type-radio label img {
  display: block;
  width: 120px;
  height: 100px;
  object-fit: cover;
  border-radius: 3px;
}

/* ---- Área de upload ------------------------------------------------------ */

.user-photos-widget .js-form-item-new-photo,
.user-photos-widget .form-item-new-photo {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}