/* =========================================
   List Directory Header
========================================= */
.list-directory-header{
  max-width: 820px;
}

.list-directory-intro{
  max-width: 760px;
  margin-bottom: 0;
  color: var(--bs-body-color);
  font-size: 1.075rem;
  line-height: 1.7;
}

/* =========================================
   List Groups
========================================= */
.list-directory-groups{
  display: grid;
  gap: 1.25rem;
}

.list-group-section{
  padding: 1.25rem;
  border: 1px solid rgba(33, 37, 41, .10);
  border-radius: var(--radius-card);
  background: var(--bs-white);
  box-shadow: var(--shadow-card);
}

.list-group-heading{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1rem;
}

.list-group-heading h2{
  margin-bottom: .25rem;
  color: var(--brand-accent-dark);
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.25;
}

.list-group-heading p{
  margin-bottom: 0;
  color: var(--bs-secondary-color);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.list-count{
  align-self: flex-start;
  padding: .3rem .55rem;
  border: 1px solid rgba(var(--bs-primary-rgb), .18);
  border-radius: 999px;
  background: var(--brand-accent-soft);
  color: var(--brand-accent-dark);
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
}

.list-link-grid,
.list-featured-links{
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.list-link-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .55rem;
}

.list-link-grid-compact{
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.list-link-grid a{
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: .55rem .7rem;
  border: 1px solid rgba(33, 37, 41, .10);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .95rem;
  line-height: 1.25;
  text-decoration: none;
}

.list-link-grid a:hover,
.list-link-grid a:focus{
  border-color: rgba(var(--bs-primary-rgb), .35);
  background: var(--brand-accent-soft);
  color: var(--brand-accent-dark);
}

.list-featured-links{
  display: grid;
  gap: .75rem;
}

.list-featured-links a{
  display: grid;
  gap: .25rem;
  padding: .85rem;
  border: 1px solid rgba(33, 37, 41, .10);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  text-decoration: none;
}

.list-featured-links a:hover,
.list-featured-links a:focus{
  border-color: rgba(var(--bs-primary-rgb), .35);
  background: var(--brand-accent-soft);
}

.list-featured-title{
  color: var(--bs-body-color);
  font-weight: 650;
  line-height: 1.25;
}

.list-featured-description{
  color: var(--bs-secondary-color);
  font-size: var(--fs-small);
  line-height: 1.45;
}

/* =========================================
   Sidebar
========================================= */
.list-directory-sidebar{
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px){
  .list-group-section{
    padding: 1.5rem;
  }

  .list-group-heading{
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
  }
}

@media (min-width: 992px){
  .list-directory-sidebar{
    position: sticky;
    top: 88px;
  }
}