.stat-list-card {
  display: flex;
  background-color: var(--elevation-layer2-dark-solid);
  border-radius: 0.5rem;
  overflow: hidden;
  min-width: 0; // Allow flexbox to shrink
  height: 19.0625rem;
  width: 100%;

  // Remove featured image on mobile, show on md+
  &.has-featured {
    // Mobile: stack vertically or hide image
    @media (max-width: 800px) {
      .featured-image {
        display: none;
      }
    }
  }
}

.featured-image {
  position: relative;
  flex: 0 0 11.25rem; // Slightly smaller default
  background-color: var(--elevation-layer2-dark-solid);

  // Scale up on larger screens
  @media (min-width: 992px) {
    flex: 0 0 12.5rem;
  }

  @media (min-width: 1200px) {
    flex: 0 0 14.375rem;
  }

  app-image {
    display: block;
    width: 100%;
    height: 100%;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--elevation-layer2-dark-solid) 100%
    );
    pointer-events: none;
  }
}

.stat-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; // Critical for text-overflow to work
}

.stat-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--elevation-layer5);
  gap: 0.5rem; // Prevent title/label collision

  @media (max-width: 575.98px) {
    padding: 0.5rem 0.75rem;
  }
}

.stat-list-title {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.0312rem;
  color: var(--body-text-color);

  // Truncate long titles on small screens
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.stat-list-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.0312rem;
  color: var(--text-muted-color);
  flex-shrink: 0; // Keep label visible
}

.info-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.5rem;
  color: var(--text-muted-color);
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;

  &:hover,
  &:focus-visible {
    color: var(--body-text-color);
  }

  &:focus-visible {
    outline: 0.125rem solid var(--primary-color);
    outline-offset: 0.125rem;
    border-radius: 0.125rem;
  }
}

.stat-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto; // Allow scroll if content exceeds
}

.stat-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--elevation-layer2);
  color: var(--body-text-color);
  font-size: 0.9rem;

  @media (max-width: 575.98px) {
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
  }

  &:last-child {
    border-bottom: none;
  }

  &.clickable {
    cursor: pointer;

    &:hover {
      background-color: var(--elevation-layer3);
    }

    &:has(:focus-visible) {
      background-color: var(--elevation-layer3);
    }
  }
}

.accent-bar {
  width: 0.1875rem;
  height: 1.25rem;
  border-radius: 0.125rem;
  background-color: var(--elevation-layer6);
  flex-shrink: 0;
}

.ranking {
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  color: var(--text-muted-color);
  font-size: 0.85rem;
}

.item-image {
  flex-shrink: 0;
}

.item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-name-clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;

  &:hover,
  &:focus-visible {
    text-decoration-color: currentColor;
  }

  &:focus-visible {
    outline: 0.125rem solid var(--primary-color);
    outline-offset: 0.125rem;
    border-radius: 0.125rem;
  }
}

.item-link {
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;

  &:hover,
  &:focus-visible {
    text-decoration-color: currentColor;
  }

  &:focus-visible {
    outline: 0.125rem solid var(--primary-color);
    outline-offset: 0.125rem;
    border-radius: 0.125rem;
  }

  .item-name {
    display: block;
  }
}

.item-value {
  flex-shrink: 0;
  color: var(--text-muted-color);
  font-variant-numeric: tabular-nums;
}
