/* =============================================================
   DEPLOY TARGET: RAW FILE UPLOAD — NOT a Fluent Snippet.
   Upload to: wp-content/uploads/sgc-custom-files/CSS/sgc-blog-visuals.css
   Enqueued by enqueue-assets.php (an mu-plugin), handle
   'sgc-blog-visuals'.
   ============================================================= */
/* ============================================================
   BLOG POST VISUAL COMPONENTS
   Pasted per-post into a post's Custom HTML content, same
   workflow as GagneMarketing.com's visual snippets. Reuses
   design tokens from seangagne-site-wide.css (--sg-teal,
   --sg-dark-card, --sg-radius, --sg-max, --space-*) and the
   sitewide sg-animate/IntersectionObserver reveal system —
   add class="sg-animate" (+ optional sg-animate-delay-1..4)
   directly on any component's outer wrapper for a fade-up
   entrance, no JS changes needed for that part.

   Default prose width inside .entry-content is 760px (set in
   single-post.css). Components below default to that width
   unless noted — the styled table opts out to the full
   var(--sg-max) (1120px) since it needs the room.
   ============================================================ */


/* ------------------------------------------------------------
   1. STAT CARDS — "By the Numbers" pull-out
   Usage: wrap 2-4 .sg-stat-card in .sg-stat-row. Only pull a
   number that's already stated in the post's own prose.

   <div class="sg-stat-row">
     <div class="sg-stat-card sg-animate">
       <span class="sg-stat-card__value">38,621</span>
       <span class="sg-stat-card__label">Emails Moved to Trash</span>
     </div>
   </div>

   Optional count-up tier: add data-sg-count-to="38621" on the
   __value element (plain number, no commas) and leave the
   element's text empty or "0" — sgc-blog-visuals.js formats and
   animates it once it scrolls into view. Skip data-sg-count-to
   entirely for a static value (no JS needed at all).
   ------------------------------------------------------------ */

.sg-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  max-width: 760px;
}

.sg-stat-card {
  background: #ffffff;
  border: 1px solid #e8ecf0;
  border-top: 3px solid var(--sg-teal);
  border-radius: var(--sg-radius);
  padding: 20px 20px 18px;
  text-align: center;
}

.sg-stat-card__value {
  display: block;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--sg-teal);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.sg-stat-card__label {
  display: block;
  margin-top: 6px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-text-muted);
}


/* ------------------------------------------------------------
   2. STYLED DATA TABLE
   Opts out of the 760px prose cap — uses the full content
   column (var(--sg-max)) since real multi-column tables need
   the room. Scrolls horizontally on narrow screens, no JS.

   <div class="sg-table-wrap sg-animate">
     <table class="sg-table">
       <thead><tr><th>Job Role</th><th>Demand Outlook</th></tr></thead>
       <tbody>
         <tr><td>AI Product Implementation Specialist</td><td>High demand...</td></tr>
       </tbody>
     </table>
   </div>

   Add sg-table--striped on <table> for alternating row shading.
   ------------------------------------------------------------ */

.sg-table-wrap {
  max-width: var(--sg-max);
  margin: var(--space-xl) auto;
  border: 1px solid #e8ecf0;
  border-radius: var(--sg-radius);
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.sg-table th {
  background: var(--sg-teal);
  color: #ffffff;
  text-align: left;
  padding: 12px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sg-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #e8ecf0;
  color: var(--sg-text-mid);
  line-height: 1.55;
}

.sg-table tr:last-child td { border-bottom: none; }

.sg-table--striped tbody tr:nth-child(even) { background: #f7f8fa; }


/* ------------------------------------------------------------
   3. PROCESS LIST — enhanced step-by-step
   New class, deliberately not a modification of the sitewide
   .sg-ordered-list (used elsewhere on the site outside blog
   posts). Numbered circles connected by a single vertical line.

   <ol class="sg-process-list">
     <li class="sg-process-list__item sg-animate sg-animate-delay-1">
       <span class="sg-process-list__num">1</span>
       <div class="sg-process-list__body">
         <strong>Connect to Gmail's API</strong>
         Authenticate with OAuth and open a read/write session.
       </div>
     </li>
   </ol>
   ------------------------------------------------------------ */

.sg-process-list {
  list-style: none;
  margin: var(--space-xl) 0;
  padding: 0;
  max-width: 720px;
  position: relative;
}

.sg-process-list::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background: var(--sg-border);
}

.sg-process-list__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  padding-bottom: var(--space-lg);
}

