.news-hero-top, .news-hero-top *{box-sizing:border-box}

/* columns */
.news-hero-top .nht-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:16px}
@media (max-width:1280px){.news-hero-top .nht-grid{grid-template-columns:minmax(0,1fr) 420px}}
@media (max-width:1024px){.news-hero-top .nht-grid{grid-template-columns:minmax(0,1fr) 380px}}

/* tablet: layout overrides moved to the end of the file (see bottom) */
@media (max-width:720px){
  .news-hero-top .nht-grid{grid-template-columns:1fr;gap:12px}
  .news-hero-top .nht-left .is-sub{display:none !important;}
}

/* left */
.news-hero-top .nht-left{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px}
@media (max-width:720px){.news-hero-top .nht-left{grid-template-columns:1fr}}
.news-hero-top .nht-left>.nht-card{margin:0}
.news-hero-top .nht-left .is-hero{grid-column:1/-1}

/* hide extra subs by default (only used on tablet) */
.news-hero-top .nht-left .is-sub-extra{display:none}

/* thumbs */
.news-hero-top .nht-thumb{position:relative;border-radius:14px;overflow:hidden;background:#eee;min-height:1px}
.news-hero-top .nht-thumb img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}

/* aspect ratios */
.news-hero-top .is-hero .nht-thumb{aspect-ratio:16/9}
.news-hero-top .is-sub  .nht-thumb{aspect-ratio:16/9}

/* hero overlay / title at bottom of image */
.news-hero-top .nht-left .is-hero .nht-link{position:relative !important}
.news-hero-top .nht-left .is-hero .nht-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:44%;
  background:linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index:2; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
  pointer-events:none;
}
.news-hero-top .nht-left .is-hero .nht-title{
  position:absolute !important;
  left:clamp(10px,2vw,18px) !important; right:clamp(10px,2vw,18px) !important;
  bottom:clamp(10px,1.8vw,18px) !important; margin:0 !important;
  z-index:3; color:#fff !important; line-height:1.08 !important; font-weight:800 !important;
  font-size:clamp(22px, 2.6vw, 40px) !important;
  text-shadow:0 6px 28px rgba(0,0,0,.6) !important;
}
/* hide hero title while in skeleton */
.news-hero-top .nht-left .is-hero.is-skel .nht-title{display:none !important}

/* right list */
.news-hero-top .nht-right{display:flex;flex-direction:column;row-gap:16px}
.news-hero-top .nht-right .nht-card{width:100%}
.news-hero-top .nht-right .nht-card .nht-link{display:grid;grid-template-columns:var(--nht-right-w,180px) 1fr;gap:14px;align-items:center;width:100%}
.news-hero-top .is-list .nht-thumb{width:var(--nht-right-w,180px);aspect-ratio:16/9;border-radius:12px;overflow:hidden}
.news-hero-top .nht-right .nht-title{
  margin:.1rem 0 0; font-weight:700; line-height:1.15;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  font-size:clamp(15px, 1.05vw, 18px);
}
@media (max-width:720px){
  .news-hero-top{--nht-right-w:140px}
  .news-hero-top .nht-right .nht-card .nht-link{grid-template-columns:var(--nht-right-w,140px) 1fr;gap:12px}
}

/* skeleton */
.news-hero-top .is-skel .nht-title{height:1.05em;border-radius:8px;background:#eee;position:relative;overflow:hidden}
.news-hero-top .is-skel .nht-thumb::after,
.news-hero-top .is-skel .nht-title::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:nhtSh 1.1s linear infinite
}
@keyframes nhtSh{to{transform:translateX(100%)}}
.news-hero-top[data-hydrated="1"] .is-skel .nht-thumb::after,
.news-hero-top[data-hydrated="1"] .is-skel .nht-title::after{animation:none}
.news-hero-top .img-pending .nht-thumb::after,
.news-hero-top .img-pending .nht-title::after{animation:none}

.news-hero-top .nht-card.no-thumb .nht-thumb{background:#eee}
.news-hero-top .nht-card.no-thumb .nht-thumb::after{display:none}

/* tablet: 1 HERO + 4 tiles (2 rows × 2 columns). No right list. */
@media (min-width:721px) and (max-width:1024px){
  .news-hero-top .nht-grid{grid-template-columns:1fr;gap:12px}
  .news-hero-top .nht-right{display:none !important;}

  .news-hero-top .nht-left{
    grid-template-columns:1fr 1fr;
    column-gap:14px;
    row-gap:12px;
  }

  .news-hero-top .nht-left .is-hero{grid-column:1/-1}
  .news-hero-top .nht-left .is-sub-extra{display:block}
}