/* ============================================================
   HireQwik — blog layer (DR-025 rebrand, completed 2026-08-26)
   Loads AFTER site.css: tokens, reset, nav, footer, modals,
   buttons, focus ring and skip-link all come from site.css.
   This file styles ONLY the .blog-* / breadcrumb components.
   ============================================================ */

/* ─── shared shell ─────────────────────────────────────────── */
.blog-container{max-width:var(--max);margin:0 auto;padding:0 32px}

/* ─── listing (/blog/) ─────────────────────────────────────── */
.blog-listing{padding:72px 0 96px}
.blog-listing-header{max-width:680px;margin-bottom:52px}
.blog-listing-header .badge{margin-bottom:18px}
.blog-listing-header h1{font-size:clamp(2.1rem,4vw,3rem);margin-bottom:16px;text-wrap:balance}
.blog-listing-header p{font-size:1.1rem;line-height:1.6;color:var(--ink-2)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{
  display:flex;flex-direction:column;overflow:hidden;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s,border-color .2s;
}
.blog-card:hover{transform:translateY(-2px);box-shadow:var(--sh-card);border-color:var(--line-strong)}
.blog-card-image{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line)}
.blog-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:22px 24px 20px;display:flex;flex-direction:column;flex:1}
.blog-card-tags{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.blog-card-body h2{font-size:1.125rem;line-height:1.35;margin-bottom:10px}
.blog-card-body p{font-size:.9rem;color:var(--ink-2);line-height:1.55;flex:1}
.blog-card-meta{margin-top:16px;display:flex;gap:14px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--ink-3)}

.blog-pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:56px}
.page-link{padding:10px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:.875rem;color:var(--ink-2);transition:border-color .2s,color .2s}
.page-link:hover{border-color:var(--ink);color:var(--ink)}
.page-info{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--ink-3)}

/* ─── post page ────────────────────────────────────────────── */
.blog-post{padding:56px 0 96px}
.blog-post .blog-container{max-width:768px}

.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-3);margin-bottom:28px}
.breadcrumb a{color:var(--ink-3);transition:color .18s}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:var(--line-strong)}

.blog-header{margin-bottom:30px}
.blog-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
/* tags are pills in the homepage-v2 style (2026-10-06): Inter, sentence case via partials/tag-label.html */
.blog-tag,.blog-tag-sm{
  display:inline-flex;align-items:center;font-family:'Inter',system-ui,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:0;text-transform:none;white-space:nowrap;
  color:var(--blue-ink);background:var(--blue-tint);padding:3px 9px;border-radius:999px;
}
.blog-header h1{font-size:clamp(1.75rem,3.4vw,2.4rem);line-height:1.15;margin-bottom:18px;text-wrap:balance}
.blog-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--ink-3)}
.blog-updated{color:var(--moss)}

.blog-hero-image{margin:6px 0 32px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line)}
.blog-hero-image img{display:block;width:100%;height:auto}

/* ─── product bridge (top of every post, 2026-09-02) ───────── */
.post-bridge{margin:4px 0 32px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--radius-sm)}
.post-bridge p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.post-bridge p strong{color:var(--ink);font-weight:600}
.post-bridge .btn{flex-shrink:0;padding:10px 16px;font-size:.85rem}

/* ─── article typography ───────────────────────────────────── */
.blog-content{font-size:1.05rem;line-height:1.75;color:var(--ink-2)}
.blog-content p{margin-bottom:20px}
.blog-content h2{font-size:1.45rem;line-height:1.25;margin:44px 0 16px}
.blog-content h3{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:1.15rem;line-height:1.3;margin:32px 0 12px}
.blog-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.blog-content a:hover{color:var(--blue-ink)}
.blog-content ul,.blog-content ol{margin:0 0 20px 24px}
.blog-content li{margin-bottom:8px}
.blog-content strong{color:var(--ink);font-weight:600}
.blog-content blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--blue);color:var(--ink);font-style:italic}
.blog-content blockquote p:last-child{margin-bottom:0}
.blog-content code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:var(--paper-2);padding:2px 6px;border-radius:4px;color:var(--ink)}
.blog-content pre{background:var(--ink);color:var(--paper);padding:20px;border-radius:var(--radius-md);overflow-x:auto;margin:24px 0;font-size:.9rem;line-height:1.6}
.blog-content pre code{background:none;padding:0;color:inherit}
.blog-content img{max-width:100%;border-radius:var(--radius-md);margin:24px 0}
.blog-content hr{border:none;border-top:1px solid var(--line);margin:36px 0}
/* markdown tables: scroll inside their own box, never the page */
.blog-content table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:26px 0;font-size:.92rem;line-height:1.5}
.blog-content th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.blog-content td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;min-width:120px}
.blog-content tr:last-child td{border-bottom:none}

