/* Intro */
.intro{background:#fff;padding:80px 0 48px;border-bottom:1px solid var(--outline)}
.intro h1{color:var(--primary);margin-bottom:16px}
.intro .lead{max-width:560px}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:12px;padding:32px 0}
.filters button{background:#fff;color:var(--primary);border:2px solid var(--primary);height:44px;padding:0 20px;border-radius:12px;font-weight:700;font-size:14px;transition:all .2s}
.filters button:hover{background:rgba(0,16,62,.05)}
.filters button.on{background:var(--primary);color:#fff}
.count{color:var(--muted);margin-bottom:24px}

/* Grid */
.grid{columns:1;column-gap:24px;padding-bottom:80px}
.item{break-inside:avoid;margin-bottom:24px;background:#fff;border:1px solid rgba(197,198,210,.3);border-radius:24px;overflow:hidden;cursor:pointer;transition:box-shadow .5s}
.item:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.item.hide{display:none}
.item-img{overflow:hidden;position:relative}
.item-img img{width:100%;object-fit:cover;transition:transform .7s}
.item:hover .item-img img{transform:scale(1.05)}
.tag{position:absolute;left:16px;top:16px;background:var(--accent);color:var(--on-surface);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700}
.item-info{padding:20px 24px}
.item-info h3{font:700 20px/1.3 var(--head);color:var(--primary);margin-bottom:4px}
.item-info p{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:4px}
.item-info .material-symbols-outlined{font-size:16px}

/* Call to action */
.cta{background:var(--primary);color:#fff;padding:80px 0;text-align:center}
.cta h2{margin-bottom:16px}
.cta p{color:#fff;opacity:.8;margin-bottom:32px}
.cta .btn{display:inline-flex;background:var(--accent);color:var(--primary)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,14,30,.95);display:none;align-items:center;justify-content:center;flex-direction:column;padding:24px}
.lb.open{display:flex}
.lb img{max-height:75vh;max-width:100%;border-radius:12px;object-fit:contain}
.lb-cap{color:#fff;text-align:center;margin-top:16px}
.lb-cap strong{display:block;font:700 20px var(--head)}
.lb-cap span{opacity:.7;font-size:14px}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb-x{top:20px;right:20px}
.lb-prev{left:16px;top:50%}
.lb-next{right:16px;top:50%}

@media (min-width:640px){.grid{columns:2}}
@media (min-width:1024px){.grid{columns:3}}