/* =============================================
   MODERNA — catalogue.css — Style Maison Giary
   ============================================= */

/* ── PAGE HERO ── */
.cat-hero { position:relative; height:50vh; min-height:340px; overflow:hidden; display:flex; align-items:flex-end; }
.cat-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.cat-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.15) 60%,transparent 100%); }
.cat-hero-content { position:relative; z-index:2; padding:0 5% 36px; color:white; }
.cat-hero-content .section-tag { color:rgba(255,255,255,.55); margin-bottom:10px; }
.cat-hero-content h1 { font-family:var(--font-title); font-size:clamp(36px,6vw,72px); font-weight:300; line-height:1.05; margin-bottom:10px; letter-spacing:1px; }
.cat-hero-content p { font-size:13px; color:rgba(255,255,255,.6); max-width:400px; line-height:1.75; font-weight:300; }

/* ── FILTER BAR ── */
.filter-bar { position:sticky; top:72px; z-index:100; background:var(--white); border-bottom:1px solid var(--light); padding:0 5%; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.filter-bar-left { display:flex; align-items:center; gap:4px; overflow-x:auto; padding:13px 0; scrollbar-width:none; }
.filter-bar-left::-webkit-scrollbar { display:none; }
.filter-pill { background:none; border:1px solid var(--light); font-family:var(--font-body); font-size:9.5px; letter-spacing:1.5px; font-weight:400; color:var(--mid); padding:6px 14px; white-space:nowrap; cursor:pointer; transition:.3s; }
.filter-pill:hover { border-color:var(--dark); color:var(--dark); }
.filter-pill.active { background:var(--dark); border-color:var(--dark); color:white; }
.filter-bar-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.sort-select { background:none; border:1px solid var(--light); font-family:var(--font-body); font-size:10px; color:var(--mid); padding:6px 10px; outline:none; cursor:pointer; letter-spacing:.5px; }
.count-label { font-size:10px; color:var(--mid); white-space:nowrap; letter-spacing:1px; }

/* ── CATALOGUE GRID ── */
.catalogue-layout { padding:36px 5% 80px; }
.catalogue-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media(max-width:900px){.catalogue-grid{grid-template-columns:repeat(2,1fr);gap:16px;}}
@media(max-width:480px){.catalogue-grid{grid-template-columns:1fr;}}