/* assets/css/groke-blog.css
 * Blog post layout. Loaded after groke-2026.css on /blog/<post>/ pages only.
 * Styles the article components that already live inside each post
 * (callouts, fee tables, prompt blocks, score rows, related cards...).
 */

.post-head{padding:40px 0 8px}
.post-head .wrap{max-width:920px}
.post-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-500);margin-bottom:18px}
.post-head h1{font-size:46px;line-height:1.1;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.post-dek{font-size:19px;line-height:1.6;color:var(--ink-500);max-width:62ch;margin-top:18px}
.post-by{display:flex;align-items:center;gap:12px;margin-top:26px}
.post-by strong{display:block;font-size:14.5px}
.post-by small{display:block;font-size:13px;color:var(--ink-500)}
.post-cover{margin:32px 0 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ink-200);background:var(--surface-1)}
.post-cover img{width:100%;height:auto;aspect-ratio:812/457;object-fit:cover}

.post-wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;padding-top:48px;padding-bottom:40px;align-items:start}
.post-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.toc-box__title{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-400);margin-bottom:10px}
.toc-list{display:flex;flex-direction:column;border-left:1px solid var(--ink-200)}
.toc-list li{margin:0}
.toc-list a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--ink-500);transition:color .15s,border-color .15s}
.toc-list a:hover{color:var(--orange-600);border-left-color:var(--orange-500)}
.sb-cta{border:1px solid var(--ink-200);border-radius:var(--radius);padding:18px;background:var(--surface-1)}
.sb-cta__tag{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--orange-700);margin-bottom:8px}
.sb-cta__title{font-weight:700;font-size:15px;line-height:1.35;margin-bottom:6px;color:var(--ink-900)}
.sb-cta__sub{font-size:13px;line-height:1.55;color:var(--ink-500);margin-bottom:12px}
.sb-cta a{font-size:13.5px;font-weight:600;color:var(--orange-600)}

/* ---------- article prose ---------- */
.post-content{max-width:720px;min-width:0;font-size:17px;line-height:1.78;color:var(--ink-700)}
.post-content > * + *{margin-top:20px}
.post-content h2{font-size:29px;line-height:1.2;letter-spacing:-.02em;margin-top:56px;color:var(--ink-900);scroll-margin-top:96px}
.post-content h3{font-size:20px;line-height:1.3;margin-top:36px;color:var(--ink-900);scroll-margin-top:96px}
.post-content h4{font-size:17px;margin-top:28px;color:var(--ink-900)}
.post-content p{margin:0}
.post-content p + p{margin-top:18px}
.post-content ul,.post-content ol{padding-left:22px;display:flex;flex-direction:column;gap:9px}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content li::marker{color:var(--orange-500)}
.post-content a{color:var(--orange-600);text-decoration:underline;text-underline-offset:3px}
.post-content a:hover{color:var(--orange-700)}
.post-content strong{color:var(--ink-900);font-weight:700}
.post-content img{border-radius:var(--radius);border:1px solid var(--ink-200)}
.post-content blockquote{border-left:3px solid var(--orange-500);padding:4px 0 4px 20px;color:var(--ink-900);font-size:18px;margin-left:0}
.post-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--surface-2);border-radius:4px;padding:1px 5px}

.post-content table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.post-content > table{display:block;overflow-x:auto}
.post-content th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-400);padding:12px 14px;border-bottom:1px solid var(--ink-200);background:var(--surface-1);white-space:nowrap}
.post-content td{padding:12px 14px;border-bottom:1px solid var(--ink-100);vertical-align:top}
.post-content tr:last-child td{border-bottom:none}
.tbl-wrap{overflow-x:auto;border:1px solid var(--ink-200);border-radius:var(--radius)}
.fee-hi{color:var(--orange-600);font-weight:700}

.post-content .callout{border:1px solid var(--ink-200);border-left:3px solid var(--orange-500);background:var(--surface-1);border-radius:var(--radius);padding:18px 22px;font-size:16px;line-height:1.7}
.post-content .callout p + p{margin-top:10px}

.calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px dashed var(--ink-200);font-size:15.5px}
.post-content .calc-row + .calc-row{margin-top:0}
.calc-row__v{font-weight:700;color:var(--ink-900);font-variant-numeric:tabular-nums;white-space:nowrap}

.score-row{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--ink-100)}
.post-content .score-row + .score-row{margin-top:0}
.score-row__num{width:38px;height:38px;border-radius:50%;background:var(--orange-50);color:var(--orange-700);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.score-row__title{font-weight:700;color:var(--ink-900)}
.score-row__detail{font-size:15px;color:var(--ink-500);margin-top:3px}

.step-heading,.tactic-heading{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:800;line-height:1.3;letter-spacing:-.015em;color:var(--ink-900)}
.post-content h2.step-heading,.post-content h2.tactic-heading{font-size:24px;margin-top:52px}
.step-num,.tactic-num{display:inline-flex;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--ink-900);color:#fff;font-size:14px;font-weight:700;align-items:center;justify-content:center;letter-spacing:0}
.tactic-num{background:var(--orange-500)}

.ref-item{display:flex;gap:10px;font-size:14px;line-height:1.55;color:var(--ink-500)}
.post-content .ref-item + .ref-item{margin-top:8px}
.ref-item__n{font-weight:700;color:var(--ink-400);flex-shrink:0}

.prompt-num{display:flex;align-items:baseline;gap:10px;margin-top:40px}
.prompt-num__n{font-weight:800;color:var(--orange-700);font-size:15px}
.prompt-num__label{font-weight:700;color:var(--ink-900);font-size:18px}
.prompt-block{border:1px solid var(--ink-200);border-radius:var(--radius);overflow:hidden;background:var(--surface-1)}
.prompt-block__header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--ink-200);background:var(--surface-0)}
.prompt-block__label{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-400)}
.copy-btn{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--ink-200);background:var(--surface-0);color:var(--ink-900);border-radius:6px;padding:5px 12px;cursor:pointer;transition:border-color .15s,color .15s}
.copy-btn:hover{border-color:var(--orange-500);color:var(--orange-600)}
.prompt-block__code{margin:0;padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word;color:var(--ink-700);background:transparent}
.prompt-var{background:var(--orange-50);color:var(--orange-700);border-radius:4px;padding:0 4px}

.faq-item{border-bottom:1px solid var(--ink-200);padding:16px 0}
.post-content .faq-item + .faq-item{margin-top:0}
.faq-item h3,.faq-item h4,.faq-item summary,.faq-item button{font:inherit;font-size:17px;font-weight:700;color:var(--ink-900);margin:0 0 6px;background:none;border:0;padding:0;text-align:left;width:100%}
.faq-item [hidden]{display:block}

