/* TM CMS page */
/* ===================================================================
   COMEDIANS PAGE — only what's unique to this page.
   The comedian grid (markup + its .ctitle rule + its JS) now lives in the
   --COMEDIANS-GRID-- component. The hero shell (.hero-sec/.hero-grid),
   search box, pager, and .no-results live in global.css.
   =================================================================== */

/* Hero background for this page — everything else comes from global .hero-sec. */
/* >>> Replace REPLACE_WITH_HERO_BG_URL with your hero background image URL <<< */
.hero-sec{ --hero-bg:url('https://tracedmethod.s3.us-west-2.amazonaws.com/mint/home/comedians-hero-bg.png'); --hero-pad:clamp(44px,5vw,96px); }

/* ===================================================================
   HERO — Featured-comedians carousel.
   Controls (arrows + dots) are injected by the page JS; the .hero-carousel
   class is also added by JS, so the page HTML needs no carousel markup.
   =================================================================== */
.hero-carousel{position:relative}
.hero-carousel .feature-media img,
.hero-carousel .hero-title,
.hero-carousel .hero-desc{transition:opacity .35s ease}
.hero-carousel.is-swapping .feature-media img,
.hero-carousel.is-swapping .hero-title,
.hero-carousel.is-swapping .hero-desc{opacity:0}
.hero-carousel .hero-desc{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

.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}
.hero-nav:hover{background:rgba(0,0,0,.78)}
.hero-prev{left:16px}
.hero-next{right:16px}

.hero-dots{display:flex;gap:10px;justify-content:center;align-items:center;padding:16px 0 4px}
.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}
.hero-dots .hero-dot:hover{background:rgba(255,255,255,.7)}
.hero-dots .hero-dot.active{background:#fff;transform:scale(1.25)}

@media (max-width:640px){
  .hero-nav{width:36px;height:36px;font-size:22px}
  .hero-prev{left:6px}
  .hero-next{right:6px}
}