/* TPH STEP38F2
   Latest articles refinement
   1) Tablet shows 3 visible cards and still scrolls horizontally
   2) Navigation arrows sit centered on a full-width gray bar with low radius
*/

.tph38f2-latest-articles .tph38f2-articles-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  gap:12px !important;
  scroll-snap-type:x proximity !important;
  -webkit-overflow-scrolling:touch !important;
}
.tph38f2-latest-articles .tph38f2-articles-track::-webkit-scrollbar{
  height:8px;
}
.tph38f2-latest-articles .tph38f2-article-card{
  scroll-snap-align:start !important;
  flex:0 0 auto !important;
}

/* Full-width nav bar in all views */
.tph38f2-latest-articles .tph38f2-articles-nav{
  display:flex !important;
  width:100% !important;
  box-sizing:border-box !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px 12px !important;
  margin:14px 0 0 0 !important;
  background:#e5e7eb !important;
  border:1px solid #d1d5db !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
.tph38f2-latest-articles .tph38f2-articles-nav button,
.tph38f2-latest-articles .tph38f2-articles-nav .nav-btn,
.tph38f2-latest-articles .tph38f2-articles-nav .arrow{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  margin:0 !important;
  background:#ffffff !important;
  border:1px solid #cbd5e1 !important;
  border-radius:8px !important;
  box-shadow:none !important;
}

/* Tablet: 3 visible columns and scroll */
@media (min-width:651px) and (max-width:850px){
  .tph38f2-latest-articles .tph38f2-article-card{
    flex:0 0 calc((100% - 24px) / 3) !important;
    width:calc((100% - 24px) / 3) !important;
    max-width:calc((100% - 24px) / 3) !important;
    min-width:calc((100% - 24px) / 3) !important;
  }
}

/* Desktop: keep scroller feel and show multiple cards */
@media (min-width:851px){
  .tph38f2-latest-articles .tph38f2-article-card{
    flex:0 0 18.5% !important;
    min-width:18.5% !important;
    max-width:18.5% !important;
  }
}

/* Mobile: keep horizontal scroll with smaller cards */
@media (max-width:650px){
  .tph38f2-latest-articles .tph38f2-article-card{
    flex:0 0 44% !important;
    width:44% !important;
    max-width:44% !important;
    min-width:44% !important;
  }
}