/* ==========================================================================
   GALERIA EM SCROLL HORIZONTAL — prefixo hgal-
   Faixa de cases que rola na horizontal, com encaixe (scroll-snap) e barra
   escondida nos três motores.

   Tokens usados:
     --pad --max          conta do recuo que alinha o trilho à coluna
     --display --ease     tipografia e curva do projeto
     --accent --dark      distintivo (badge): fundo de marca, ícone escuro
     --dark-rgb           véu da legenda sobre a foto
     --light              texto sobre a foto (ilha escura, ver abaixo)
     --radius-media       canto do card
     --radius-pill        disco dos botões e pílula do tipo
     --rule --rule-2      borda do card em repouso e no hover
     --bg --fg-2 --fg-muted   fundo de carregamento, botões e dica

   O componente é uma ILHA ESCURA: o card é foto, e o texto vive dentro dela.
   Por isso o que está sobre a imagem lê --light, e não --fg — assim a mesma
   faixa roda numa seção .sec-paper sem virar texto escuro sobre véu escuro.
   O que está fora da imagem (dica, botões) continua lendo o escopo de tom.
   ========================================================================== */

.hgal{
  /* Largura do card. O clamp é o que faz a faixa mostrar ~2,7 cards no
     desktop e ~1,2 no celular — sempre com um pedaço do próximo à mostra,
     que é o sinal de que existe mais coisa para o lado. */
  --hgal-card:clamp(280px,36vw,460px);
  --hgal-gap:clamp(14px,2vw,22px);
  /* --dur do core é .9s: certo para entrada de seção, lento para a foto
     responder ao ponteiro. Duração de interação é local. */
  --hgal-dur:.6s;

  /* SANGRIA SEM MARGEM NEGATIVA (contrato §4).
     O trilho é irmão do .wrap, então já ocupa a página inteira. O que falta
     é fazer o primeiro card nascer exatamente na borda da coluna: é este
     recuo. Ele repete a conta do .wrap (metade da sobra, mais o respiro),
     mas aplicado ao trilho — não sobrescreve o .wrap, não usa 100vw e não
     puxa nada com margem negativa.
       tela estreita  ->  a coluna já encosta nas bordas, vale --pad
       tela larga     ->  (100% - --max) / 2 + --pad
     O 100% é a largura da SEÇÃO: o trilho tem de ser filho direto dela. */
  --hgal-inset:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));
}

/* ---------------------------------------------------------------- cabeçalho */
/* Título à esquerda, dica e botões à direita, alinhados pela base. Não usa
   .sec-head do core de propósito: .sec-head é cabeçalho CENTRADO, e aqui os
   dois lados precisam se olhar. */
.hgal-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,4vw,48px);
  margin-bottom:clamp(32px,5vh,54px);
}
.hgal-head-left{min-width:0}

.hgal-nav{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding-bottom:6px}
/* O script põe [hidden] quando não há o que rolar. A regra é obrigatória:
   display vindo de classe vence o [hidden] da folha do navegador. */
.hgal-nav[hidden]{display:none}

.hgal-hint{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
  white-space:nowrap;
}
/* A cutucada a cada 2.2s. Curva do projeto, não "ease" cravado: o vaivém
   fica um tico mais seco que no original, e é o preço de não escrever
   easing na mão (contrato §3). */
.hgal-hint-arrow{flex:0 0 auto;animation:hgalNudge 2.2s var(--ease) infinite}
@keyframes hgalNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(8px)}
}

/* Disco de ícone. Não é .btn: .btn é pílula de TEXTO com padding fixo, e
   espremer 42px nela seria brigar com a primitiva em vez de usá-la. Se um
   terceiro componente pedir disco de ícone, promova ao core (contrato §6). */
.hgal-btn{
  flex:0 0 42px;width:42px;height:42px;padding:0;
  display:grid;place-items:center;
  background:none;color:var(--fg-2);
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);
  transition:color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.hgal-btn:hover{color:var(--accent);border-color:var(--accent)}
/* Ponta da faixa: o botão apaga em vez de sumir, para a dupla não dançar. */
.hgal-btn:disabled{opacity:.34;cursor:default;color:var(--fg-muted);border-color:var(--rule)}
.hgal-btn:disabled:hover{color:var(--fg-muted);border-color:var(--rule)}

