/* ════════════════════════════════════════════════════════════════════
   GlobX  Resource / Guide page styles
   Used by /resources/* article pages. Mirrors the blog-post visual
   language exactly so resource articles and blog posts read as one
   product family.
   ════════════════════════════════════════════════════════════════════

   Naming: all selectors use the `.gx-resource-*` prefix. The markup
   is rebuilt to match the blog-post page structure 1:1 (section,
   container, breadcrumbs, header with eyebrow + title + meta, then
   an <article> body containing TinyMCE-style typography).

   Hierarchy (matches blog post page  see views/blog/post.php):
     section padding       3.5rem 0 3rem (desktop)
     h1 (article title)    2.1rem
     h2 (section heading)  1.3rem
     body                  1.05rem / 1.75 line-height, 820px max
   ──────────────────────────────────────────────────────────────────── */

/* ── Shell ──────────────────────────────────────────────────────── */
.gx-resource-section{ background:#fff; padding:3.5rem 0 3rem; }

/* ── Breadcrumbs ────────────────────────────────────────────────── */
.gx-resource-breadcrumbs{
  max-width:820px;
  margin:0 auto 1.5rem;
  font-size:.82rem;
  color:#6b7280;
}
.gx-resource-breadcrumbs a{ color:#6b7280; text-decoration:none; }
.gx-resource-breadcrumbs a:hover{ color:#1a7fae; }
.gx-resource-breadcrumbs .sep{ margin:0 .4rem; color:#cbd0d8; }
.gx-resource-breadcrumbs .current{ color:#374151; }

/* ── Header (eyebrow + title + meta) ────────────────────────────── */
header.gx-resource-header{ display:block; max-width:820px; margin:0 auto 1.75rem; }
.gx-resource-cat{
  display:inline-block;
  padding:.28rem .75rem;
  border-radius:50px;
  background:rgba(255,161,93,.15);
  color:#ff7a1d;
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.85rem;
}
.gx-resource-title{
  font-size:2.1rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  color:#111827;
  margin:0 0 1rem;
}
.gx-resource-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.9rem;
  color:#6b7280;
  font-size:.85rem;
  padding-top:.9rem;
  border-top:1px solid #eef0f3;
}
.gx-resource-meta i{ margin-right:.25rem; opacity:.7; }

/* ── Article body ─────────────────────────────────────────────────
   Same hierarchy + spec as the blog-post page so blog and resource
   pages feel like one product. Chained `article.gx-resource-content`
   selectors raise specificity above base.css element resets. ────── */
article.gx-resource-content{
  max-width:820px;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.75;
  color:#1f2937;
  word-wrap:break-word;
}

/* Section dividers between thematic blocks (purely visual). */
article.gx-resource-content > section{
  margin:0 0 2.25rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid #f1f3f6;
}
article.gx-resource-content > section:last-child{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:0;
}

/* Headings  same scale as blog post */
article.gx-resource-content h1{font-size:1.45rem; font-weight:700; line-height:1.25; margin:2.25rem 0 .9rem;  letter-spacing:-.008em; color:#111827;}
article.gx-resource-content h2{font-size:1.3rem;  font-weight:600; line-height:1.3;  margin:0 0 .85rem;       letter-spacing:-.004em; color:#111827;}
article.gx-resource-content h3{font-size:1.15rem; font-weight:600; line-height:1.35; margin:1.75rem 0 .65rem; color:#111827;}
article.gx-resource-content h4{font-size:1.05rem; font-weight:600; line-height:1.4;  margin:1.5rem 0 .55rem;  color:#111827;}
/* First H2 in a section should hug the top of its section, hence margin:0 */

/* Inline emphasis */
article.gx-resource-content p          {margin:0 0 1.15rem;}
article.gx-resource-content p:last-child{margin-bottom:0;}
article.gx-resource-content strong, article.gx-resource-content b{font-weight:700; color:#111827;}
article.gx-resource-content em, article.gx-resource-content i  {font-style:italic;}
article.gx-resource-content small                              {font-size:.85em; color:#6b7280;}
article.gx-resource-content mark                               {background:#fff5b8; padding:.05em .25em; border-radius:3px;}
article.gx-resource-content kbd                                {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:#f3f4f7; border:1px solid #d1d5db; border-bottom-width:2px; border-radius:4px; padding:.05em .4em; font-size:.85em;}

/* Links */
article.gx-resource-content a{
  color:#1a7fae;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .15s, text-decoration-thickness .15s;
}
article.gx-resource-content a:hover{
  color:#00567c;
  text-decoration-thickness:2px;
}

/* Lists */
article.gx-resource-content ul,
article.gx-resource-content ol{
  margin:0 0 1.15rem;
  padding-left:1.75rem;
}
article.gx-resource-content ul{ list-style:disc; }
article.gx-resource-content ol{ list-style:decimal; }
article.gx-resource-content ul ul,
article.gx-resource-content ol ol{ margin:.4rem 0; }
article.gx-resource-content li{ margin-bottom:.4rem; }

/* Step list  numbered cards for HowTo-style content */
.gx-resource-steps{
  list-style:none;
  counter-reset:gx-step;
  padding:0;
  margin:0 0 1.5rem;
}
.gx-resource-steps li{
  counter-increment:gx-step;
  position:relative;
  background:#fafbfc;
  border:1px solid #ecedf0;
  border-radius:10px;
  padding:1rem 1.25rem 1rem 3.25rem;
  margin:0 0 .75rem;
}
.gx-resource-steps li::before{
  content:counter(gx-step);
  position:absolute;
  left:1rem;
  top:1rem;
  width:1.75rem;
  height:1.75rem;
  border-radius:50%;
  background:#ffa15d;
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.gx-resource-steps li strong{
  display:block;
  font-size:1rem;
  color:#111827;
  margin-bottom:.2rem;
}
.gx-resource-steps li p{ margin:0; font-size:.95rem; color:#374151; }

/* Blockquote */
article.gx-resource-content blockquote{
  border-left:4px solid #ffa15d;
  padding:.5rem 0 .5rem 1.25rem;
  margin:1.5rem 0;
  color:#374151;
  font-style:italic;
  background:#fff8f2;
  border-radius:0 8px 8px 0;
}
article.gx-resource-content blockquote p{ margin-bottom:.5rem; }
article.gx-resource-content blockquote p:last-child{ margin-bottom:0; }

/* Code */
article.gx-resource-content code{
  background:#f3f4f7;
  padding:.15em .4em;
  border-radius:4px;
  font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#be185d;
}
article.gx-resource-content pre{
  background:#0f172a;
  color:#e2e8f0;
  padding:1.1rem 1.25rem;
  border-radius:10px;
  overflow-x:auto;
  margin:1.5rem 0;
  font-size:.92rem;
  line-height:1.55;
}
article.gx-resource-content pre code{ background:transparent; color:inherit; padding:0; font-size:inherit; }

/* Horizontal rule */
article.gx-resource-content hr{
  border:0;
  border-top:1px solid #e5e7eb;
  margin:2.5rem 0;
}

/* CTA row at the end of the article  brand orange, side-by-side */
.gx-resource-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.25rem;
}
.gx-resource-cta-row .gx-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.65rem 1.2rem;
  border-radius:8px;
  font-size:.88rem;
  font-weight:600;
  text-decoration:none !important;
  transition:background .15s, color .15s, border-color .15s;
  border:1px solid transparent;
}
.gx-resource-cta-row .gx-btn--primary{
  background:#ffa15d;
  color:#fff;
}
.gx-resource-cta-row .gx-btn--primary:hover{ background:#ff7a1d; color:#fff; }
.gx-resource-cta-row .gx-btn--ghost{
  background:#fff;
  color:#ff7a1d;
  border-color:#ffd9bd;
}
.gx-resource-cta-row .gx-btn--ghost:hover{
  background:#fff5ee;
  border-color:#ffa15d;
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px){
  .gx-resource-title { font-size:1.65rem; }
  article.gx-resource-content h2 { font-size:1.2rem; }
  article.gx-resource-content h3 { font-size:1.1rem; }
}

/* Mobile */
@media (max-width: 575.98px){
  .gx-resource-section{ padding:2.25rem 0 2rem; }
  .gx-resource-title { font-size:1.45rem; line-height:1.28; }
  .gx-resource-cat { font-size:.68rem; padding:.25rem .65rem; }
  .gx-resource-meta { font-size:.78rem; gap:.7rem; }
  article.gx-resource-content                                { font-size:.95rem; line-height:1.65; }
  article.gx-resource-content > section                      { margin-bottom:1.75rem; padding-bottom:1.2rem; }
  article.gx-resource-content h2                             { font-size:1.15rem; }
  article.gx-resource-content h3                             { font-size:1.05rem; margin-top:1.4rem; }
  article.gx-resource-content ul, article.gx-resource-content ol { padding-left:1.4rem; }
  .gx-resource-steps li { padding:.85rem 1rem .85rem 2.8rem; }
  .gx-resource-steps li::before{ width:1.5rem; height:1.5rem; left:.7rem; top:.85rem; font-size:.78rem; }
}