/* Demonstração: trilho de escolha do negócio (radios nativos em cartão). O posicionamento na grade está em demo-layout.css. */

/* ---------- Trilho: escolha do negócio (radios nativos em cartão) ---------- */
.trilho__legenda {
  padding: 0;
  margin-bottom: var(--sp-3);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* O trilho nasce vazio no HTML e demo-ui-cliente.js o preenche depois: sem reserva, quem abre #demo vê a
   demonstração inteira descer ~130 px quando os três cartões aparecem. min-height igual à altura dos cartões prontos
   (medida de 320 a 1440 px; muda com a quebra de linha do nome, por isso os degraus). align-content: start impede
   os cartões de esticar dentro da reserva. */
.trilho__opcoes {
  display: flex;
  gap: var(--sp-2);
  align-content: start;
  margin-inline: calc(var(--sp-1) * -1);
  padding: var(--sp-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.neg-opc {
  position: relative;
  flex: 0 0 min(78vw, 260px);
  scroll-snap-align: start;
}

.neg-opc input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.neg-opc label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  min-height: 86px;
  padding: 7px 38px 7px 7px;
  background: rgba(15, 22, 39, 0.82);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-card);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
  .neg-opc label:hover {
    border-color: var(--icon-line);
  }
}

.neg-opc__capa {
  position: relative;
  flex: none;
  width: 70px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--s2);
  /* Mesmo tratamento .foto-azul das outras fotos, sem grão (72 a 88 px de altura) e com menos luz */
  --grao: 0;
  --luz: 0.2;
  --lift: 0.8;
}

.neg-opc__capa picture {
  display: block;
  height: 100%;
}

.neg-opc__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.neg-opc__rot {
  display: block;
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
}

.neg-opc__nome {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 1.3;
}

.neg-opc__check {
  position: absolute;
  top: 50%;
  right: 11px;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--ink);
  background: var(--blue);
  border-radius: 50%;
  transform: translateY(-50%);
}

.neg-opc__check .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.4;
}

.neg-opc input:checked + label {
  border-color: var(--blue);
  background: linear-gradient(145deg, rgba(47, 123, 255, 0.16), rgba(15, 22, 39, 0.94));
  box-shadow: var(--glow-1), inset 3px 0 0 var(--blue);
}

.neg-opc input:checked + label .neg-opc__check {
  display: grid;
}

.neg-opc input:focus-visible + label,
.teclado .neg-opc input:focus + label {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
}

.trilho__dica {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* Tablet: três cartões em linha, miniatura quadrada à esquerda */
@media (min-width: 768px) {
  .trilho__opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    min-height: 90px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }

  /* 40 px à direita: o marcador de selecionado (20 px, a 12 px da borda) nunca cobre o texto. Sem essa reserva, a 1024 px
     ("Barbearia Norte 22" numa coluna de 218 px) o nome ia para baixo do círculo azul (2,3:1 medido). Centralizado na altura. */
  .neg-opc label {
    flex-direction: row;
    align-items: center;
    padding: 8px 40px 8px 8px;
  }

  .neg-opc {
    min-width: 0;
  }

  .neg-opc__check {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  .neg-opc__capa {
    flex: none;
    width: 72px;
    aspect-ratio: 1;
  }
}

/* Desktop: mantém os três negócios em uma faixa compacta sobre os aparelhos. */
@media (min-width: 1024px) {
  .trilho__opcoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    min-height: 88px;
  }

  .trilho__dica {
    max-width: 76ch;
  }
}