/* ============================================================
   BONA'LISSA — catalogo.css
   ============================================================ */

.page-hero{
  background: var(--ink); color: var(--cream);
  padding: calc(var(--header-h) + 90px) 0 90px;
  position: relative; overflow:hidden;
}
.page-hero .eyebrow{ color: var(--gold-bright); }
.page-hero h1{ font-size: clamp(40px, 6vw, 76px); font-weight:400; max-width:760px; }
.page-hero p{ max-width:520px; margin-top:20px; color: rgba(244,237,226,.72); font-size:16px; line-height:1.75; }

/* -------- filters -------- */
.filter-bar{
  position: sticky; top: 76px;
  z-index: 200;
  background: rgba(244,237,226,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.filter-list{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-btn{
  padding: 9px 20px;
  font-size: 12px; letter-spacing:.14em; text-transform:uppercase;
  border: 1px solid var(--line-gold);
  color: var(--ink-soft);
  transition: background .3s, color .3s, border-color .3s;
}
.filter-btn.is-active, .filter-btn:hover{
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}

/* -------- grid -------- */
.piece-grid{
  padding: 80px 0 120px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 980px){ .piece-grid{ grid-template-columns: repeat(2,1fr); gap:22px; } }
@media (max-width: 600px){ .piece-grid{ grid-template-columns: 1fr; } }

.piece-card{
  cursor: pointer;
  opacity:0; transform: translateY(30px);
}
.piece-card.span-tall{ grid-row: span 1; }
.piece-media{
  position: relative; overflow:hidden;
  aspect-ratio: 4/5;
  background: var(--cream-deep);
}
.piece-media img{ width:100%; height:100%; object-fit:cover; transition: transform .85s var(--ease); }
.piece-card:hover .piece-media img{ transform: scale(1.08); }
.piece-media .piece-tag{
  position:absolute; top:16px; left:16px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; background: rgba(34,28,22,.78); color: var(--cream);
}
.piece-media .piece-view{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(34,28,22,0);
  transition: background .4s;
}
.piece-view span{
  opacity:0; transform: translateY(10px);
  color: var(--cream); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(244,237,226,.7); padding:11px 22px;
  transition: opacity .35s, transform .35s;
}
.piece-card:hover .piece-view{ background: rgba(34,28,22,.28); }
.piece-card:hover .piece-view span{ opacity:1; transform:none; }

.piece-info{ padding-top:16px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.piece-info h3{ font-size:19px; font-weight:400; }
.piece-info .piece-cat{ font-size:11.5px; letter-spacing:.1em; color: var(--gold); text-transform:uppercase; margin-top:2px; }
.piece-price{ font-family: var(--serif); font-size:16px; color: var(--ink-soft); white-space:nowrap; }

/* -------- placeholder (demo) tiles -------- */
.piece-media.is-placeholder{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, var(--cream-deep), var(--cream));
  border: 1px solid var(--line);
}
.piece-media.is-placeholder svg{ width:44%; height:44%; opacity:.55; }
.piece-media.is-placeholder .piece-tag{ background: rgba(169,131,74,.9); }

/* -------- empty state -------- */
.piece-empty{ text-align:center; padding: 80px 0; display:none; }
.piece-empty.show{ display:block; }

/* -------- modal -------- */
.piece-modal{
  position: fixed; inset:0; z-index: 800;
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  background: rgba(20,16,12,.72);
  backdrop-filter: blur(4px);
  opacity:0; visibility:hidden;
  transition: opacity .4s, visibility 0s .4s;
}
.piece-modal.is-open{ opacity:1; visibility:visible; transition: opacity .4s, visibility 0s 0s; }
.modal-panel{
  background: var(--cream);
  max-width: 900px; width:100%;
  max-height: 88vh; overflow:auto;
  display:grid; grid-template-columns: 1.1fr 1fr;
  position: relative;
}
@media (max-width: 720px){ .modal-panel{ grid-template-columns: 1fr; } }
.modal-img{ width:100%; height:100%; min-height:280px; object-fit:cover; }
.modal-body{ padding: 46px 42px; display:flex; flex-direction:column; justify-content:center; }
.modal-cat{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); margin-bottom:14px; }
.modal-title{ font-size: clamp(26px,3vw,34px); font-weight:400; margin-bottom:16px; }
.modal-desc{ font-size:15px; line-height:1.8; color: var(--ink-soft); margin-bottom:22px; }
.modal-price{ font-family: var(--serif); font-size:22px; color:var(--ink); margin-bottom:28px; }
.modal-close{
  position:absolute; top:18px; right:18px; z-index:5;
  width:40px; height:40px; border-radius:50%;
  background: rgba(244,237,226,.92);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color: var(--ink);
  transition: transform .3s, background .3s;
}
.modal-close:hover{ transform: rotate(90deg); background: var(--gold); color: var(--cream); }