/* TM CMS page */
/* ===================================================================
   COMEDIANS PAGE — hero (featured comedian) + search + pager
   Load AFTER global.css.
   Reuses from global: .hero-eyebrow/.hero-title/.hero-desc/.hero-watch/
   .hero-share, .feature-media (the photo card), .sec/.sec-head/.sec-label/
   .sec-title, .card-grid + .card/.thumb/.ctitle, .btn btn-green, .socials.
   =================================================================== */

/* ---------- HERO ---------- */
.hero-sec{
  background:linear-gradient(rgba(8,12,10,.45),rgba(8,12,10,.62)),
             url('https://tracedmethod.s3.us-west-2.amazonaws.com/mint/news/background-news-hero-area.jpg') center/cover no-repeat;
  padding:clamp(44px,5vw,96px) 0;
}
/* NEWS GRID component — only what's unique to this component.
   .card-grid, .search-box, .pager, .no-results come from the template (global) CSS. */
.news-grid .cg-grid{row-gap:40px;column-gap:24px}

.news-card{display:block}
.news-card .ccat{margin:0 0 9px}                 /* category sits ABOVE the image */
.news-card .ctitle{
  font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;line-height:1.2;margin:13px 0 9px;color:#fff;
}
.news-card .cdesc{color:var(--dim);font-size:12.5px;line-height:1.55;margin:0}
.news-card .btn{font-size:11px;letter-spacing:1px;padding:9px 18px;margin:15px 0 11px;display:inline-block}
.news-card .cmeta{font-size:11px;color:var(--dimmer);margin-top:0}

/* ---------- FEATURED HERO CAROUSEL (featured_news_page articles) ----------
   Controls (arrows + dots) are injected by the page JS; scoped to .news-hero
   so no other hero is affected. */
.news-hero.hero-carousel{position:relative}
.news-hero .feature-media img,
.news-hero .hero-title,
.news-hero .hero-written-by,
.news-hero .hero-desc{transition:opacity .35s ease}
.news-hero.is-swapping .feature-media img,
.news-hero.is-swapping .hero-title,
.news-hero.is-swapping .hero-written-by,
.news-hero.is-swapping .hero-desc{opacity:0}
/* "by <Author>" under the featured title */
.news-hero .hero-written-by{color:#b9beb9;font-size:clamp(13px,1.05vw,15px);font-weight:600;letter-spacing:.02em;margin:clamp(6px,0.8vw,10px) 0 0}
.news-hero .hero-written-by .by-name{color:#fff}
.news-hero .hero-written-by:empty{display:none}
.news-hero .hero-desc{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.news-hero .hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;transition:background .2s ease}
.news-hero .hero-nav:hover{background:rgba(0,0,0,.78)}
.news-hero .hero-prev{left:16px}
.news-hero .hero-next{right:16px}
.news-hero .hero-dots{display:flex;gap:10px;justify-content:center;align-items:center;padding:16px 0 4px}
.news-hero .hero-dots .hero-dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;cursor:pointer;background:rgba(255,255,255,.4);transition:background .2s ease,transform .2s ease}
.news-hero .hero-dots .hero-dot:hover{background:rgba(255,255,255,.7)}
.news-hero .hero-dots .hero-dot.active{background:#fff;transform:scale(1.25)}
@media (max-width:640px){.news-hero .hero-nav{width:36px;height:36px;font-size:22px}.news-hero .hero-prev{left:6px}.news-hero .hero-next{right:6px}}