/* ---------- end-of-article blocks ---------- */
.post-content .post-cta{border-radius:var(--radius);background:var(--ink-900);padding:32px;margin-top:52px}
.post-content .post-cta__tag{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--orange-500)}
.post-content .post-cta__title{color:#fff;font-size:25px;margin:10px 0 10px}
.post-content .post-cta__sub,.post-content .post-cta p{color:#B9B9B9;font-size:15.5px;line-height:1.6;margin:0 0 20px}
.post-content .post-cta a{display:inline-flex;background:var(--orange-500);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:13px 24px;border-radius:8px}
.post-content .post-cta a:hover{background:var(--orange-600);color:#fff}
.post-content .share-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:24px 0;border-bottom:1px solid var(--ink-200)}
.share-strip__lbl{font-size:13.5px;color:var(--ink-500);font-weight:600;margin-right:4px}
.post-content .share-btn{font-size:13px;font-weight:600;border:1px solid var(--ink-200);border-radius:20px;padding:6px 14px;color:var(--ink-700);text-decoration:none}
.post-content .share-btn:hover{border-color:var(--orange-500);color:var(--orange-600)}
.related-sec__ttl{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;color:var(--ink-400);margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.post-content .related-card{border:1px solid var(--ink-200);border-radius:var(--radius);padding:16px 18px;text-decoration:none;display:block;background:var(--surface-0);transition:border-color .15s}
.post-content .related-card:hover{border-color:var(--orange-500)}
.related-card__cat{font-size:12px;color:var(--orange-600);font-weight:700;margin-bottom:6px}
.related-card__title{font-size:15px;font-weight:600;color:var(--ink-900);line-height:1.45}

@media (max-width:1024px){
  .post-wrap{grid-template-columns:1fr;gap:32px}
  .post-toc{position:static}
  .toc-box{border:1px solid var(--ink-200);border-radius:var(--radius);padding:18px}
}
@media (max-width:768px){
  .post-head h1{font-size:31px}
  .post-dek{font-size:17px}
  .post-content{font-size:16.5px}
  .post-content h2{font-size:24px;margin-top:44px}
  .related-grid{grid-template-columns:1fr}
  .post-content .post-cta{padding:24px}
}

/* ---------- article components (previously styled inline per post) ---------- */
.tip-box,.warn-box{border-radius:var(--radius);padding:18px 22px;font-size:16px;line-height:1.7}
.tip-box{background:var(--green-50);border:1px solid #BFE6CE}
.warn-box{background:var(--orange-50);border:1px solid var(--orange-100)}
.tip-box__ttl,.warn-box__ttl{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px}
.tip-box__ttl{color:var(--green-600)}
.warn-box__ttl{color:var(--orange-700)}
.tip-box p,.warn-box p{margin:0;color:var(--ink-700)}
.tip-box p + p,.warn-box p + p{margin-top:8px}

.calc-card,.decision-card,.section-group{border:1px solid var(--ink-200);border-radius:var(--radius);background:var(--surface-1);padding:24px 26px}
.calc-lbl,.decision-card__lbl,.formula-card__lbl,.section-group__title,.post-content .post-cta__label{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--orange-700)}
.post-content .post-cta__label,.formula-card__lbl{color:var(--orange-500)}
.calc-lbl{margin-bottom:4px}
.calc-ttl{font-size:17px;font-weight:700;color:var(--ink-900);margin-bottom:14px}
.calc-row__l{color:var(--ink-500)}
.calc-row__v.bad{color:var(--red-600)}
.calc-row__v.good{color:var(--green-600)}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;padding-top:14px;border-top:2px solid var(--ink-900)}
.calc-total__l{font-size:16px;font-weight:700;color:var(--ink-900)}
.calc-total__v{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--orange-700);font-variant-numeric:tabular-nums}
.calc-badge{display:inline-block;margin-top:12px;background:var(--orange-50);border:1px solid var(--orange-100);border-radius:6px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--orange-700)}

