/* ============================================================================
   GradientM Insights — custom.css
   Custom styling, animations, gradients, decorative shapes & card effects.
   Tailwind handles layout; this file handles brand polish.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* ===== Authentic GradientM brand palette (from gradientm.com) ===== */
  /* Primary = amber/gold #F3A233 · Dark = navy #0d1f30 · Accent = #00226c */
  --gm-brand-50:  #fff5e6;   /* light amber tint */
  --gm-brand-100: #fff3e0;   /* amber tint */
  --gm-brand-500: #f3a233;   /* PRIMARY — brand gold */
  --gm-brand-600: #e08f1f;   /* gold hover (darker) */
  --gm-brand-700: #854f0b;   /* deep amber (text on light) */
  --gm-brand-900: #0d1f30;   /* dark navy — headings / dark sections */
  --gm-brand-950: #0a1622;   /* near-black navy */

  --gm-navy-700: #29445f;    /* slate navy */
  --gm-navy-800: #1f354a;    /* deeper slate navy */
  --gm-accent:   #00226c;    /* deep blue accent */

  --gm-body:    #5a5f6b;     /* body text */
  --gm-muted:   #aab4be;     /* muted / meta */
  --gm-surface: #f7f9fc;     /* light section bg */
  --gm-surface-2: #eef1f6;   /* alt light bg */
  --gm-border:  #e6e8eb;     /* borders / dividers */

  --gm-primary-rgb: 243, 162, 51;

  /* Aliases — accent/hover tints now resolve to the brand gold family */
  --gm-accent-400: #f3a233;
  --gm-accent-500: #e08f1f;
  --gm-brand-300: #f6b352;
  --gm-brand-400: #f3a233;

  /* Amber CTA gradient + dark navy hero gradient (matches site) */
  --gm-gradient-brand: linear-gradient(120deg, #f3a233 0%, #f6b352 100%);
  --gm-gradient-hero:  linear-gradient(135deg, #0a1622 0%, #0d1f30 45%, #1f354a 100%);

  --gm-shadow-sm:  0 1px 2px rgba(13, 31, 48, .06);
  --gm-shadow-md:  0 8px 24px -8px rgba(13, 31, 48, .16);
  --gm-shadow-lg:  0 24px 60px -18px rgba(13, 31, 48, .28);
  --gm-shadow-glow: 0 12px 34px -8px rgba(243, 162, 51, .5);

  --gm-radius: 18px;
  --gm-ease: cubic-bezier(.22, 1, .36, 1);
}

html { scroll-padding-top: 90px; }
body { line-height: 1.65; letter-spacing: -0.006em; }

/* Screen-reader only helper (in case Tailwind's is overridden) */
.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;
}

/* Visible focus for accessibility (WCAG 2.2) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--gm-accent-400);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   1. SKIP LINK
   ------------------------------------------------------------------------- */
.gradientm-skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 100;
  background: var(--gm-brand-900); color: #fff;
  padding: 12px 20px; border-radius: 10px; font-weight: 600;
  transition: top .25s var(--gm-ease);
}
.gradientm-skip-link:focus { top: 16px; }

/* ---------------------------------------------------------------------------
   2. HEADER / NAV — glass morphism + scroll shadow
   ------------------------------------------------------------------------- */
.gradientm-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(13, 31, 48, .07);
  transition: box-shadow .3s var(--gm-ease);
}
.gradientm-header.is-scrolled {
  box-shadow: 0 6px 30px -12px rgba(13, 31, 48, .18);
}

.gradientm-logo-mark { display: inline-flex; }
.gradientm-logo-text { display: flex; flex-direction: column; line-height: 1; }
.gradientm-logo-name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gm-brand-900); }
.gradientm-logo-m { color: var(--gm-brand-500); }
.gradientm-logo-sub { font-size: .58rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gm-body); margin-top: 4px; }

/* Dropdown menus */
.gradientm-has-dropdown { position: relative; }
.gradientm-menu-toggle { background: none; border: none; cursor: pointer; font-family: inherit; }
.gradientm-caret { transition: transform .25s var(--gm-ease); margin-top: 1px; }
.gradientm-has-dropdown:hover .gradientm-caret,
.gradientm-menu-toggle[aria-expanded="true"] .gradientm-caret { transform: rotate(180deg); }

.gradientm-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 224px; padding: 8px;
  background: #fff; border: 1px solid var(--gm-border); border-radius: 14px;
  box-shadow: var(--gm-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--gm-ease), transform .22s var(--gm-ease), visibility .22s;
}
/* invisible bridge keeps hover alive across the gap to the panel */
.gradientm-has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.gradientm-has-dropdown:hover .gradientm-dropdown,
.gradientm-has-dropdown:focus-within .gradientm-dropdown,
.gradientm-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.gradientm-dropdown li a {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: .9rem; font-weight: 500; color: #475569;
  transition: background .18s, color .18s, padding-left .18s;
}
.gradientm-dropdown li a:hover { background: var(--gm-brand-50); color: var(--gm-brand-700); padding-left: 18px; }

.gradientm-menu-link {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 15px; border-radius: 10px; line-height: 1;
  font-size: .95rem; font-weight: 600; color: var(--gm-brand-900);
  transition: color .2s var(--gm-ease), background .2s var(--gm-ease);
}
.gradientm-menu-link:hover { color: var(--gm-brand-700); background: var(--gm-brand-50); }
.gradientm-menu-link--active { color: var(--gm-brand-700); font-weight: 700; }
.gradientm-menu-link--active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--gm-gradient-brand);
}

