/* ===============================
   Portfolio grid – Ayeme
   =============================== */

.portfolio {
  --ayeme-overlay: rgba(197, 170, 138, .55);   /* castanho do tema (ajusta aqui) */
  --ayeme-overlay-hover: .08;                  /* quão claro fica no hover */
  --item-ratio: 3/4;                           /* altura dos blocos (3:4) */
  margin: 40px 0 20px;
}

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* antes: repeat(5, 1fr) */
  gap: 0;
}

/* Cartão-base */
.portfolio-item{
  position: relative;
  display: block;
  aspect-ratio: var(--item-ratio);              /* definido inline no HTML */
  overflow: hidden;
  isolation: isolate;                          /* separa blending do overlay */
  color: #fff;
  text-decoration: none;
}

/* Overlay castanho com transição longa */
.portfolio-item::after{
  content:"";
  position:absolute; inset:0;
  background: var(--ayeme-overlay);
  transition: opacity 1.2s ease;
  opacity: 1;                                  /* começa mais escuro */
  mix-blend-mode: multiply;                    /* dá o “tom” castanho */
}

/* Suavizar imagem no estado base */
.portfolio-item::before{
  content:"";
  position:absolute; inset:0;
  background: inherit;                         /* “copia” a imagem de fundo */
  background-image: var(--img);
  filter: grayscale(.05) brightness(.9);       /* ligeiramente mais escura */
  transition: filter 1.2s ease;
  z-index: -1;                                 /* fica por baixo do overlay */
}

/* Hover com fade */
.portfolio-item:hover::after{ opacity: var(--ayeme-overlay-hover); }
.portfolio-item:hover::before{ filter: grayscale(0) brightness(1); }

/* Conteúdo (títulos + categoria) */
.portfolio-item .meta{
  position:absolute; inset:16px;
  display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none;
}

.portfolio-item .item-title{
  margin:0;
  font-weight:700;
  letter-spacing:.02em;
  color: #fff;
  font-size: clamp(14px, 1.2vw, 18px);
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

.portfolio-item .category{
  position:absolute; left:10px; bottom:18px;
  transform-origin:left bottom;
  transform: rotate(-90deg);
  font-size: 12px;
  letter-spacing:.28em;
  opacity:.9;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

/* Zoom badge opcional no centro (aparece ligeiro no hover) */
.portfolio-item .zoom-badge{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0; transition:opacity .6s ease .2s;
}
.portfolio-item:hover .zoom-badge{ opacity:.65; }
.portfolio-item .zoom-badge i{
  display:inline-grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background: rgba(255,255,255,.9);
  color:#222; font-size:22px; font-weight:700;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* imagem de capa com object-fit (substitui o uso da custom property) */
.portfolio-item .cover{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.05) brightness(.9);      /* estado base um pouco mais escuro */
  transition: filter 1.2s ease;
  z-index: 0;
}
.portfolio-item:hover .cover{
  filter: grayscale(0) brightness(1);         /* highlight com fade suave */
}

/* mantém o overlay por cima da imagem */
.portfolio-item::after{
  content:"";
  position:absolute; inset:0;
  background: var(--ayeme-overlay);
  transition: opacity 1.2s ease;
  opacity: 1;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* meta/zoom ficam no topo */
.portfolio-item .meta,
.portfolio-item .zoom-badge{ z-index: 2; }


/* Responsivo */
@media (max-width: 1200px){
  .portfolio-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .portfolio-grid{ grid-template-columns: 1fr; }
}