/* ==========================================================================
   Review feed and the half-star rating control.
   Uses only the tokens defined in styles.css.
   ========================================================================== */

/* ---------------- feed ---------------- */

.feed-items { display:flex; flex-direction:column; }

/* Hairline rows, not cards: cover on the left, the game and its review beside it. */
.feed-card { display:grid; grid-template-columns:88px minmax(0,1fr); gap:var(--space-5); padding:var(--space-5) 0; border-bottom:1px solid var(--line); }
.feed-card:first-child { padding-top:0; }
.feed-cover { width:88px; align-self:start; padding:0; border:0; background:none; cursor:pointer; border-radius:var(--radius-sm); box-shadow:var(--shadow-cover); }
.feed-cover .cover { border-radius:var(--radius-sm); }
.feed-cover:hover .cover img { filter:brightness(1.12); }
.feed-body { min-width:0; }
.feed-game { display:flex; align-items:baseline; gap:var(--space-1) var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-2); }
.feed-title {
  font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-xl); letter-spacing:var(--tracking-tight); line-height:var(--leading-tight);
  color:var(--text); background:none; border:0; padding:0; cursor:pointer; text-align:left;
}
.feed-title:hover { color:var(--accent-hover); }
.feed-reason { font-size:var(--text-sm); color:var(--text-muted); }
.feed-card .review-author { font-size:var(--text-ui); }
.feed-card .review-body { font-size:var(--text-md); color:var(--text-body); margin-top:var(--space-2); }
.feed-count { margin-top:var(--space-3); font-size:var(--text-sm); color:var(--text-muted); }

/* ==========================================================================
   HALF-STAR RATING

   rating.js builds each star as a container holding TWO svgs:

     span.rating-star
       svg                       <- the empty base
       span.star-fill(.full|.half)
         svg                     <- the amber overlay, clipped by the parent

   So the fill width is what changes, not the star. .star-fill carries .full
   and .half; the inner svg keeps the FULL star width so that clipping the
   parent to 50% shows exactly half a star.
   ========================================================================== */

.rating-picker { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.rating-picker > label { display:inline-flex; align-items:center; gap:var(--space-3); font-size:var(--text-ui); font-weight:500; }
.rating-picker .helper { flex-basis:100%; }

.rating-track { position:relative; display:inline-block; line-height:0; touch-action:none; }
.rating-stars { display:inline-flex; gap:var(--space-1); line-height:0; }

.rating-star {
  --star:28px;
  position:relative; display:block;
  width:var(--star); height:var(--star); flex:none;
}
.rating-star > svg { width:var(--star); height:var(--star); display:block; fill:var(--surface-3); }
.star-fill { position:absolute; inset:0; overflow:hidden; width:0; pointer-events:none; }
.star-fill > svg { width:var(--star); height:var(--star); display:block; fill:var(--accent); }
.star-fill.full { width:100%; }
.star-fill.half { width:50%; }

/* The native range stays on top: it keeps pointer drag, touch and the arrow
   keys working. It is invisible, not removed, so the control is still a range
   to a screen reader. */
.rating-input {
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; margin:0; padding:0; cursor:pointer;
  -webkit-appearance:none; appearance:none; background:none; border:0;
}
.rating-track:focus-within .rating-stars { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius); }

.rating-value { font-weight:500; font-size:var(--text-md); min-width:9ch; color:var(--text-muted); }
.rating-value.num { color:var(--text); }

/* Read-only star rows next to a review. Same markup, smaller. */
.review-rating .rating-star { --star:14px; }
.review-rating .rating-stars { gap:var(--space-1); }

@media (max-width:860px) {
  .feed-card { grid-template-columns:64px minmax(0,1fr); gap:var(--space-4); padding:var(--space-4); }
  .feed-cover { width:64px; }
  .feed-title { font-size:var(--text-lg); }
  .rating-star { --star:32px; }
}

/* ---------------- news (For you) ----------------
   A magazine: the first story runs full width with a big picture, the rest
   sit in a card grid. The side column holds the parts still being built. */

.news { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:var(--space-6); align-items:start; }
.news-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
.news-items > .empty-message { grid-column:1/-1; }
.news-row { display:flex; flex-direction:column; min-width:0; overflow:hidden; border-top:1px solid var(--line); padding-top:var(--space-4); }
.news-image { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); border-radius:var(--radius); }
.news-image img { width:100%; height:100%; object-fit:cover; display:block; }
/* No picture: a flat block so the row keeps its shape (the source is in the meta line below). */
.news-row:not(:has(.news-image))::before { content:""; display:block; aspect-ratio:16/9; background:var(--surface-2); border-radius:var(--radius); }
.news-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-3); font-size:var(--text-xs); color:var(--text-muted); }
.news-source { color:var(--text-body); font-weight:500; }
.news-tag { color:var(--accent); font-weight:500; }
.news-tag::before { content:"·"; margin-right:var(--space-2); color:var(--text-muted); }
.news-heading { margin-top:var(--space-2); font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-lg); line-height:var(--leading-tight); }
.news-title { color:var(--text); }
.news-title:hover { color:var(--accent-hover); text-decoration:none; }
.news-summary { margin-top:var(--space-2); font-size:var(--text-ui); color:var(--text-body); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-row:first-child { grid-column:1/-1; }
.news-row:first-child .news-image, .news-row:first-child:not(:has(.news-image))::before { aspect-ratio:21/9; }
.news-row:first-child .news-heading { font-size:var(--text-3xl); letter-spacing:var(--tracking-tight); }
.news-row:first-child .news-summary { font-size:var(--text-md); -webkit-line-clamp:4; }

.news-side { display:flex; flex-direction:column; gap:var(--space-4); position:sticky; top:calc(var(--header-h) + var(--space-5)); }
.side-block { padding:var(--space-3) 0 0; border-top:1px solid var(--line); }
.side-block .dev-tag { white-space:nowrap; }
.side-block h2 { display:inline; font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-md); margin-right:var(--space-2); }
.side-block p { margin-top:var(--space-2); font-size:var(--text-sm); color:var(--text-muted); }

@media (max-width:860px) {
  .news { grid-template-columns:minmax(0,1fr); gap:var(--space-5); }
  .news-side { position:static; }
}
@media (max-width:640px) {
  .news-items { grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
  .news-row:first-child .news-image, .news-row:first-child:not(:has(.news-image))::before { aspect-ratio:16/9; }
  .news-row:first-child .news-heading { font-size:var(--text-xl); }
}