/* Buttons — solid brand orange with white label (matches gradientm.com "Get A Quote") */
.gradientm-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  font-weight: 600; font-size: .95rem; color: #fff;
  background: var(--gm-brand-500);
  box-shadow: 0 10px 26px -10px rgba(243,162,51,.7);
  transition: transform .25s var(--gm-ease), box-shadow .25s var(--gm-ease), background .25s var(--gm-ease);
}
.gradientm-btn-primary:hover { transform: translateY(-2px); background: var(--gm-brand-600); box-shadow: 0 16px 36px -10px rgba(224,143,31,.65); }
.gradientm-btn-primary:active { transform: translateY(0); }
.gradientm-btn-primary svg { transition: transform .25s var(--gm-ease); }
.gradientm-btn-primary:hover svg { transform: translateX(3px); }

.gradientm-btn-accent {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 12px;
  font-weight: 700; font-size: .95rem; color: var(--gm-brand-900);
  background: var(--gm-gradient-brand);
  box-shadow: 0 10px 28px -10px rgba(243, 162, 51, .6);
  transition: transform .25s var(--gm-ease), filter .25s var(--gm-ease);
  cursor: pointer; border: none;
}
.gradientm-btn-accent:hover { transform: translateY(-2px); filter: brightness(1.03); }

/* Burger */
.gradientm-burger {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--gm-brand-50); border: 1px solid rgba(11,31,77,.06);
}
.gradientm-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--gm-brand-900); transition: transform .3s var(--gm-ease), opacity .2s var(--gm-ease);
}
.gradientm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gradientm-burger.is-open span:nth-child(2) { opacity: 0; }
.gradientm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.gradientm-mobile-menu {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(11,31,77,.08);
  box-shadow: var(--gm-shadow-md);
  animation: gm-slide-down .3s var(--gm-ease);
}
@keyframes gm-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.gradientm-mobile-link {
  display: block; padding: 12px 14px; border-radius: 10px;
  font-weight: 500; color: #334155; transition: background .2s, color .2s;
}
.gradientm-mobile-link:hover { background: var(--gm-brand-50); color: var(--gm-brand-700); }
.gradientm-mobile-link--active { color: var(--gm-brand-700); background: var(--gm-brand-50); font-weight: 600; }

/* ---------------------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------------------- */
.gradientm-hero { background: var(--gm-gradient-hero); }
.gradientm-hero-bg { position: absolute; inset: 0; overflow: hidden; }

.gradientm-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 0%, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 0%, #000 40%, transparent 75%);
}

.gradientm-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: gm-blob-float 18s ease-in-out infinite;
}
.gradientm-blob--1 { width: 460px; height: 460px; top: -120px; right: -80px; background: radial-gradient(circle, #f3a233, transparent 70%); opacity: .45; }
.gradientm-blob--2 { width: 380px; height: 380px; bottom: -120px; left: -60px; background: radial-gradient(circle, #00226c, transparent 70%); animation-delay: -6s; }
.gradientm-blob--3 { width: 300px; height: 300px; top: 40%; right: 22%; background: radial-gradient(circle, #f3a233, transparent 70%); opacity: .28; animation-delay: -11s; }
@keyframes gm-blob-float {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-24px) scale(1.08); }
  66% { transform: translate(-20px,18px) scale(.95); }
}

/* Floating glass elements */
.gradientm-float {
  position: absolute; border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  animation: gm-float 9s ease-in-out infinite;
}
.gradientm-float--a { width: 64px; height: 64px; top: 24%; right: 12%; animation-delay: 0s; }
.gradientm-float--b { width: 40px; height: 40px; top: 60%; right: 30%; border-radius: 12px; animation-delay: -3s; }
.gradientm-float--c { width: 90px; height: 90px; top: 70%; right: 8%; border-radius: 24px; animation-delay: -5s; }
@keyframes gm-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(6deg); } }

.gradientm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--gm-brand-100);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
.gradientm-eyebrow--light { color: var(--gm-brand-900); background: rgba(255,255,255,.85); border: none; }
.gradientm-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gm-brand-500); box-shadow: 0 0 0 4px rgba(243,162,51,.25); animation: gm-pulse 2s infinite; }
@keyframes gm-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(243,162,51,.25); } 50% { box-shadow: 0 0 0 8px rgba(243,162,51,.05); } }

.gradientm-text-gradient {
  background: linear-gradient(100deg, #f3a233, #f6c46a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradientm-hero-title { line-height: 1.05; }

/* Hero search */
.gradientm-hero-search-input {
  width: 100%; padding: 17px 120px 17px 52px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1); color: #fff; font-size: 1rem;
  backdrop-filter: blur(10px);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.gradientm-hero-search-input::placeholder { color: rgba(219,228,255,.6); }
.gradientm-hero-search-input:focus {
  background: rgba(255,255,255,.16); border-color: var(--gm-accent-400); outline: none;
  box-shadow: 0 0 0 4px rgba(243,162,51,.18);
}
.gradientm-hero-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(219,228,255,.8); }
.gradientm-hero-search-btn {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  padding: 10px 20px; border-radius: 12px; font-weight: 700; color: var(--gm-brand-900);
  background: var(--gm-gradient-brand); border: none; cursor: pointer;
  transition: filter .2s, transform .2s;
}
.gradientm-hero-search-btn:hover { filter: brightness(1.08); }

/* Hero stats */
.gradientm-hero-stats { display: flex; flex-wrap: wrap; gap: 40px; }
.gradientm-hero-stats dt { font-family: "Plus Jakarta Sans", sans-serif; font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; }
.gradientm-hero-stats dd { margin-top: 6px; font-size: .875rem; color: rgba(219,228,255,.75); }
.gradientm-hero-stats > div { position: relative; }
.gradientm-hero-stats > div:not(:last-child)::after {
  content: ""; position: absolute; right: -20px; top: 4px; bottom: 4px; width: 1px; background: rgba(255,255,255,.12);
}

/* ---------------------------------------------------------------------------
   4. FILTER CHIPS
   ------------------------------------------------------------------------- */
.gradientm-filters-wrap {
  position: sticky; top: 74px; z-index: 30;
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11,31,77,.06);
}
.gradientm-filters {
  display: flex; gap: 10px; overflow-x: auto; padding: 16px 0;
  scrollbar-width: none;
}
.gradientm-filters::-webkit-scrollbar { display: none; }
.gradientm-chip {
  flex: 0 0 auto; padding: 9px 18px; border-radius: 999px;
  font-size: .9rem; font-weight: 500; color: #475569; white-space: nowrap;
  background: #fff; border: 1px solid rgba(11,31,77,.1);
  cursor: pointer; transition: all .22s var(--gm-ease);
}
.gradientm-chip:hover { color: var(--gm-brand-700); border-color: var(--gm-brand-300); transform: translateY(-1px); }
.gradientm-chip--active {
  color: var(--gm-brand-900); font-weight: 700; background: var(--gm-gradient-brand); border-color: transparent;
  box-shadow: var(--gm-shadow-glow);
}

