/* ==========================================================================
   PORTFÓLIO EM SLIDES + PRÉVIA DO SITE (20/10/2026, pedido do Guilherme)

   1. "Sites no ar" deixa de ser grade e vira trilho de slides em qualquer
      largura: 3 cartões no computador, 2 no tablet, 1 e um pedaço no celular.
      As setas são criadas pelo portfolio.js; sem JS, o trilho continua
      arrastável e o cartão continua sendo link para o site.
   2. Clicar no cartão abre a PRÉVIA: a foto da página inteira do site, numa
      moldura de navegador, para rolar sem sair da Houzzes. Computador e celular.
      Foto, e não iframe: iframe abriria o site de verdade e contaria visita
      falsa na medição do cliente (e há site que recusa abrir em iframe).
   ========================================================================== */

/* ---- 1. trilho ---------------------------------------------------------- */
html[data-harmonia] #sites .grade {
  display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: .2rem .1rem 1rem; margin: 0;
}
html[data-harmonia] #sites .grade::-webkit-scrollbar { display: none; }
html[data-harmonia] #sites .grade > * { flex: 0 0 calc((100% - 2 * 1.2rem) / 3); scroll-snap-align: start; margin: 0; }
@media (max-width: 1099px) { html[data-harmonia] #sites .grade > * { flex-basis: calc((100% - 1.2rem) / 2); } }
@media (max-width: 760px) {
  html[data-harmonia] #sites .grade { gap: .9rem; margin-inline: -1.1rem; padding: .2rem 1.1rem 1rem; scroll-padding-inline: 1.1rem; }
  html[data-harmonia] #sites .grade > * { flex-basis: 82%; }
}

/* setas e contador, ao lado do título */
.slides__nav { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.slides__nav button {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sup); color: var(--texto); border: 1px solid var(--borda); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.slides__nav button:hover:not(:disabled) { background: var(--elevada); border-color: var(--acento); }
.slides__nav button:disabled { opacity: .35; cursor: default; }
.slides__nav button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.slides__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slides__conta { font-family: var(--maquina); font-size: .78rem; letter-spacing: .08em; color: var(--apoio); margin-left: .4rem; }
html.js-slides #sites .arrastar { display: none; }

/* o cartão convida a abrir a prévia */
#sites a.bloco[data-previa] { cursor: zoom-in; }
.previa__selo {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2; pointer-events: none;
  font-family: var(--maquina); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(16, 12, 10, .82); color: var(--texto); border: 1px solid var(--borda);
  padding: .32rem .55rem; border-radius: 999px; opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
#sites .tela { position: relative; }
#sites a.bloco:hover .previa__selo, #sites a.bloco:focus-visible .previa__selo { opacity: 1; transform: none; }
@media (hover: none) { .previa__selo { opacity: 1; transform: none; } }

/* ---- 2. prévia ---------------------------------------------------------- */
.previa { position: fixed; inset: 0; z-index: 1000; display: none; }
.previa.aberta { display: block; }
.previa__fundo { position: absolute; inset: 0; background: rgba(8, 6, 5, .82); backdrop-filter: blur(4px); }
.previa__caixa {
  position: absolute; inset: 3vh 50% 3vh auto; transform: translateX(50%);
  width: min(1180px, 94vw); display: flex; flex-direction: column;
  background: var(--faixa); border: 1px solid var(--borda); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.previa--cel .previa__caixa { width: min(440px, 94vw); }
.previa__topo { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.previa__nome { font-weight: 700; font-size: 1rem; margin: 0; color: var(--texto); }
.previa__modo { display: inline-flex; border: 1px solid var(--borda); border-radius: 999px; padding: 2px; margin-left: auto; }
.previa__modo button {
  font: inherit; font-size: .8rem; padding: .35rem .8rem; border-radius: 999px; border: 0; cursor: pointer;
  background: none; color: var(--apoio);
}
.previa__modo button[aria-pressed="true"] { background: var(--sup); color: var(--texto); }
.previa__abrir {
  font-size: .82rem; font-weight: 600; text-decoration: none; color: #1a1410; background: var(--acento);
  padding: .45rem .85rem; border-radius: 999px; white-space: nowrap;
}
.previa__fechar {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda); background: var(--sup);
  color: var(--texto); cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
}
.previa__barra { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; background: var(--sup); }
.previa__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--elevada); }
.previa__barra span {
  flex: 1; margin-left: .5rem; font-family: var(--maquina); font-size: .74rem; color: var(--apoio);
  background: var(--faixa); border-radius: 6px; padding: .3rem .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.previa__rolo { flex: 1; overflow-y: auto; overscroll-behavior: contain; background: #fff; position: relative; }
.previa__rolo img { display: block; width: 100%; height: auto; }
.previa__carrega { position: absolute; inset: 0; display: grid; place-items: center; color: #6b5d50; font-size: .9rem; background: #f3efe9; }
.previa__rolo.pronto .previa__carrega { display: none; }
.previa__dica { font-size: .74rem; color: var(--apoio); padding: .45rem .9rem; border-top: 1px solid var(--borda); text-align: center; }
@media (max-width: 760px) {
  .previa__caixa { inset: 0; transform: none; width: 100% !important; border-radius: 0; border: 0; }
  .previa__modo { display: none; }
  .previa__abrir { margin-left: auto; }
  .previa__topo { padding: .6rem .7rem; }
}
html.previa-aberta { overflow: hidden; }