/* ============================================================
   GALERIA DE PROJETOS — faixa (.reel) + tela cheia (.galeria)
   Componente independente de base.css: funciona em página clara ou escura.
   Cores por variáveis (defina no :root da página ou use os padrões abaixo).
   Uso e HTML em acervo/componentes/CATALOGO.md ("Galeria de projetos").
   Nasceu no projeto 001 (Carol Costa, arquiteta), 03/11/2026.
   ============================================================ */
:root {
  --gal-text: #373435;          /* texto das legendas da faixa */
  --gal-muted: #716d62;         /* tipo do projeto na legenda */
  --gal-badge-bg: rgba(253, 253, 253, .92);
  --gal-stage-bg: #0f0f0f;      /* fundo da tela cheia */
  --gal-stage-text: #f4f3f1;
  --gal-stage-muted: rgba(244, 243, 241, .58);
  --gal-accent: #c5af88;        /* aba ativa e foco */
  --gal-gap: 14px;
  --gal-caption-h: 44px;        /* altura reservada para a legenda abaixo de cada imagem */
}

/* ---------- faixa de projetos (proporção nativa de cada imagem, desliza sozinha, arrasta) ---------- */
.reel { position: relative; overflow: hidden; }
.reel__track {
  position: absolute; inset: 0; display: flex; gap: var(--gal-gap);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; cursor: grab; -webkit-overflow-scrolling: touch;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__track.is-drag { cursor: grabbing; user-select: none; }
.reel__item { flex: 0 0 auto; height: 100%; margin: 0; display: flex; flex-direction: column; }
.reel__open { position: relative; display: block; height: calc(100% - var(--gal-caption-h)); padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.reel__open img { display: block; height: 100%; width: auto; max-width: none; transition: transform .9s cubic-bezier(.22, 1, .36, 1); -webkit-user-drag: none; user-select: none; }
.reel__open:hover img { transform: scale(1.03); }
.reel__open::after { /* "+" redondo: indica que abre */
  content: "+"; position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 300 20px/1 system-ui, sans-serif; color: var(--gal-text);
  background: var(--gal-badge-bg); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); opacity: .9; transition: transform .3s;
}
.reel__open:hover::after { transform: rotate(90deg); }
.reel__open:focus-visible { outline: 2px solid var(--gal-accent); outline-offset: 3px; }
.reel__item figcaption { height: var(--gal-caption-h); display: flex; align-items: baseline; gap: 12px; padding-top: 12px; white-space: nowrap; }
.reel__item figcaption b { font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gal-text); }
.reel__item figcaption span { font-size: 13px; color: var(--gal-muted); }

/* ---------- tela cheia ---------- */
.galeria { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--gal-stage-bg); color: var(--gal-stage-text); overflow: hidden; }
.galeria::backdrop { background: rgba(15, 15, 15, .6); }
.galeria[open] { display: grid; grid-template-rows: auto 1fr auto; animation: gal-in .35s ease; }
@keyframes gal-in { from { opacity: 0; } to { opacity: 1; } }
.galeria__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(14px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 10px max(18px, env(safe-area-inset-left, 0px)); }
.galeria__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.galeria__tabs::-webkit-scrollbar { display: none; }
.galeria__tab { flex: none; padding: 9px 14px; border: 1px solid rgba(244, 243, 241, .18); border-radius: 999px; background: none; color: var(--gal-stage-muted); font: 500 11px/1 inherit; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.galeria__tab[aria-selected="true"] { color: var(--gal-stage-bg); background: var(--gal-accent); border-color: var(--gal-accent); }
.galeria__close { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(244, 243, 241, .22); background: none; color: var(--gal-stage-text); font: 300 26px/1 system-ui, sans-serif; cursor: pointer; }
.galeria__stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
/* posição absoluta com inset 0 + margin auto: a imagem cabe inteira na área (altura em % só resolve assim) */
.galeria__img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 32px); max-height: calc(100% - 8px); width: auto; height: auto; cursor: zoom-in; transition: transform .35s cubic-bezier(.22, 1, .36, 1); user-select: none; -webkit-user-drag: none; }
.galeria__img.is-loading { opacity: .25; }
.galeria__stage.is-zoom .galeria__img { transform: scale(2.2); cursor: zoom-out; }
.galeria__nav { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(244, 243, 241, .22); background: rgba(15, 15, 15, .45); color: var(--gal-stage-text); font: 300 26px/1 system-ui, sans-serif; cursor: pointer; z-index: 2; }
.galeria__nav--prev { left: max(18px, env(safe-area-inset-left, 0px)); }
.galeria__nav--next { right: max(18px, env(safe-area-inset-right, 0px)); }
.galeria__bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px max(18px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px)); }
.galeria__name { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.galeria__name small { margin-left: 10px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--gal-stage-muted); }
.galeria__count { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gal-stage-muted); letter-spacing: .12em; }
.galeria__hint { font-size: 12px; color: var(--gal-stage-muted); }
.galeria button:focus-visible { outline: 2px solid var(--gal-accent); outline-offset: 2px; }
@media (hover: none) { .galeria__nav { display: none; } .galeria__img { cursor: default; } }
@media (max-width: 640px) { .galeria__hint { display: none; } .galeria__tab { padding: 8px 11px; letter-spacing: .14em; } }
@media (prefers-reduced-motion: reduce) { .reel__open img, .galeria__img, .galeria[open] { transition: none; animation: none; } }