.materials-hero { max-width: 860px; }
.materials-hero > p:last-child { max-width: 550px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.materials-filter { display: flex; flex-wrap: wrap; gap: .55rem; margin: 3rem 0 1.5rem; }
.materials-filter a { padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .86rem; }
.materials-filter a.active,
.materials-filter a:hover { border-color: var(--dark); color: var(--on-dark); background: var(--dark); }
.materials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.material-card { display: flex; min-height: 390px; flex-direction: column; background: var(--surface); }
.material-cover { display: block; height: 190px; overflow: hidden; }
.material-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.material-card:hover .material-cover img { transform: scale(1.04); }
.material-card-body { display: flex; flex: 1; flex-direction: column; padding: 1.4rem; }
.material-card h2 { margin-bottom: .8rem; font-size: 1.55rem; line-height: 1.02; }
.material-card p:not(.card-meta) { color: var(--muted); font-size: .92rem; line-height: 1.5; }
.materials-empty { padding: 2rem 0; color: var(--muted); }

@media (max-width: 850px) {
  .materials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .materials-grid { grid-template-columns: 1fr; }
  .material-cover { height: 220px; }
}