/* =============================================================================
   RS Gonzales blog -- SHARED (archive + single post)
   Generated by _blog-build\ship.ps1 from the verified comparison build.
   Do not hand-edit: edit parts\*.css and re-run ship.ps1.

   Load order on the live site:
     1. the shared master library   (already loaded by the other new pages)
     2. rsg-blog-shared.css         (this page group)
     3. rsg-blog-archive-D.css OR rsg-blog-post-B.css
   ============================================================================= */
/* ============================================================
   BLOG ARCHIVE -- supplemental components (August 2026)
   Namespaces (verified 0 hits in master-css.txt + casestudies.html):
     blg-   shared blog primitives (card, chip, meta, pagination, search)
     blga-  Variation A "Editorial Desk"
     blgb-  Variation B "Newsroom Rail"
     blgc-  Variation C "Index Ledger"
   All scoped under .rsg-page. Green + charcoal only, per brand tokens.
   Every grid track uses minmax(0,1fr) so long titles cannot blow the column.
   ============================================================ *//* ---- image helper: data URIs are declared ONCE as custom properties on
        .rsg-page, then referenced by class, so a preview file that shows the
        same post in three variations carries the payload a single time.
        In production these become real image tags emitted by the WP loop. ---- */.rsg-page .blg-img { background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #EEF3EF; display: block; }
/* screen-reader-only label (the master library has no .sr-only) */.rsg-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* white outline button on the dark bands (proven on the case-studies hub;
   not present in the shared master library, so it is declared here) */.rsg-page .btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
.rsg-page .btn-outline-white:hover { background: #fff; color: #000; }
/* ============================================================
   SHARED BLOG PRIMITIVES
   ============================================================ *//* category chip */.rsg-page .blg-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: var(--green-700); background: var(--green-50); border: 1px solid rgba(44,122,75,0.18); border-radius: 6px; padding: 4px 9px; }
/* byline / meta row -- avatar, name, date, read time */.rsg-page .blg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); }
.rsg-page .blg-meta .blg-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.14); }
.rsg-page .blg-meta .blg-by { color: var(--ink-700); }
.rsg-page .blg-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--line); display: inline-block; flex-shrink: 0; }
.rsg-page .blg-meta .blg-rt { display: inline-flex; align-items: center; gap: 5px; color: var(--green-700); }
.rsg-page .blg-meta .blg-rt svg { width: 12px; height: 12px; flex-shrink: 0; }
/* the read-more affordance */.rsg-page .blg-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--green-600); transition: gap .2s, color .2s; }
.rsg-page .blg-link svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .2s; }
/* ---- CARD: image on top, body below (the grid workhorse) ---- */.rsg-page .blg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; position: relative; box-shadow: var(--shadow-md); transition: transform .22s, box-shadow .22s, border-color .22s; }
.rsg-page .blg-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--green-500), var(--green-700)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; z-index: 3; }
.rsg-page .blg-card:hover { transform: translateY(-4px); border-color: rgba(44,122,75,0.34); box-shadow: 0 22px 48px rgba(20,50,32,0.12); }
.rsg-page .blg-card:hover::before { transform: scaleX(1); }
.rsg-page .blg-card:hover .blg-link { color: var(--green-700); gap: 12px; }
.rsg-page .blg-card:hover .blg-link svg { transform: translateX(3px); }
.rsg-page .blg-shot { position: relative; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); overflow: hidden; }
.rsg-page .blg-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsg-page .blg-shot .blg-chip { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,0.95); backdrop-filter: blur(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.14); }
.rsg-page .blg-body { padding: 22px 24px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.rsg-page .blg-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.28; letter-spacing: -0.015em; color: var(--ink-900); margin: 0 0 10px; }
.rsg-page .blg-card h3 a { color: inherit; }
.rsg-page .blg-card:hover h3 a { color: var(--green-700); }
.rsg-page .blg-dek { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }
.rsg-page .blg-foot { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
/* ---- SEARCH FIELD ---- */.rsg-page .blg-search { display: flex; align-items: stretch; gap: 0; max-width: 460px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); }
.rsg-page .blg-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 16px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-900); }
.rsg-page .blg-search input::placeholder { color: var(--ink-500); }
.rsg-page .blg-search button { flex: 0 0 auto; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #fff; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; transition: filter .18s; }
.rsg-page .blg-search button:hover { filter: brightness(1.08); }
.rsg-page .blg-search button svg { width: 16px; height: 16px; flex-shrink: 0; }
/* the grid */.rsg-page .blga-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
/* ============================================================
   RESPONSIVE -- house baseline 1024 / 768 / 480
   ============================================================ */@media (max-width: 1024px) {
  .rsg-page .blga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .rsg-page .blga-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .rsg-page .blg-body { padding: 20px 18px 18px; }
  .rsg-page .blg-card h3 { font-size: 18px; }
  .rsg-page .blg-search button span { display: none; }
  .rsg-page .blg-search button { padding: 0 16px; }
}
/* reveal failsafe -- a blank page is never acceptable if the observer
   never fires (see feedback_reveal-needs-css-failsafe) */@keyframes blgRevealFailsafe { to { opacity: 1; transform: none; } }
.rsg-page .reveal { animation: blgRevealFailsafe 0s linear 5s forwards; }
.rsg-page .reveal.visible { animation: none; }
/* WordPress theme defensive CSS -- the active theme sets its own list and
   figure rules that would otherwise leak into these components */.rsg-page ul, .rsg-page ol { list-style: none; }
.rsg-page figure { margin: 0; }
.rsg-page svg { max-width: 100%; }
.rsg-page { overflow-x: hidden; }

/* ============================================================
   NEWSLETTER SLOT -- INERT
   Sarah has not confirmed a list exists, so the markup for this
   ships commented out in both templates. These rules match
   nothing until that markup is switched on; leaving them here
   means enabling the capture is an uncomment, not a rebuild.
   ============================================================ */
.rsg-page .blgn-band { background: linear-gradient(135deg, #F4FAF6 0%, #FFFFFF 62%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 58px 0; }
.rsg-page .blgn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 44px; align-items: center; }
.rsg-page .blgn-band h2 { margin: 0 0 12px; font-size: clamp(23px, 2.5vw, 31px); }
.rsg-page .blgn-band h2 em { font-style: normal; color: var(--green-600); }
.rsg-page .blgn-lede { font-size: 16px; line-height: 1.66; color: var(--ink-2); margin: 0; max-width: 54ch; }
.rsg-page .blgn-lede strong { color: var(--ink-900); }
.rsg-page .blgn-form { display: flex; flex-wrap: wrap; gap: 10px; }
.rsg-page .blgn-input { flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-family: var(--font-body); font-size: 15px; color: var(--ink-900); }
.rsg-page .blgn-input:focus { outline: none; border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(44,122,75,0.14); }
.rsg-page .blgn-note { margin: 12px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--ink-500); }
@media (max-width: 768px) {
  .rsg-page .blgn-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rsg-page .blgn-band { padding: 44px 0; }
}