/* ---------------------------------------------------------------- trilho */
.hgal-track{
  display:flex;gap:var(--hgal-gap);
  margin:0;list-style:none;
  padding-inline:var(--hgal-inset);
  /* Respiro vertical mínimo: sem ele o overflow corta o anel de foco do
     card, que o core desenha 3px para fora da caixa. */
  padding-block:6px 10px;

  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* Sem isto o encaixe alinha o card na borda da TELA e não na borda da
     coluna: o padding do trilho não entra sozinho na conta do snap. */
  scroll-padding-inline:var(--hgal-inset);
  /* Chegou na ponta, para de arrastar a página junto. */
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;

  /* Barra escondida nos três motores. A navegação fica por conta do gesto,
     dos dois botões e das setas do teclado — nunca só da barra. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.hgal-track::-webkit-scrollbar{width:0;height:0;display:none}

.hgal-item{flex:0 0 var(--hgal-card);min-width:0;scroll-snap-align:start}

/* ---------------------------------------------------------------- card */
.hgal-card{
  display:block;position:relative;
  background:var(--bg);
  border:1px solid var(--rule);
  border-radius:var(--radius-media);
  overflow:hidden;
  transition:border-color .4s var(--ease);
}
/* Era #3a3a36 no original: um degrau neutro acima da linha de repouso, que
   é exatamente o que --rule-2 significa. A cor de marca fica para o
   distintivo, senão o hover acende duas coisas ao mesmo tempo. */
.hgal-card:hover{border-color:var(--rule-2)}

/* Não usa .glass / .glass-hover de propósito: são cinco cards dentro de um
   contêiner que rola, e backdrop-filter em cada um custa quadro em scroll
   de toque. Fora que .glass assume fundo escuro, e esta faixa também roda
   em seção clara. Borda e foto resolvem sem cobrar nada. */

.hgal-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}

.hgal-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* grayscale parcial, não total: a faixa fica coesa em repouso e o card
     sob o ponteiro ganha cor sem virar outra imagem. */
  filter:grayscale(.3);transform:scale(1.02);
  transition:filter var(--hgal-dur) var(--ease),transform var(--hgal-dur) var(--ease);
}
/* :focus-visible junto do :hover — quem chega pelo teclado vê o mesmo card
   acender que quem chega pelo mouse. */
.hgal-card:hover .hgal-img,
.hgal-card:focus-visible .hgal-img{filter:grayscale(0);transform:scale(1.06)}

/* Distintivo: disco na cor de marca com a seta de "abrir". Era
   rgba(47,107,255,.9) cravado; agora é --accent a 90% de opacidade, e o
   ícone lê --dark — a mesma dupla do .btn-primary do core. */
.hgal-badge{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;
  display:grid;place-items:center;
  color:var(--dark);
  background:color-mix(in srgb,var(--accent) 90%,transparent);
  border-radius:var(--radius-pill);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-6px) scale(.85);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.hgal-card:hover .hgal-badge,
.hgal-card:focus-visible .hgal-badge{opacity:1;transform:none}

/* Legenda DENTRO da foto, ancorada embaixo, com véu em gradiente mascarado
   (contrato §6 — texto sobre imagem). No original, nome e tipo eram uma
   tarja abaixo da foto; virou legenda porque o contrato pede, e porque o
   card passa a ser uma imagem só — sem rodapé para desalinhar entre um
   card de nome curto e um de nome longo. */
.hgal-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  padding:56px 22px 20px;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.92) 0%,
    rgba(var(--dark-rgb),.55) 46%,
    transparent 100%);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
}

.hgal-name{
  font-family:var(--display);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);line-height:1.2;letter-spacing:-.02em;
  color:var(--light);
}

/* Reaproveita a .pill do core — forma, respiro e tracking vêm de lá. Só o
   tom muda, porque a pílula está sobre foto e não sobre a seção. Seletor
   duplo de propósito: .pill e .hgal-type têm a mesma especificidade, e o
   contrato §6 proíbe depender de qual folha carregou primeiro. */
.hgal-cap .hgal-type{
  color:var(--light);
  border-color:color-mix(in srgb,var(--light) 32%,transparent);
}

/* ---------------------------------------------------------------- movimento reduzido */
/* Some o vaivém da seta, o zoom da foto e o salto do distintivo. O que fica
   é troca de cor e de opacidade — nenhuma das duas é deslocamento, e sem
   elas o card deixaria de responder ao ponteiro. */
@media(prefers-reduced-motion:reduce){
  .hgal-hint-arrow{animation:none}
  .hgal-img{transition-duration:.01ms}
  .hgal-card:hover .hgal-img,
  .hgal-card:focus-visible .hgal-img{transform:scale(1.02)}
  .hgal-badge{transform:none}
}

/* ---------------------------------------------------------------- toque */
/* Sem ponteiro não existe hover: o distintivo ficaria invisível para sempre
   em celular e tablet. Aqui ele nasce aceso. */
@media(hover:none){
  .hgal-badge{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- mobile */
@media(max-width:860px){
  .hgal-head{flex-direction:column;align-items:flex-start;gap:20px}
  .hgal-nav{padding-bottom:0}
  /* Em tela de toque arrastar é o gesto óbvio: a dica vira ruído, e os
     botões bastam para quem prefere tocar num alvo. */
  .hgal-hint{display:none}
}
@media(max-width:520px){
  .hgal{--hgal-card:min(78vw,320px)}
  .hgal-cap{padding:46px 16px 16px;gap:9px}
  .hgal-badge{top:11px;right:11px;width:34px;height:34px}
}