/*
  Toppen (scenen) under sidhuvudet, 2026-10-02 – template-parts/site-hero.php, inc/site-hero.php.
  Samma som prototypen (design/recensionsmall/topplista-co-prototyp.html). Bygger på recensionernas
  komponenter i review.css (.rv-redaktion, .rv-panel, .rv-btn, .rv-crumbs …).
*/

/* ---------- fullbred gul yta, asterisken och personen från den tidigare toppen ---------- */
.rv-redaktion .co-hero{
  --co-bg:var(--color-primary);--co-h:var(--color-error);--co-hi:var(--color-error);--co-txt:#00182A;--co-dek-w:400;
  --co-sm:#00182A;--co-sm2:rgba(0,24,42,.74);--co-rule:rgba(0,24,42,.2);--co-ast:var(--color-error);
  position:relative;overflow:hidden;background:var(--co-bg);color:var(--co-txt)}
/* Toppen börjar bakom sidhuvudet (som tar 50 px i flödet); luften upptill är lika hög som ön (60/72 px) */
.rv-redaktion.rv-redaktion .co-hero{margin-top:-50px;padding-top:60px}
@media (min-width:768px){ .rv-redaktion.rv-redaktion .co-hero{padding-top:72px} }
.rv-redaktion .co-stage{position:relative;isolation:isolate;padding:26px 0 24px}
.rv-redaktion .co-stage__txt{position:relative;z-index:2;min-width:0}
.rv-redaktion .co-hero .rv-crumbs,.rv-redaktion .co-hero .rv-crumbs a{color:var(--co-sm2)}
.rv-redaktion .co-hero .rv-crumbs a:hover,.rv-redaktion .co-hero .rv-crumbs [aria-current]{color:var(--co-sm)}
.rv-redaktion .co-hero .rv-crumbs span[aria-hidden]{color:var(--co-sm2)}
.rv-redaktion .co-h1{margin:16px 0 14px;max-width:11em;font-size:clamp(40px,5.6vw,64px);font-weight:750;line-height:.97;letter-spacing:-.047em;color:var(--co-h);text-wrap:balance}
.rv-redaktion .co-h1 span{color:var(--co-hi)}
.rv-redaktion .co-dek{max-width:27em;font-size:clamp(18px,1.6vw,20px);font-weight:var(--co-dek-w);line-height:1.45;letter-spacing:-.01em;color:var(--co-txt)}
.rv-redaktion .co-dek a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.rv-redaktion .co-stats{display:flex;flex-wrap:wrap;gap:14px 34px;max-width:520px;margin:26px 0 0;padding:16px 0 0;border-top:1px solid var(--co-rule)}
.rv-redaktion .co-stats > div{margin:0;padding:0}
.rv-redaktion .co-stats dt{font-size:13px;font-weight:500;line-height:1.3;color:var(--co-sm2)}
.rv-redaktion .co-stats dd{margin:3px 0 0;font-size:22px;font-weight:750;line-height:1.1;letter-spacing:-.025em;color:var(--co-txt);font-variant-numeric:tabular-nums}
.rv-redaktion .co-stage__art{position:absolute;z-index:1;right:-86px;bottom:-96px;pointer-events:none}
.rv-redaktion .co-stage__ast{display:block;width:190px;height:175px;color:var(--co-ast);transform:rotate(-9deg)}
.rv-redaktion .co-stage__man,.rv-redaktion .co-stage__pick{display:none}
.rv-redaktion .co-ad{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--rv-muted)}
.rv-redaktion .co-ad a{color:var(--rv-ink)}
@media (min-width:768px){
  .rv-redaktion .co-stage{display:grid;grid-template-columns:minmax(0,1fr) 200px;column-gap:24px;padding:40px 0 36px}
  .rv-redaktion .co-stage__art{position:relative;right:auto;bottom:auto;align-self:stretch}
  .rv-redaktion .co-stage__ast{position:absolute;left:50%;bottom:-98px;width:330px;height:304px;transform:translateX(-50%) rotate(-9deg)}
  .rv-redaktion .co-stage__man{display:block;position:absolute;left:50%;bottom:-36px;height:300px;width:auto;max-width:none;transform:translateX(-50%)}
}
@media (min-width:1024px){
  .rv-redaktion .co-stage{grid-template-columns:minmax(0,1fr) 200px var(--rv-aside);column-gap:28px;padding:52px 0 48px}
  .rv-redaktion .co-h1{font-size:clamp(52px,4.9vw,64px)}
  .rv-redaktion .co-stage__ast{width:370px;height:340px;bottom:-110px}
  .rv-redaktion .co-stage__man{height:350px;bottom:-48px}
  .rv-redaktion .co-stage__pick{display:block;position:relative;z-index:2;align-self:start}
  /* i scenen ligger ettan fast (i recensionerna klistrar den i sidokolumnen) */
  .rv-redaktion.rv-redaktion .co-stage__pick .rv-panel{position:static;top:auto;max-height:none;overflow:hidden;background:var(--rv-bg)}
}

/* ---------- Annonsinformationen: tooltip som sajtens övriga "Annonsinformation" ----------
   Länken under toppen och raden i ettan öppnar samma ruta. Den ligger ovanpå sidan (position:fixed,
   placeras av skriptet i template-parts/site-hero.php) och flyttar ingenting. */
.rv-redaktion .hf-tip-btn{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;line-height:inherit;letter-spacing:inherit;color:var(--rv-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rv-redaktion .hf-tip-btn--panel{display:flex;align-items:center;gap:7px;width:100%;min-height:44px;margin-top:12px;padding-top:4px;border-top:1px solid var(--rv-rule);font-size:13.5px;font-weight:600;text-align:left;text-decoration:none}
.rv-redaktion .hf-tip-btn--panel .rv-i{width:16px;height:16px}
.rv-redaktion .hf-tip-btn--panel:hover,.rv-redaktion .hf-tip-btn--panel[aria-expanded="true"]{text-decoration:underline;text-underline-offset:3px}
.rv-redaktion .hf-tip-btn:focus-visible{outline:2px solid var(--rv-blue);outline-offset:2px;border-radius:2px}
.rv-redaktion .hf-tip{position:fixed;z-index:90;left:16px;top:16px;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:16px;border-radius:6px;background:var(--rv-bg);color:var(--rv-text);box-shadow:0 0 0 1px var(--rv-rule),0 12px 32px -8px rgba(0,24,42,.3);font-size:13.5px;line-height:1.55;text-align:left}
.rv-redaktion .hf-tip[hidden]{display:none}
.rv-redaktion .hf-tip__h{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--rv-rule);font-size:15px;font-weight:800;line-height:1.2;color:var(--rv-ink)}
.rv-redaktion .hf-tip__t p{margin:0 0 .6em}
.rv-redaktion .hf-tip__t p:last-child{margin-bottom:0}