/* TM CMS page */
/* ===================================================================
   LIVE-STREAM (/live) — hero (photo + countdown + avatars) & trending
   Load AFTER global.css.
   =================================================================== */
/* ---------- HERO ---------- */
.hero-sec{background-image:linear-gradient(rgba(8,11,9,.4),rgba(8,11,9,.55)),url('https://tracedmethod.s3.us-west-2.amazonaws.com/mint/live/background-live-stream-hero-area.jpg');background-size:cover;background-position:center;padding:clamp(36px,4vw,70px) 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(28px,3.5%,72px);align-items:center}
.hero-photo{border-radius:16px;overflow:hidden;background:#14181a;box-shadow:0 18px 50px rgba(0,0,0,.5);line-height:0}
.hero-photo img{width:100%;height:auto;display:block}
.hero-countdown{margin-top:clamp(20px,2.2vw,36px);text-align:center}
.cd-label{font-family:'Montserrat',sans-serif;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(15px,1.4vw,24px);margin-bottom:clamp(10px,1vw,18px)}
.cd-row{display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,.7vw,14px)}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.6vw,11px)}
.cd-tile{background:#15181d;border-radius:clamp(8px,.7vw,12px);min-width:clamp(58px,5.2vw,100px);padding:clamp(8px,.9vw,18px) clamp(6px,.6vw,12px)}
.cd-tile span{font-family:'Montserrat',sans-serif;font-weight:800;color:#fff;font-size:clamp(34px,3.6vw,66px);line-height:1;display:block}
.cd-unit{color:#fff;font-size:clamp(12px,1vw,19px);font-weight:500}
.cd-colon{display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,.6vw,11px);align-self:flex-start;margin-top:clamp(16px,1.9vw,36px)}
.cd-colon i{width:clamp(7px,.6vw,11px);height:clamp(7px,.6vw,11px);border-radius:50%;background:var(--green);display:block}
.hero-avatars{display:flex;flex-wrap:wrap;gap:clamp(10px,1.3vw,24px);margin-bottom:clamp(20px,2vw,32px)}
.avatar{display:flex;flex-direction:column;align-items:center;gap:8px;width:clamp(58px,5vw,74px);text-decoration:none;cursor:pointer;transition:transform .15s}
.avatar:hover{transform:translateY(-2px)}
.avatar:hover .av-img{border-color:var(--green)}
.av-img{width:clamp(52px,4.4vw,66px);height:clamp(52px,4.4vw,66px);border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.65);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.avatar span{font-size:clamp(10px,.72vw,13px);font-weight:600;color:#fff;text-align:center;line-height:1.2}
.trend-sec{padding:clamp(28px,3vw,48px) 0}

/* ---------- TRENDING (horizontal scroll) ---------- */
.trend-h{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(15px,1.3vw,20px);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.trend-scroll{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.trend-scroll::-webkit-scrollbar{height:6px}
.trend-scroll::-webkit-scrollbar-track{background:transparent}
.trend-scroll::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:3px}
.trend-item{flex:0 0 25%;min-width:320px;display:grid;grid-template-columns:auto 112px minmax(0,1fr);align-items:center;gap:14px;padding-right:26px;scroll-snap-align:start}
.trend-num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,2.3vw,40px);color:#3a3a3a;line-height:1;text-align:center}
.trend-thumb{width:112px;height:64px;border-radius:5px;background:linear-gradient(135deg,#2a2a2a,#161616);position:relative;overflow:hidden;flex:none}
.trend-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.06),transparent 60%)}
.trend-cat{color:var(--green);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.trend-title{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}