/* WriteUpCafe Widgets — THE canonical stylesheet.
   The `.gpw …` block is lifted verbatim from the approved mockup
   (writeupcafe-widgets-admin.html) so on-site, shortcode and off-site-embed
   output can never drift. Loaded on writeup pages and injected once by
   /embed/widget.js on external pages. Font-family fallbacks (sans-serif /
   serif / monospace) keep it sane if Google Fonts is blocked.
   See docs/README_WIDGETS_FOR_CLAUDE_CODE.md §5a. */

/* ===== the embeddable widget itself (themeable via vars) ===== */
.gpw{
  --gpw-accent:#E8553D; --gpw-radius:18px; --gpw-paper:#fff; --gpw-surface:#FBF9F6;
  --gpw-ink:#1C1814; --gpw-muted:#6E665E; --gpw-faint:#9A9189; --gpw-line:rgba(28,24,20,.10);
  --gpw-pad:30px;
  font-family:'DM Sans',sans-serif;background:var(--gpw-surface);border:1px solid var(--gpw-line);
  border-radius:var(--gpw-radius);padding:var(--gpw-pad);margin:20px 0;position:relative;
}
.gpw.dark{--gpw-paper:#1a1714;--gpw-surface:#141210;--gpw-ink:#f0ebe3;--gpw-muted:rgba(240,235,227,.6);--gpw-faint:rgba(240,235,227,.35);--gpw-line:rgba(255,255,255,.1);}
.gpw.compact{--gpw-pad:20px;}
.gpw *{box-sizing:border-box;}
.gpw a{text-decoration:none !important;}  /* defend against host article link styles (e.g. .wp-body a underline) */
.gpw-eyebrow{font-family:'DM Mono',monospace;font-size:11px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--gpw-accent);display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.gpw-eyebrow::before{content:'';width:24px;height:1.5px;background:var(--gpw-accent);}
.gpw-h{font-family:'Playfair Display',serif;font-weight:800;font-size:24px;line-height:1.2;letter-spacing:-.4px;color:var(--gpw-ink);margin-bottom:9px;}
.gpw-sub{font-size:14px;line-height:1.6;color:var(--gpw-muted);margin-bottom:20px;}
.gpw-list{display:flex;flex-direction:column;gap:11px;}
.gpw-row{display:flex;align-items:center;gap:16px;background:var(--gpw-paper);border:1px solid var(--gpw-line);border-radius:calc(var(--gpw-radius) - 5px);padding:15px 16px;transition:transform .2s,box-shadow .2s;}
.gpw-row:hover{transform:translateY(-2px);box-shadow:0 12px 30px -18px rgba(0,0,0,.5);}
.gpw-row.feat{border-color:color-mix(in srgb,var(--gpw-accent) 32%,transparent);background:linear-gradient(color-mix(in srgb,var(--gpw-accent) 5%,transparent),color-mix(in srgb,var(--gpw-accent) 5%,transparent)),var(--gpw-paper);box-shadow:inset 4px 0 0 var(--gpw-accent);}
.gpw-mark{width:50px;height:50px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:800;font-size:22px;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.45);}
.gpw-body{flex:1;min-width:0;}
.gpw-namerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
.gpw-name{font-family:'Playfair Display',serif;font-weight:700;font-size:17px;color:var(--gpw-ink);}
.gpw-tag{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--gpw-accent);background:color-mix(in srgb,var(--gpw-accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--gpw-accent) 24%,transparent);padding:2px 7px;border-radius:5px;}
.gpw-host{font-family:'DM Mono',monospace;font-size:11px;color:var(--gpw-faint);}
.gpw-pitch{font-size:13px;line-height:1.5;color:var(--gpw-muted);margin:6px 0 9px;}
.gpw-specs{display:flex;flex-wrap:wrap;gap:6px;}
.gpw-spec{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--gpw-muted);background:color-mix(in srgb,var(--gpw-ink) 5%,transparent);border:1px solid var(--gpw-line);border-radius:20px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px;}
.gpw-spec::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gpw-accent);}
.gpw-cta{flex-shrink:0;font-size:13px;font-weight:600;text-decoration:none;padding:11px 17px;border-radius:9px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:all .18s;border:1.5px solid transparent;cursor:pointer;}
.gpw-cta.primary{background:var(--gpw-accent);color:#fff;}
.gpw-cta.primary:hover{filter:brightness(.92);}
.gpw-cta.outline{background:transparent;color:var(--gpw-ink);border-color:color-mix(in srgb,var(--gpw-ink) 20%,transparent);}
.gpw-cta.outline:hover{border-color:var(--gpw-accent);color:var(--gpw-accent);}
.gpw-foot{font-family:'DM Mono',monospace;font-size:11px;color:var(--gpw-faint);text-align:center;margin-top:18px;padding-top:15px;border-top:1px solid var(--gpw-line);}
.gpw-html-wrap{font-size:14px;line-height:1.6;color:var(--gpw-ink);}

@media (max-width:560px){.gpw-row{flex-wrap:wrap;}.gpw-cta{flex:1 1 100%;justify-content:center;}}

/* ===== device gating — one rendered HTML serves every viewport (no UA sniffing, §7b) ===== */
@media (max-width:767px){ .gpw--desktop-only{display:none !important;} }
@media (min-width:768px){ .gpw--mobile-only{display:none !important;} }