/* ══ Review-opzet ══
   Alleen geladen door reviewpagina's in /artikelen/ (naast style.css). Een review is een artikel
   met een eigen kop: het oordeel staat bovenaan, en de onderdelen eronder laten het product zien
   in plaats van het alleen te beschrijven (bedienbaar display, uitklapbare stickmodule, clips,
   softwarebeelden, balken voor accu en vertraging).

   Kleuren en letters komen uit style.css (:root). Hier staan alleen de maten en de opbouw.
   Eerste review: ROG Raikiri II Pro PC (oktober 2026). Een volgende review hergebruikt deze
   klassen; alleen de inhoud en de beelden verschillen. */

/* ── Kop: titel links, render rechts ── */
.review-top { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; margin-bottom: 24px; }
.review-top__tekst .article-page__h1 { margin-bottom: 14px; }
.review-top__lead { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.92); margin: 0 0 18px; }
.review-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.review-chips li { font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffcc00; border: 1px solid rgba(255,204,0,0.35); padding: 6px 10px; }
.review-top__beeld { position: relative; background: linear-gradient(135deg, rgba(255,204,0,0.04), rgba(0,0,0,0.4)); border: 1px solid rgba(255,204,0,0.15); padding: 20px; }
.review-top__beeld img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: contain; }
.review-kleur { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.review-kleur button { font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.75); background: transparent; border: 1px solid rgba(255,255,255,0.2); padding: 7px 12px; cursor: pointer; }
.review-kleur button[aria-pressed="true"] { color: #000; background: #ffcc00; border-color: #ffcc00; }
.review-kleur button:focus-visible, .review-knop:focus-visible, .review-display__lijst button:focus-visible, .review-tabs__knoppen button:focus-visible { outline: 2px solid #ffcc00; outline-offset: 2px; }

/* ── Het oordeel ── */
.review-oordeel { display: grid; grid-template-columns: auto 1fr; gap: 24px 28px; align-items: center; padding: 24px 26px; margin: 0 0 20px; background: linear-gradient(135deg, rgba(255,204,0,0.10), rgba(255,204,0,0.03)); border: 1px solid rgba(255,204,0,0.35); }
.review-ring { --score: 0; width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ffcc00 calc(var(--score) * 10%), rgba(255,255,255,0.12) 0); }
.review-ring__midden { width: 108px; height: 108px; border-radius: 50%; background: #0b0b0b; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.review-ring__cijfer { font-family: var(--font-head); font-size: 38px; font-weight: 900; color: #fff; line-height: 1; }
.review-ring__van { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 1px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.review-oordeel__kop { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ffcc00; margin: 0 0 8px; }
.review-oordeel__zin { font-family: var(--font-head); font-size: clamp(16px, 2.4vw, 21px); font-weight: 700; line-height: 1.3; color: #fff; margin: 0 0 10px; }
.review-oordeel__uitleg { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0; }
.review-oordeel__uitleg a { color: #ffcc00; }
.review-oordeel .article-page__proscons { grid-column: 1 / -1; margin: 0; }

/* ── Prijsregel met de actuele winkelprijs ── */
.review-prijs { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; margin: 0 0 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); }
.review-prijs__label { font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 4px; }
.review-prijs__waarde { font-family: var(--font-head); font-size: 22px; font-weight: 900; color: #fff; margin: 0; }
.review-prijs__waarde small { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); margin-left: 8px; }

/* ── Inhoud (sprongen naar de onderdelen) ── */
.review-inhoud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 44px; padding: 0; list-style: none; }
.review-inhoud a { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .5px; color: rgba(255,255,255,0.85); text-decoration: none; border: 1px solid rgba(255,255,255,0.15); padding: 6px 12px; }
.review-inhoud a:hover { color: #000; background: #ffcc00; border-color: #ffcc00; }

/* ── Kader voor beeld en bediening ── */
.review-kader { background: linear-gradient(135deg, rgba(255,204,0,0.04), rgba(0,0,0,0.4)); border: 1px solid rgba(255,204,0,0.15); padding: 20px; margin: 24px 0; }
.review-bijschrift { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6); margin: 10px 0 0; }
.review-knop { font-family: var(--font-head); font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #000; background: #ffcc00; border: 0; padding: 10px 16px; cursor: pointer; }
.review-knop:hover { background: #e6b800; }
.review-knop--stil { color: #ffcc00; background: transparent; border: 1px solid rgba(255,204,0,0.5); }
.review-knop--stil:hover { color: #000; background: #ffcc00; }

/* ── Het display op de controller, te bedienen ── */
.review-display__controller { position: relative; line-height: 0; max-width: 660px; margin: 0 auto 18px; }
.review-display__controller > img:first-child { width: 100%; height: auto; display: block; }
/* De plek van het display is opgemeten op de render van ASUS: het zwarte vlak is 413 bij 220 px, op de
   uitsnede van 1665 bij 809 px die als display-basis.webp is opgeslagen (uitsnede vanaf 101,269). */
.review-display__controller > .review-display__scherm { position: absolute; left: 37.72%; top: 22.62%; width: 24.80%; height: 27.19%; object-fit: fill; border-radius: 3%; }
.review-display__paneel { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 22px; align-items: start; }
.review-display__groot { width: 100%; height: auto; aspect-ratio: 480 / 258; display: block; background: #000; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; }
.review-display__titel { font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ffcc00; margin: 0 0 6px; }
.review-display__tekst { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 0 0 14px; min-height: 72px; }
.review-display__pijlen { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.review-display__teller { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.7); }
.review-display__lijst { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.review-display__lijst button, .review-tabs__knoppen button { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); background: transparent; border: 1px solid rgba(255,255,255,0.18); padding: 5px 10px; cursor: pointer; }
.review-display__lijst button[aria-pressed="true"], .review-tabs__knoppen button[aria-pressed="true"] { color: #000; background: #ffcc00; border-color: #ffcc00; }

/* ── De stickmodule in lagen ── */
.review-lagen { position: relative; max-width: 560px; margin: 0 auto; aspect-ratio: 900 / 861; }
.review-lagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
/* Standaard staat de hele tekening van ASUS in beeld (ook zonder script). Het script zet heel even .is-dicht:
   de losse delen zakken dan zonder overgang weg, en komen bij het weghalen van de klasse een voor een terug. */
.review-lagen__module { transition-delay: .18s; }
.review-lagen__kap { transition-delay: .36s; }
.review-lagen.is-dicht img { transition: none; }
.review-lagen.is-dicht .review-lagen__plaat { transform: translateY(10%); opacity: 0; }
.review-lagen.is-dicht .review-lagen__module { transform: translateY(22%); opacity: 0; }
.review-lagen.is-dicht .review-lagen__kap { transform: translateY(32%); opacity: 0; }
.review-lagen__bediening { display: flex; justify-content: center; margin-top: 14px; }
.review-onderdelen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.review-onderdelen li { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 14px; text-align: center; }
.review-onderdelen img { width: 100%; max-width: 120px; height: 96px; object-fit: contain; display: block; margin: 0 auto 10px; }
.review-onderdelen strong { display: block; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ffcc00; margin-bottom: 4px; }
.review-onderdelen span { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.8); }

/* ── Clips ── */
.review-clips { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.review-clip { margin: 0; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); }
.review-clip video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: #000; }
.review-clip figcaption { padding: 12px 14px 14px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.review-clip figcaption strong { display: block; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ffcc00; margin-bottom: 4px; }

/* ── Balken (accu, vertraging) ── */
.review-balken { margin: 20px 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.review-balken li { display: grid; grid-template-columns: minmax(150px, 34%) 1fr auto; gap: 12px; align-items: center; font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.88); }
.review-balken__spoor { height: 14px; background: rgba(255,255,255,0.08); }
.review-balken__balk { display: block; height: 100%; width: calc(var(--deel) * 1%); background: #ffcc00; }
.review-balken__balk--ander { background: rgba(255,255,255,0.45); }
.review-balken__waarde { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }

/* ── Foto's van ASUS ── */
.review-foto { margin: 24px 0; }
.review-foto img { width: 100%; height: auto; display: block; border: 1px solid rgba(255,255,255,0.12); }
.review-foto figcaption { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6); margin-top: 8px; }

/* ── Softwarebeelden met tabbladen ── */
.review-tabs__knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.review-tabs__beeld { display: flex; align-items: center; justify-content: center; background: #050505; border: 1px solid rgba(255,255,255,0.12); min-height: 240px; }
.review-tabs__beeld img { max-width: 100%; max-height: 520px; width: auto; height: auto; display: block; }
.review-tabs__tekst { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.88); margin: 12px 0 0; min-height: 48px; }

/* ── Wat de testers vonden ── */
.review-testers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; padding: 0; list-style: none; }
.review-testers li { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid #ffcc00; padding: 16px 18px; }
.review-testers__bron { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #ffcc00; margin: 0 0 2px; }
.review-testers__cijfer { font-family: var(--font-head); font-size: 20px; font-weight: 900; color: #fff; margin: 0 0 8px; }
.review-testers__cijfer small { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.65); margin-left: 6px; }
.review-testers p.review-testers__tekst { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.85); margin: 0 0 8px; }
.review-testers a { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #ffcc00; }
.review-testers--klein li { border-left-color: rgba(255,255,255,0.35); }

/* ── De vier generaties ── */
.review-generaties { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.review-generaties li { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 12px; text-align: center; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.8); }
.review-generaties li.is-deze { border-color: rgba(255,204,0,0.6); }
.review-generaties img { width: 100%; height: auto; aspect-ratio: 400 / 314; object-fit: contain; display: block; margin-bottom: 8px; }
.review-generaties strong { display: block; font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-bottom: 4px; }

/* ── Video (officieel, pas laden na een klik) ── */
.review-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(255,255,255,0.12); background: #000; cursor: pointer; overflow: hidden; }
.review-video img, .review-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.review-video__speel { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0,0,0,0.65); border: 2px solid #ffcc00; display: grid; place-items: center; }
.review-video__speel svg { width: 28px; height: 28px; fill: #ffcc00; margin-left: 4px; }

/* ── Zo is deze review gemaakt ── */
.review-methode { padding: 20px 24px; background: rgba(255,255,255,0.03); border-left: 3px solid rgba(255,204,0,0.5); }
.review-methode p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0 0 10px; }
.review-methode p:last-child { margin-bottom: 0; }
.review-methode a { color: #ffcc00; }

/* ── Links in de vergelijkingstabel ── */
.article-page .vs-table a { color: #ffcc00; text-decoration: none; }
.article-page .vs-table a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .review-top, .review-display__paneel { grid-template-columns: 1fr; }
  .review-top__beeld { order: -1; }
  .review-oordeel { grid-template-columns: 1fr; justify-items: start; }
  .review-clips, .review-testers { grid-template-columns: 1fr; }
  .review-onderdelen, .review-generaties { grid-template-columns: 1fr 1fr; }
  .review-balken li { grid-template-columns: 1fr auto; }
  .review-balken__spoor { grid-column: 1 / -1; order: 3; }
  .review-display__groot { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .review-lagen img { transition: none; }
}