/* ========================================================================
   /pages/rigs — the practice rigs, listed from the store's live catalogue.
   Loaded after mockup-home.css and mockup-guide.css, which supply the
   palette, buttons, .eyebrow / .section-title / .section-sub, the hero,
   the video cards, the CTA band and the FAQ.
   ======================================================================== */

/* ---- the range ---- */
.rg-list{padding:80px 40px;background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rg-list .section-sub{max-width:76ch}
.rg-rows{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);margin-top:44px}
/* scroll-margin clears the sticky nav when a row is the target of #half_table etc. */
.rg-row{display:grid;grid-template-columns:340px 1fr;background:var(--ink);scroll-margin-top:96px}

/* The store's pictures are a mix of landscape photos and portrait posters, so
   the image keeps its own shape and the dark box takes up the slack. */
.rg-media{display:flex;align-items:center;justify-content:center;background:#07080a;overflow:hidden}
.rg-media img{display:block;width:100%;height:auto;transition:transform 0.5s ease}
.rg-media:hover img{transform:scale(1.03)}

.rg-body{padding:36px 40px 38px;display:flex;flex-direction:column;justify-content:center}
.rg-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;
}
.rg-name{
  font-family:'Fraunces',serif;font-size:clamp(22px,2.2vw,28px);font-weight:700;
  letter-spacing:-0.01em;line-height:1.2;margin-bottom:10px;
}
.rg-name a{color:var(--ivory);text-decoration:none;transition:color 0.2s}
.rg-name a:hover{color:var(--gold)}
.rg-sub{font-size:13px;color:var(--muted);letter-spacing:0.3px;margin-bottom:14px}
.rg-blurb{color:var(--ivory-dim);font-size:16px;line-height:1.65;max-width:68ch;margin-bottom:24px}

.rg-buy{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid var(--line);
}
.rg-price-label{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.4px;margin-bottom:4px;
}
.rg-price{font-family:'Fraunces',serif;font-size:38px;font-weight:800;color:var(--gold);line-height:1.05;letter-spacing:-0.02em}
.rg-was{font-size:14px;color:var(--muted);margin-top:6px}
.rg-was strong{color:var(--ivory-dim);font-weight:600;margin-left:8px}

/* Label + value on one line with a hanging indent — plain text flow, not a
   grid, so a long delivery note wraps under itself rather than under the label. */
.rg-facts{list-style:none;margin-top:22px}
.rg-facts li{
  padding-left:104px;text-indent:-104px;
  color:var(--ivory-dim);font-size:14px;line-height:1.6;
}
.rg-facts li + li{margin-top:6px}
.rg-fact-k{
  display:inline-block;width:104px;text-indent:0;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.3px;
}

/* ---- which rig ---- */
.rg-pick{padding:80px 40px;background:var(--ink)}
.rg-pick .section-sub{max-width:76ch}
.rg-pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.rg-pick-card{background:var(--ink-2);padding:32px 30px}
.rg-pick-step{
  font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;
}
.rg-pick-card h3{font-family:'Fraunces',serif;font-size:21px;font-weight:700;color:var(--ivory);margin-bottom:10px}
.rg-pick-card p{color:var(--ivory-dim);font-size:15px;line-height:1.65}

/* ---- videos ---- */
.rg-videos{padding:80px 40px;background:var(--ink-2);border-top:1px solid var(--line)}
.rg-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}

/* ---- responsive ---- */
@media (max-width:1024px){
  .rg-list,.rg-pick,.rg-videos{padding-left:24px;padding-right:24px}
  .rg-row{grid-template-columns:280px 1fr}
  .rg-body{padding:30px 28px 32px}
  .rg-pick-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rg-row{grid-template-columns:1fr}
  .rg-media img{max-width:440px}
  .rg-body{padding:26px 22px 30px}
  .rg-video-grid{grid-template-columns:1fr}
  .rg-buy .btn-primary{width:100%;justify-content:center}
}