/* ==========================================================================
   HOMEPAGE (CTE) — CLEAN v3.0
   File: themes/elements/homepage/cte-homepage.css
   Scope: .cte-homepage-display only
   ========================================================================== */

/* =========================
   OUTER + WRAP
   ========================= */

.cte-homepage-display{
  background:#fafafa;
  overflow: visible;
  padding: 0; /* default tight */
}

/* >=1300: keep 12px breathing room */
@media (min-width:1300px){
  .cte-homepage-display{ margin: 0; }
}

.cte-homepage-display .cte-hp__wrap{
  max-width: var(--cte-site-width);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 1024.98px){
.cte-homepage-display .cte-hp__wrap{
  padding: 0 clamp(14px,2.4vw,26px) !important;
}
}

.cte-homepage-display .cte-hp__grid{
  display: grid;
  gap: 18px;
}

@media (max-width:820px){
  .cte-homepage-display .cte-hp__grid{ gap: 14px; }
}

/* =========================
   CARDS
   ========================= */

.cte-homepage-display .cte-hp__card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);
  overflow: hidden;
  margin: -1px 0;
}

.cte-homepage-display .cte-hp__cardhead{
  padding: 16px 18px 0;
}

.cte-homepage-display .cte-hp__kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(0,0,0,.62);
  font-weight: 800;
  margin: 0 0 12px 0;
}

.cte-homepage-display .cte-hp__notice{
  padding: 0 18px 18px;
  color: rgba(0,0,0,.62);
  font-weight: 700;
  font-size: 13px;
}

/* =========================
   FEATURED VIDEO
   ========================= */

.cte-homepage-display .cte-hp__card--video{ padding: 0; }

