/* The blog uses the same horizontal reading pattern in Discover and Today. */
.article-carousel-cue{
  display:flex;align-items:center;justify-content:space-between;gap:10px 18px;
  margin:4px 0 12px;padding:10px 13px;border-radius:10px;
  background:#fff;color:var(--ink);border:1px solid #c5d5f8;
  font:800 14px/1.3 'Plus Jakarta Sans',sans-serif;
}
.article-carousel-cue[hidden]{display:none}
.article-carousel-cue>span{display:flex;align-items:center;gap:9px}
.article-carousel-cue>span::before{
  content:'';width:20px;height:8px;flex:none;border-radius:8px;
  background:linear-gradient(90deg,#4a75e2 0 27%,transparent 27% 37%,#4a75e2 37% 64%,transparent 64% 74%,#4a75e2 74%);
}
.article-carousel-cue.is-nudging>span::before{animation:article-cue-drift 1.7s ease-in-out 2}
.article-carousel-cue>div{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.article-carousel-cue strong{color:#315bc9;font-size:13px;white-space:nowrap;margin-right:4px}
.article-carousel-cue button{
  min-height:40px;padding:7px 10px;border:1px solid #b7c8ee;border-radius:8px;
  background:#fff;color:#315bc9;cursor:pointer;font:800 13px 'Plus Jakarta Sans',sans-serif;
}
.article-carousel-cue button:hover{background:#eef3ff}
.article-carousel-cue button:disabled{opacity:.5;cursor:default}
@keyframes article-cue-drift{0%,100%{transform:translateX(0)}45%{transform:translateX(9px)}70%{transform:translateX(-4px)}}

.app-view .blog-grid,.today-view .today-article-list{
  display:flex;grid-template-columns:none;gap:13px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding-inline:2px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;padding:3px 36px 16px 2px;
}
.app-view .blog-grid>.blog-card,.today-view .today-article-list>.today-article{
  flex:0 0 min(355px,calc(100% - 60px));scroll-snap-align:start;
  min-width:0;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.app-view .blog-grid>.blog-card:hover,.app-view .blog-grid>.blog-card:focus-visible,
.today-view .today-article-list>.today-article:hover,.today-view .today-article-list>.today-article:focus-visible{
  transform:translateY(-4px);box-shadow:0 12px 25px rgba(20,54,66,.12);
}
.app-view .blog-grid>.loading{flex:1 0 100%}
@media(max-width:650px){
  .article-carousel-cue{display:block;padding:11px}
  .article-carousel-cue>div{justify-content:space-between;margin-top:9px}
  .article-carousel-cue button{min-height:42px}
  .app-view .blog-grid,.today-view .today-article-list{
    gap:11px;padding-right:36px;margin-right:-18px;
  }
  .app-view .blog-grid>.blog-card,.today-view .today-article-list>.today-article{
    flex-basis:min(82%,310px);
  }
}
@media(prefers-reduced-motion:reduce){
  .article-carousel-cue>span::before{animation:none}
  .app-view .blog-grid>.blog-card,.today-view .today-article-list>.today-article{transition:none}
}