/* r49 (hot preview): "Hot right now" magazine row under This weekend (js/hot.js). <=1000px swipe row, >=1001px magazine grid. */
.ht{margin:0 0 40px;position:relative;contain:layout paint}
.ht-head{padding:0 var(--pad);margin:0 0 12px;display:flex;align-items:baseline;justify-content:space-between}
.ht-head h2{font:800 clamp(22px,3vw,34px)/1.05 var(--f-display);letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:10px}
.ht-dot{width:9px;height:9px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 rgba(232,85,61,.6);animation:htPulse 2.4s ease-out infinite;flex:none}
@keyframes htPulse{0%{box-shadow:0 0 0 0 rgba(232,85,61,.55)}70%,100%{box-shadow:0 0 0 10px rgba(232,85,61,0)}}
.ht-track{display:grid;gap:8px;grid-auto-flow:column;grid-template-rows:repeat(2,188px);grid-auto-columns:max-content;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  padding:0 var(--pad);scroll-padding:0 var(--pad);scrollbar-width:none;outline:none}
.ht-track::-webkit-scrollbar{display:none}
.ht-card{position:relative;display:block;overflow:hidden;border-radius:14px;background:var(--card);color:#fff;text-decoration:none;scroll-snap-align:start;isolation:isolate;-webkit-tap-highlight-color:transparent}
.ht-lead,.ht-tall{grid-row:span 2}
.ht-lead{width:min(78vw,440px)}
.ht-tall{width:min(54vw,300px)}
.ht-sq{width:min(46vw,260px)}
.ht-media{position:absolute;inset:0;overflow:hidden}
.ht-media img,.ht-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ht-media img{transform:scale(1.04);transform-origin:50% 45%;will-change:auto}
.ht-vid{opacity:0;transition:opacity .6s var(--ease);background:transparent}
.ht-vid.on{opacity:1}
.ht-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%);pointer-events:none;z-index:1}
.ht-txt{position:absolute;left:0;right:0;bottom:0;padding:12px 12px 12px;z-index:2}
.ht-date{margin:0 0 3px;font:700 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.ht-card h3{margin:0;font:750 16px/1.12 var(--f-display);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.ht-lead h3{font-size:clamp(22px,6vw,30px)}
.ht-lead .ht-txt{padding:16px}
.ht-card:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* Ken Burns: only while on screen (.kb-on from hot.js) */
@keyframes htKB{0%{transform:scale(1.04) translate3d(0,0,0)}100%{transform:scale(1.15) translate3d(-2.5%,-1.5%,0)}}
@keyframes htKB2{0%{transform:scale(1.15) translate3d(2%,-1%,0)}100%{transform:scale(1.04) translate3d(0,0,0)}}
.ht-card.kb-on .ht-media img{animation:htKB 17s ease-in-out var(--d,0s) infinite alternate}
.ht-card.kb-on:nth-child(even) .ht-media img{animation-name:htKB2;animation-duration:19s}
@media (hover:hover){.ht-card:hover h3{text-decoration:underline;text-underline-offset:3px}}
/* desktop: magazine grid, lead 3x2 + six 1x1 */
@media (min-width:1001px){
  .ht{max-width:1480px;margin:0 auto 56px;padding:0 var(--pad)}
  .ht-head{padding:0}
  .ht-track{grid-auto-flow:row dense;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,230px);grid-auto-columns:auto;overflow:visible;padding:0;gap:12px;scroll-snap-type:none}
  .ht-card{width:auto}
  .ht-lead{grid-column:span 3;grid-row:span 2}
  .ht-tall,.ht-sq{grid-column:span 1;grid-row:span 1}
  .ht-lead h3{font-size:40px;max-width:22ch;-webkit-line-clamp:3}
  .ht-lead .ht-txt{padding:22px 24px}
}
@media (prefers-reduced-motion:reduce){.ht-card .ht-media img,.ht-card.kb-on .ht-media img{animation:none!important;transform:none}.ht-dot{animation:none}.ht-vid{display:none}}