/* ============================================================
   Video Repair problem pages (/tools/video-repair/<slug>/) — layered on
   video-repair.css. Built by scripts/build_video_repair_pages.py.
   ============================================================ */
.vrp .vrpg-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--ink-on-dark);
  background:radial-gradient(900px 520px at 6% 108%,#0f2656 0%,transparent 60%),
             linear-gradient(180deg,#09152a 0%,#071123 60%,#060e20 100%);
  padding:clamp(1.6rem,3.5vw,2.6rem) 0 clamp(8rem,12vw,9.5rem)}
.vrp .vrpg-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;
  background-image:linear-gradient(rgba(124,196,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(124,196,255,.08) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse 60% 80% at 20% 40%,#000 20%,transparent 75%)}
.vrp .vrpg-hero .vrp-eyebrow{color:var(--volt-2)}
.vrp .vrpg-crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.82rem;color:var(--soft-on-dark);margin-bottom:clamp(1.1rem,2.6vw,1.8rem)}
.vrp .vrpg-crumbs a{color:var(--soft-on-dark);text-decoration:none}
.vrp .vrpg-crumbs a:hover{color:#fff}
.vrp .vrpg-crumbs span{opacity:.5}
.vrp .vrpg-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06;letter-spacing:-.03em;font-weight:850;margin:.9rem 0 0;color:#fff;max-width:22ch}
.vrp .vrpg-intro{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.65;color:var(--soft-on-dark);max-width:62ch;margin:1.1rem 0 0}
.vrp .vrpg-intro code,.vrp .vrpg-prose code{font:600 .9em ui-monospace,SFMono-Regular,Menlo,monospace;padding:.05em .4em;border-radius:6px}
.vrp .vrpg-intro code{color:#fff;background:rgba(124,196,255,.12);border:1px solid rgba(124,196,255,.25)}
.vrp .vrpg-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.vrp .vrpg-facts span{font-size:.84rem;font-weight:600;color:var(--volt-3);padding:.4rem .85rem;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line)}

/* the article */
.vrp .vrpg-article{padding-top:clamp(3rem,7vw,5rem)}
.vrp .vrpg-prose{max-width:780px;font-size:1.04rem;line-height:1.75;color:var(--text)}
.vrp .vrpg-prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:2.6rem 0 .8rem}
.vrp .vrpg-prose h2:first-child{margin-top:0}
.vrp .vrpg-prose h3{font-size:1.18rem;font-weight:780;margin:1.8rem 0 .5rem}
.vrp .vrpg-prose p{margin:0 0 1.05rem}
.vrp .vrpg-prose ul,.vrp .vrpg-prose ol{margin:0 0 1.2rem;padding-left:1.4rem}
.vrp .vrpg-prose li{margin:.35rem 0}
.vrp .vrpg-prose code{color:var(--text);background:var(--bg);border:1px solid var(--border)}
.vrp .vrpg-prose blockquote{margin:1.4rem 0;padding:1rem 1.2rem;border-left:4px solid var(--volt);background:var(--bg);border-radius:0 14px 14px 0}
.vrp .vrpg-prose blockquote p{margin:0}
.vrp .vrpg-table{overflow-x:auto;margin:1.2rem 0 1.6rem;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.vrp .vrpg-table table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.5}
.vrp .vrpg-table th,.vrp .vrpg-table td{padding:.75rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.vrp .vrpg-table tr:last-child th,.vrp .vrpg-table tr:last-child td{border-bottom:0}
.vrp .vrpg-table thead th{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft);background:var(--bg)}
.vrp .vrpg-table tbody th{font-weight:700;white-space:nowrap}
.vrp .vrpg-faq-a p{margin:0 0 .6rem}

/* more fixes */
.vrp .vrpg-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:clamp(1.6rem,3vw,2.4rem)}
.vrp .vrpg-card{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem 1.3rem;border-radius:18px;text-decoration:none;
  color:var(--text);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.vrp .vrpg-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--volt)}
.vrp .vrpg-card b{font-size:1.02rem;line-height:1.35}
.vrp .vrpg-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.vrp .vrpg-back{text-align:center;margin:clamp(2rem,4vw,2.8rem) 0 0}

@media (max-width:640px){
  .vrp .vrpg-table tbody th{white-space:normal}
  .vrp .vrpg-prose{font-size:1rem}
}

/* code */
.vrp .vrpg-prose pre{margin:0 0 1.2rem;padding:1rem 1.2rem;border-radius:14px;background:#0b1730;color:#eaf2ff;overflow-x:auto;
  font:500 .88rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.vrp .vrpg-prose pre code{background:none;border:0;padding:0;color:inherit;font:inherit;white-space:pre}
.vrp .vrpg-prose p code{overflow-wrap:anywhere}

/* the picture beside the words, on wide screens only (phones go straight to the tool) */
.vrp .vrpg-art{display:none}
@media (min-width:1000px){
  .vrp .vrpg-hero .wrap{position:relative}
  .vrp .vrpg-hero h1{max-width:min(20ch,46vw)}
  .vrp .vrpg-intro{max-width:min(36rem,46vw)}
  .vrp .vrpg-art{display:block;position:absolute;right:clamp(16px,4vw,32px);top:50%;transform:translateY(-50%);
    width:min(36vw,460px);aspect-ratio:4/3;margin:0;border-radius:24px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(124,196,255,.18)}
  .vrp .vrpg-art img{display:block;width:100%;height:100%;object-fit:cover}
}