/* ===============================
   Article page mobile improvements
   Scope: .ms-article
   =============================== */

/* crumbs: compact on mobile */
.ms-article .ms-article__crumbTitle{
  display:inline-block;
  max-width: 52ch;
  overflow:hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Mobile defaults */
@media (max-width: 991.98px){

  /* Minder “bovenruimte” */
  .ms-article .ms-article__hero{ padding-top: 10px; padding-bottom: 10px; }
  .ms-article .ms-article__crumbs{ padding-top: 10px; padding-bottom: 0; }

  /* Hero: stack, sidecard verdwijnt (desktop-only) */
  .ms-article .ms-article__heroWrap{
    display: block !important;
  }
  .ms-article .ms-article__sideCard{
    display: none !important;
  }

  /* Hero-card compacter */
  .ms-article .ms-article__heroCard{
    padding: 14px !important;
  }

  /* Titel/sub compacter */
  .ms-article .ms-article__title{
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin-top: 10px !important;
  }
  .ms-article .ms-article__sub{
    margin-top: 6px !important;
    font-size: 13.5px !important;
    opacity: .85;
  }

  /* Meta pills uit op mobiel (scheelt hoogte) */
  .ms-article .ms-article__metaRow{
    display:none !important;
  }

  /* Actions: wrap netjes, minder dominant */
  .ms-article .ms-article__actions{
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
  }

  /* Mobile cover: laag en mooi */
  .ms-article .ms-article__coverMobile{
    display:block !important;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 150px;
    background: rgba(0,0,0,.06);
  }
  .ms-article .ms-article__coverMobile img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }
  .ms-article .ms-article__coverBadge{
    position:absolute;
    left:10px;
    bottom:10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    background: rgba(0,0,0,.55);
    color: #fff;
    backdrop-filter: blur(6px);
  }

  /* Desktop cover hidden by default? (if your CSS shows both) */
  .ms-article .article-hero .cover{
    /* keep desktop aside hidden already */
  }

  /* TOC accordion on mobile */
  .ms-article .ms-article__tocMobile{
    margin-top: 10px;
  }
  .ms-article .ms-article__tocDetails{
    border: 1px solid rgba(31,35,40,.10);
    border-radius: 14px;
    background: rgba(31,35,40,.03);
    padding: 10px 12px;
  }
  .ms-article .ms-article__tocDetails > summary{
    cursor: pointer;
    font-weight: 900;
    list-style: none;
  }
  .ms-article .ms-article__tocDetails > summary::-webkit-details-marker{
    display:none;
  }
  .ms-article .ms-article__tocNav{
    margin-top: 10px;
    display: grid;
    gap: 8px;
  }
  .ms-article .ms-article__tocNav a{
    text-decoration: none;
  }
  .ms-article .ms-article__tocNav a.h3{
    padding-left: 10px;
    opacity: .9;
  }

  /* Content grid: 1 kolom op mobiel */
  .ms-article .ms-article__grid{
    display:block !important;
  }
  .ms-article .ms-article__asideCard{
    margin-top: 12px;
  }

  /* Prose: leesbaarheid */
  .ms-article .ms-article__prose{
    font-size: 16px;
    line-height: 1.65;
  }

  /* Views footer netjes */
  .ms-article .ms-article__views{
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(31,35,40,.10);
    color: rgba(31,35,40,.60);
    font-size: 12px;
    font-weight: 800;
    display:flex;
    gap:6px;
    flex-wrap: wrap;
    align-items:center;
  }
  .ms-article .ms-article__viewsToday{ opacity: .85; }

}

/* Desktop: hide mobile-only cover + toc accordion */
@media (min-width: 992px){
  .ms-article .ms-article__coverMobile{ display:none !important; }
  .ms-article .ms-article__tocMobile{ display:none !important; }
}