/**
 * "{Category} Categories" child-category cards on a material_types term page
 * (material_children EVA). Compact responsive grid — 1-up on phones, 3-4-up on
 * wider screens. Each card: category name + a short blurb. Adapted from the
 * services child-cards grid (material_types has no iconic image).
 */

.material-children__title {
  margin: 2.5rem 0 0;
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--bo-ink, #1a1613);
}

/* The EVA renders rows directly under .view, header in a <header>. Grid the
   view itself; the header spans all columns. */
.view.view-material-children {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 34rem) {
  .view.view-material-children {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.1rem;
  }
}

.view.view-material-children > header {
  grid-column: 1 / -1;
  margin-bottom: 0.25rem;
}

.view-material-children .material-card {
  border: 1px solid var(--bo-sand, #e7dcc9);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.view-material-children .material-card:hover {
  border-color: var(--bo-orange, #cb6015);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.view-material-children .views-field-name {
  padding: 0.8rem 1rem 0.4rem;
}

.view-material-children .views-field-name a {
  font-family: Oswald, "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  line-height: 1.15;
  color: var(--bo-ink, #1a1613);
  text-decoration: none;
}

.view-material-children .material-card:hover .views-field-name a,
.view-material-children .views-field-name a:hover {
  color: var(--bo-orange, #cb6015);
}

.view-material-children .views-field-field-public-description {
  padding: 0 1rem 0.9rem;
  color: var(--bo-muted, #6b5d4f);
  font-size: 0.9rem;
  line-height: 1.4;
}