/* P67 home sections (VI 118 / EN 2894).
   News: 4 posts. Card 1 = one full-width featured card (>=992: image left 50% / text right, left-aligned, vertically centred; <=991 stacked).
   Cards 2-4 = 3 equal 1-col cards (vertical, image on top, badge on image). <=991: all 1 col.
   Specificity: 3 ids + !important (tear-guard.css sets a 2-col grid on #news-grid-home#news-grid-home). */
html body #news-grid-home#news-grid-home#news-grid-home {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: var(--sp-m) !important;
}
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card {
  min-width: 0 !important;
  overflow: hidden !important;
  flex-direction: column !important;
  text-align: left !important;
}
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card > .ics-torn-photo {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
}
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card > .ics-torn-photo > .nw-ci {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card > .nw-cb {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card:nth-child(1) {
  grid-column: 1 / -1 !important;
  flex-direction: row !important;
  align-items: center !important;
}
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card:nth-child(1) > .ics-torn-photo {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  align-self: stretch !important;
  aspect-ratio: auto !important;
  min-height: 100% !important;
}
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card:nth-child(1) > .nw-cb {
  flex: 1 1 0 !important;
  align-self: center !important;
  padding: var(--sp-l) !important;
}
@media (max-width: 991px) {
  html body #news-grid-home#news-grid-home#news-grid-home {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card:nth-child(1) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card:nth-child(1) > .ics-torn-photo {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }
}
/* P67 Cung ICS (owner 2026-11-05). Real ids: heading #h-tl, head #tl-head, eyebrow #eb-tl, video wrapper #tl-video (classes ics-torn-card ics-hover; no .tl-video or .h-tl class exists, so older rules never matched).
   Torn look = .ics-torn-card::before (paper mask) + ::after (page-coloured exclude mask), from uploads/ics-torn/ics-torn-card.css. Neutralised here by id. */
html body #ics-timeline#ics-timeline #h-tl {
  width: min(87.5%, 38rem);
  max-width: none;
  margin-inline: auto;
  text-align: center;
  text-wrap: balance;
}
html body #ics-timeline#ics-timeline #tl-head,
html body #ics-timeline#ics-timeline #eb-tl {
  text-align: center;
}
html body #ics-timeline#ics-timeline #tl-video#tl-video.ics-torn-card {
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
  filter: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
html body #ics-timeline#ics-timeline #tl-video#tl-video.ics-torn-card::before,
html body #ics-timeline#ics-timeline #tl-video#tl-video.ics-torn-card::after {
  display: none !important;
}
/* P67 owner 2026-11-05: news cards 2-4 get bottom room so the title does not touch the card edge. */
html body #news-grid-home#news-grid-home#news-grid-home > .nw-card:nth-child(n+2) > .nw-cb {
  padding-bottom: var(--sp-m) !important;
}
/* P67 owner 2026-11-05: row 1 = one full-width featured card; row 2 = 3 standard 1-col cards. Beats tear-guard.css first-child neutraliser (grid-column auto !important) by specificity. */
@media (min-width: 992px) {
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) { grid-column: 1 / -1 !important; flex-direction: row !important; align-items: center !important; min-height: 0 !important; }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) > .ics-torn-photo { flex: 0 0 50% !important; width: 50% !important; max-width: 50% !important; aspect-ratio: 4 / 3 !important; align-self: center !important; }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) > .nw-cb.nw-cb.nw-cb { flex: 1 1 0 !important; min-width: 0 !important; align-self: center !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; gap: var(--sp-s) !important; padding: var(--sp-xl) !important; text-align: left !important; box-sizing: border-box !important; }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) > .nw-cb.nw-cb.nw-cb > * { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) > .nw-cb.nw-cb.nw-cb .nw-tit.nw-tit { font-size: clamp(1.75rem, 2.4vw, 2.5rem) !important; line-height: 1.2 !important; text-wrap: balance !important; overflow-wrap: anywhere !important; margin: 0 !important; padding: 0 !important; }
}
@media (max-width: 991px) {
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) { grid-column: 1 / -1 !important; flex-direction: column !important; align-items: stretch !important; }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) > .ics-torn-photo { flex: none !important; width: 100% !important; max-width: none !important; aspect-ratio: 16 / 9 !important; }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(1) > .nw-cb.nw-cb.nw-cb { padding: var(--sp-m) !important; text-align: left !important; }
}

/* ===== H39 home news tablet grid (owner 2026-11-05, iPad portrait ~834px) =====
   600-991px: #news-grid-home = 2 equal columns; 4 cards = 2 x 2 (even count, no orphan, no span).
   Every card: thumb on top (4:3, same for all), text block below, title start-aligned.
   Gap token: var(--ics-grid-gap). Text padding token: var(--pc-pad) inline.
   Beats tear-guard.css first-child rules (42% row, grid-column auto) and the P67 <=991 1-col rule.
   <=599 phone stays 1 col (ics-home-sections.css <=991 rule). >=992 desktop bento untouched. */
@media (min-width: 600px) and (max-width: 991px) {
  html body #news-grid-home#news-grid-home#news-grid-home {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--ics-grid-gap) !important;
    column-gap: var(--ics-grid-gap) !important;
    row-gap: var(--ics-grid-gap) !important;
    align-items: stretch !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card {
    grid-column: auto !important;
    grid-row: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: start !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card > .ics-torn-photo {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    align-self: stretch !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card > .ics-torn-photo > .nw-ci {
    width: 100% !important;
    height: 100% !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card > .ics-torn-photo > .nw-ci img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card > .nw-cb.nw-cb.nw-cb {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: var(--sp-m) var(--pc-pad) !important;
    text-align: start !important;
    box-sizing: border-box !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card > .nw-cb.nw-cb.nw-cb > * {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: start !important;
  }
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card > .nw-cb.nw-cb.nw-cb .nw-tit.nw-tit {
    margin: 0 !important;
    padding: 0 !important;
    text-align: start !important;
  }
}

/* H120 bug (owner: full-width card and 1-col card not consistent, <=991): ONE text inset for every home news card. The featured card text block had padding-inline sp-m (title 24px right of the image edge) while 1-col cards have 0 (title on the image edge). All cards now: inline 0 = image edge, top sp-l, bottom sp-m (the P67 bottom room). >=992 featured row composition untouched. */
@media (max-width: 991px) {
  html body #news-grid-home#news-grid-home#news-grid-home > .nw-card.nw-card.nw-card:nth-child(n):nth-child(n) > .nw-cb.nw-cb.nw-cb {
    padding: var(--sp-l) 0 var(--sp-m) !important;
    gap: var(--sp-s) !important;
  }
}
/* EN TODO: same file serves the EN home (#news-grid-home exists in page 2894); this rule is language neutral so EN also changes. */