.formula-card{background:var(--ink-900);border-radius:var(--radius);padding:30px 28px;text-align:center}
.formula-card__lbl{margin-bottom:12px}
.formula-card__eq{font-size:clamp(19px,2.6vw,26px);font-weight:800;line-height:1.4;color:#fff;margin-bottom:10px}
.formula-card__eq span{color:var(--orange-500)}
.formula-card__sub{font-size:14px;color:#A8A8A8}
.post-content .formula-card strong{color:#fff}

.decision-card__lbl{margin-bottom:6px}
.decision-card__title{font-size:17px;font-weight:700;color:var(--ink-900);margin-bottom:10px}
.decision-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--ink-200)}
.decision-row:last-child{border-bottom:none}
.decision-row__icon{width:34px;height:34px;border-radius:8px;background:var(--surface-0);border:1px solid var(--ink-200);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.decision-row__text{flex:1}
.decision-row__q{font-size:13.5px;font-weight:600;color:var(--ink-500);margin-bottom:2px}
.decision-row__a{font-size:15px;font-weight:600;color:var(--ink-900)}
.tag-amazon,.win-amazon{color:var(--orange-700) !important}
.tag-shopify,.win-shopify{color:#2855C8 !important}
.tag-both,.win-both{color:var(--green-600) !important}
.win-amazon,.win-shopify,.win-both{font-weight:700 !important}

.vs-split,.flag-grid,.limits-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.post-content .ref-grid .ref-item + .ref-item{margin-top:0}
.vs-card,.flag-card,.limit-card{border-radius:var(--radius);padding:20px 22px;border:1px solid var(--ink-200);background:var(--surface-0)}
.vs-card__head,.flag-card__title{font-size:12.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.vs-card--amazon{background:var(--orange-50);border-color:var(--orange-100)}
.vs-card--amazon .vs-card__head{color:var(--orange-700)}
.vs-card--shopify{background:#F1F5FF;border-color:#D6E0FB}
.vs-card--shopify .vs-card__head{color:#2855C8}
.post-content .vs-card ul{list-style:none;padding-left:0}
.flag-card--green{background:var(--green-50);border-color:#BFE6CE}
.flag-card--green .flag-card__title{color:var(--green-600)}
.flag-card--red{background:var(--red-50);border-color:#F3C6C6}
.flag-card--red .flag-card__title{color:var(--red-600)}
.post-content .flag-card ul{padding-left:18px}
.vs-card li,.flag-card li{font-size:15px}
.limit-card__icon{font-size:22px;margin-bottom:6px}
.limit-card__title{font-size:15px;font-weight:700;color:var(--ink-900);margin-bottom:4px}
.limit-card__desc{font-size:14px;line-height:1.6;color:var(--ink-500)}

.scorecard{border:1px solid var(--ink-200);border-radius:var(--radius);background:var(--surface-0);padding:4px 22px}
.scorecard .score-row{grid-template-columns:44px 1fr auto;align-items:start}
.scorecard .score-row:last-child{border-bottom:none}
.score-row__pass{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:100px;white-space:nowrap;align-self:center}
.pass-green{background:var(--green-50);color:var(--green-600)}
.pass-amber{background:#FEF3DD;color:#9A5B08}
.pass-red{background:var(--red-50);color:var(--red-600)}

.section-group__title{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.section-group__title::after{content:"";flex:1;height:1px;background:var(--orange-100)}

.timeline-item{display:flex;gap:16px;position:relative}
.post-content .timeline-item + .timeline-item{margin-top:0}
.timeline-item::before{content:"";position:absolute;left:15px;top:36px;bottom:0;width:2px;background:var(--ink-200)}
.timeline-item:last-child::before{display:none}
.timeline-dot{width:32px;height:32px;border-radius:50%;background:var(--orange-500);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.timeline-body{flex:1;padding-bottom:26px}
.timeline-body__title{font-size:16.5px;font-weight:700;color:var(--ink-900);margin-bottom:4px}
.timeline-body__sub{font-size:15px;line-height:1.6;color:var(--ink-500)}
.timeline-body__time{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--orange-700);background:var(--orange-50);border-radius:20px;padding:3px 10px}

.post-content .post-cta__label{margin-bottom:8px}

@media (max-width:768px){
  .vs-split,.flag-grid,.limits-grid,.ref-grid{grid-template-columns:1fr}
  .scorecard .score-row{grid-template-columns:40px 1fr}
  .score-row__pass{grid-column:2;justify-self:start}
}

/* calc rows stack on narrow screens: the value is nowrap and would otherwise push the page wider */
@media (max-width:560px){
  .calc-row{flex-direction:column;align-items:flex-start;gap:2px}
  .calc-row__v{white-space:normal}
  .calc-total{flex-direction:column;align-items:flex-start;gap:4px}
}


/* ---------- a11y: text contrast ---------- */
.related-card__cat,.sb-cta a,.post-content a,.fee-hi{color:var(--orange-text)}
.post-content a:hover{color:var(--ink-900)}

/* ---------- a11y: text on brand orange is ink (A11Y-02) ---------- */
.post-content .post-cta a,.post-content .post-cta a:hover{color:var(--ink-900)}
.tactic-num,.timeline-dot{color:var(--ink-900)}