body {
  overscroll-behavior-y: contain;
}

.articles-list {
  list-style: none;
  
 
   gap: 1.2rem;
  margin: 2rem 0;
}

.article-item {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: 900px;
   margin-left: auto;
  margin-right: auto;   
}

.article-image {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.article-item h2 {
  margin: 0 0 1.5rem 0;
}

.article-item h2 a {
  text-decoration: none;
  color: #000;
  position: relative; /* needed for ::after positioning */
}

.article-item h2 a::after {
  content: "";
  position: absolute;
  bottom: -2px; /* just below the text */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ff6500;

  transform: scaleX(0);
  transform-origin: center; /* start animation from the middle */
  transition: transform 200ms ease-in-out;
}

.article-item h2 a:hover::after {
  transform: scaleX(1);
}


.article-item p {
  margin: 0;
  color: #555;
}

.article-text {
  display: flex;
  flex-direction: column; /* stack title & description vertically */
}

.article-topics {
  list-style: none;
  padding: 0;
  margin: 0.5em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.article-topic {
  background: #eee;
  color: #333;
  padding: 0.2em 0.6em;
  border-radius: 0.3em;
  font-size: 0.85em;
}

@media (max-width: 600px) {
  .article-item h2 a::after {
    content: none;   /* remove the pseudo-element entirely */
  }
}

/* Mobile layout: image + title on row 1, description on row 2, tags on row 3 */
@media (max-width: 600px) {
  .article-item {
    display: grid;
    grid-template-columns: 56px 1fr;       /* small image column + flexible text */
    grid-template-areas:
      "image title"
      "desc  desc"
      "topics topics";
    column-gap: 0.75rem;
    align-items: start;
    padding-bottom: 1rem;
  }

  /* Make .article-text’s children (h2, p, ul) participate in the parent grid */
  .article-text {
    display: contents;
  }

  .article-image {
    grid-area: image;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    margin: 0;
    flex-shrink: 0;
  }

  .article-text h2 {
    grid-area: title;
    font-size: 1.1rem;
    margin: 0 0 0.25rem 0;
  }

  .article-item p {
    grid-area: desc;
    font-size: 0.95rem;
    margin: 0.25rem 0 0.25rem 0;
    color: #555;
  }

  .article-topics {
    grid-area: topics;
    margin: 0.25rem 0 0 0;
    gap: 0.4rem;
  }

  .article-topic {
    font-size: 0.8rem;
    padding: 0.15em 0.5em;
  }
}