/* ---------------------------------------------------------------------------
   5. BLOG CARDS
   ------------------------------------------------------------------------- */
.gradientm-select {
  padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(11,31,77,.12);
  background: #fff; font-weight: 500; color: #334155; cursor: pointer;
}

.gradientm-blog-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: var(--gm-radius);
  border: 1px solid rgba(11,31,77,.07);
  box-shadow: var(--gm-shadow-sm);
  transition: transform .35s var(--gm-ease), box-shadow .35s var(--gm-ease), border-color .35s var(--gm-ease);
}
.gradientm-blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--gm-shadow-lg);
  border-color: rgba(243,162,51,.18);
}
/* Filter animation */
.gradientm-blog-card.is-hidden { display: none; }
.gradientm-blog-card.is-entering { animation: gm-card-in .45s var(--gm-ease) both; }
@keyframes gm-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.gradientm-card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.gradientm-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--gm-ease); }
.gradientm-blog-card:hover .gradientm-card-media img { transform: scale(1.07); }
.gradientm-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,20,58,.28), transparent 45%);
  opacity: 0; transition: opacity .35s var(--gm-ease);
}
.gradientm-blog-card:hover .gradientm-card-media::after { opacity: 1; }

.gradientm-card-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--gm-brand-900);
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  box-shadow: var(--gm-shadow-sm);
}

.gradientm-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.gradientm-card-meta { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: #64748b; margin-bottom: 12px; }
.gradientm-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.gradientm-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #cbd5e1; }

.gradientm-card-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.18rem; font-weight: 700; line-height: 1.32; color: var(--gm-brand-900); margin-bottom: 10px; }
.gradientm-card-title a { transition: color .2s; }
.gradientm-card-title a:hover { color: var(--gm-brand-700); }
.gradientm-card-excerpt { font-size: .92rem; color: #64748b; line-height: 1.6; margin-bottom: 20px; flex: 1; }

.gradientm-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(11,31,77,.06); }
.gradientm-author { display: flex; align-items: center; gap: 10px; }
.gradientm-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--gm-shadow-sm); }
.gradientm-author-name { display: block; font-size: .82rem; font-weight: 600; color: var(--gm-brand-900); }
.gradientm-author-role { display: block; font-size: .72rem; color: #94a3b8; }

.gradientm-read-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .85rem; font-weight: 600; color: var(--gm-brand-700);
  transition: gap .2s var(--gm-ease), color .2s;
}
.gradientm-read-more:hover { gap: 9px; color: var(--gm-brand-700); }

.gradientm-no-results { text-align: center; padding: 60px 20px; color: #64748b; font-size: 1rem; }

/* ---------------------------------------------------------------------------
   6. PAGINATION
   ------------------------------------------------------------------------- */
.gradientm-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 48px; flex-wrap: wrap; }
.gradientm-page-numbers { display: flex; align-items: center; gap: 8px; }
.gradientm-page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 12px;
  font-weight: 600; font-size: .92rem; color: #475569;
  background: #fff; border: 1px solid rgba(11,31,77,.1);
  transition: all .22s var(--gm-ease);
}
.gradientm-page-btn:hover { color: var(--gm-brand-700); border-color: var(--gm-brand-300); transform: translateY(-2px); box-shadow: var(--gm-shadow-md); }
.gradientm-page-btn--active { color: var(--gm-brand-900); background: var(--gm-gradient-brand); border-color: transparent; box-shadow: var(--gm-shadow-glow); }
.gradientm-page-btn--active:hover { color: var(--gm-brand-900); }
.gradientm-page-ellipsis { padding: 0 6px; color: #94a3b8; }

/* ---------------------------------------------------------------------------
   7. SIDEBAR
   ------------------------------------------------------------------------- */
.gradientm-sidebar { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 130px; align-self: start; }
@media (max-width: 1023px) { .gradientm-sidebar { position: static; } }

.gradientm-widget { background: #fff; border: 1px solid rgba(11,31,77,.07); border-radius: var(--gm-radius); padding: 24px; box-shadow: var(--gm-shadow-sm); }
.gradientm-widget-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--gm-brand-900); margin-bottom: 16px; position: relative; padding-left: 14px; }
.gradientm-widget-title::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 4px; background: var(--gm-gradient-brand); }
.gradientm-widget-title--light { color: #fff; }
.gradientm-widget-title--light::before { background: var(--gm-accent-400); }

/* Sidebar search */
.gradientm-sidebar-search { display: flex; gap: 8px; }
.gradientm-sidebar-search input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(11,31,77,.12); font-size: .9rem; transition: border-color .2s, box-shadow .2s; }
.gradientm-sidebar-search input:focus { outline: none; border-color: var(--gm-brand-400); box-shadow: 0 0 0 3px rgba(243,162,51,.12); }
.gradientm-sidebar-search button { display: inline-flex; align-items: center; justify-content: center; width: 44px; border-radius: 12px; background: var(--gm-gradient-brand); color: var(--gm-brand-900); border: none; cursor: pointer; transition: filter .2s; }
.gradientm-sidebar-search button:hover { filter: brightness(1.08); }

