/* =========================================================
   ELEON MOST VIEWED
   Helios Dark / Light
   Desktop + Mobile
   Full page titles
   ========================================================= */

:root{
  --eleon-card-bg:var(--helios-card,#17191e);
  --eleon-card-border:var(--helios-border,#303640);
  --eleon-text:rgba(238,241,246,.94);
  --eleon-muted:rgba(225,229,236,.48);
  --eleon-soft:rgba(225,229,236,.08);
  --eleon-accent:var(--helios-accent,#78a6ff);
  --eleon-hover-bg:rgba(120,166,255,.035);
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-theme="light"],
html[data-mode="light"],
html[data-color-scheme="light"],
html.light,
html.theme-light,
body.light,
body.theme-light,
[data-theme="light"]{
  --eleon-card-bg:#ffffff;
  --eleon-card-border:#d9dee7;
  --eleon-text:#20242c;
  --eleon-muted:#7a8493;
  --eleon-soft:rgba(35,45,60,.08);
  --eleon-accent:#3f76d8;
  --eleon-hover-bg:rgba(63,118,216,.055);
}


/* =========================================================
   CARD
   ========================================================= */

[data-eleon-most-viewed]{
  box-sizing:border-box!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  padding:15px 16px!important;

  border:1px solid var(--eleon-card-border)!important;
  border-radius:12px!important;

  background:var(--eleon-card-bg)!important;
  color:var(--eleon-text)!important;

  box-shadow:none!important;
}


/* =========================================================
   HEADER
   ========================================================= */

.emv-head{
  display:flex!important;
  align-items:center!important;

  min-height:30px!important;

  margin:0 0 3px!important;
  padding:0 0 10px!important;

  border-bottom:1px solid var(--eleon-soft)!important;
}

.emv-head strong{
  display:block!important;

  margin:0!important;

  color:var(--eleon-text)!important;

  font-size:14px!important;
  font-weight:800!important;
  line-height:1.25!important;
}


/* =========================================================
   LIST
   ========================================================= */

.emv-list{
  display:grid!important;

  width:100%!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;
}


/* =========================================================
   ROW
   rank | title | views
   ========================================================= */

.emv-row{
  display:grid!important;

  grid-template-columns:
    24px
    minmax(0,1fr)
    max-content!important;

  align-items:center!important;

  column-gap:10px!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  min-height:48px!important;
  height:auto!important;

  margin:0!important;
  padding:8px 0!important;

  border-top:1px solid var(--eleon-soft)!important;

  background:transparent!important;

  box-sizing:border-box!important;
}

.emv-row:first-child{
  border-top:0!important;
}

.emv-row:hover{
  background:transparent!important;
}


/* =========================================================
   RANK
   ========================================================= */

.emv-rank,
.emv-row > b{
  display:block!important;

  grid-column:1!important;

  min-width:0!important;

  margin:0!important;

  color:var(--eleon-accent)!important;

  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;

  text-align:left!important;

  pointer-events:none!important;
}


/* =========================================================
   TITLE
   IMPORTANT:
   no ellipsis
   no fixed width
   no letter-by-letter breaking
   ========================================================= */

.emv-title-link{
  display:block!important;

  grid-column:2!important;

  justify-self:stretch!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;

  color:var(--eleon-text)!important;

  text-decoration:none!important;

  text-overflow:clip!important;

  white-space:normal!important;

  word-break:normal!important;
  overflow-wrap:break-word!important;

  hyphens:none!important;

  font-size:14px!important;
  font-weight:600!important;
  line-height:1.35!important;

  transition:
    color .14s ease!important;
}

.emv-title-link:hover,
.emv-title-link:focus,
.emv-title-link:active{
  color:var(--eleon-accent)!important;
  text-decoration:none!important;
}


/* =========================================================
   VIEWS
   ========================================================= */

.emv-views,
.emv-row > small{
  display:inline-flex!important;

  grid-column:3!important;

  align-items:center!important;
  justify-content:flex-end!important;

  gap:4px!important;

  width:auto!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  color:var(--eleon-muted)!important;

  font-size:10px!important;
  font-weight:500!important;
  line-height:1!important;

  white-space:nowrap!important;

  pointer-events:none!important;
}

.emv-eye{
  display:inline-block!important;

  font-size:9px!important;
  line-height:1!important;

  opacity:.8!important;
}


/* =========================================================
   LINKS
   ========================================================= */

[data-eleon-most-viewed] a{
  text-decoration:none!important;
}

[data-eleon-most-viewed] a:hover,
[data-eleon-most-viewed] a:focus,
[data-eleon-most-viewed] a:active{
  text-decoration:none!important;
}


/* =========================================================
   REMOVE OLD MARKUP
   ========================================================= */

.emv-list > a{
  display:none!important;
}


/* =========================================================
   IMPORTANT OVERRIDES
   Kill old ellipsis / fixed-width rules
   ========================================================= */

[data-eleon-most-viewed] .emv-title-link{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:normal!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
  font-size: 12px !important;
}

[data-eleon-most-viewed] .emv-row{
  grid-template-columns:
    24px
    minmax(0,1fr)
    max-content!important;
}


/* =========================================================
   LIGHT MODE FALLBACK
   ========================================================= */

html[data-theme="light"] [data-eleon-most-viewed],
html[data-mode="light"] [data-eleon-most-viewed],
html[data-color-scheme="light"] [data-eleon-most-viewed],
html.light [data-eleon-most-viewed],
html.theme-light [data-eleon-most-viewed],
body.light [data-eleon-most-viewed],
body.theme-light [data-eleon-most-viewed]{
  background:#fff!important;
  border-color:#d9dee7!important;
  color:#20242c!important;
}

html[data-theme="light"] .emv-title-link,
html[data-mode="light"] .emv-title-link,
html[data-color-scheme="light"] .emv-title-link,
html.light .emv-title-link,
html.theme-light .emv-title-link,
body.light .emv-title-link,
body.theme-light .emv-title-link{
  color:#20242c!important;
}

html[data-theme="light"] .emv-title-link:hover,
html[data-mode="light"] .emv-title-link:hover,
html[data-color-scheme="light"] .emv-title-link:hover,
html.light .emv-title-link:hover,
html.theme-light .emv-title-link:hover,
body.light .emv-title-link:hover,
body.theme-light .emv-title-link:hover{
  color:#3f76d8!important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  [data-eleon-most-viewed]{
    width:100%!important;
    min-width:0!important;
  }

  .emv-row{
    grid-template-columns:
      24px
      minmax(0,1fr)
      46px!important;

    column-gap:9px!important;

    align-items:center!important;

    width:100%!important;
    min-width:0!important;
  }

  .emv-title-link{
    display:block!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    white-space:normal!important;

    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  .emv-views{
    width:46px!important;
    justify-content:flex-end!important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  [data-eleon-most-viewed]{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    padding:14px!important;
  }

  .emv-head{
    width:100%!important;
  }

  .emv-list{
    width:100%!important;
    min-width:0!important;
  }

  .emv-row{
    display:grid!important;

    grid-template-columns:
      26px
      minmax(0,1fr)
      48px!important;

    column-gap:10px!important;

    align-items:center!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    min-height:54px!important;
    height:auto!important;

    padding:10px 0!important;
  }

  .emv-rank,
  .emv-row > b{
    width:26px!important;

    font-size:13px!important;
  }

  .emv-title-link{
    display:block!important;

    justify-self:stretch!important;

    width:100%!important;
    min-width:0!important;
    max-width:none!important;

    overflow:visible!important;

    white-space:normal!important;

    text-overflow:clip!important;

    word-break:normal!important;
    overflow-wrap:break-word!important;

    hyphens:none!important;

    font-size:14px!important;
    line-height:1.35!important;
  }

  .emv-views,
  .emv-row > small{
    justify-self:end!important;

    width:48px!important;

    font-size:10px!important;

    text-align:right!important;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  [data-eleon-most-viewed]{
    padding:13px!important;
  }

  .emv-row{
    grid-template-columns:
      24px
      minmax(0,1fr)
      44px!important;

    column-gap:8px!important;
  }

  .emv-title-link{
    font-size:13px!important;

    white-space:normal!important;

    word-break:normal!important;
    overflow-wrap:break-word!important;
  }

  .emv-views,
  .emv-row > small{
    width:44px!important;

    font-size:9px!important;
  }
}