/* =========================================================
   DANANG2NITE — PHASE 80
   PC MAGAZINE MASTER -> ALL NON-EN LOCALES
   - LIST: uniform 3-column 16:9 editorial cards
   - LIST: hide uploading placeholders
   - VIEW: viewport-sticky article index
   - VIEW: tighter article-end/footer handoff
   - locale-safe typography + RTL details only
   ========================================================= */

@media (min-width:821px){
  /* ---------- MAGAZINE LIST ---------- */
  html:not([lang="en"]) body.page-magazine-list .d2n-index-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    align-items:stretch!important;
    grid-auto-flow:row!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:first-child,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:not(:first-child){
    grid-column:auto!important;
    grid-row:auto!important;
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:20px!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card__media,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__media,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__media{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-height:0!important;
    aspect-ratio:16/9!important;
    flex:0 0 auto!important;
    overflow:hidden!important;
    background:#09090b!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card__media img,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__media img{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#09090b!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card__number,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__number{
    top:14px!important;
    right:14px!important;
    bottom:auto!important;
    width:38px!important;
    height:38px!important;
    font-size:10px!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card__body,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__body,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__body{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    min-height:196px!important;
    padding:19px 19px 17px!important;
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card h2,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:first-child h2,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:not(:first-child) h2{
    max-width:100%!important;
    margin-top:9px!important;
    font-size:22px!important;
    line-height:1.12!important;
    letter-spacing:-.35px!important;
    text-shadow:none!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card p,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:first-child p,
  html:not([lang="en"]) body.page-magazine-list .d2n-index-card:not(:first-child) p{
    max-width:100%!important;
    margin-top:10px!important;
    font-size:13px!important;
    line-height:1.5!important;
    -webkit-line-clamp:2!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card__foot{
    margin-top:auto!important;
    padding-top:11px!important;
  }

  html:not([lang="en"]) body.page-magazine-list .d2n-index-card.is-placeholder{
    display:none!important;
  }

  /* CJK: slightly tighter headline footprint. */
  html[lang^="zh"] body.page-magazine-list .d2n-index-card h2,
  html[lang="ja"] body.page-magazine-list .d2n-index-card h2,
  html[lang="ko"] body.page-magazine-list .d2n-index-card h2{
    font-size:21px!important;
    line-height:1.16!important;
    letter-spacing:-.2px!important;
  }

  /* Thai / Hindi need a touch more vertical breathing room. */
  html[lang="th"] body.page-magazine-list .d2n-index-card h2,
  html[lang="hi"] body.page-magazine-list .d2n-index-card h2{
    font-size:20px!important;
    line-height:1.24!important;
  }

  html[lang="ar"] body.page-magazine-list .d2n-index-card h2{
    font-size:21px!important;
    line-height:1.26!important;
    letter-spacing:0!important;
  }

  html[dir="rtl"] body.page-magazine-list .d2n-index-card__number,
  html[dir="rtl"] body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__number{
    right:auto!important;
    left:14px!important;
  }

  /* ---------- MAGAZINE VIEW ---------- */
  html:not([lang="en"]) body.page-magazine-view .site-main{
    overflow:visible!important;
  }

  html:not([lang="en"]) body.page-magazine-view .magazine-reading{
    align-items:start!important;
  }

  html:not([lang="en"]) body.page-magazine-view .magazine-reading__rail{
    position:sticky!important;
    top:118px!important;
    align-self:start!important;
    height:max-content!important;
    z-index:4!important;
  }

  html:not([lang="en"]) body.page-magazine-view .magazine-toc{
    max-height:calc(100vh - 260px)!important;
    overscroll-behavior:contain;
  }

  html:not([lang="en"]) body.page-magazine-view .magazine-article-end{
    margin-top:52px!important;
    padding-top:22px!important;
    padding-bottom:46px!important;
  }

  /* Keep the sticky rail logical in RTL without forcing LTR geometry. */
  html[dir="rtl"] body.page-magazine-view .magazine-reading__rail,
  html[dir="rtl"] body.page-magazine-view .magazine-toc{
    direction:rtl;
    text-align:right;
  }
}