/* ARCH03.2: Top Zone rules moved to homepage-top-zone.css. Shared/downstream rules retained. */
/* DTV-PAGE09R Correction 38 — Final Tablet Selected & Trending Visual Balance Recovery.
 * Scope: 1024 Selected contract recovery + 768 Trending visual balance only.
 * 1920, <=430, Newsletter, Footer and all other validated C37 contracts are locked.
 */

/* 1024-class tablet: Selected uses the same explicit media-row ownership that is
 * proven at 768/mobile. Strong ownership here neutralizes older desktop rail rules. */


/* 768-class tablet: preserve lead + ranked concept, but rebalance the visual mass.
 * The lead is shorter than 16:9 and the four ranked stories get real card height/readability. */
@media (min-width:641px) and (max-width:800px){
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending{height:auto!important;min-height:0!important;padding:18px!important;overflow:hidden!important;}
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending>header{min-height:0!important;margin:0 0 12px!important;}
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:auto auto auto!important;
    gap:12px!important;height:auto!important;min-height:0!important;align-items:start!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li{
    display:block!important;min-width:0!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li:first-child{grid-column:1/-1!important;}
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li>a{
    position:relative!important;display:block!important;min-width:0!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li img{
    display:block!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:16/9!important;
    margin:0 0 7px!important;border-radius:8px!important;object-fit:cover!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li:first-child img{
    aspect-ratio:16/7!important;margin-bottom:0!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li:first-child>a>span{
    position:absolute!important;left:12px!important;right:12px!important;bottom:10px!important;z-index:2!important;
    margin:0!important;color:#fff!important;font-size:14px!important;font-weight:800!important;line-height:1.2!important;
    text-shadow:0 1px 4px rgba(0,0,0,.72)!important;-webkit-line-clamp:2!important;line-clamp:2!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li:first-child>a:after{
    content:""!important;position:absolute!important;inset:38% 0 0!important;z-index:1!important;pointer-events:none!important;
    border-radius:0 0 8px 8px!important;background:linear-gradient(to bottom,rgba(4,19,34,0),rgba(4,19,34,.9))!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li:first-child>b{z-index:3!important;}
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li:not(:first-child)>a>span{
    position:static!important;display:-webkit-box!important;width:100%!important;height:auto!important;min-height:2.5em!important;max-height:2.5em!important;
    margin:0!important;padding:0!important;overflow:hidden!important;color:#fff!important;font-size:11px!important;font-weight:750!important;line-height:1.25!important;
    -webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;
  }
  body.home [data-dtv-homepage="ux10"] .dtv-g7-trending ol[data-item-count="5"]>li>b{
    top:7px!important;left:7px!important;width:28px!important;height:23px!important;font-size:12px!important;
  }
}