.cte-homepage-display .cte-hp__video{
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.cte-homepage-display .cte-hp__video::before{
  content:"";
  display:block;
  padding-top: 56.25%;
}

.cte-homepage-display .cte-hp__video_iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* keep now-playing tidy */
.cte-homepage-display .cte-hp__nowplaying{
  padding: 10px 14px;
  font-size: 14px;
  background: rgba(0,0,0,.03);
  border-top: 1px solid rgba(0,0,0,.08);
  margin: 0;
}
.cte-homepage-display .cte-hp__nowplaying_prefix{
  color: rgba(0,0,0,.65);
  font-weight: 700;
}



/* === FEATURED VIDEO PLAYLIST (WP LINKS) === */
.cte-homepage-display .cte-hp__cardhead--video{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.cte-homepage-display .cte-hp__nextWrap{
  display:flex;
  align-items:baseline;
  gap: 8px;
  min-width: 0;
}

.cte-homepage-display .cte-hp__nextLabel{
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.62);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.cte-homepage-display .cte-hp__nextTitle{
  font-size: 13px;
  font-weight: 900;
  color: rgba(0,0,0,.86);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 44vw;
}

@media (max-width: 820px){
  .cte-homepage-display .cte-hp__nextTitle{ max-width: 56vw; }
}


.cte-homepage-display .cte-hp__plThumb{
  display:block;
  background:#000;
  aspect-ratio: 16 / 9;
  overflow:hidden;
}

.cte-homepage-display .cte-hp__plThumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.cte-homepage-display .cte-hp__plTitle{
  padding: 0 10px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  color: rgba(0,0,0,.90);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.cte-homepage-display .cte-hp__plItem.is-current{
  outline: none !important;
  box-shadow: none !important;
}

.cte-homepage-display .cte-hp__plItem.is-queued{
  opacity: .92;
}


/* =========================
   HOMEPAGE LEADERBOARD ADS (Ad Inserter blocks 7 & 9)
   - Fix spacing
   - Fix “728 min-width clamp”
   - Nuke Ad Inserter inline margin on .code-block
   ========================= */

.cte-homepage-display .cte-hp__ad{
  display:flex;
  justify-content:center;
  line-height:0;
  margin: 6px 0;
  width: 100%;
}

@media (max-width:820px){
  .cte-homepage-display .cte-hp__ad{ margin: 4px 0; }
}

/* Ad Inserter inline margin: <div class="code-block ..." style="margin:8px 0"> */
.cte-homepage-display .cte-hp__ad .code-block{
  margin: 0 !important;
}

/* Hard stop “min-width:728px” / “min-height:90px” clamps inside homepage */
.cte-homepage-display .cte-hp__ad .cte-leaderboard,
.cte-homepage-display .cte-hp__ad [id^="div-gpt-ad"]{
  width: 100% !important;
  max-width: 728px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Make iframes never overflow the card */
.cte-homepage-display .cte-hp__ad iframe,
.cte-homepage-display .cte-hp__ad img{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}

/* =========================
   ISSUE DUO (one card, 2 cols desktop, stack below)
   ========================= */

.cte-homepage-display .cte-hp__card--issue-duo{
  padding-bottom: 0;
}

.cte-homepage-display .cte-hp__issueDuo{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
}

.cte-homepage-display .cte-hp__issueCol{
  overflow: visible;
}

.cte-homepage-display .cte-hp__issueCol--right{
  border-left: 1px solid rgba(0,0,0,.10);
}

.cte-homepage-display .cte-hp__issueCol .cte-hp__cardhead{
  padding: 16px 18px 0;
}

.cte-homepage-display .cte-hp__issue{
  padding: 0 18px 18px;
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items:center;
}

.cte-homepage-display .cte-hp__issue_link{
  display: contents;
  text-decoration: none;
  color: inherit;
}

.cte-homepage-display .cte-hp__issue_img{
  width: 160px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  display:block;
}

.cte-homepage-display .cte-hp__issue_title{
  font-size: 17px;
  font-weight: 900;
  margin-bottom: 4px;
}

.cte-homepage-display .cte-hp__issue_tagline{
  color: rgba(0,0,0,.68);
  font-size: 13px;
  font-weight: 700;
}

.cte-homepage-display .cte-hp__issue_actions{
  grid-column: 2;
  padding-top: 10px;
}

/* From the latest issue */
.cte-homepage-display .cte-hp__articles{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 0 18px 18px;
}

.cte-homepage-display .cte-hp__article{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.cte-homepage-display .cte-hp__article_img{
  width: 72px;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  display:block;
}

.cte-homepage-display .cte-hp__article_title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
}

.cte-homepage-display .cte-hp__article_link{
  text-decoration:none;
  color: rgba(0,0,0,.92);
}

.cte-homepage-display .cte-hp__article_author{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.62);
  font-weight: 700;
}

.cte-homepage-display .cte-hp__article_excerpt{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(0,0,0,.68);
  line-height: 1.5;
}

@media (max-width:980px){
  .cte-homepage-display .cte-hp__issueDuo{
    grid-template-columns: 1fr;
  }
  .cte-homepage-display .cte-hp__issueCol--right{
    border-left: 0;
    border-top: 1px solid rgba(0,0,0,.10);
  }
  .cte-homepage-display .cte-hp__issue{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .cte-homepage-display .cte-hp__issue_img{
    margin: 0 auto;
    width: 190px;
  }
  .cte-homepage-display .cte-hp__issue_actions{
    grid-column: auto;
  }
}

/* =========================
   LATEST UPDATES FEED
   ========================= */

.cte-homepage-display .cte-hp__card--latest{ padding-bottom: 16px; }

.cte-homepage-display .cte-hp__feed{
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding: 0 18px 18px;
}

.cte-homepage-display .cte-hp__feedItem{
  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items:start;
}

.cte-homepage-display .cte-hp__feedImg img{
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  display:block;
}

.cte-homepage-display .cte-hp__feedMeta{
  display:inline-flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.62);
}

.cte-homepage-display .cte-hp__type{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.74);
  font-size: 12px;
}

.cte-homepage-display .cte-hp__feedTitle a{
  display:inline-block;
  margin-top: 6px;
  text-decoration:none;
  color: rgba(0,0,0,.92);
  font-weight: 900;
  line-height: 1.25;
  font-size: 16px;
}

.cte-homepage-display .cte-hp__feedExcerpt{
  margin-top: 6px;
  color: rgba(0,0,0,.68);
  font-size: 14px;
  line-height: 1.55;
}

.cte-homepage-display .cte-hp__feedItem--noimg{
  grid-template-columns: 1fr;
}

@media (max-width:820px){
  .cte-homepage-display .cte-hp__feedItem{
    grid-template-columns: 1fr;
  }
  .cte-homepage-display .cte-hp__feedImg img{
    width: 100%;
    height: auto;
    max-width: 420px;
  }
}

/* =========================
   VENDOR SPOTLIGHT INLINE
   ========================= */

.cte-homepage-display .cte-hp__vendorInline{
  border: 1px solid rgba(240,127,42,.22);
  background: rgba(240,127,42,.06);
  border-radius: 14px;
  padding: 14px 14px 12px;
}

.cte-homepage-display .cte-hp__vendorHead{ margin-bottom: 10px; }

.cte-homepage-display .cte-hp__vendor{ text-align:left; }
.cte-homepage-display .cte-hp__vendor_name{ font-size: 15px; font-weight: 900; margin: 0 0 6px; }
.cte-homepage-display .cte-hp__vendor_desc{ font-size: 13px; color: rgba(0,0,0,.70); line-height: 1.55; }
.cte-homepage-display .cte-hp__vendor_cta{ margin-top: 10px; font-size: 13px; font-weight: 900; color: rgba(0,0,0,.78); }

/* =========================
   PRODUCT SHOWCASE
   ========================= */

.cte-homepage-display .cte-hp__card--showcase{ padding-bottom: 16px; }

.cte-homepage-display .cte-hp__showcaseGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0 18px 18px;
}

.cte-homepage-display .cte-hp__showcaseCard{
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

.cte-homepage-display .cte-hp__showcaseImg{
  width:100%;
  height:auto;
  display:block;
}

.cte-homepage-display .cte-hp__showcaseTitle{
  padding: 10px 12px 0;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.25;
}

.cte-homepage-display .cte-hp__showcaseMeta{
  padding: 6px 12px 12px;
  color: rgba(0,0,0,.62);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width:820px){
  .cte-homepage-display .cte-hp__showcaseGrid{
    grid-template-columns: 1fr;
  }
}

/* Homepage leaderboard spacing — tighten */
.cte-homepage-display .cte-hp__ad{
  margin: 2px 0 !important;
}
.cte-homepage-display .cte-hp__ad .code-block,
.cte-homepage-display .cte-hp__ad .cte-leaderboard{
  margin: 0 !important;
  padding: 0 !important;
}

/* Homepage leaderboards: kill extra whitespace (Ad Inserter + GPT slot reservation) */
.cte-homepage-display .cte-hp__ad{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* Ad Inserter wrapper ships inline margin: 8px 0; nuke it */
.cte-homepage-display .cte-hp__ad .code-block{
  margin: 0 !important;
  padding: 0 !important;
}

/* GPT slot reserves 90px via min-height; only show what iframe actually is */
.cte-homepage-display .cte-hp__ad [id^="div-gpt-ad"]{
  min-height: 0 !important;
  height: auto !important;
}

/* tighten any inner containers too */
.cte-homepage-display .cte-hp__ad [id^="google_ads_iframe_"],
.cte-homepage-display .cte-hp__ad iframe{
  display: block !important;
  margin: 0 auto !important;
  vertical-align: bottom !important;
}

/* ============================================================
   HOMEPAGE LEADERBOARD CROP (728x90 only)
   Fixes creatives that have blank pixels inside the 90px iframe.
   Adjust CROP_H and OFFSET if needed.
   ============================================================ */

.cte-homepage-display .cte-hp__ad .cte-leaderboard{
  line-height: 0 !important;
}

.cte-homepage-display .cte-hp__ad .cte-leaderboard:has(iframe[width="728"][height="90"]){
  /* CROP_H = visible height */
  height: 72px !important;          /* <-- change to 70/74 as needed */
  overflow: hidden !important;
}

/* OFFSET = how much to slide the iframe up to hide the blank bottom */
.cte-homepage-display .cte-hp__ad .cte-leaderboard iframe[width="728"][height="90"]{
  position: relative !important;
  top: -8px !important;             /* <-- change to -6 / -10 as needed */
  display: block !important;
  margin: 0 auto !important;
}

/* ============================================================
   HOMEPAGE LEADERBOARD CREATIVE CROP
   Fixes blank pixels INSIDE iframe creatives (GAM behavior)
   Applies to 728x90 and 320x50 only
   ============================================================ */

/* Normalize wrapper */
.cte-homepage-display .cte-hp__ad .cte-leaderboard{
  line-height: 0 !important;
  overflow: hidden !important;
}

/* -------- 728x90 -------- */
.cte-homepage-display .cte-hp__ad .cte-leaderboard iframe[width="728"][height="90"]{
  position: relative !important;
  top: -8px !important;      /* hide blank bottom */
  height: 90px !important;
  display: block !important;
  margin: 0 auto !important;
}
.cte-homepage-display .cte-hp__ad .cte-leaderboard:has(iframe[width="728"][height="90"]){
  height: 72px !important;   /* visible area */
}

/* -------- 320x50 -------- */
.cte-homepage-display .cte-hp__ad .cte-leaderboard iframe[width="320"][height="50"]{
  position: relative !important;
  top: -4px !important;      /* hide blank bottom */
  height: 50px !important;
  display: block !important;
  margin: 0 auto !important;
}
.cte-homepage-display .cte-hp__ad .cte-leaderboard:has(iframe[width="320"][height="50"]){
  height: 42px !important;   /* visible area */
}



/* Current item: overlay indicator (arrow) */

.cte-homepage-display .cte-hp__plItem.is-current::after{
  content: "EXPLORE ➤";
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 96px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.cte-homepage-display .cte-hp__plItem.is-current .cte-hp__plThumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.08);
}

.cte-homepage-display .cte-hp__plThumb{
  position: relative;
}

/* Next button */
/* === NEXT BTN COLOR V1 === */




/* Card sizing: consistent row cards (no empty “tile”) */

@media (max-width: 1100px){
  .cte-homepage-display .cte-hp__plItem{ flex-basis: 200px; max-width: 200px; }
}
@media (max-width: 820px){
  .cte-homepage-display .cte-hp__plItem{ flex-basis: 180px; max-width: 180px; }
}
@media (max-width: 520px){
  .cte-homepage-display .cte-hp__plItem{ flex-basis: 160px; max-width: 160px; }
}

/* Let title determine height: remove clamps and truncation */
.cte-homepage-display .cte-hp__plTitle{
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  white-space: normal !important;
  min-height: 0 !important;
}






/* Each card becomes 1/5 of the available width (minus gaps). No min width. */

/* Allow title to wrap and not force fixed heights */
.cte-homepage-display .cte-hp__plTitle{
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  min-height: 0 !important;
}


/* === NEXT BUTTON ASCII (|>) FINAL V1 === */
.cte-homepage-display .cte-hp__nextBtn{
  all: unset;
  box-sizing: border-box;
  margin-top: -6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;
  border-radius: 10px;

  border: 2px solid var(--cte-orange-500) !important;
  background: transparent !important;

  color: var(--cte-orange-500) !important;
  font: 900 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  letter-spacing: -1px;
  cursor: pointer;
  user-select: none;
}

.cte-homepage-display .cte-hp__nextBtn::before,
.cte-homepage-display .cte-hp__nextBtn::after{
  content: none !important;
  display: none !important;
}

.cte-homepage-display .cte-hp__nextBtn:hover{
  background: color-mix(in srgb, var(--cte-orange-500) 10%, transparent) !important;
  transform: translateY(-1px);
}
.cte-homepage-display .cte-hp__nextBtn:active{
  transform: translateY(0);
}

/* === HOMEPAGE FEATURED VIDEO CANONICAL UI V1 === */

/* Header row: match the same “card head” height as other homepage cards */
.cte-homepage-display .cte-hp__cardhead--video{
  padding: 16px 18px 0 !important;   /* same as .cte-hp__cardhead */
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.cte-homepage-display .cte-hp__cardhead--video .cte-hp__kicker{
  margin: 0 0 12px 0 !important;     /* restore the normal kicker rhythm */
}

/* Next button: compact, not tall */
.cte-homepage-display .cte-hp__nextBtn{
  all: unset;
  box-sizing: border-box;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 30px;                      /* compact */
  padding: 0 12px;
  min-width: 44px;

  border-radius: 10px;
  border: 2px solid var(--cte-orange-500) !important;
  background: transparent !important;

  color: var(--cte-orange-500) !important;
  font: 900 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing: 0;

  cursor: pointer;
  user-select: none;

}
.cte-homepage-display .cte-hp__nextBtn::before,
.cte-homepage-display .cte-hp__nextBtn::after{
  content:none !important;
  display:none !important;
}
.cte-homepage-display .cte-hp__nextBtn:hover{
  background: color-mix(in srgb, var(--cte-orange-500) 10%, transparent) !important;
}
.cte-homepage-display .cte-hp__nextBtn:active{
  transform: translateY(0);
}

/* ---------------- DESKTOP: 5 across, no overflow ---------------- */
@media (min-width: 821px){
  .cte-homepage-display .cte-hp__playlist{
    overflow: hidden !important;
    position: relative;
  }
  .cte-homepage-display .cte-hp__playlistGrid{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .cte-homepage-display .cte-hp__plItem{
    flex: 0 1 calc((100% - (12px * 4)) / 5) !important;
    max-width: calc((100% - (12px * 4)) / 5) !important;
    min-width: 0 !important;
  }
  .cte-homepage-display .cte-hp__plTitle{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    min-height: 0 !important;
  }
}

/* ---------------- MOBILE: swipe row + right fade cue ---------------- */
@media (max-width: 820px){
  .cte-homepage-display .cte-hp__playlist{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding-right: 52px !important; /* room for fade cue */
  }
  .cte-homepage-display .cte-hp__playlistGrid{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap: 12px !important;
    width: max-content !important;
  }
  .cte-homepage-display .cte-hp__plItem{
    flex: 0 0 180px !important;
    max-width: 180px !important;
    min-width: 180px !important;
  }
  .cte-homepage-display .cte-hp__plTitle{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    min-height: 0 !important;
  }

  /* Fade overlay on right */
  .cte-homepage-display .cte-hp__playlist::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width: 56px;
    height: 100%;
    pointer-events:none;
    background: linear-gradient(to left, rgba(250,250,250,1), rgba(250,250,250,0));
  }

  /* Chevron > indicator */
  .cte-homepage-display .cte-hp__playlist::before{
    content: ">";
    position:absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    pointer-events:none;

    background: rgba(255,255,255,.82);
    border: 1px solid rgba(0,0,0,.10);
    color: rgba(0,0,0,.65);
    font: 900 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }
}


/* === HOMEPAGE FEATURED VIDEO LAYOUT FIX V1 === */
/* Create a real visual break so the Vimeo control bar never feels like it overlaps the playlist */
.cte-homepage-display .cte-hp__video{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 10px; /* breathing room under player */
}

/* Playlist should not touch the player */
.cte-homepage-display .cte-hp__playlist{
  padding-top: 14px !important;
}

/* On mobile, give a bit more space (controls are visually heavier) */
@media (max-width: 820px){
  .cte-homepage-display .cte-hp__video{ padding-bottom: 12px; }
  .cte-homepage-display .cte-hp__playlist{ padding-top: 16px !important; }
}


/* === HOMEPAGE FEATURED PLAYLIST COMPACT V1 === */
/* Make the tiles feel like a tight, standard “thumbnail strip” under the player */

.cte-homepage-display .cte-hp__playlist{
  padding: 10px 12px 12px !important; /* tighter */
}

.cte-homepage-display .cte-hp__playlistGrid{
  gap: 10px !important; /* tighter row */
}

.cte-homepage-display .cte-hp__plItem{
  border-radius: 12px;
}

.cte-homepage-display .cte-hp__plThumb{
  aspect-ratio: 2 / 1;   /* shorter than 16:9 => less height */
}

.cte-homepage-display .cte-hp__plTitle{
  padding: 8px 10px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Desktop: slightly reduce overall tile height (still 5 across) */
@media (min-width: 821px){
  .cte-homepage-display .cte-hp__playlist{ padding-top: 12px !important; }
}

/* Mobile swipe: make tiles smaller so they don’t dominate the page */
@media (max-width: 820px){
  .cte-homepage-display .cte-hp__playlist{
    padding: 10px 12px 12px !important;
    padding-right: 52px !important; /* keep room for fade cue */
  }
  .cte-homepage-display .cte-hp__plItem{
    flex: 0 0 160px !important;
    max-width: 160px !important;
    min-width: 160px !important;
  }
  .cte-homepage-display .cte-hp__plThumb{
    aspect-ratio: 2.2 / 1;
  }
}


/* === HOMEPAGE FEATURED PLAYLIST UX FIXES V1 === */

/* 1) Desktop: never show a scrollbar / swipe bar */
@media (min-width: 821px){
  .cte-homepage-display .cte-hp__playlist{
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;           /* Firefox */
  }
  .cte-homepage-display .cte-hp__playlist::-webkit-scrollbar{
    height: 0 !important;                      /* Chromium/Safari */
  }
}

/* 2) Playlist tiles: remove browser link underline + keep title readable */
.cte-homepage-display .cte-hp__plItem{
  text-decoration: none !important;
}
.cte-homepage-display .cte-hp__plTitle{
  text-decoration: none !important;
  hyphens: auto;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Desktop: allow 3 lines (reduces “cut off”) */
@media (min-width: 821px){
  .cte-homepage-display .cte-hp__plTitle{
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* Mobile: keep it tighter at 2 lines */
@media (max-width: 820px){
  .cte-homepage-display .cte-hp__plTitle{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* 3) Current tile indicator: stop “EXPLORE ➤” and make a real “NOW PLAYING” badge */
.cte-homepage-display .cte-hp__plItem.is-current::after{
  content: "NOW PLAYING";
  position: absolute;
  top: 10px;
  left: 10px;
  height: 24px;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;

  font: 900 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Make the current title feel “active” without changing borders */
.cte-homepage-display .cte-hp__plItem.is-current .cte-hp__plTitle{
  color: rgba(0,0,0,.92) !important;
}

/* Optional: subtle “click me” cue on hover only */
@media (hover:hover){
  .cte-homepage-display .cte-hp__plItem:hover{
    filter: brightness(.99);
  }
}


/* === HOMEPAGE FEATURED PLAYLIST TITLE ARROW V1 === */

/* Add → to the end of EVERY title */
.cte-homepage-display .cte-hp__plTitle::after{
  content: " \2192"; /* → */
  font-weight: 900;
  opacity: .85;
}

/* Current/playing tile: title becomes CTE brand orange (and arrow too) */
.cte-homepage-display .cte-hp__plItem.is-current .cte-hp__plTitle{
  color: var(--cte-brand-orange) !important;
}
.cte-homepage-display .cte-hp__plItem.is-current .cte-hp__plTitle::after{
  color: var(--cte-brand-orange) !important;
  opacity: 1;
}

/* Ensure arrow never gets underlined */
.cte-homepage-display .cte-hp__plItem,
.cte-homepage-display .cte-hp__plTitle{
  text-decoration: none !important;
}


/* === HOMEPAGE FEATURED PLAYLIST TITLE FIT V1 === */

/* Give the whole strip a little extra breathing room so nothing clips */
.cte-homepage-display .cte-hp__playlist{
  padding-bottom: 16px !important;
}

/* Slightly smaller type + better line-height so descenders don't get chopped */
.cte-homepage-display .cte-hp__plTitle{
  font-size: 11.5px !important;
  line-height: 1.28 !important;
  padding: 8px 10px 14px !important; /* extra bottom padding fixes “cut off” */
}

/* Keep the arrow aligned with new line-height */
.cte-homepage-display .cte-hp__plTitle::after{
  line-height: 1 !important;
}

/* Desktop: allow 3 lines so fewer awkward mid-word wraps */
@media (min-width: 821px){
  .cte-homepage-display .cte-hp__plTitle{
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}


/* === HOMEPAGE NOW PLAYING BADGE LOCK V1 === */

/* Ensure current badge is always visible + never clickable */
.cte-homepage-display .cte-hp__plItem.is-current{
  position: relative;
}

/* Replace/override any older hover-only behavior */
.cte-homepage-display .cte-hp__plItem.is-current::after{
  content: "NOW PLAYING";
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font: 900 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none; /* IMPORTANT: badge can’t be clicked */
  z-index: 3;
}

/* Don’t dim/outline the whole card on current */
.cte-homepage-display .cte-hp__plItem.is-current{
  outline: none !important;
  box-shadow: none !important;
}


/* === HOMEPAGE FEATURED PLAYLIST NO ELLIPSIS V1 === */
/* Kill all clamping/ellipsis so titles wrap fully (tile height grows as needed) */
.cte-homepage-display .cte-hp__plTitle{
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;

  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  max-height: none !important;
}