/* =========================================
   ARTICLES (WordPress Posts) - listing + single
   Bold animated hero + category color-coding.
   Loaded on the blog index, archives, and single posts.
   ========================================= */

/* ── CATEGORY COLOR TOKENS ──────────────────────────────────
   Applied via .art-cat-<category-slug> on cards & hero chips.
   --cat = accent/icon color, --cat-soft = tinted background. */
/* Default first (lowest precedence). The category tokens below must come AFTER
   so that, at equal specificity, the category color wins for .art-card.art-cat-* etc. */
.art-card, .art-hero__cat, .art-single { --cat: var(--color-accent); --cat-soft: rgba(46,156,202,0.12); }
/* category tokens */
.art-cat-industry-news      { --cat: #2e9cca; --cat-soft: rgba(46,156,202,0.12); }
.art-cat-service-spotlights { --cat: #1f9d57; --cat-soft: rgba(46,204,106,0.14); }
.art-cat-success-stories    { --cat: #6c4cd6; --cat-soft: rgba(124,92,255,0.14); }
.art-cat-company-news       { --cat: #d98c12; --cat-soft: rgba(245,166,35,0.16); }

/* =========================================================
   HERO - bold, animated, ties the 3 category colors together
   ========================================================= */
.art-hero {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: 100px 24px 88px;
  background:
    radial-gradient(900px 500px at 80% -12%, rgba(46,156,202,0.32), transparent 60%),
    radial-gradient(820px 480px at 10% 115%, rgba(46,204,106,0.22), transparent 58%),
    radial-gradient(720px 460px at 55% 125%, rgba(245,166,35,0.20), transparent 60%),
    linear-gradient(150deg, var(--color-navy-dark) 0%, var(--color-navy) 58%, #0a2540 120%);
  background-color: var(--color-navy-dark);
}
.art-hero__bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 36%, #000, transparent 78%);
          mask-image: radial-gradient(circle at 50% 36%, #000, transparent 78%);
  animation: artPan 40s linear infinite;
}
@keyframes artPan { to { background-position: 460px 460px, 460px 460px; } }
.art-hero__orbs span { position: absolute; border-radius: 50%; filter: blur(52px); pointer-events: none; }
.art-hero__orbs span:nth-child(1) { width: 300px; height: 300px; left: -60px; top: -50px;
  background: rgba(46,156,202,0.5); animation: artFloat 18s ease-in-out infinite; }
.art-hero__orbs span:nth-child(2) { width: 260px; height: 260px; right: 4%; top: 24%;
  background: rgba(46,204,106,0.42); animation: artFloat 22s ease-in-out infinite reverse; }
.art-hero__orbs span:nth-child(3) { width: 240px; height: 240px; left: 26%; bottom: -70px;
  background: rgba(245,166,35,0.4); animation: artFloat 26s ease-in-out infinite; }
@keyframes artFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(34px,26px); } }

.art-hero__inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.art-eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8ecef5; border: 1px solid rgba(142,206,245,0.4); border-radius: 99px; padding: 6px 14px; margin-bottom: 20px;
}
.art-hero__title { font-family: var(--font-heading); font-weight: 400; line-height: 1.06;
  font-size: clamp(2.4rem, 5.2vw, 3.8rem); color: #fff; margin-bottom: 16px; }
.art-hero__title em {
  font-style: italic;
  background: linear-gradient(100deg, #5bbbe0, #4fe08a 50%, #ffc24d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.art-hero__sub { font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 600px; margin: 0 auto 30px; }

/* category preview chips in the hero (color-coded + icon) */
.art-hero__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.art-hero__cat { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: #fff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 99px; padding: 8px 16px; transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base); }
.art-hero__cat:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); border-color: var(--cat); }
.art-hero__cat .art-ic { width: 17px; height: 17px; color: var(--cat); display: inline-flex; }
.art-ic svg { width: 100%; height: 100%; display: block; }

/* =========================================================
   LISTING
   ========================================================= */
.art-list { background: var(--color-bg); padding: 56px 24px 80px; }
.art-list__inner { max-width: var(--max-width); margin: 0 auto; }

.art-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.art-filter { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-radius: 99px; padding: 8px 16px; text-decoration: none;
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base); }
.art-filter:hover { color: var(--color-accent); border-color: var(--color-accent); }
.art-filter.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.art-card { display: flex; flex-direction: column; background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-top: 3px solid var(--cat); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.art-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* optional real featured image (WordPress posts that have one) */
.art-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-sky); }
.art-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* compact, color-coded category strip (the small top bar) */
.art-chip { display: flex; align-items: center; gap: 8px; padding: 11px 20px; text-decoration: none;
  background: var(--cat-soft); border-bottom: 1px solid var(--color-border); }
.art-chip .art-ic { width: 18px; height: 18px; color: var(--cat); flex-shrink: 0; display: inline-flex; }
.art-chip__name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cat); }

