/**
 * View row styles. Assign via Block Class on the view block, or as a
 * views-view wrapper class.
 * Built against the actual markup:
 *   .views-view-responsive-grid
 *     .views-view-responsive-grid__item
 *       .views-view-responsive-grid__item-inner
 *         .views-field-<first-field>   (e.g. field-initials, field-icon)
 *         .views-field-title / .views-field-name  (label field)
 */

/* ---------- Shared: both styles render as a responsive grid ---------- */
.view_style_1 .views-view-responsive-grid,
.view_style_2 .views-view-responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
@media (max-width: 575.98px) {
  .view_style_1 .views-view-responsive-grid,
  .view_style_2 .views-view-responsive-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ---------- view_style_1: marker-list rows, random-colored dash ---------- */
.view_style_1 .views-view-responsive-grid__item-inner {
  position: relative;
  padding-left: 1.5rem;
  list-style: none;
}
.view_style_1 .views-view-responsive-grid__item-inner::before {
  content: "\2013"; /* – */
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--row-marker-color, var(--color-primary, #86190E));
}
.view_style_1 .views-view-responsive-grid__item:nth-child(5n+1) .views-view-responsive-grid__item-inner { --row-marker-color: var(--color-primary, #86190E); }
.view_style_1 .views-view-responsive-grid__item:nth-child(5n+2) .views-view-responsive-grid__item-inner { --row-marker-color: var(--color-accent, #F0B23E); }
.view_style_1 .views-view-responsive-grid__item:nth-child(5n+3) .views-view-responsive-grid__item-inner { --row-marker-color: var(--color-footer-bg, #19303E); }
.view_style_1 .views-view-responsive-grid__item:nth-child(5n+4) .views-view-responsive-grid__item-inner { --row-marker-color: #2E7D32; }
.view_style_1 .views-view-responsive-grid__item:nth-child(5n+5) .views-view-responsive-grid__item-inner { --row-marker-color: #6A4C93; }

/* ---------- view_style_2: first field as a background-image badge ---------- */
.view_style_2 .views-view-responsive-grid__item-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #FAF9F6;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
.view_style_2 .views-view-responsive-grid__item-inner > *:first-child {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background-color: var(--row-badge-color, var(--color-primary, #86190E));
  background-size: cover;
  background-position: center;
}
.view_style_2 .views-view-responsive-grid__item:nth-child(5n+1) .views-view-responsive-grid__item-inner > *:first-child { --row-badge-color: var(--color-primary, #86190E); }
.view_style_2 .views-view-responsive-grid__item:nth-child(5n+2) .views-view-responsive-grid__item-inner > *:first-child { --row-badge-color: var(--color-accent, #F0B23E); }
.view_style_2 .views-view-responsive-grid__item:nth-child(5n+3) .views-view-responsive-grid__item-inner > *:first-child { --row-badge-color: var(--color-footer-bg, #19303E); }
.view_style_2 .views-view-responsive-grid__item:nth-child(5n+4) .views-view-responsive-grid__item-inner > *:first-child { --row-badge-color: #2E7D32; }
.view_style_2 .views-view-responsive-grid__item:nth-child(5n+5) .views-view-responsive-grid__item-inner > *:first-child { --row-badge-color: #6A4C93; }