/* Categories */
.gradientm-cat-list li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; border-radius: 10px; font-size: .92rem; font-weight: 500; color: #475569;
  transition: background .2s, color .2s, padding-left .2s;
}
.gradientm-cat-list li a:hover { background: var(--gm-brand-50); color: var(--gm-brand-700); padding-left: 16px; }
.gradientm-cat-count { font-size: .75rem; font-weight: 600; color: var(--gm-brand-700); background: var(--gm-brand-50); padding: 2px 9px; border-radius: 999px; }

/* Recent posts */
.gradientm-recent-list { display: flex; flex-direction: column; gap: 16px; }
.gradientm-recent-list a { display: flex; gap: 12px; align-items: center; }
.gradientm-recent-list img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.gradientm-recent-title { display: block; font-size: .88rem; font-weight: 600; color: var(--gm-brand-900); line-height: 1.4; transition: color .2s; }
.gradientm-recent-list a:hover .gradientm-recent-title { color: var(--gm-brand-700); }
.gradientm-recent-date { display: block; font-size: .74rem; color: #94a3b8; margin-top: 4px; }

/* Popular posts */
.gradientm-popular-list { display: flex; flex-direction: column; gap: 14px; }
.gradientm-popular-list li { display: flex; gap: 12px; align-items: flex-start; }
.gradientm-popular-num { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 800; background: var(--gm-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.4; flex: 0 0 auto; }
.gradientm-popular-list a { font-size: .9rem; font-weight: 500; color: #475569; line-height: 1.45; transition: color .2s; }
.gradientm-popular-list a:hover { color: var(--gm-brand-700); }

/* Newsletter sidebar */
.gradientm-widget--newsletter { background: var(--gm-gradient-hero); border: none; position: relative; overflow: hidden; }
.gradientm-widget--newsletter::before { content: ""; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(243,162,51,.4), transparent 70%); }
.gradientm-sidebar-newsletter input { width: 100%; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-size: .9rem; }
.gradientm-sidebar-newsletter input::placeholder { color: rgba(219,228,255,.6); }
.gradientm-sidebar-newsletter input:focus { outline: none; border-color: var(--gm-accent-400); background: rgba(255,255,255,.16); }

/* Tags */
.gradientm-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gradientm-tag { padding: 6px 13px; border-radius: 999px; font-size: .8rem; font-weight: 500; color: #475569; background: var(--gm-brand-50); border: 1px solid transparent; transition: all .2s var(--gm-ease); }
.gradientm-tag:hover { color: var(--gm-brand-900); background: var(--gm-gradient-brand); transform: translateY(-1px); }

/* ---------------------------------------------------------------------------
   8. NEWSLETTER CTA
   ------------------------------------------------------------------------- */
.gradientm-newsletter { padding: 40px 0 80px; }
.gradientm-newsletter-card {
  position: relative; overflow: hidden;
  background: var(--gm-gradient-hero);
  border-radius: 28px; padding: 56px 44px;
  box-shadow: var(--gm-shadow-lg);
}
.gradientm-newsletter-shapes span { position: absolute; border-radius: 50%; filter: blur(60px); }
.gradientm-newsletter-shapes span:nth-child(1) { width: 300px; height: 300px; top: -120px; right: -60px; background: radial-gradient(circle, rgba(243,162,51,.55), transparent 70%); }
.gradientm-newsletter-shapes span:nth-child(2) { width: 260px; height: 260px; bottom: -140px; left: -40px; background: radial-gradient(circle, rgba(0,34,108,.6), transparent 70%); }
.gradientm-newsletter-shapes span:nth-child(3) { width: 180px; height: 180px; top: 30%; left: 40%; background: radial-gradient(circle, rgba(243,162,51,.3), transparent 70%); }

.gradientm-newsletter-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gradientm-newsletter-input-row input { flex: 1; min-width: 220px; padding: 15px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; backdrop-filter: blur(8px); }
.gradientm-newsletter-input-row input::placeholder { color: rgba(219,228,255,.6); }
.gradientm-newsletter-input-row input:focus { outline: none; border-color: var(--gm-accent-400); box-shadow: 0 0 0 4px rgba(243,162,51,.18); }
.gradientm-newsletter-note { margin-top: 12px; font-size: .78rem; color: rgba(219,228,255,.6); }
.gradientm-newsletter-success { margin-top: 12px; font-size: .9rem; font-weight: 600; color: #6ee7b7; }

/* ---------------------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------------------- */
.gradientm-footer { background: #0b0f14; color: #94a3b8; }
.gradientm-footer-heading { font-family: "Plus Jakarta Sans", sans-serif; font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 20px; }
.gradientm-footer-links { display: flex; flex-direction: column; gap: 13px; }
.gradientm-footer-links a { font-size: .92rem; color: #9aa3ad; transition: color .2s, padding-left .2s; }
.gradientm-footer-links a:hover { color: var(--gm-brand-500); padding-left: 4px; }

.gradientm-footer-email { display: inline-block; font-size: .92rem; color: #cbd5e1; margin-bottom: 18px; transition: color .2s; }
.gradientm-footer-email:hover { color: var(--gm-brand-500); }
.gradientm-footer-address { font-style: normal; font-size: .9rem; line-height: 1.75; color: #9aa3ad; }

.gradientm-social { display: flex; gap: 10px; }
.gradientm-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: #cbd5e1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: all .25s var(--gm-ease); }
.gradientm-social a:hover { color: var(--gm-brand-900); background: var(--gm-gradient-brand); transform: translateY(-3px); border-color: transparent; }

/* Get In Touch mega CTA */
.gradientm-footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 72px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.gradientm-footer-cta-text {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
  font-size: clamp(2.75rem, 9vw, 6.5rem); line-height: .95; letter-spacing: -0.03em;
  color: #fff; transition: color .3s var(--gm-ease);
}
.gradientm-footer-cta-arrow { color: #fff; flex: 0 0 auto; transition: transform .3s var(--gm-ease), color .3s var(--gm-ease); }
.gradientm-footer-cta-arrow svg { width: clamp(44px, 8vw, 72px); height: clamp(44px, 8vw, 72px); }
.gradientm-footer-cta:hover .gradientm-footer-cta-text { color: var(--gm-brand-500); }
.gradientm-footer-cta:hover .gradientm-footer-cta-arrow { transform: translate(8px, -8px); color: var(--gm-brand-500); }

.gradientm-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; font-size: .85rem; }
.gradientm-footer-legal { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gradientm-footer-legal-sep { color: #64748b; }
.gradientm-footer-legal a { color: #9aa3ad; transition: color .2s; }
.gradientm-footer-legal a:hover { color: var(--gm-brand-500); }

/* ---------------------------------------------------------------------------
   10. BACK TO TOP
   ------------------------------------------------------------------------- */
.gradientm-back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 60;
  width: 50px; height: 50px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gm-brand-900); background: var(--gm-gradient-brand); border: none; cursor: pointer;
  box-shadow: var(--gm-shadow-glow);
  opacity: 0; transform: translateY(16px) scale(.9);
  transition: opacity .3s var(--gm-ease), transform .3s var(--gm-ease);
}
.gradientm-back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.gradientm-back-to-top:hover { transform: translateY(-3px) scale(1.05); }

/* ---------------------------------------------------------------------------
   11. SCROLL REVEAL (progressive enhancement)
   ------------------------------------------------------------------------- */
.gm-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--gm-ease), transform .6s var(--gm-ease); }
.gm-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------------
   12. RESPONSIVE FINE-TUNING
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .gradientm-hero-search-input { padding-right: 18px; padding-bottom: 17px; }
  .gradientm-hero-search-btn { position: static; transform: none; display: block; width: 100%; margin-top: 10px; }
  .gradientm-hero-search .relative { display: flex; flex-direction: column; }
  .gradientm-hero-stats { gap: 26px; }
  .gradientm-hero-stats > div:not(:last-child)::after { display: none; }
  .gradientm-newsletter-card { padding: 36px 22px; }
}

/* ---------------------------------------------------------------------------
   13. REDUCED MOTION (accessibility)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===========================================================================
   14. BLOG DETAILS / SINGLE POST PAGE
   ========================================================================= */

/* Post hero */
.gradientm-post-hero { background: var(--gm-gradient-hero); }
.gradientm-post-category {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gm-brand-900); background: var(--gm-gradient-brand);
  box-shadow: var(--gm-shadow-glow); transition: transform .2s var(--gm-ease);
}
.gradientm-post-category:hover { transform: translateY(-2px); }
.gradientm-post-title { font-size: clamp(1.9rem, 4.5vw, 3.25rem); line-height: 1.12; }

.gradientm-post-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.gradientm-post-author { display: flex; align-items: center; gap: 12px; }
.gradientm-post-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3); }
.gradientm-post-author-name { display: block; font-size: .92rem; font-weight: 600; color: #fff; }
.gradientm-post-author-role { display: block; font-size: .78rem; color: rgba(219,228,255,.7); }
.gradientm-post-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: rgba(219,228,255,.8); }
.gradientm-post-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.25); }

/* Featured image */
.gradientm-post-figure img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--gm-shadow-lg); border: 1px solid rgba(255,255,255,.1); }

