/* =====================================================================
   versus.css — comparison components for versus blog articles.
   Loads on top of styles.css + blog.css and only adds what the blog
   template does not already provide: the comparison table, the pricing
   pair, and the verdict pair. Everything else uses .art-* from blog.css.
   ===================================================================== */

/* ---------- COMPARISON TABLE ---------- */
.cmp{ margin:26px 0 0; border:1px solid var(--color-gray-200); border-radius:18px; background:#fff; overflow:hidden; }
.cmp__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp table{ width:100%; min-width:640px; border-collapse:collapse; text-align:left; }
.cmp th, .cmp td{ padding:14px 18px; vertical-align:top; border-bottom:1px solid var(--color-gray-200); }
.cmp thead th{ background:#f7f8fd; font-size:12px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--color-gray-500); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{ border-bottom:0; }
.cmp tbody th{ font-size:14px; font-weight:700; line-height:1.45; color:var(--color-gray-900); width:24%; }
.cmp td{ font-size:14px; font-weight:500; line-height:1.5; color:var(--color-gray-600); width:38%; }
.cmp .is-own{ background:linear-gradient(180deg,#f6f7ff 0%,#fbfbff 100%); }
.cmp thead .is-own{ background:#eef0ff; color:var(--color-brand); }
.cmp td.is-own{ color:var(--color-gray-900); font-weight:600; }
.cmp__yes, .cmp__no{ display:inline-flex; align-items:center; gap:7px; font-weight:700; }
.cmp__yes{ color:var(--color-green-600); }
.cmp__no{ color:var(--color-gray-500); font-weight:600; }
.cmp__yes svg, .cmp__no svg{ width:15px; height:15px; flex:none; }
/* caption under the table — needs to beat `.art-sec p` from blog.css */
.art-sec p.cmp__note, .cmp__note{ margin:12px 0 0; font-size:13px; font-weight:500;
  line-height:1.5; color:var(--color-gray-500); }

/* ---------- CAPTIONED FIGURE ---------- */
/* .art-fig from blog.css crops with object-fit, so a captioned figure needs its own box */
figure.art-fig--cap{ margin:0; background:transparent; border-radius:0; overflow:visible; }
figure.art-fig--cap img{ width:100%; height:auto; object-fit:contain; border-radius:20px; display:block; }
figure.art-fig--cap figcaption{ margin-top:10px; padding-bottom:2px; font-size:13px; font-weight:500;
  line-height:1.65; color:var(--color-gray-500); text-align:center; overflow:visible; }

/* ---------- PRICING PAIR ---------- */
.pcards{ margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pcard{ border:1px solid var(--color-gray-200); border-radius:18px; background:#fff; padding:22px; }
.pcard--own{ border-color:var(--color-brand-300); background:linear-gradient(180deg,#f7f8ff 0%,#fff 100%); }
.pcard__name{ display:block; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--color-gray-500); }
.pcard--own .pcard__name{ color:var(--color-brand); }
.pcard__price{ display:block; margin:9px 0 2px; font-size:28px; font-weight:800; letter-spacing:-1px; color:var(--color-gray-900); }
.pcard__price span{ font-size:15px; font-weight:700; }
.pcard__unit{ display:block; font-size:13px; font-weight:600; color:var(--color-gray-500); }
.pcard__desc{ margin:13px 0 0; font-size:14px; font-weight:500; line-height:1.55; color:var(--color-gray-600); }

/* ---------- VERDICT PAIR ---------- */
.verdict{ margin:26px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.vbox{ border:1px solid var(--color-gray-200); border-radius:18px; background:#fff; padding:24px 22px; }
.vbox--own{ border-color:var(--color-brand-300); background:linear-gradient(180deg,#f7f8ff 0%,#fff 100%); }
.vbox__title{ margin:0 0 13px; font-size:18px; font-weight:700; letter-spacing:-.3px; color:var(--color-gray-900); }
.vbox ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.vbox li{ position:relative; padding-left:19px; font-size:14px; font-weight:500; line-height:1.55; color:var(--color-gray-600); }
.vbox li::before{ content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--color-brand); }
.vbox--other li::before{ background:#9aa0b4; }

/* the related-article cards are links here, so drop the default underline */
a.article, a.article:hover, a.article:visited{ text-decoration:none; color:inherit; }
a.article *{ text-decoration:none; }

@media (max-width:900px){
  .pcards, .verdict{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .cmp th, .cmp td{ padding:12px 14px; }
}