:root{ --mag-accent: #0b5ed7; --mag-muted:#6c757d }
.mag-hero{ display:flex; gap:1.25rem; margin-bottom:1.5rem; align-items:center }
.mag-hero .cover{ flex:0 0 42%; border-radius:10px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.08) }
.mag-hero .cover img{ width:100%; height:380px; object-fit:cover; display:block }
.mag-hero .meta{ flex:1 }
.mag-hero .meta h1{ margin:0 0 .5rem 0; font-size:1.75rem }
.mag-hero .meta .badge{ background:var(--mag-accent); color:#fff; padding:.45rem .7rem; border-radius:.35rem; font-weight:600 }
.mag-controls{ display:flex; gap:.75rem; align-items:center; margin-bottom:1rem }
.mag-controls .form-control{ max-width:280px }
.mag-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem }
.mag-card{ background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(11,61,145,0.06); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease }
.mag-card:hover{ transform:translateY(-6px); box-shadow:0 14px 32px rgba(11,61,145,0.12) }
.mag-card .thumb{ height:220px; background:#f6f7f9; display:flex; align-items:center; justify-content:center }
.mag-card img{ width:100%; height:100%; object-fit:cover; display:block }
.mag-card .info{ padding:.6rem .75rem }
.mag-card .info h6{ margin:0; font-size:.95rem }
.mag-card .info .actions{ margin-top:.5rem }
.mag-modal-img{ max-height:70vh; width:auto; max-width:100%; }
@media (max-width:768px){ .mag-hero{ flex-direction:column } .mag-hero .cover img{ height:260px } }