/* /JD/Assets/CSS/resource-votes.css
   Sharklings Repository — star vote display.
   Greyed (unfilled) stars sit at low-opacity cream; filled stars use the
   site mustard/gold. The vote count is small Courier text. */

.rv-block{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.rv-stars{
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.rv-star{
  display: block;
  flex: 0 0 auto;
}

/* Unfilled = greyed out, using the cream at low opacity */
.rv-star path{
  fill: rgba(248, 237, 194, 0.22);
  transition: fill .15s ease;
}

/* Filled = mustard/gold */
.rv-star.is-on path{
  fill: var(--jd-mustard, #f6a921);
}

/* Vote count — matches the .p1 author/byline text (Courier 10px/12px, 500) */
.rv-count{
  font-family: "Courier New", monospace;
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--jd-cream, #F8EDC2);
  opacity: .75;
  -webkit-font-smoothing: auto;
}

/* ---- Grid card: stars sit above the cover image ---- */
.resource-card .rv-block--card{
  margin: 0 0 8px;
}

/* ---- List row: stars on their own line under the title ---- */
.resource-row .rv-block--row{
  display: flex;
  margin-top: 5px;
}

/* ---- show.php two-column header: cover left, text right ---- */
.resource-header{
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin: 0 0 6px;
}
.resource-header .rh-cover{
  flex: 0 0 240px;
  width: 240px;
}
.resource-header .rh-cover img{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #0d1206;
  border: 1px solid rgba(248, 237, 194, 0.18);
}
.resource-header .rh-text{
  flex: 1 1 auto;
  min-width: 0;
}
/* Pull the heading's top margin so it lines up with the top of the cover */
.resource-header .rh-text h1{ margin-top: 0; }
.resource-header .rh-byline{ margin-top: 6px; }
.resource-header .rh-writeup{ margin-top: 18px; line-height: 1.4; }

/* "Find out more" CTA under the write-up — roughly twice the normal .btn.mini size */
.resource-header .rh-cta{
  margin-top: 18px;
  padding: 12px 22px;
  font-size: calc((var(--h4) - 2px) * 2);
}

@media (max-width: 640px){
  .resource-header{
    flex-direction: column;
    gap: 16px;
  }
  .resource-header .rh-cover{
    flex-basis: auto;
    width: 200px;
    max-width: 60%;
  }
}

/* ---- show.php vote block ---- */
.resource-vote{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 6px 0 0;
}
.resource-vote .rv-block--show .rv-star{ }
.resource-vote .rv-vote-note{
  font-family: "Courier New", monospace;
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  color: var(--jd-cream, #F8EDC2);
  opacity: .7;
  margin: 0;
  -webkit-font-smoothing: auto;
}
.resource-vote .rv-vote-note a{
  color: var(--jd-mustard, #f6a921);
  text-decoration: none;
}
.resource-vote .rv-vote-note a:hover{ text-decoration: underline; }

/* Vote button — reuses .fav-btn .btn .mini; the voted state goes gold */
.resource-vote .rv-vote-btn{ cursor: pointer; }
.resource-vote .rv-vote-btn.is-on{
  background: var(--jd-mustard, #f6a921);
  border-color: var(--jd-mustard, #f6a921);
  color: var(--jd-nearly-blk, #151D0A);
}
.resource-vote .rv-vote-btn.is-on .rv-vote-label{ color: var(--jd-nearly-blk, #151D0A); }
.resource-vote .rv-vote-btn[disabled]{ opacity: .6; cursor: default; }