/* =========================================================
   AUTE PROJECT GALLERY V2
   Galeria de projetos por categorias. As imagens podem ser
   definidas em assets/css/10-capas-projetos.css e em assets/data/projetos.js.
   ========================================================= */
.projects.projects-portfolio { background: var(--paper-2); }
.project-filter-bar {
  display:flex; align-items:center; gap:8px; margin:0 0 30px;
  overflow-x:auto; padding:2px 1px 8px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.project-filter-bar::-webkit-scrollbar { display:none; }
.project-filter {
  min-height:42px; padding:0 17px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.72); color:rgba(5,5,5,.62); white-space:nowrap;
  font-size:13px; font-weight:500; transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.project-filter:hover { transform:translateY(-2px); color:var(--ink); border-color:rgba(5,5,5,.2); }
.project-filter.is-active { background:var(--black); color:#fff; border-color:var(--black); }
.portfolio-project-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(18px,2vw,28px); }
.portfolio-project-card {
  grid-column:span 4; min-width:0; border-radius:var(--radius-md); position:relative;
  transition:opacity .34s var(--ease),transform .44s var(--ease); outline:none;
}
.portfolio-project-card.is-filtered-out { display:none; }
.portfolio-project-trigger { display:block; width:100%; text-align:left; }
.portfolio-project-cover {
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden;
  background-image:linear-gradient(180deg,rgba(5,5,5,0) 42%,rgba(5,5,5,.58) 100%),var(--project-image),var(--project-fallback);
  background-size:cover,cover,cover; background-position:center; border:1px solid var(--line);
  box-shadow:0 22px 60px rgba(5,5,5,.07); transform:translateZ(0);
  transition:transform .58s var(--ease),box-shadow .58s var(--ease);
}
.portfolio-project-card:nth-child(4n+1) { --project-fallback:radial-gradient(circle at 68% 24%,rgba(66,88,252,.58),transparent 24%),linear-gradient(135deg,#141414,#050505); }
.portfolio-project-card:nth-child(4n+2) { --project-fallback:repeating-linear-gradient(135deg,rgba(66,88,252,.42) 0 1px,transparent 1px 22px),linear-gradient(145deg,#111,#050505); }
.portfolio-project-card:nth-child(4n+3) { --project-fallback:radial-gradient(circle at 74% 28%,rgba(66,88,252,.32),transparent 24%),linear-gradient(145deg,#f3f3ee,#d6d6cf); }
.portfolio-project-card:nth-child(4n+4) { --project-fallback:radial-gradient(circle at 28% 76%,rgba(66,88,252,.58),transparent 30%),linear-gradient(145deg,#191919,#070707); }
.portfolio-project-card:hover .portfolio-project-cover,
.portfolio-project-trigger:focus-visible .portfolio-project-cover { transform:translateY(-7px); box-shadow:0 30px 86px rgba(5,5,5,.13); }
.portfolio-project-topline { position:absolute; inset:16px 16px auto; display:flex; justify-content:space-between; align-items:center; gap:10px; z-index:3; }
.portfolio-project-category,.portfolio-project-count {
  min-height:30px; padding:0 11px; display:inline-flex; align-items:center; border-radius:999px;
  background:rgba(255,255,255,.84); backdrop-filter:blur(12px); color:#050505; font-size:11px; font-weight:500;
}
.portfolio-project-open {
  position:absolute; right:16px; bottom:16px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:#050505; z-index:3; font-size:18px; transition:transform .35s var(--ease),background .35s var(--ease);
}
.portfolio-project-card:hover .portfolio-project-open { transform:translate(3px,-3px) rotate(2deg); background:var(--accent); color:#fff; }
.portfolio-project-info { padding:18px 2px 4px; display:grid; gap:8px; }
.portfolio-project-info span { color:var(--muted); font-size:12px; }
.portfolio-project-info h3 { font-size:clamp(22px,1.7vw,28px); line-height:1.05; letter-spacing:-.045em; font-weight:500; }
.portfolio-project-info p { color:var(--muted); font-size:14px; line-height:1.5; max-width:390px; }
.portfolio-project-card.glow-card { --glow-border-alpha:.5; --glow-fill-alpha:.055; --glow-fill-alpha-soft:.025; }
.portfolio-project-card.glow-card > .card-glow-layer { border-radius:var(--radius-md); }
.project-library-note { margin-top:22px; color:rgba(5,5,5,.42); font-size:12px; line-height:1.5; }

.project-gallery-modal {
  position:fixed; inset:0; z-index:2600; display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .36s var(--ease),visibility .36s var(--ease);
}
.project-gallery-modal.is-open { opacity:1; visibility:visible; pointer-events:auto; }
.project-gallery-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(14px); }
.project-gallery-dialog {
  position:relative; z-index:2; width:min(1440px,calc(100vw - 48px)); max-height:min(92vh,980px);
  border-radius:30px; overflow:hidden; background:#f2f2ee; box-shadow:0 44px 140px rgba(0,0,0,.55);
  transform:translateY(22px) scale(.985); transition:transform .42s var(--ease);
}
.project-gallery-modal.is-open .project-gallery-dialog { transform:translateY(0) scale(1); }
.project-gallery-close {
  position:absolute; right:18px; top:18px; z-index:12; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:#050505; color:#fff; font-size:25px; box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.project-gallery-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr); min-height:680px; max-height:92vh; }
.project-gallery-viewer { min-width:0; background:#0b0b0b; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.project-gallery-stage { position:relative; min-height:0; display:grid; place-items:center; overflow:hidden; touch-action:pan-y; }
.project-gallery-stage img,.project-gallery-stage video { width:100%; height:100%; max-height:calc(92vh - 116px); object-fit:contain; background:#0b0b0b; }
.project-gallery-placeholder { width:100%; height:100%; min-height:520px; display:grid; place-items:center; text-align:center; padding:40px; background:radial-gradient(circle at 62% 28%,rgba(66,88,252,.45),transparent 23%),linear-gradient(145deg,#171717,#050505); color:rgba(255,255,255,.7); }
.project-gallery-placeholder strong { display:block; font-size:clamp(28px,4vw,60px); line-height:1; letter-spacing:-.05em; color:#fff; font-weight:500; }
.project-gallery-placeholder span { display:block; margin-top:14px; font-size:13px; }
.project-gallery-nav { position:absolute; inset:50% 18px auto; transform:translateY(-50%); display:flex; justify-content:space-between; pointer-events:none; }
.project-gallery-nav button { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); color:#050505; pointer-events:auto; box-shadow:0 12px 30px rgba(0,0,0,.22); font-size:20px; }
.project-gallery-counter { position:absolute; left:18px; top:18px; min-height:32px; padding:0 12px; border-radius:999px; display:flex; align-items:center; background:rgba(5,5,5,.68); color:#fff; backdrop-filter:blur(12px); font-size:12px; }
.project-gallery-thumbs { display:flex; gap:8px; padding:12px; overflow-x:auto; background:#111; scrollbar-width:thin; }
.project-gallery-thumb { flex:0 0 82px; aspect-ratio:4/3; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.12); opacity:.58; transition:opacity .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease); background:#202020; }
.project-gallery-thumb:hover { opacity:.86; transform:translateY(-2px); }
.project-gallery-thumb.is-active { opacity:1; border-color:var(--accent); }
.project-gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.project-gallery-copy { overflow:auto; padding:clamp(38px,4vw,66px); display:flex; flex-direction:column; justify-content:center; }
.project-gallery-copy .project-gallery-eyebrow { color:var(--accent); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.project-gallery-copy h3 { font-size:clamp(36px,4vw,62px); line-height:.98; letter-spacing:-.055em; font-weight:500; margin-top:18px; }
.project-gallery-summary { color:var(--muted); font-size:16px; line-height:1.62; margin-top:24px; }
.project-gallery-facts { display:grid; gap:0; margin-top:34px; border-top:1px solid var(--line); }
.project-gallery-fact { display:grid; grid-template-columns:92px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); }
.project-gallery-fact dt { color:rgba(5,5,5,.42); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.project-gallery-fact dd { color:var(--ink); font-size:13px; line-height:1.5; }
body.modal-open { overflow:hidden; }

@media (min-width:1600px) {
  .portfolio-project-grid { gap:28px; }
  .portfolio-project-card { grid-column:span 3; }
}
@media (max-width:1180px) {
  .portfolio-project-card { grid-column:span 6; }
  .project-gallery-layout { grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); }
}
@media (max-width:860px) {
  .project-gallery-modal { padding:0; align-items:start; overflow:auto; background:#0b0b0b; }
  .project-gallery-dialog { width:100%; max-height:none; min-height:100svh; border-radius:0; overflow:visible; }
  .project-gallery-layout { grid-template-columns:1fr; max-height:none; }
  .project-gallery-viewer { min-height:62svh; }
  .project-gallery-stage { min-height:54svh; }
  .project-gallery-stage img,.project-gallery-stage video { max-height:62svh; }
  .project-gallery-copy { padding:34px 24px 46px; }
  .project-gallery-close { position:fixed; right:14px; top:14px; }
}
@media (max-width:640px) {
  /* a barra sangra ate as bordas dos dois lados, mas o primeiro e o ultimo
     chip continuam alinhados ao container */
  .project-filter-bar {
    margin-bottom:22px;
    width:calc(100% + 48px);
    margin-inline:-24px;
    padding-inline:24px;
    scroll-padding-inline:24px;
  }
  .project-filter { min-height:40px; padding:0 14px; }
  .portfolio-project-grid { gap:24px; }
  .portfolio-project-card { grid-column:span 12; }
  .portfolio-project-cover { border-radius:24px; }
  .portfolio-project-info { padding-top:14px; }
  .project-gallery-nav { inset-inline:10px; }
  .project-gallery-nav button { width:44px; height:44px; }
  .project-gallery-thumbs { padding:10px; }
  .project-gallery-thumb { flex-basis:70px; }
  .project-gallery-fact { grid-template-columns:1fr; gap:6px; }
}