/* Galeria do portfólio — compartilhada pela home e por /portfolio/.
   Depende dos tokens do site (--card, --line, --ink*, --green-*, --bg).
   Só o que é da galeria mora aqui; .pf-grid/.pf-photo/.pf-label continuam
   na página, porque cada uma tem seu próprio enquadramento. */

/* grade clicável (a home tinha itens estáticos: vira botão como no /portfolio/) */
.pf-load{grid-column:1/-1;text-align:center;color:var(--ink-3);padding:40px 0;font-size:14px}
.pf-item{cursor:pointer;display:block;width:100%;border:1px solid var(--line);font:inherit;text-align:left;padding:0}
.pf-item:hover .pf-photo{filter:brightness(1.04)}
.pf-badge{display:inline-block;font-family:'JetBrains Mono';font-size:9px;letter-spacing:.06em;background:var(--green-soft);color:var(--green-dark);border:1px solid var(--green-bd);border-radius:5px;padding:1px 5px;vertical-align:middle;flex:none}
/* Título e descrição no card. Seletor com .pf-item de propósito: as páginas declaram
   .pf-label{white-space:nowrap} no <style> delas, que vem depois deste arquivo —
   só uma especificidade maior tira o corte em uma linha. */
.pf-item .pf-label{white-space:normal;overflow:visible;text-overflow:clip;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.pf-item .pf-tit{font-family:'JetBrains Mono';font-size:11.5px;letter-spacing:.03em;color:var(--ink);
  line-height:1.3;overflow-wrap:anywhere;min-width:0}
/* descrição é opcional: sem ela o card não deixa espaço vazio */
.pf-item .pf-desc{flex-basis:100%;font-family:'Archivo',sans-serif;font-size:12.5px;letter-spacing:0;
  line-height:1.4;color:var(--ink-3);text-transform:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* folha da galeria */
.gal-ov{position:fixed;inset:0;z-index:100;background:rgba(20,22,18,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:0}
.gal-sheet{background:var(--bg);width:100%;max-width:1000px;max-height:94vh;border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:760px){.gal-ov{align-items:center;padding:20px}.gal-sheet{border-radius:18px;max-height:90vh}}
.gal-hd{display:flex;align-items:flex-start;gap:12px;padding:16px;background:var(--card);border-bottom:1px solid var(--line);flex:none}
.gal-hd h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.gal-hd .k{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark)}
.gal-x{margin-left:auto;flex:none;width:40px;height:40px;border:0;background:var(--bg);border-radius:10px;font-size:22px;line-height:1;color:var(--ink-2);cursor:pointer}
.gal-body{flex:1;min-height:0;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
.gal-hero{width:100%;border-radius:12px;display:block;background:#d8d6cd;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.gal-tx{color:var(--ink-2);font-size:15px;margin:12px 2px 4px}
/* texto da categoria quando a foto já tem o seu: recua pra segundo plano */
.gal-tx-cat{font-size:13.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.gal-sec{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:20px 2px 8px;display:flex;align-items:center;gap:8px}
.gal-sec b{color:var(--green-dark)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(min-width:760px){.gal-grid{grid-template-columns:repeat(5,1fr)}}
.gal-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;display:block;cursor:pointer;background:#d8d6cd;border:2px solid transparent;transition:border-color .12s}
.gal-grid img.on{border-color:var(--green-dark)}
/* foto apontada por ?foto= (link "ver no site" do admin): pisca e fica marcada,
   senão quem abre o link cai numa grade de 30 fotos sem saber qual é a dele */
.gal-grid img.gal-alvo{border-color:var(--green-dark);animation:gal-pisca 1.1s ease-out 3}
@keyframes gal-pisca{0%,100%{box-shadow:0 0 0 0 rgba(77,122,18,0)}35%{box-shadow:0 0 0 6px rgba(77,122,18,.45)}}

/* modelos da categoria: o segundo passo da escolha (com banheiro, sem banheiro, acoplado) */
.gal-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media(min-width:600px){.gal-mods{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gal-mod{min-width:0;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:0 0 9px;cursor:pointer;display:flex;flex-direction:column;gap:5px;overflow:hidden;font:inherit;
  transition:border-color .12s}
.gal-mod:hover{border-color:var(--green-dark)}
.gal-mod img,.gal-mod-nofoto{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#d8d6cd}
.gal-mod-nm{font-size:13px;line-height:1.25;color:var(--ink);padding:0 9px;overflow-wrap:anywhere}
.gal-mod-md{font-family:'JetBrains Mono';font-size:10px;color:var(--ink-3);padding:0 9px}

.gal-ft{flex:none;padding:12px 16px;background:var(--card);border-top:1px solid var(--line);display:flex;gap:10px}
/* VISOR — tela cheia com swipe. Abre por cima da galeria: o scroll de trás fica
   onde estava, então tocar numa miniatura lá embaixo não joga a tela pro topo. */
.lb{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.95);display:flex;
  align-items:center;justify-content:center;touch-action:pan-y}
.lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.lb-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border:0;border-radius:12px;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-cnt{position:absolute;top:20px;left:16px;z-index:2;font-family:'JetBrains Mono',monospace;
  font-size:12px;color:rgba(255,255,255,.75);letter-spacing:.06em}
.lb-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  color:#fff;font-size:14px;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:64px;border:0;
  border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-prev{left:8px} .lb-next{right:8px}
/* no celular o dedo já passa a foto: as setas só atrapalhariam o alvo do swipe */
@media (max-width:760px) and (pointer:coarse){ .lb-nav{display:none} }

/* ── Vídeos da categoria/modelo ──────────────────────────────────────────────
   Fora do .gal-grid de propósito: o visor (lightbox) navega por IMAGENS, e um
   vídeo dentro dele quebraria o swipe. Facade — o player do YouTube só carrega
   no clique. Vertical (Short) usa quadro em pé: num quadro deitado ele viraria
   uma tarja preta com o vídeo minúsculo no meio. */
.gal-vids{display:flex;gap:10px;flex-wrap:wrap}
.gal-vid{position:relative;flex:0 0 auto;width:280px;aspect-ratio:16/9;border:0;padding:0;
  border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.gal-vid.vert{width:170px;aspect-ratio:9/16}
.gal-vid img{display:block;width:100%;height:100%;object-fit:cover}
.gal-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gal-vid-pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.34))}
.gal-vid-pl i{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.gal-vid-pl i::after{content:"";border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #242424;margin-left:4px}
.gal-vid-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 9px 7px;color:#fff;
  font-size:12px;line-height:1.3;text-align:left;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72))}
.gal-vid[data-on] .gal-vid-pl,.gal-vid[data-on] .gal-vid-cap{display:none}