.art-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 22px; }
.art-card__title { font-family: var(--font-heading); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin-bottom: 10px; }
.art-card__title a { color: var(--color-navy-dark); text-decoration: none; }
html.dark .art-card__title a { color: var(--color-text); }
.art-card__title a:hover { color: var(--cat); }
.art-card__excerpt { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.art-card__meta { font-size: 0.78rem; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 14px; }

.art-empty { text-align: center; color: var(--color-text-muted); padding: 48px 0; font-size: 1.05rem; }

/* pagination */
.art-list .pagination, .art-list .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.art-list .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt);
  color: var(--color-text); text-decoration: none; }
.art-list .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.art-list .page-numbers:hover { border-color: var(--color-accent); }

/* =========================================================
   SINGLE ARTICLE
   ========================================================= */
.art-single { max-width: 760px; margin: 0 auto; padding: 56px 24px 8px; }
.art-single__header { text-align: center; margin-bottom: 32px; }
.art-single__cat { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cat);
  background: var(--cat-soft); border-radius: 99px; padding: 6px 14px; }
.art-single__cat .art-ic { width: 16px; height: 16px; color: var(--cat); display: inline-flex; }
.art-single__title { font-family: var(--font-heading); font-weight: 400; line-height: 1.12;
  font-size: clamp(2rem, 4.5vw, 3rem); color: var(--color-navy-dark); margin: 16px 0 14px; }
html.dark .art-single__title { color: var(--color-text); }
.art-single__meta { font-size: 0.85rem; color: var(--color-text-muted); }
.art-single__media { margin: 0 0 32px; border-radius: var(--radius-lg); overflow: hidden; }
.art-single__media img { width: 100%; height: auto; display: block; }

.art-body { font-size: 1.05rem; line-height: 1.8; color: var(--color-text); }
.art-body > * + * { margin-top: 1.2em; }
.art-body h2 { font-family: var(--font-heading); font-weight: 400; font-size: 1.7rem; line-height: 1.25;
  color: var(--color-navy-dark); margin-top: 1.6em; }
html.dark .art-body h2 { color: var(--color-text); }
.art-body h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; color: var(--color-navy-dark); margin-top: 1.5em; }
html.dark .art-body h3 { color: var(--color-text); }
.art-body a { color: var(--color-accent); }
.art-body ul, .art-body ol { padding-left: 1.4em; }
.art-body li { margin: 0.4em 0; }
.art-body blockquote { border-left: 3px solid var(--color-accent); margin: 1.4em 0; padding: 4px 0 4px 20px;
  color: var(--color-text-muted); font-style: italic; }
.art-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.art-body code { background: var(--color-sky); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }

.art-back { max-width: 760px; margin: 0 auto; padding: 20px 24px 8px; }
.art-back a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.art-back a:hover { text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) { .art-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .art-grid { grid-template-columns: 1fr; } }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .art-hero__bg, .art-hero__orbs span { animation: none !important; }
}