/* ========================================================================
   Pixel Review (sh-review) – Main Stylesheet
   - Non-breaking polish of original: variables, a11y, dark, RTL, tweaks
   ======================================================================== */

:root {
  --sh-border: #e5e7eb;
  --sh-border-strong: #e2e8f0;
  --sh-bg: #ffffff;
  --sh-bg-soft: #f8fafc;
  --sh-text: #111827;
  --sh-text-muted: #374151;
  --sh-meta: #6b7280;

  --sh-badge-fg: #ffffff;
  --sh-badge-shadow: 0 6px 18px rgba(0,0,0,.12), inset 0 2px 6px rgba(255,255,255,.2);
  --sh-badge-shadow-hover: 0 8px 22px rgba(0,0,0,.18), inset 0 2px 6px rgba(255,255,255,.25);

  --sh-radius: 12px;
  --sh-radius-lg: 16px;
  --sh-pad: 16px;
  --sh-gap: 10px;

  --sh-star-empty: #d1d5db;
  --sh-star-fill:  #f59e0b;
}

/* ===== Base: Thumb wrapper for overlay positioning ===== */
.sh-thumb-wrap,
.post_featured,
.sc_blogger_item .post_featured,
.sc_blogger_item,
.sc_blogger_item_featured {
  position: relative;
}

/* Block scopes to avoid theme bleed */
.wp-block-sh-review-review-box,
.wp-block-sh-review-hero-card {
  display: block;
}

/* ========================================================================
   Star Box ([sh_review] shortcode) + block wrapper
   ======================================================================== */
.wp-block-sh-review-review-box .sh-review-box,
.sh-review-box {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  padding: var(--sh-pad);
  margin-block: 16px;
  display: grid;
  gap: var(--sh-gap);
  background: var(--sh-bg);
  color: var(--sh-text);
}

.sh-review-header { display:flex; align-items:center; gap:12px; }
.sh-score { font-size:28px; font-weight:700; }
.sh-of { font-size:14px; color:var(--sh-meta); margin-inline-start:2px; }
.sh-summary { color:var(--sh-text); }