/* Article typography */
.gradientm-article { font-size: 1.06rem; line-height: 1.8; color: #3f4653; }
.gradientm-article > * + * { margin-top: 1.35em; }
.gradientm-article-lead { font-size: 1.2rem; line-height: 1.75; color: var(--gm-brand-900); font-weight: 500; }
.gradientm-article h2 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--gm-brand-900); line-height: 1.25; margin-top: 2em; scroll-margin-top: 110px; }
.gradientm-article h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.28rem; font-weight: 700; color: var(--gm-brand-900); margin-top: 1.6em; }
.gradientm-article h4 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--gm-brand-900); }
.gradientm-article p { color: #3f4653; }
.gradientm-article a { color: var(--gm-brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,162,51,.5); }
.gradientm-article a:hover { text-decoration-color: var(--gm-brand-500); }
.gradientm-article strong { color: var(--gm-brand-900); font-weight: 700; }
.gradientm-article ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 12px; }
.gradientm-article ul li { position: relative; padding-left: 30px; }
.gradientm-article ul li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--gm-gradient-brand); transform: rotate(45deg);
}
.gradientm-article blockquote {
  margin: 2em 0; padding: 22px 28px; border-left: 4px solid var(--gm-brand-500);
  background: var(--gm-brand-50); border-radius: 0 14px 14px 0;
  font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.28rem; font-weight: 600; font-style: italic;
  color: var(--gm-brand-900); line-height: 1.5;
}
.gradientm-article-figure { margin: 2.2em 0; }
.gradientm-article-figure img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--gm-shadow-md); }
.gradientm-article-figure figcaption { margin-top: 12px; font-size: .85rem; color: var(--gm-muted); text-align: center; font-style: italic; }