/* ─── FAQ ──────────────────────────────────────────────────── */
.blog-faq{margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.blog-faq h2{font-size:1.5rem;margin-bottom:12px}
.blog-faq-item{padding:18px 0;border-bottom:1px solid var(--line)}
.blog-faq-item:last-child{border-bottom:none}
.blog-faq-item h3{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:1.05rem;margin-bottom:8px;color:var(--ink)}
.blog-faq-item p{color:var(--ink-2);line-height:1.65;font-size:.98rem}

/* ─── CTA band ─────────────────────────────────────────────── */
/* end-of-post CTA: the homepage blue band look (2026-10-06; was navy). #DCE7FB keeps AA on #0A5BE0. */
.blog-cta{margin-top:64px;background:linear-gradient(135deg,#0A3FA8 0%,#0A5BE0 100%);border-radius:var(--radius-lg);padding:44px 40px;color:var(--paper)}
.blog-cta h2{color:var(--paper);font-size:1.9rem;margin-bottom:12px}
.blog-cta :focus-visible{outline-color:var(--paper)} /* the page's blue ring is invisible on the blue band */
.blog-cta p{color:#DCE7FB;max-width:56ch;line-height:1.6}
.blog-cta-buttons{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.blog-cta .btn-ghost{color:var(--paper);border-color:rgba(255,255,255,.7)}
.blog-cta .btn-ghost:hover{border-color:var(--paper)}
.blog-cta .btn-primary{background:var(--paper);color:var(--ink)}
.blog-cta .btn-primary:hover{background:#DCE7FB;border-color:#DCE7FB;color:var(--ink)}
.blog-cta-signin{margin-top:16px;font-size:.875rem;color:#DCE7FB}
.blog-cta-signin a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

/* ─── related posts ────────────────────────────────────────── */
.blog-related{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.blog-related h2{font-size:1.5rem;margin-bottom:24px}
.blog-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.blog-related-card{
  display:block;color:inherit;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  transition:border-color .2s,box-shadow .2s;
}
.blog-related-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.blog-related-date{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--ink-3);margin-bottom:8px}
.blog-related-card h3{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:1rem;line-height:1.35;margin-bottom:8px;color:var(--ink)}
.blog-related-card p{font-size:.85rem;color:var(--ink-3);line-height:1.5}

/* ─── responsive ───────────────────────────────────────────── */
@media (max-width:960px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .blog-container{padding:0 20px}
  .blog-listing{padding:56px 0 72px}
  .blog-grid{grid-template-columns:1fr}
  .blog-post{padding:44px 0 72px}
  .blog-cta{padding:32px 24px}
  .post-bridge{flex-direction:column;align-items:flex-start;padding:14px 16px}
}

/* ─── PHONES ── the post header ate the fold on 360x640: a breadcrumb that
   repeated the title (67px), two rows of tag chips (56px), a 194px product
   box, and the article's first sentence at 640px. Measured 2026-09-03.
   On phones the breadcrumb keeps "HireQwik / Blog" only (BreadcrumbList
   schema untouched), chips cap at one row, and the box tightens. */
@media (max-width:640px){
  .blog-post{padding-top:28px}
  .breadcrumb{margin-bottom:18px}
  .breadcrumb span:nth-of-type(n+2){display:none}
  .blog-tags{margin-bottom:12px}
  .blog-tags .blog-tag:nth-child(n+3){display:none}
  .post-bridge{margin:4px 0 22px;padding:14px 16px;gap:12px}
  .post-bridge p{font-size:.88rem;line-height:1.45}
  .post-bridge .btn{padding:9px 14px;font-size:.82rem}
}