/* Stars */
.sh-stars {
  display: inline-flex;
  gap: 4px;
  font-size: 20px;
  line-height: 1;
  color: var(--sh-star-empty);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
.sh-star {
  position: relative;
  display: inline-block;
  width: 1.05em; /* tiny bump improves subpixel clipping */
  color: var(--sh-star-empty);
}
.sh-star::before,
.sh-star::after { content:"★"; }
.sh-star::after {
  position: absolute;
  inset-inline-start: 0; top: 0;
  overflow: hidden;
  width: calc(var(--fill, 0) * 1.05em);
  color: var(--sh-star-fill);
  will-change: width;
}

/* ========================================================================
   IGN-like Review Card ([sh_review_card]/[sh-card]) + block wrapper
   ======================================================================== */
.wp-block-sh-review-hero-card .sh-card,
.sh-card {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  padding: var(--sh-pad);
  background: var(--sh-bg);
  display: grid;
  gap: 16px;
  color: var(--sh-text);
}

.sh-card--hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
.sh-card--list { grid-template-columns: 260px 1fr; align-items: center; }

.sh-card a { text-decoration: none; color: inherit; }

/* Media */
.sh-card__media, .sh-hero__media {
  position: relative;
  display: block;
  border-radius: calc(var(--sh-radius-lg) - 2px);
  overflow: hidden;
}
.sh-card__media img, .sh-hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect ratios */
.sh-hero__media { aspect-ratio: 16/9; height: auto; }
.sh-card--list .sh-card__media {
  aspect-ratio: 16/9;
  height: auto;
  max-block-size: 160px;
}

/* Fallback class for browsers/themes without aspect-ratio support */
.ar-16x9 { position: relative; inline-size:100%; }
.ar-16x9::before { content:""; display:block; padding-top:56.25%; }
.ar-16x9 > img, .ar-16x9 > iframe, .ar-16x9 > video {
  position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover;
}

/* Text */
.sh-card__title, .sh-hero__title { margin: 0 0 6px; font-weight: 800; }
.sh-card__title { font-size: 21px; line-height: 1.2; }
.sh-hero__title { font-size: 30px; line-height: 1.15; }
.sh-card__excerpt, .sh-hero__summary { color: var(--sh-text-muted); margin: 0; }

/* Meta */
.sh-card__meta, .sh-hero__meta { margin-top: 8px; color: var(--sh-meta); font-size: 14px; }

/* ========================================================================
   Badge Overlay
   ======================================================================== */
.sh-badge-wrap { position: absolute; z-index: 5; }
.sh-badge-wrap--tl { top: 8px; inset-inline-start: 8px; }
.sh-badge-wrap--tr { top: 8px; inset-inline-end: 8px; }
.sh-badge-wrap--bl { bottom: 8px; inset-inline-start: 8px; }
.sh-badge-wrap--br { bottom: 8px; inset-inline-end: 8px; }
.sh-badge-link { text-decoration: none; }

/* Badge core */
.sh-badge {
  --bg: #3498db;
  --fg: var(--sh-badge-fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: clamp(48px, 8vw, 72px);
  block-size: clamp(48px, 8vw, 72px);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: var(--sh-badge-shadow);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: transform .2s ease, box-shadow .2s ease;
  contain: content; /* prevents overflow jitter */
}
.sh-badge:hover {
  transform: scale(1.05);
  box-shadow: var(--sh-badge-shadow-hover);
}

/* Mini & auto variants */
.sh-badge--mini { inline-size: 56px; block-size: 56px; font-size: 0.9rem; }
.sh-badge--auto { inline-size: clamp(44px, 10vw, 72px); block-size: clamp(44px, 10vw, 72px); }

/* Values */
.sh-badge__value { font-size: 26px; white-space: nowrap; }
.sh-badge__of { font-size: 12px; opacity: .9; }

/* Color themes */
.sh-badge--emerald { --bg:#10b981; } /* 9.0–10.0  Suveränt */
.sh-badge--green   { --bg:#16a34a; } /* 8.0–8.9   Mycket bra */
.sh-badge--lime    { --bg:#84cc16; } /* 7.0–7.9   Bra */
.sh-badge--yellow  { --bg:#eab308; } /* 6.0–6.9   Helt ok */
.sh-badge--sky     { --bg:#0ea5e9; } /* 5.0–5.9   Okej */
.sh-badge--blue    { --bg:#2563eb; } /* 4.0–4.9   Meh */
.sh-badge--indigo  { --bg:#4f46e5; } /* 3.0–3.9   Svagt */
.sh-badge--purple  { --bg:#7c3aed; } /* 2.0–2.9   Medioker */
.sh-badge--orange  { --bg:#f97316; } /* 1.0–1.9   Dåligt */
.sh-badge--gray    { --bg:#6b7280; } /* 0.5–0.9   Mycket dåligt */
.sh-badge--red     { --bg:#e74c3c; } /* 0.0–0.4   Katastrof */

/* List variant badges (smaller) */
.sh-card--list .sh-badge {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-end: 10px;
  inline-size: 44px;
  block-size: 44px;
}
.sh-card--list .sh-badge__value { font-size: 16px; }
.sh-card--list .sh-badge__of { display: none; }

/* Single-view anchor */
.single-post .post_featured,
.single-post .post_header .post_featured,
.single-post .sh-thumb-wrap {
  position: relative;
}

/* ========================================================================
   Platforms
   ======================================================================== */
.sh-platforms { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* Overlay chips */
.sh-platforms--overlay {
  position: absolute; inset-inline-start: 10px; top: 10px;
  display: flex; gap: 6px; flex-wrap: wrap;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--sh-border-strong);
  border-radius: 9999px;
  padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Meta capsule */
.sh-platforms--meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--sh-border);
  background: var(--sh-bg-soft);
  border-radius: 9999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}

/* Label + icon */
.sh-platforms-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  letter-spacing: .2px;
}
.sh-platforms-label::before {
  content: "🎮";
  font-size: 14px;
  line-height: 1;
  transform: translateY(1px);
  opacity: .9;
}

/* Chips */
.sh-chip {
  background: #fff;
  border: 1px solid var(--sh-border-strong);
  color: #0f172a;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sh-chip:hover {
  background: #f1f5f9;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.sh-chip--more { opacity: .8; }

/* Meta row next to "Written by" */
.sh-hero__meta { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.sh-platforms--meta { order:1; }
.sh-meta__author { order:2; display:flex; align-items:center; gap:6px; font-size:14px; color:var(--sh-text-muted); }
.sh-author-ic { inline-size:16px; block-size:16px; fill:#6b7280; }
.sh-author-link { text-decoration:none; color:inherit; }
.sh-author-link:hover { text-decoration:underline; }

/* ========================================================================
   Editor placeholder
   ======================================================================== */
.sh-editor-placeholder {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
}

/* Inline badge */
.sh-badge-inline { display:inline-block; margin:0 4px; }

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 900px){
  .sh-card--hero, .sh-card--list { grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .sh-platforms--meta {
    inline-size: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 14px;
  }
}

/* ========================================================================
   Dark mode polish
   ======================================================================== */
@media (prefers-color-scheme: dark){
  .sh-review-box,
  .sh-card { background:#0b1220; border-color:#1f2937; }
  .sh-card__excerpt, .sh-hero__summary { color:#cbd5e1; }
  .sh-card__meta, .sh-hero__meta { color:#94a3b8; }
  .sh-platforms--meta { background:#0f172a; border-color:#1f2937; }
  .sh-summary { color:#e5e7eb; }
  .sh-stars { color: #374151; }  /* empty star tint */
  .sh-star { color: #374151; }
  .sh-star::after { color:#fbbf24; } /* filled */
}

/* ========================================================================
   High-contrast mode (forced colors)
   ======================================================================== */
@media (forced-colors: active) {
  .sh-badge {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .sh-platforms--overlay {
    background: Canvas;
  }
}

/* ========================================================================
   Reduced motion
   ======================================================================== */
@media (prefers-reduced-motion: reduce){
  .sh-badge { transition: none; }
  .sh-badge:hover {
    transform: none;
    box-shadow: var(--sh-badge-shadow);
  }
}
/* ========================================================================
   Pros & Cons (auto-layout)
   ======================================================================== */
.sh-review-pc {
  margin-top: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}
.sh-review-pc__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.sh-review-pc__cols {
  display: grid;
  gap: 12px;
  /* Auto: 2 kolumner när det får plats, annars 1 – helt utan media queries */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.sh-review-pc__col {
  background:#f9fafb;
  border:1px solid #eef2f7;
  border-radius:10px;
  padding:12px;
  min-width: 0;                 /* förhindra overflow i smala layouter */
}
.sh-review-pc__col--pros .sh-review-pc__head { color:#065f46; }
.sh-review-pc__col--cons .sh-review-pc__head { color:#7f1d1d; }
.sh-review-pc__head { font-weight:600; margin-bottom:6px; font-size:13px; }
.sh-review-pc__list { margin:0; padding-inline-start: 18px; }
.sh-review-pc__list li {
  margin: 4px 0;
  line-height: 1.35;
  overflow-wrap: anywhere;      /* bryt väldigt långa ord/rader snyggt */
}

/* (TA BORT din gamla media query – behövs inte längre) */
/* @media (max-width: 600px){ .sh-review-pc__cols { grid-template-columns: 1fr; } } */

/* ========================================================================
   Pros & Cons – inuti hero card (behåll så den spänner över hela nederkanten)
   ======================================================================== */
.sh-card--hero > .sh-hero__pc.sh-review-pc {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sh-border);
}
.sh-card--hero .sh-hero__pc .sh-review-pc__title { display: none; }
.sh-card--hero .sh-hero__pc .sh-review-pc__col {
  background: var(--sh-bg);
  border: 1px solid #eef2f7;
}