/* Callout / key takeaways */
.gradientm-callout {
  margin: 2.2em 0; padding: 26px 28px; border-radius: 18px;
  background: linear-gradient(135deg, #fff9f0, #fff5e6); border: 1px solid #fbe0b8;
}
.gradientm-callout h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--gm-brand-700); }
.gradientm-callout h4::before { content: "★"; color: var(--gm-brand-500); }
.gradientm-callout ul { margin-top: 0; }

/* Tags row */
.gradientm-post-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--gm-border); }
.gradientm-post-tags-label { font-weight: 700; color: var(--gm-brand-900); margin-right: 4px; }

/* Share row */
.gradientm-post-share { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 24px; padding: 20px 24px; border-radius: 16px; background: var(--gm-surface); border: 1px solid var(--gm-border); }
.gradientm-post-share-label { font-weight: 600; color: var(--gm-brand-900); }
.gradientm-post-share-links { display: flex; gap: 10px; }
.gradientm-post-share-links a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; color: var(--gm-brand-900); background: #fff; border: 1px solid var(--gm-border); transition: all .22s var(--gm-ease); }
.gradientm-post-share-links a:hover { color: var(--gm-brand-900); background: var(--gm-gradient-brand); border-color: transparent; transform: translateY(-3px); }

/* Author bio */
.gradientm-author-bio { display: flex; gap: 22px; margin-top: 40px; padding: 28px; border-radius: 20px; background: var(--gm-brand-900); }
.gradientm-author-bio img { width: 88px; height: 88px; border-radius: 18px; object-fit: cover; flex: 0 0 auto; border: 2px solid rgba(255,255,255,.15); }
.gradientm-author-bio-role { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gm-brand-400); }
.gradientm-author-bio-name { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.3rem; font-weight: 700; color: #fff; margin: 4px 0 8px; }
.gradientm-author-bio-text { font-size: .92rem; line-height: 1.7; color: rgba(219,228,255,.8); }
.gradientm-author-bio-social { display: flex; gap: 10px; margin-top: 14px; }
.gradientm-author-bio-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: #cbd5e1; background: rgba(255,255,255,.08); transition: all .22s var(--gm-ease); }
.gradientm-author-bio-social a:hover { color: var(--gm-brand-900); background: var(--gm-brand-500); }

/* Post navigation */
.gradientm-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.gradientm-post-nav-item { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--gm-border); background: #fff; transition: all .25s var(--gm-ease); }
.gradientm-post-nav-item:hover { border-color: var(--gm-brand-300); box-shadow: var(--gm-shadow-md); transform: translateY(-3px); }
.gradientm-post-nav-next { text-align: right; align-items: flex-end; }
.gradientm-post-nav-dir { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--gm-brand-700); text-transform: uppercase; letter-spacing: .04em; }
.gradientm-post-nav-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; color: var(--gm-brand-900); line-height: 1.4; }

/* Table of contents */
.gradientm-toc-list { display: flex; flex-direction: column; gap: 4px; }
.gradientm-toc-list a { display: block; padding: 9px 14px; border-radius: 10px; font-size: .9rem; color: #475569; border-left: 2px solid transparent; transition: all .2s var(--gm-ease); }
.gradientm-toc-list a:hover, .gradientm-toc-list a.is-active { background: var(--gm-brand-50); color: var(--gm-brand-700); border-left-color: var(--gm-brand-500); font-weight: 600; }

/* Reading progress bar */
.gradientm-reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 55; background: transparent; }
.gradientm-reading-progress span { display: block; height: 100%; width: 0; background: var(--gm-gradient-brand); transition: width .1s linear; }

@media (max-width: 640px) {
  .gradientm-post-nav { grid-template-columns: 1fr; }
  .gradientm-post-nav-next { text-align: left; align-items: flex-start; }
  .gradientm-author-bio { flex-direction: column; gap: 16px; }
}

/* ===========================================================================
   15. WORDPRESS-SPECIFIC ADDITIONS
   Styles that only apply once the site is running on WordPress: contact forms
   (Contact Form 7 / generic), comments, block widgets, avatars & captions.
   These extend — never override — the original design language.
   ========================================================================= */

/* --- Avatars (WordPress swaps <img> author photos for get_avatar) --------- */
.gradientm-author img.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--gm-shadow-sm); }
.gradientm-post-author img.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3); }
.gradientm-author-bio img.avatar { width: 88px; height: 88px; border-radius: 18px; object-fit: cover; border: 2px solid rgba(255,255,255,.15); }
.gradientm-recent-list img.avatar { border-radius: 12px; }

