/**
 * "Our {Category} Services" child-service cards on a services term page
 * (service_children EVA). Compact responsive grid — 2-up on phones, 3-4-up on
 * wider screens. Each card: a clipped iconic-image strip down the LEFT edge +
 * name/blurb on the right. Cards with no iconic image go full-width text.
 */

.service-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 (no .view-content wrapper), with the
   heading in a <header>. Grid the view itself; the header spans all columns. */
.view.view-service-children {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

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

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

/* Card shell. Default = single column (text only). */
.view-service-children .service-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--bo-sand, #e7dcc9);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

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

/* With an iconic image: a clip down the LEFT edge that fills the full card
   height, text on the right. The column width sets the strip width; the image
   cell stretches to the card's height and the photo covers it. */
.view-service-children .service-card:has(.views-field-field-iconic-image img) {
  grid-template-columns: 68px 1fr;
  grid-template-rows: auto 1fr;
}

.view-service-children .service-card:has(.views-field-field-iconic-image img) .views-field-field-iconic-image {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  height: 100%;
  overflow: hidden;
}

.view-service-children .service-card:has(.views-field-field-iconic-image img) .views-field-name,
.view-service-children .service-card:has(.views-field-field-iconic-image img) .views-field-field-service-public-desc {
  grid-column: 2;
}

.view-service-children .views-field-field-iconic-image {
  line-height: 0;
}

/* Force the whole wrapper chain (field-content > a > img) to full height so the
   photo fills the stretched grid cell top-to-bottom, not just its own height. */
.view-service-children .service-card:has(.views-field-field-iconic-image img) .views-field-field-iconic-image > .field-content,
.view-service-children .service-card:has(.views-field-field-iconic-image img) .views-field-field-iconic-image .field-content > a {
  display: block;
  height: 100%;
}

.view-service-children .views-field-field-iconic-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.view-service-children .views-field-name {
  align-self: start;
  padding: 0.8rem 1rem 0.4rem;
}

.view-service-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-service-children .service-card:hover .views-field-name a,
.view-service-children .views-field-name a:hover {
  color: var(--bo-orange, #cb6015);
}

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