/* TASK-1097 (owner 20.10.2026, INBOX #228): the review's top on new = variant A of TASK-1042/1095 — one frame with
   the logo, the name with our score under it, and Visit with 18+ and the ad line under it; the legal line under the
   name and Visit inside the frame; the intro and byline below the frame. Rules = #rv-css of
   docs/os/work/TASK-1042/kit.html, variant A only (B and C dropped), prefix rv- (.hero is the homepage hero).
   compact.css (>= 1200) shrinks .casino-logo.real to 44, .score-ring to 40 and .action-button to 28 for the ranking
   row; the scoped rules below give the frame the sizes of the former review card: logo 72 high, ring 59 / value 21 /
   scale 16, Visit 45 high 17 px. Loaded after header.css on review pages only. */
.rv-hero { max-width: calc(var(--page-width) + 52px); margin: 0 auto; padding: 18px 26px 30px; text-align: left; }
.rv-hero h1 { margin: 0; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.rv-hero .review-intro { max-width: 780px; margin: 22px 0 14px; }
.rv-hero .byline { max-width: 780px; margin: 0; }
.rv-band + .byline { margin-top: 22px; }   /* no intro (Casinonic): the byline keeps the intro's gap from the frame */
.rv-hero .casino-logo.real { display: block; flex: none; height: 72px; width: auto; max-width: none; margin: 0; }
.rv-hero .casino-logo.real img { height: 100%; width: auto; border-radius: 12px; }
.rv-hero .score { flex-direction: row; justify-content: flex-start; gap: 7px; margin: 0; flex: none; }
.rv-hero .score-ring { width: 59px; height: 59px; }
.rv-hero .score-value { font-size: 21px; }
.rv-hero .score-scale { font-size: 16px; }
.rv-hero .action-button { min-height: 45px; padding: 7px 12px; font-size: 17px; line-height: 1.5; border-radius: 10px; }
.rv-hero .visit-button svg { width: 17px; height: 17px; }
.rv-hero .partner-label { margin: 0; text-align: center; }

/* the frame: logo | name with the score under it | Visit, 18+ and the ad line; the legal row under name + Visit.
   Name column at 1440: 1070 - 2*24 pad - 2 border - logo 169 (72*602/256) - Visit 260 - 2*28 gap = 535 ->
   «Golden Crown Casino Review 2026» at 40 px = 2 lines (TASK-1042 UX-03). */
.rv-band { display: grid; grid-template-columns: auto minmax(0, 1fr) 260px; grid-template-areas: "logo name act" ". legal legal";
  column-gap: 28px; row-gap: 12px; align-items: start; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 17px; }
.rv-band > .casino-logo { grid-area: logo; justify-self: start; }
.rv-name { grid-area: name; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.rv-a-act { grid-area: act; display: flex; flex-direction: column; gap: 6px; }
.rv-a-act .review-adline { margin-top: 4px; }
.rv-band > .review-legal { grid-area: legal; max-width: none; }

/* below 960 the phone layout is not drawn yet (TASK-1042 spec: a separate designer step) — fallback only:
   logo beside the name, Visit and the legal row full width under them */
@media (max-width: 959px) {
  .rv-band { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo name" "act act" "legal legal"; }
  .rv-a-act { max-width: 420px; }
}
/* phones: one column (logo 72 = 169 wide leaves the name ~110 px at 390), the hero padding of the former review head */
@media (max-width: 759px) {
  .rv-hero { padding: 12px 16px 22px; }
  .rv-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "name" "act" "legal"; padding: 16px 18px; row-gap: 14px; }
  .rv-hero .casino-logo.real { height: 56px; }
  .rv-a-act { max-width: none; }
  .rv-hero .review-intro { margin-top: 18px; }
}

/* ===== TASK-1093: reviews outside the top 10 — three states of the variant A band (designer, 20.10.2026,
   docs/os/work/TASK-1093/kit.html #rv-css-1093). Only existing tokens (--ink, --muted, --purple, --line). */

/* 1) No Visit (66 of 84): the action column is not in the markup at all (no button, no grey stub, no empty
      space, no Ad line). The name column takes the whole width; the legal row (18+, 1800 858 858) stays under it. */
.rv-band.rv-novisit { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo name" ". legal"; }

/* 2) No score (55 of 84): words instead of the ring — the same words the review prints in its «at a glance» table.
      Never a ring, a 0 or a dash: «no score» is not «zero» (brief U12). The link is the review's own link. */
.rv-noscore { display: flex; flex-wrap: wrap; align-items: center; column-gap: 5px; min-height: 44px; margin: 0;
  font-size: 16px; line-height: 1.4; color: var(--muted); }
.rv-noscore strong { font-weight: 800; color: var(--ink); }
.rv-noscore a { display: inline-flex; align-items: center; min-height: 44px; color: var(--purple);
  text-decoration: underline; text-underline-offset: 2px; }

/* 3) Long H1 (> 40 characters; outside the top 10 the median is 66, the longest 80 — leon, ozwin, razed, vegas-now).
      Name column at 1070 page with Visit = 535: 80 x 30 px Manrope 800 (~0.52 em per character) ~ 1250 = 3 lines;
      66 characters = 2 lines; without Visit the column is 823 — 2 lines. Top 10 (10-31 characters) keep 40. */
.rv-a.rv-long h1 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.18; }

/* 4) 760-959: logo and name side by side, the action column under them, not wider than a phone button */
@media (max-width: 959px) {
  .rv-a-act { max-width: 360px; }
  .rv-band.rv-novisit { grid-template-areas: "logo name" "legal legal"; }
}

/* 5) Phone < 760 — one column in DOM order: logo, H1, score (or «Not scored»), Visit full width, 18+, Ad line,
      legal. Score and Visit stay on the first screen of 390 x 844 with the 80-character H1 (Visit Y ~ 390-435). */
@media (max-width: 759px) {
  .rv-hero.rv-a { padding: 12px 16px 22px; }
  .rv-band, .rv-band.rv-novisit { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "name" "act" "legal";
    row-gap: 14px; padding: 16px; }
  .rv-band.rv-novisit { grid-template-areas: "logo" "name" "legal"; }
  .rv-hero .rv-band > .casino-logo.real { height: 52px; justify-self: start; }
  .rv-a h1 { font-size: 28px; }
  .rv-a.rv-long h1 { font-size: 25px; }
  .rv-a-act { max-width: none; }
  .rv-a-act .action-button { width: 100%; }
  .rv-a .review-intro { margin-top: 18px; }
}