/* --- Contact Form 7 & generic form styling -------------------------------- */
.gradientm-contact-form .wpcf7 label,
.gradientm-article form label { display: block; font-weight: 600; color: var(--gm-brand-900); margin-bottom: 6px; }
.gradientm-contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.gradientm-contact-form textarea,
.gradientm-contact-form select,
.gradientm-article form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.gradientm-article form textarea,
.gradientm-article form select {
  width: 100%; padding: 13px 16px; margin-bottom: 18px;
  border-radius: 12px; border: 1px solid rgba(11,31,77,.14);
  background: #fff; color: #334155; font-size: .95rem; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.gradientm-contact-form input:focus,
.gradientm-contact-form textarea:focus,
.gradientm-contact-form select:focus,
.gradientm-article form input:focus,
.gradientm-article form textarea:focus {
  outline: none; border-color: var(--gm-brand-400); box-shadow: 0 0 0 3px rgba(243,162,51,.14);
}
.gradientm-contact-form textarea { min-height: 150px; resize: vertical; }
.gradientm-contact-form input[type="submit"],
.gradientm-article form input[type="submit"],
.wpcf7 input[type="submit"] {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 12px; cursor: pointer; border: none;
  font-weight: 700; font-size: .95rem; color: var(--gm-brand-900);
  background: var(--gm-gradient-brand);
  box-shadow: 0 10px 28px -10px rgba(243, 162, 51, .6);
  transition: transform .25s var(--gm-ease), filter .25s var(--gm-ease);
}
.gradientm-contact-form input[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.03); }
.wpcf7-response-output { border-radius: 12px !important; padding: 14px 18px !important; margin: 8px 0 0 !important; }
.wpcf7-not-valid-tip { color: #dc2626; font-size: .82rem; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { border-color: #f59e0b; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #10b981; }

/* --- Comments ------------------------------------------------------------- */
.gradientm-comments { border-top: 1px solid var(--gm-border); padding-top: 40px; }
.gradientm-comment-list ol.children { list-style: none; padding-left: 24px; }
.gradientm-comment-list li.comment { margin-bottom: 22px; }
.gradientm-comments .comment-body { background: #fff; border: 1px solid rgba(11,31,77,.07); border-radius: 16px; padding: 20px 22px; box-shadow: var(--gm-shadow-sm); }
.gradientm-comments .comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gradientm-comments .comment-author .fn { font-weight: 700; color: var(--gm-brand-900); font-style: normal; }
.gradientm-comments .comment-author img.avatar { border-radius: 50%; }
.gradientm-comments .comment-meta { font-size: .78rem; color: #94a3b8; margin-bottom: 8px; }
.gradientm-comments .comment-meta a { color: #94a3b8; }
.gradientm-comments .reply a { display: inline-flex; font-size: .8rem; font-weight: 600; color: var(--gm-brand-700); margin-top: 8px; }
.gradientm-comment-form input:not([type="submit"]):not([type="checkbox"]),
.gradientm-comment-form textarea {
  width: 100%; padding: 13px 16px; margin-top: 6px;
  border-radius: 12px; border: 1px solid rgba(11,31,77,.14); background: #fff;
  font-size: .95rem; font-family: inherit;
}
.gradientm-comment-form textarea:focus,
.gradientm-comment-form input:focus { outline: none; border-color: var(--gm-brand-400); box-shadow: 0 0 0 3px rgba(243,162,51,.14); }
.gradientm-comment-form .comment-form-comment,
.gradientm-comment-form p { margin-bottom: 16px; }
.gradientm-comment-form label { font-weight: 600; color: var(--gm-brand-900); }
.gradientm-comment-form .submit,
.comment-form .submit {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px;
  border-radius: 12px; border: none; cursor: pointer;
  font-weight: 700; color: var(--gm-brand-900); background: var(--gm-gradient-brand);
  box-shadow: 0 10px 28px -10px rgba(243, 162, 51, .6);
  transition: transform .25s var(--gm-ease), filter .25s var(--gm-ease);
}
.gradientm-comment-form .submit:hover { transform: translateY(-2px); filter: brightness(1.03); }

/* --- Footer optional widget row ------------------------------------------- */
.gradientm-footer-widget { color: #9aa3ad; }
.gradientm-footer-widget a { color: #9aa3ad; transition: color .2s; }
.gradientm-footer-widget a:hover { color: var(--gm-brand-500); }
.gradientm-footer-widget ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }

/* --- Block-based sidebar widgets fall back to designed spacing ------------- */
.gradientm-sidebar .widget:not(.gradientm-widget) { background: #fff; border: 1px solid rgba(11,31,77,.07); border-radius: var(--gm-radius); padding: 24px; box-shadow: var(--gm-shadow-sm); }

/* --- Full-width listing wrapper (index-no-sidebar parity) ------------------ */
.gradientm-content-full { width: 100%; }

/* --- WordPress alignment inside article content --------------------------- */
.gradientm-article .aligncenter { margin-left: auto; margin-right: auto; }
.gradientm-article img { border-radius: 14px; }
.gradientm-article .wp-caption-text,
.gradientm-article figcaption { margin-top: 12px; font-size: .85rem; color: var(--gm-muted); text-align: center; font-style: italic; }

/* ===========================================================================
   16. RESOURCES — Case Studies & White Papers
   Extends the blog design language for the resource cards and single pages.
   Reuses the same tokens, radius, shadows, gradients and spacing — never
   overrides the base blog styles.
   ========================================================================= */

/* --- Shared card additions ------------------------------------------------ */
.gradientm-card-badges { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.gradientm-card-badges .gradientm-card-badge { position: static; top: auto; left: auto; }
.gradientm-card-badge--accent { color: var(--gm-brand-900); background: var(--gm-gradient-brand); }

.gradientm-card-logo { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: var(--gm-shadow-sm); }
.gradientm-card-logo img { max-height: 26px; width: auto; object-fit: contain; }

/* Case study challenge/solution snippet */
.gradientm-card-cs { display: grid; gap: 10px; margin-bottom: 18px; }
.gradientm-card-cs div { padding-left: 12px; border-left: 3px solid var(--gm-brand-300); }
.gradientm-card-cs dt { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-brand-700); }
.gradientm-card-cs dd { margin: 2px 0 0; font-size: .84rem; line-height: 1.5; color: #64748b; }

/* Result highlights (mini stat row) */
.gradientm-card-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; list-style: none; padding: 0; }
.gradientm-card-highlights li { flex: 1 1 auto; min-width: 84px; padding: 10px 12px; border-radius: 12px; background: var(--gm-brand-50); border: 1px solid #fbe0b8; }
.gradientm-highlight-value { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--gm-brand-700); line-height: 1.1; }
.gradientm-highlight-label { display: block; margin-top: 2px; font-size: .68rem; color: #64748b; }

/* White paper cover + doc chip + actions */
.gradientm-card-media--cover img { object-position: top center; }
.gradientm-card-doc { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(13,31,48,.78); backdrop-filter: blur(4px); }
.gradientm-card-doc svg { color: var(--gm-brand-400); }

.gradientm-card-author-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.gradientm-card-author-row img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--gm-shadow-sm); }

.gradientm-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(11,31,77,.06); }

/* Small + ghost button variants (reuse brand system) */
.gradientm-btn-sm { padding: 10px 16px; font-size: .85rem; border-radius: 10px; }
.gradientm-btn-ghost { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gm-brand-700); background: #fff; border: 1px solid rgba(11,31,77,.12); border-radius: 12px; transition: all .22s var(--gm-ease); cursor: pointer; }
.gradientm-btn-ghost svg { transition: transform .25s var(--gm-ease); }
.gradientm-btn-ghost:hover { color: var(--gm-brand-900); border-color: var(--gm-brand-300); background: var(--gm-brand-50); transform: translateY(-2px); }
.gradientm-btn-ghost:hover svg { transform: translateX(3px); }

/* --- Single: structured resource sections --------------------------------- */
.gradientm-resource-section + .gradientm-resource-section { margin-top: 2.6em; }
.gradientm-resource-h { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--gm-brand-900); line-height: 1.25; margin-bottom: .7em; scroll-margin-top: 110px; }
.gradientm-resource-lead { margin-bottom: 2.4em; font-size: 1.14rem; color: var(--gm-brand-900); }
.gradientm-resource-section { scroll-margin-top: 110px; }

/* Client information card */
.gradientm-info-card { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: var(--gm-radius); background: var(--gm-surface); border: 1px solid var(--gm-border); }
.gradientm-info-logo { max-height: 44px; width: auto; object-fit: contain; align-self: flex-start; }
.gradientm-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.gradientm-info-grid dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-brand-700); }
.gradientm-info-grid dd { margin: 4px 0 0; font-size: 1rem; font-weight: 600; color: var(--gm-brand-900); }

/* Technology stack chips (reuse tag look) */
.gradientm-tech-stack { margin: 0; }

/* Diagram / charts placeholder */
.gradientm-diagram-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 24px; margin: 0; border-radius: var(--gm-radius); background: linear-gradient(135deg, #fff9f0, #f7f9fc); border: 1px dashed #fbe0b8; text-align: center; }
.gradientm-diagram-icon { color: var(--gm-brand-500); }
.gradientm-diagram-placeholder figcaption { font-size: .9rem; font-weight: 600; color: var(--gm-body); font-style: normal; }

/* Metric / statistics grid */
.gradientm-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 0; }
.gradientm-metric { padding: 22px 20px; border-radius: 16px; background: var(--gm-gradient-hero); color: #fff; position: relative; overflow: hidden; }
.gradientm-metric::before { content: ""; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(243,162,51,.4), transparent 70%); }
.gradientm-metric-value { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1; color: #fff; position: relative; }
.gradientm-metric-label { display: block; margin-top: 8px; font-size: .82rem; color: rgba(219,228,255,.85); position: relative; }

/* Gallery */
.gradientm-resource-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 0; }
.gradientm-gallery-item { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--gm-border); aspect-ratio: 4 / 3; }
.gradientm-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--gm-ease); }
.gradientm-gallery-item:hover img { transform: scale(1.06); }

