:root {
  --articles-list-border: #000000;
  --articles-list-text-color: #000000;
}

html.dark-mode {
  --articles-list-border: #ffffff;
  --articles-list-text-color: #ffffff;
}

/* ensure the list looks sane */
.articles-list {
  list-style: none;
}

/* each item: keep border inside and clip overflow */
.articles-list li.selectable-box {
  border: 1px solid var(--articles-list-border);
  padding: 20px;
  background: transparent;
  overflow: hidden;      /* prevents children from poking outside the border */
}

/* make the anchor fill the li (better hit target) */
.articles-list li.selectable-box > a {
  display: block;
  color: var(--articles-list-text-color);
  text-decoration: none;
  outline: none;
}

/* content layout */
.article-body {
  display: flex;               /* explicitly set (overrides global) */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* allow text column to shrink/wrap correctly */
.article-body > div:first-child {
  flex: 1 1 auto;   /* grow and shrink */
  min-width: 0;     /* critical: lets this column become smaller instead of forcing overflow */
}

/* author column keeps its size, but is flexible on small screens */
.article-author {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex: 0 0 auto;   /* don't force the text column to expand to fit this */
  width: auto;
}

/* responsive avatar — will never overflow the container */
.article-author img {
  width: clamp(64px, 18vw, 128px); /* responsive but capped */
  height: clamp(64px, 18vw, 128px);
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* footer row */
.article-footer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin-top: 8px;
}

/* prevent long words / urls from breaking layout */
.articles-list h2,
.articles-list p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile layout: stack vertically */
@media (max-width: 640px) {
  .article-body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* author becomes a small horizontal block next to title/desc when helpful */
  .article-author {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
  }

  .article-author img {
    width: clamp(48px, 14vw, 96px);
    height: auto;
  }

  .article-footer {
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
  }
}