.sg-process-list__item:last-child { padding-bottom: 0; }

.sg-process-list__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--sg-teal);
  color: var(--sg-teal);
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sg-process-list__body {
  padding-top: 4px;
  color: var(--sg-text-mid);
  line-height: 1.65;
}

.sg-process-list__body strong {
  display: block;
  margin-bottom: 2px;
  color: var(--sg-text);
}


/* ------------------------------------------------------------
   4. CODE / TERMINAL BLOCK
   Defaults to 760px; add sg-code-block--wide for the full
   1120px column on longer scripts. Copy-to-clipboard is a
   strict opt-in via sg-code-block--copyable (implies "run
   this," not every snippet should offer it).

   <div class="sg-code-block sg-code-block--copyable sg-animate">
     <div class="sg-code-block__header"><span class="sg-code-block__label">terminal</span><button class="sg-code-copy-btn" type="button">Copy</button></div>
     <pre><code><span class="sg-code-prompt">$</span> python gmail_cleanup.py --test
<span class="sg-code-comment"># scans the inbox, moves nothing</span>
<span class="sg-code-output">38,621 messages matched. 0 moved (test mode).</span></code></pre>
   </div>

   NOTE: keep the header's <span> and <button> on ONE line with no line
   break between them. WordPress's editor strips a plain attributeless
   <span> on paste, and wpautop converts a lone newline inside an HTML
   block into a stray <br> at render time — either one can throw off
   the header's flex layout. The label span above carries a class
   specifically so paste-cleanup doesn't treat it as empty formatting
   cruft and strip it.
   ------------------------------------------------------------ */

.sg-code-block {
  background: var(--sg-dark-card);
  border-top: 3px solid var(--sg-teal);
  border-radius: var(--sg-radius);
  margin: var(--space-xl) 0;
  overflow: hidden;
  max-width: 760px;
}

.sg-code-block--wide { max-width: var(--sg-max); }

.sg-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.sg-code-block pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: "SF Mono", "Fira Code", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.65;
  color: #e6edf3;
  background: transparent;
}

.sg-code-block code { font-family: inherit; background: transparent; padding: 0; }

.sg-code-block .sg-code-prompt { color: var(--sg-teal); user-select: none; }
.sg-code-block .sg-code-comment { color: rgba(255, 255, 255, 0.4); }
.sg-code-block .sg-code-output { color: rgba(255, 255, 255, 0.6); }

.sg-code-copy-btn {
  background: rgba(0, 194, 203, 0.12);
  border: 1px solid rgba(0, 194, 203, 0.3);
  color: var(--sg-teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sg-code-copy-btn:hover { background: rgba(0, 194, 203, 0.22); }

.sg-code-copy-btn--copied {
  background: var(--sg-teal);
  color: #0d1117;
}


/* ------------------------------------------------------------
   5. TOOL / TECH PILL ROW
   Placement wrapper only — visual styling is fully delegated
   to the existing .sg-tech-pills/.sg-tech-pill classes already
   defined in seangagne-site-wide.css (used on project cards).
   Sits under .entry-meta, above the first paragraph.

   <div class="sg-post-tech-row sg-animate">
     <div class="sg-tech-pills">
       <span class="sg-tech-pill">Python</span>
       <span class="sg-tech-pill">Gmail API</span>
       <span class="sg-tech-pill">OAuth 2.0</span>
     </div>
   </div>
   ------------------------------------------------------------ */

.sg-post-tech-row {
  max-width: 760px;
  margin: 0 0 var(--space-xl);
}

.sg-post-tech-row .sg-tech-pills { gap: 8px; }


/* ------------------------------------------------------------
   6. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 640px) {
  .sg-stat-row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .sg-code-block pre { font-size: 0.82rem; }
  .sg-process-list__item { grid-template-columns: 30px 1fr; gap: 14px; }
  .sg-process-list__num { width: 30px; height: 30px; font-size: 0.85rem; }
  .sg-process-list::before { left: 14px; }
}