/* STEP 04 | Mobile HOME only. Never changes PC or Magazine/Places. */
@media (max-width:820px){
  body.page-home .home-hero__copy,
  body.page-home .featured-story,
  body.page-home .d2n-category-story {min-width:0}
  body.page-home .home-hero__copy h1,
  body.page-home .featured-story__overlay h2,
  body.page-home .d2n-category-section__head h2,
  body.page-home .d2n-category-story h3 {overflow-wrap:break-word;word-break:normal}
  /* Long category names must not collide with VIEW ALL or the section number. */
  body.page-home .d2n-category-section__head {align-items:flex-start;gap:8px}
  body.page-home .d2n-category-section__identity {min-width:0;flex:1 1 auto;align-items:flex-start;gap:9px}
  body.page-home .d2n-category-section__identity > div {min-width:0}
  body.page-home .d2n-category-section__more {flex:0 0 auto;min-height:38px;margin-top:8px}
  body.page-home .d2n-category-chip {min-width:0}
  body.page-home .d2n-category-chip > strong {overflow-wrap:anywhere}
  /* Account for fixed mobile header when category chips are tapped. */
  body.page-home .d2n-category-section {scroll-margin-top:88px}
  body.page-home .featured-story__media img,
  body.page-home .d2n-category-story__media img {object-position:center}
}
@media (max-width:390px){
  body.page-home .d2n-category-section__identity {gap:7px}
  body.page-home .d2n-category-section__number {font-size:24px!important}
  body.page-home .d2n-category-section__head h2 {font-size:21px!important;line-height:1.12!important}
  body.page-home .d2n-category-section__more {padding-inline:9px!important;font-size:9px!important}
  body.page-home .hero-actions {gap:7px}
  body.page-home .hero-actions .button {min-width:0}
}


/* =============================================================
   MOBILE EDITORIAL / STAGE 01 - HOME HERO ONLY (2026-10-19)
   Localized copy remains untouched. Header, category feed, PC
   and Magazine styles intentionally excluded from this stage.
   ============================================================= */
