/* ===== ARTICLES LANDING PAGE ===== */

/* — Listing Section — */
.articles-listing{
  background:var(--white);padding:100px 0 120px;
}

/* — Article Group — */
.articles-group{
  margin-bottom:64px;
}
.articles-group:last-child{
  margin-bottom:0;
}
.articles-group-heading{
  font-weight:800;font-size:clamp(20px,2.5vw,28px);
  line-height:1.2;color:var(--indigo);
  margin-bottom:28px;padding-bottom:16px;
  border-bottom:1px solid rgba(20,20,64,.08);
}

/* — Article Group Grid — */
.articles-group-grid{
  display:flex;flex-direction:column;gap:24px;
}

/* — Article Card — */
.article-listing-card{
  display:block;
  background:var(--white);
  border:1px solid rgba(20,20,64,.06);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--ease-out-expo),box-shadow .4s,border-color .3s;
  text-decoration:none;color:inherit;
  position:relative;
}
.article-listing-card:hover{
  transform:translateY(-6px);
  border-color:rgba(38,55,244,.15);
  box-shadow:0 20px 50px rgba(20,20,64,.08);
}

/* — Card Body — */
.article-listing-body{
  padding:36px 40px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.article-listing-meta{
  display:flex;align-items:center;gap:12px;margin-bottom:8px;
}
.article-listing-body .article-tag{
  display:inline-block;padding:4px 14px;border-radius:20px;
  font-size:11px;font-weight:500;
  background:rgba(38,55,244,.07);color:var(--system-blue);
}
.article-read-time{
  font-size:12px;font-weight:400;color:rgba(20,20,64,.4);
}
.article-listing-body h3{
  font-weight:700;font-size:clamp(20px,2.5vw,26px);
  line-height:1.3;margin-bottom:8px;color:var(--indigo);
  transition:color .2s;
}
.article-listing-card:hover h3{color:var(--system-blue)}
.article-listing-body p{
  font-size:15px;font-weight:300;line-height:1.75;
  color:rgba(20,20,64,.55);margin-bottom:12px;
}
.article-listing-body .article-link{
  font-size:13px;font-weight:500;color:var(--system-blue);
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .3s;margin-top:auto;
}
.article-listing-card:hover .article-link{gap:12px}
.article-listing-body .article-link .arrow{transition:transform .3s}
.article-listing-card:hover .article-link .arrow{transform:translateX(3px)}

/* — Responsive — */
@media(max-width:900px){
  .article-listing-body{padding:26px}
}
@media(max-width:640px){
  .articles-listing{padding:60px 0 80px}
  .article-listing-body{padding:22px}
  .article-listing-body h3{font-size:18px}
  .articles-group{margin-bottom:48px}
  .articles-group-heading{font-size:20px}
}