/* STEP 04 | Mobile Magazine LIST only. Honors 16:9 covers and real reading actions. */
@media (max-width:820px){
  body.page-magazine-list .d2n-magazine-index-hero h1{
    font-size:clamp(34px,9.2vw,52px);line-height:1.05;letter-spacing:-1.1px;
    overflow-wrap:break-word;word-break:normal
  }
  body.page-magazine-list .d2n-magazine-index-hero p{font-size:13px;line-height:1.58;max-width:100%}
  body.page-magazine-list .d2n-index-category-nav {gap:7px;padding-block:12px 15px;scroll-padding-inline:9px}
  body.page-magazine-list .d2n-index-category-nav__item{border-radius:12px;min-height:54px}
  body.page-magazine-list .d2n-index-category-nav__item strong {font-size:10px;line-height:1.3;overflow-wrap:anywhere}
  body.page-magazine-list .d2n-index-category-nav__item span{font-size:9px}
  body.page-magazine-list .d2n-index-card{height:auto;min-width:0}
  body.page-magazine-list .d2n-index-card h2 {overflow-wrap:break-word;word-break:normal}
  body.page-magazine-list .d2n-index-card:focus-visible {outline:2px solid #e4c77d;outline-offset:3px}
}
/* Phone: 1 readable card per row. The former two-column grid hid summaries and CTAs. */
@media (max-width:600px){
  body.page-magazine-list .d2n-index-grid {
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;align-items:stretch!important
  }
  body.page-magazine-list .d2n-index-card,
  body.page-magazine-list .d2n-index-card:first-child,
  body.page-magazine-list .d2n-index-card:not(:first-child){
    display:flex!important;flex-direction:column!important;position:relative!important;
    min-height:0!important;grid-column:auto!important;border-radius:17px;
    background:#0c0b0e
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__media,
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__media,
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__media{
    position:relative!important;inset:auto!important;width:100%!important;
    height:auto!important;min-height:0!important;aspect-ratio:16/9!important;
    flex:0 0 auto!important;overflow:hidden!important
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__media img{
    width:100%!important;height:100%!important;object-fit:contain!important
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__media::after{
    background:linear-gradient(180deg,transparent 69%,rgba(0,0,0,.20) 100%)!important
  }
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__body,
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__body {
    position:relative!important;inset:auto!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;
    padding:13px 14px 12px!important;max-width:100%!important
  }
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__category,
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__category{
    font-size:10px!important;line-height:1.3!important;letter-spacing:.6px!important;
    color:#ff69a1!important
  }
  body.page-magazine-list .d2n-index-card:first-child h2,
  body.page-magazine-list .d2n-index-card:not(:first-child) h2{
    max-width:100%!important;margin:7px 0 0!important;
    color:#fffaf4!important;font-size:clamp(20px,4.6vw,23px)!important;
    line-height:1.18!important;letter-spacing:-.35px!important;
    text-shadow:none!important;display:-webkit-box!important;
    -webkit-box-orient:vertical!important;-webkit-line-clamp:4!important;
    overflow:hidden!important;overflow-wrap:break-word!important
  }
  body.page-magazine-list .d2n-index-card:first-child p,
  body.page-magazine-list .d2n-index-card:not(:first-child) p{
    display:-webkit-box!important;max-width:100%!important;margin:8px 0 0!important;
    color:#bcb3ac!important;font-size:12.5px!important;line-height:1.5!important;
    -webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;overflow:hidden!important
  }
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__foot,
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__foot{
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    min-height:36px!important;margin-top:10px!important;padding-top:9px!important;
    border-top:1px solid rgba(255,255,255,.085)!important;
    color:#d4c8bd!important;font-size:10px!important;font-weight:850!important
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__foot b{
    width:30px;height:30px;display:grid;place-items:center;
    border:1px solid rgba(217,185,110,.24);border-radius:50%;color:#e6c679
  }
  body.page-magazine-list .d2n-index-card__number{font-size:10px!important}
  /* Keep both social CTAs and pagination scrollable above the fixed contact bar. */
  body.page-magazine-list .d2n-magazine-index {padding-bottom:40px}
}
/* Wide mobile / tablet retains the compact editorial 2-column system. */
@media (min-width:601px) and (max-width:820px){
  body.page-magazine-list .d2n-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__body{padding:13px}
  body.page-magazine-list .d2n-index-card:not(:first-child) h2{font-size:17px;line-height:1.2}
  body.page-magazine-list .d2n-index-card:not(:first-child) p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.4;margin-top:7px}
}
/* Avoid Latin serif on non-Latin scripts; preserve the site's locale-specific type system. */
@media(max-width:600px){
  html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"],[lang="hi"],[lang="ar"])
  body.page-magazine-list .d2n-index-card h2{
    font-family:system-ui,-apple-system,"Segoe UI","Noto Sans",sans-serif!important;
    font-weight:800!important;letter-spacing:normal!important
  }
}


/* ============================================================
   MOBILE EDITORIAL STAGE 03 / MAGAZINE LIST ONLY / 2026-10-19
   Readability-only improvements; no desktop, home, view or
   shared nav changes. Preserve image 16:9 and locale/RTL.
   ============================================================ */
@media (max-width:820px){
  body.page-magazine-list .d2n-magazine-index-hero {
    width:calc(100% - 24px);
    padding-top:26px;
    padding-bottom:18px;
  }
  body.page-magazine-list .d2n-magazine-index-hero .eyebrow {
    font-size:11px;
    line-height:1.35;
    letter-spacing:1px;
  }
  body.page-magazine-list .d2n-magazine-index-hero h1 {
    margin-top:10px;
    font-size:clamp(31px,8vw,45px);
    line-height:1.08;
    letter-spacing:-.8px;
    text-wrap:pretty;
    overflow-wrap:break-word;
  }
  body.page-magazine-list .d2n-magazine-index-hero p {
    max-width:100%;
    margin-top:11px;
    font-size:14px;
    line-height:1.55;
  }
  body.page-magazine-list .d2n-magazine-index-hero::after {
    margin-top:12px;
    font-size:9px;
    line-height:1.4;
    letter-spacing:1.1px;
  }
  /* Preserve horizontal category browsing. Larger labels + touch targets. */
  body.page-magazine-list .d2n-index-category-nav {
    width:calc(100% - 12px);
    gap:8px;
    margin-inline:auto;
    padding:12px 4px 15px;
    scroll-padding-inline:4px;
  }
  body.page-magazine-list .d2n-index-category-nav__item {
    flex:0 0 150px;
    min-width:150px;
    min-height:52px;
    padding:9px 10px;
    grid-template-columns:23px minmax(0,1fr);
    gap:8px;
    border-radius:12px;
    overflow:visible;
  }
  body.page-magazine-list .d2n-index-category-nav__item span {
    width:23px;
    height:23px;
    font-size:10px!important;
    line-height:1;
  }
  body.page-magazine-list .d2n-index-category-nav__item strong {
    display:block;
    font-size:11.5px!important;
    line-height:1.25!important;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
  }
  body.page-magazine-list .d2n-index-category-nav__item:focus-visible,
  body.page-magazine-list .d2n-index-card:focus-visible {
    outline:2px solid #f1d58e;
    outline-offset:3px;
  }
  body.page-magazine-list .d2n-magazine-index {
    width:calc(100% - 20px);
    padding-top:12px;
    padding-bottom:100px;
  }
}

@media (max-width:600px){
  /* Full-width readable card: visual -> content -> action. */
  body.page-magazine-list .d2n-index-grid {
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  body.page-magazine-list .d2n-index-card,
  body.page-magazine-list .d2n-index-card:first-child,
  body.page-magazine-list .d2n-index-card:not(:first-child) {
    min-height:0!important;
    height:auto!important;
    border-radius:15px!important;
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__media,
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__media {
    width:100%!important;
    aspect-ratio:16 / 9!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__media img {
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__body,
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__body,
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__body {
    padding:14px 15px 13px!important;
    min-height:0!important;
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__category,
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__category,
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__category {
    font-size:11px!important;
    line-height:1.3!important;
    letter-spacing:.5px!important;
  }
  /* No clipped title: let the actual article title wrap naturally. */
  body.page-magazine-list .d2n-index-card h2,
  body.page-magazine-list .d2n-index-card:first-child h2,
  body.page-magazine-list .d2n-index-card:not(:first-child) h2 {
    display:block!important;
    overflow:visible!important;
    max-width:100%!important;
    -webkit-line-clamp:unset!important;
    font-size:clamp(20px,5.1vw,24px)!important;
    line-height:1.22!important;
    letter-spacing:-.25px!important;
    text-wrap:pretty!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
  body.page-magazine-list .d2n-index-card p,
  body.page-magazine-list .d2n-index-card:first-child p,
  body.page-magazine-list .d2n-index-card:not(:first-child) p {
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
    overflow:hidden!important;
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.55!important;
    margin-top:9px!important;
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__foot,
  body.page-magazine-list .d2n-index-card:first-child .d2n-index-card__foot,
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__foot {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:44px!important;
    margin-top:10px!important;
    padding-top:8px!important;
    font-size:12px!important;
    line-height:1.3!important;
  }
  body.page-magazine-list .d2n-index-card .d2n-index-card__foot b {
    width:34px!important;
    height:34px!important;
    flex:0 0 34px;
    font-size:15px!important;
  }
}

@media (min-width:601px) and (max-width:820px){
  body.page-magazine-list .d2n-index-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  body.page-magazine-list .d2n-index-card:not(:first-child) h2 {
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
    font-size:19px;
    line-height:1.22;
  }
  body.page-magazine-list .d2n-index-card:not(:first-child) p {
    display:-webkit-box;
    -webkit-line-clamp:3;
    font-size:13px;
    line-height:1.45;
  }
  body.page-magazine-list .d2n-index-card:not(:first-child) .d2n-index-card__foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:42px;
    font-size:11px;
  }
}

@media (max-width:820px){
  html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="th"],[lang="hi"],[lang="ar"])
  body.page-magazine-list .d2n-index-card h2 {
    font-family:system-ui,-apple-system,"Segoe UI","Noto Sans",sans-serif!important;
    letter-spacing:normal!important;
    line-height:1.28!important;
  }
}