/* Download list */
.gradientm-download-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.gradientm-download-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--gm-border); font-weight: 600; color: var(--gm-brand-900); transition: all .22s var(--gm-ease); }
.gradientm-download-item:hover { border-color: var(--gm-brand-300); background: var(--gm-brand-50); transform: translateY(-2px); box-shadow: var(--gm-shadow-md); }
.gradientm-download-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; color: var(--gm-brand-900); background: var(--gm-gradient-brand); }
.gradientm-download-label { font-size: .92rem; line-height: 1.35; }
.gradientm-download-list--compact .gradientm-download-item { padding: 10px 12px; border: none; background: transparent; }
.gradientm-download-list--compact .gradientm-download-item:hover { background: var(--gm-brand-50); box-shadow: none; transform: none; padding-left: 14px; }
.gradientm-download-list--compact .gradientm-download-icon { width: 32px; height: 32px; }
.gradientm-download-list--compact .gradientm-download-label { font-size: .86rem; font-weight: 600; }

/* Download PDF CTA (single white paper) */
.gradientm-download-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 2.6em; padding: 32px 30px; border-radius: 20px; background: var(--gm-brand-900); }
.gradientm-download-cta-title { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; margin: 12px 0 8px; line-height: 1.2; }
.gradientm-download-cta-text { font-size: .95rem; line-height: 1.6; color: rgba(219,228,255,.8); max-width: 34rem; }

/* Sidebar CTA banner (reuse newsletter dark treatment) */
.gradientm-cta-banner { background: var(--gm-gradient-hero); border: none; position: relative; overflow: hidden; }
.gradientm-cta-banner::before { content: ""; position: absolute; bottom: -40px; left: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(243,162,51,.35), transparent 70%); }
.gradientm-cta-banner-text { position: relative; font-size: .9rem; line-height: 1.6; color: rgba(219,228,255,.9); margin-bottom: 16px; }

/* Full-width single (sidebar removed) */
.gradientm-resource-single { width: 100%; }
.gradientm-resource-article { width: 100%; max-width: 100%; }
/* On wide screens keep prose readable while rich blocks (metrics, gallery,
   diagrams, download CTA) still span the full width. */
@media (min-width: 1024px) {
  .gradientm-resource-article .gradientm-resource-lead,
  .gradientm-resource-article .gradientm-resource-section > .gradientm-article { max-width: 78ch; }
}

/* Responsive */
@media (max-width: 640px) {
  .gradientm-info-grid { grid-template-columns: 1fr; }
  .gradientm-download-cta { flex-direction: column; align-items: flex-start; }
  .gradientm-metric-value { font-size: 1.6rem; }
}