:root{--bg-color:#050507;--surface-glass:#0d0d11b8;--border-glass:#ffffff14;--border-glass-strong:#ffffff2e;--accent-blue:#64a0ff;--text-primary:#ffffffeb;--text-secondary:#ffffff8a}.media-container{padding:64px 0 96px}.media-title{text-align:center;margin-bottom:40px}.media-title h1{margin:0 0 16px;font-family:OpenDyslexic,Outfit,sans-serif;font-size:clamp(2rem,5vw,3rem)}.media-title p{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:1.1rem}.filter-tabs{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:48px;display:flex}.filter-tab{border:1px solid var(--border-glass);color:var(--text-secondary);cursor:pointer;background:#ffffff08;border-radius:99px;padding:10px 24px;font-size:.9rem;font-weight:700;transition:all .2s}.filter-tab:hover{color:#fff;background:#ffffff14;border-color:#fff3}.filter-tab.active{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue);box-shadow:0 4px 18px #64a0ff40}.media-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;display:grid}.media-card{border-radius:var(--radius-lg);border:1px solid var(--border-glass-strong);cursor:pointer;aspect-ratio:1;background:#0d0d1180;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:0 10px 30px #0000004d}.media-card:hover{border-color:#ffffff40;transform:translateY(-4px);box-shadow:0 16px 40px #00000080}.media-preview-box{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.preview-glow-bg{opacity:.25;filter:blur(40px);transition:opacity .3s;position:absolute;inset:0}.media-card:hover .preview-glow-bg{opacity:.45}.preview-badge-layer{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-family:var(--font-brand);letter-spacing:.05em;background:#0006;border:1px solid #ffffff1a;padding:16px;font-size:1.15rem;transition:transform .3s;position:relative;transform:rotate(-3deg);box-shadow:0 10px 20px #0006}.media-card:hover .preview-badge-layer{transform:scale(1.08)rotate(1deg)}.media-overlay{opacity:0;z-index:5;background:linear-gradient(#0000 0%,#05050766 50%,#050507f2 100%);flex-direction:column;justify-content:flex-end;padding:20px;transition:opacity .25s;display:flex;position:absolute;inset:0}.media-card:hover .media-overlay{opacity:1}.media-overlay h3{color:#fff;margin:0 0 6px;font-size:1rem;font-weight:700}.media-overlay-meta{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:.75rem;display:flex}.media-category-tag{text-transform:uppercase;background:#ffffff1a;border-radius:99px;padding:3px 8px;font-size:.65rem;font-weight:700}.lightbox{z-index:10000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#020203f0;justify-content:center;align-items:center;padding:24px;display:none;position:fixed;inset:0}.lightbox.active{display:flex}.lightbox-content{border:1px solid var(--border-glass-strong);border-radius:var(--radius-xl);width:100%;max-width:900px;box-shadow:var(--shadow-menu);background:#0d0d11e6;grid-template-columns:1.2fr .8fr;display:grid;position:relative;overflow:hidden}.lightbox-preview-side{aspect-ratio:1;border-right:1px solid var(--border-glass);background:#111;justify-content:center;align-items:center;display:flex;position:relative}.lightbox-info-side{flex-direction:column;justify-content:space-between;padding:40px 32px;display:flex}.lightbox-info-side h2{margin:0 0 8px;font-family:OpenDyslexic,Outfit,sans-serif;font-size:1.6rem}.lightbox-desc{color:var(--text-secondary);margin-bottom:24px;font-size:.95rem;line-height:1.5}.lightbox-meta-list{flex-direction:column;gap:12px;margin-bottom:40px;display:flex}.lightbox-meta-item{border-bottom:1px solid var(--border-glass);justify-content:space-between;padding-bottom:8px;font-size:.85rem;display:flex}.lightbox-meta-label{color:var(--text-secondary)}.lightbox-meta-value{font-weight:700}.lightbox-close-btn{border:1px solid var(--border-glass);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;z-index:10;background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;transition:all .2s;display:flex;position:absolute;top:16px;right:16px}.lightbox-close-btn:hover{color:#fff;background:#ffffff1a}@media (width<=768px){.lightbox-content{grid-template-columns:1fr}.lightbox-preview-side{aspect-ratio:16/10}}