@media (max-width:820px) {
  html[lang] body.page-home .home-hero {
    width:calc(100% - 20px) !important;
    padding-block:10px 12px !important;
    gap:11px !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
  html[lang] body.page-home .home-hero__copy {
    min-height:0 !important;
    padding:20px 16px 18px !important;
    border-radius:18px !important;
    justify-content:flex-start !important;
  }
  html[lang] body.page-home .home-hero__kicker {
    gap:7px !important;
    align-items:center !important;
  }
  html[lang] body.page-home .home-hero__kicker .eyebrow {
    font-size:10px !important;
    line-height:1.3 !important;
    letter-spacing:1px !important;
  }
  html[lang] body.page-home .home-hero__issue {
    font-size:9px !important;
    line-height:1.35 !important;
    letter-spacing:.6px !important;
  }
  html[lang] body.page-home .home-hero__copy h1 {
    margin-top:10px !important;
    font-size:clamp(35px,9.5vw,38px) !important;
    line-height:1.03 !important;
    letter-spacing:-1.15px !important;
    text-wrap:balance !important;
    overflow-wrap:break-word !important;
  }
  html[lang] body.page-home .home-hero__copy p {
    margin-top:10px !important;
    font-size:14px !important;
    line-height:1.49 !important;
    color:#d0c9c1 !important;
  }
  html[lang] body.page-home .hero-actions {
    margin-top:14px !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
  }
  html[lang] body.page-home .hero-actions .button {
    min-width:0 !important;
    min-height:44px !important;
    padding-inline:7px !important;
    font-size:clamp(10px,2.8vw,12px) !important;
    line-height:1.24 !important;
    white-space:normal !important;
    text-align:center !important;
  }
  /* One uninterrupted 16:9 artwork, followed by readable editorial copy. */
  html[lang] body.page-home .featured-story {
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    border-radius:18px !important;
    background:#0c0b0f !important;
  }
  html[lang] body.page-home .featured-story__media {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9 !important;
    overflow:hidden !important;
    flex:none !important;
    background:#09090b !important;
  }
  html[lang] body.page-home .featured-story__media img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  html[lang] body.page-home .featured-story__media::after {
    background:linear-gradient(180deg,transparent 76%,rgba(0,0,0,.14)) !important;
  }
  html[lang] body.page-home .featured-story__topline {
    top:11px !important;
    inset-inline:11px !important;
    gap:7px !important;
  }
  html[lang] body.page-home .featured-story__topline>strong,
  html[lang] body.page-home .featured-story__topline i {
    font-size:9px !important;
    line-height:1.25 !important;
  }
  html[lang] body.page-home .featured-story__topline>span {
    font-size:9px !important;
  }
  html[lang] body.page-home .featured-story__overlay {
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    padding:15px 15px 17px !important;
    background:#0c0b0f !important;
  }
  html[lang] body.page-home .featured-story__overlay::before {
    margin-bottom:7px !important;
    font-size:9px !important;
    letter-spacing:.65px !important;
  }
  html[lang] body.page-home .featured-story h2 {
    display:block !important;
    margin:0 !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    font-size:clamp(21px,5.45vw,23px) !important;
    line-height:1.14 !important;
    letter-spacing:-.35px !important;
    text-wrap:pretty !important;
    overflow-wrap:break-word !important;
  }
  html[lang] body.page-home .featured-story p {
    margin-top:9px !important;
    color:#c9c2bd !important;
    font-size:13px !important;
    line-height:1.49 !important;
    -webkit-line-clamp:2 !important;
  }
  html[lang] body.page-home .featured-story .story-link {
    display:inline-flex !important;
    align-items:center !important;
    margin-top:10px !important;
    min-height:29px !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }
  html[lang] body.page-home .featured-story--empty {
    min-height:150px !important;
  }
}
@media (min-width:410px) and (max-width:820px) {
  html[lang] html[lang] body.page-home .home-hero__copy h1 {font-size:clamp(30px,7.2vw,37px) !important}
  html[lang] html[lang] body.page-home .featured-story h2 {font-size:clamp(20px,4.8vw,23px) !important}
}
@media (max-width:360px) {
  html[lang] body.page-home .home-hero__copy {padding-inline:14px !important}
  html[lang] body.page-home .home-hero__copy h1 {font-size:34px !important}
  html[lang] body.page-home .home-hero__copy p {font-size:13.5px !important}
  html[lang] body.page-home .featured-story h2 {font-size:22px !important}
  html[lang] body.page-home .featured-story__topline i {font-size:8px !important}
}


/* =============================================================
   MOBILE EDITORIAL / STAGE 02 - HOME CATEGORY + STORY READABILITY
   Scope: HOME only; max 820px. HERO from Stage 01 unchanged.
   Preserve PC, Magazine, Places, 10 locales, 16:9, contact UI.
   ============================================================= */
@media (max-width:820px) {
  html[lang] body.page-home .d2n-category-deck {
    width:calc(100% - 20px) !important;
    padding:14px 0 17px !important;
  }
  html[lang] body.page-home .d2n-category-deck__intro {
    margin-bottom:11px !important;
  }
  html[lang] body.page-home .d2n-category-deck__intro .eyebrow {
    font-size:10px !important;
    line-height:1.3 !important;
    letter-spacing:1px !important;
  }
  /* All six topics visible: no horizontal swipe required. */
  html[lang] body.page-home .d2n-category-deck__rail {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    overflow:visible !important;
    padding:0 !important;
    scroll-snap-type:none !important;
  }
  html[lang] body.page-home .d2n-category-chip {
    width:100% !important;
    min-width:0 !important;
    min-height:60px !important;
    padding:10px 9px !important;
    grid-template-columns:16px minmax(0,1fr) 24px !important;
    gap:6px !important;
    border-radius:13px !important;
  }
  html[lang] body.page-home .d2n-category-chip>span {
    font-size:10px !important;
    line-height:1.2 !important;
  }
  html[lang] body.page-home .d2n-category-chip>strong {
    display:block !important;
    min-width:0 !important;
    overflow:visible !important;
    font-size:clamp(11px,3vw,13px) !important;
    line-height:1.25 !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  html[lang] body.page-home .d2n-category-chip>i {
    width:24px !important;
    height:24px !important;
    color:#d8b86a !important;
    font-size:12px !important;
  }
  html[lang] body.page-home .d2n-category-section {
    width:calc(100% - 20px) !important;
    padding-block:25px 28px !important;
    scroll-margin-top:82px !important;
  }
  html[lang] body.page-home .d2n-category-section__head {
    align-items:flex-start !important;
    gap:8px !important;
    margin-bottom:12px !important;
  }
  html[lang] body.page-home .d2n-category-section__identity {
    flex:1 1 auto !important;
    min-width:0 !important;
    align-items:flex-start !important;
    gap:7px !important;
  }
  html[lang] body.page-home .d2n-category-section__identity>div {
    min-width:0 !important;
  }
  html[lang] body.page-home .d2n-category-section__number {
    margin-top:16px !important;
    font-size:26px !important;
    line-height:1 !important;
  }
  html[lang] body.page-home .d2n-category-section__identity .eyebrow {
    font-size:10px !important;
    line-height:1.25 !important;
  }
  html[lang] body.page-home .d2n-category-section__head h2 {
    margin-top:4px !important;
    font-size:clamp(20px,5.6vw,25px) !important;
    line-height:1.15 !important;
    text-wrap:pretty !important;
    overflow-wrap:break-word !important;
  }
  html[lang] body.page-home .d2n-category-section__more {
    min-height:40px !important;
    margin-top:6px !important;
    padding-inline:11px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  html[lang] body.page-home .d2n-category-stories,
  html[lang] body.page-home .d2n-category-stories.count-1,
  html[lang] body.page-home .d2n-category-stories.count-2,
  html[lang] body.page-home .d2n-category-stories.count-3 {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }
  html[lang] body.page-home .d2n-category-story,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story {
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    border-radius:16px !important;
    background:#0d0c0f !important;
  }
  html[lang] body.page-home .d2n-category-story__media,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story__media {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:16/9 !important;
    flex:none !important;
  }
  html[lang] body.page-home .d2n-category-story__media img,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story__media img {
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#08080a !important;
  }
  html[lang] body.page-home .d2n-category-story__media::after,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story__media::after {
    background:linear-gradient(180deg,transparent 75%,rgba(0,0,0,.16)) !important;
  }
  html[lang] body.page-home .d2n-category-story__index {
    width:29px !important;
    height:29px !important;
    font-size:10px !important;
  }
  html[lang] body.page-home .d2n-category-story__body,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story__body {
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-height:0 !important;
    padding:14px 15px 13px !important;
    background:#0d0c0f !important;
  }
  html[lang] body.page-home .d2n-category-story__category,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story__category {
    font-size:10px !important;
    line-height:1.25 !important;
    letter-spacing:.6px !important;
  }
  html[lang] body.page-home .d2n-category-story h3,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story h3 {
    display:block !important;
    max-width:100% !important;
    margin:7px 0 0 !important;
    overflow:visible !important;
    -webkit-line-clamp:unset !important;
    font-size:clamp(19px,5vw,22px) !important;
    line-height:1.18 !important;
    letter-spacing:-.3px !important;
    overflow-wrap:break-word !important;
    text-wrap:pretty !important;
  }
  html[lang] body.page-home .d2n-category-story p,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story p {
    display:-webkit-box !important;
    max-width:100% !important;
    margin:9px 0 0 !important;
    overflow:hidden !important;
    color:#c2bbb4 !important;
    font-size:13px !important;
    line-height:1.5 !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
  }
  html[lang] body.page-home .d2n-category-story__foot,
  html[lang] body.page-home .d2n-category-stories.count-1 .d2n-category-story__foot {
    display:flex !important;
    min-height:38px !important;
    margin-top:10px !important;
    padding-top:9px !important;
    font-size:11px !important;
    line-height:1.2 !important;
    letter-spacing:.35px !important;
    color:#d3c8b9 !important;
  }
  html[lang] body.page-home .d2n-category-story__foot b {
    width:28px !important;
    height:28px !important;
    font-size:12px !important;
  }
}
@media (max-width:360px) {
  html[lang] body.page-home .d2n-category-chip {
    grid-template-columns:14px minmax(0,1fr) 22px !important;
    gap:5px !important;
    padding-inline:7px !important;
  }
  html[lang] body.page-home .d2n-category-chip>strong {font-size:11px !important}
  html[lang] body.page-home .d2n-category-section__head h2 {font-size:19px !important}
  html[lang] body.page-home .d2n-category-section__more {
    padding-inline:8px !important;
    font-size:10px !important;
  }
}
html[lang="th"] body.page-home .d2n-category-section__head h2,
html[lang="hi"] body.page-home .d2n-category-section__head h2,
html[lang="ar"] body.page-home .d2n-category-section__head h2 {
  line-height:1.28 !important;
}