/* ==========================================================================
   Partner Gallery — public, SEO-facing partner browser
   Aligned to the GrowthGuru brand (theme-growthguru.css tokens).
   Single light theme — no theme switching.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  background:
    radial-gradient(60% 60% at 100% 0%, var(--purple-50) 0%, transparent 55%),
    var(--bg-color, #ffffff);
  color: var(--text-color, #111827);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
a { color: inherit; }

/* ---------- buttons ---------- */
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13.5px/1 var(--font-primary); padding: 11px 20px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.pg-btn:active { transform: translateY(1px); }
.pg-btn-primary {
  background: linear-gradient(135deg, var(--primary-purple, #7c3aed) 0%, var(--primary-purple-dark, #6d28d9) 100%);
  color: #fff; box-shadow: 0 4px 18px -4px rgba(124, 58, 237, .45);
}
.pg-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 26px -6px rgba(124, 58, 237, .55); }
.pg-btn-ghost {
  background: #fff; border-color: var(--border-color, #e2e8f0); color: var(--text-color, #111827);
}
.pg-btn-ghost:hover { border-color: var(--primary-purple, #7c3aed); color: var(--primary-purple, #7c3aed); }
/* Header "Sign in" — outline so it never sits purple-on-purple */
.pg-btn-signin {
  background: #fff; border: 1.5px solid var(--primary-purple, #7c3aed);
  color: var(--primary-purple-dark, #6d28d9);
}
.pg-btn-signin:hover {
  background: linear-gradient(135deg, var(--primary-purple, #7c3aed) 0%, var(--primary-purple-dark, #6d28d9) 100%);
  color: #fff; border-color: transparent; box-shadow: 0 6px 20px -6px rgba(124, 58, 237, .5);
}

/* The top menu is the shared header component
   (css/components/topnav.css + js/topnav.js), and the hamburger drawer is
   sliding-menu.css + sliding-mnu.js — this page styles neither. */

/* ---------- hero ---------- */
.pg-hero {
  position: relative; overflow: hidden; padding: 66px 28px 54px;
  background: linear-gradient(225deg, #ffffff 0%, #faf9fc 25%, #f3f0f7 55%, #ece5f5 80%, #e4d9f1 100%);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.pg-hero-inner { position: relative; max-width: 860px; margin: 0 auto; text-align: center; }
.pg-eyebrow {
  display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--primary-purple, #7c3aed);
  padding: 6px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--purple-200, #ddd6fe); box-shadow: 0 2px 10px -4px rgba(124, 58, 237, .25);
  margin-bottom: 20px;
}
.pg-hero-title {
  font-size: clamp(30px, 5vw, 50px); line-height: 1.08; font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 16px; color: #1a1a2e;
}
.pg-accent-text {
  background: linear-gradient(120deg, var(--primary-purple, #7c3aed), var(--primary-orange, #f97316));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pg-hero-sub { font-size: clamp(15px, 2vw, 18px); color: var(--grey-600, #4b5563); max-width: 600px; margin: 0 auto 30px; line-height: 1.6; }

.pg-searchbar {
  display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 0 auto;
  padding: 6px 6px 6px 18px; border-radius: 14px; background: #fff;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 16px 40px -18px rgba(124, 58, 237, .3);
}
.pg-search-icon { color: var(--grey-400, #94a3b8); flex-shrink: 0; }
.pg-searchbar input {
  flex: 1; border: none; background: transparent; outline: none;
  font: 500 16px var(--font-primary); color: var(--text-color, #111827); padding: 12px 0;
}
.pg-searchbar input::placeholder { color: var(--grey-400, #94a3b8); }
.pg-search-clear { border: none; background: var(--grey-100, #f1f5f9); color: var(--grey-500, #64748b); width: 34px; height: 34px; border-radius: 9px; font-size: 20px; cursor: pointer; line-height: 1; }

.pg-hero-stats { display: flex; gap: 44px; justify-content: center; margin-top: 34px; }
.pg-stat { display: flex; flex-direction: column; gap: 2px; }
.pg-stat strong { font-size: 26px; font-weight: 800; color: #1a1a2e; letter-spacing: -.02em; }
.pg-stat span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500, #64748b); }

/* ---------- layout ---------- */
.pg-main { max-width: 1280px; margin: 0 auto; padding: 32px 28px 64px; display: grid; grid-template-columns: 248px 1fr; gap: 30px; align-items: start; }

/* ---------- filters ---------- */
.pg-filters {
  position: sticky; top: 92px; background: #fff; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 16px; padding: 22px; max-height: calc(100vh - 116px); overflow-y: auto;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(124,58,237,.08));
}
.pg-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pg-filters-head h2 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text-color, #111827); }
.pg-clear-filters { border: none; background: none; color: var(--primary-purple, #7c3aed); font: 600 12.5px var(--font-primary); cursor: pointer; padding: 0; }
.pg-clear-filters:hover { text-decoration: underline; }
.pg-filter-group { margin-bottom: 22px; }
.pg-filter-group h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500, #64748b); margin: 0 0 10px; }
.pg-filter-list { display: flex; flex-direction: column; gap: 2px; }
.pg-check { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--grey-700, #374151); transition: background .15s; user-select: none; }
.pg-check:hover { background: var(--purple-50, #f5f3ff); }
.pg-check input { display: none; }
.pg-check .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--grey-300, #cbd5e1); flex-shrink: 0; display: grid; place-items: center; transition: all .15s; background: #fff; }
.pg-check .box svg { opacity: 0; width: 11px; height: 11px; color: #fff; }
.pg-check input:checked + .box { background: var(--primary-purple, #7c3aed); border-color: var(--primary-purple, #7c3aed); }
.pg-check input:checked + .box svg { opacity: 1; }
.pg-check .count { margin-left: auto; font-size: 11px; color: var(--grey-400, #94a3b8); font-weight: 600; }

/* ---------- results bar ---------- */
.pg-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.pg-results-count { font-size: 14px; color: var(--grey-600, #4b5563); font-weight: 500; }
.pg-results-count strong { color: var(--text-color, #111827); font-weight: 700; }
.pg-results-tools { display: flex; align-items: center; gap: 12px; }
.pg-filter-toggle { display: none; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--border-color, #e2e8f0); color: var(--text-color, #111827); padding: 9px 14px; border-radius: 9px; font: 600 13px var(--font-primary); cursor: pointer; }
.pg-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey-500, #64748b); font-weight: 600; }
.pg-sort select { background: #fff; border: 1px solid var(--border-color, #e2e8f0); color: var(--text-color, #111827); border-radius: 8px; padding: 8px 12px; font: 600 13px var(--font-primary); cursor: pointer; outline: none; }

.pg-active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pg-active-chips:empty { display: none; }
.pg-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--purple-50, #f5f3ff); color: var(--primary-purple-dark, #6d28d9); border: 1px solid var(--purple-200, #ddd6fe); padding: 5px 8px 5px 11px; border-radius: 999px; font: 600 12px var(--font-primary); }
.pg-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; opacity: .7; }
.pg-chip button:hover { opacity: 1; }

/* ---------- grid + cards ---------- */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }

.pg-card {
  position: relative; display: flex; flex-direction: column; background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 18px; overflow: hidden; cursor: pointer;
  box-shadow: var(--card-shadow, 0 1px 3px rgba(124,58,237,.08));
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.pg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow, 0 10px 15px -3px rgba(124,58,237,.15));
  border-color: var(--purple-200, #ddd6fe);
}
.pg-card-banner { height: 62px; position: relative; }
.pg-card-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--card-bg, #fff) 88%, transparent)); }
.pg-card-featured { position: absolute; top: 12px; right: 12px; z-index: 2; font: 700 10px var(--font-primary); letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.92); color: var(--primary-purple-dark, #6d28d9); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 8px -3px rgba(0,0,0,.3); }
.pg-card-logo { position: absolute; top: 32px; left: 20px; z-index: 2; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font: 800 20px var(--font-primary); color: #fff; border: 3px solid var(--card-bg, #fff); box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); }
.pg-card-body { padding: 30px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pg-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pg-card-name { font-size: 16.5px; font-weight: 700; color: var(--text-color, #111827); margin: 0; letter-spacing: -.01em; }
.pg-card-region { font-size: 12.5px; color: var(--grey-500, #64748b); font-weight: 500; display: flex; align-items: center; gap: 5px; margin-top: 3px; }

.pg-type-badge { flex-shrink: 0; font: 700 10px var(--font-primary); text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 7px; }
.type-microsoft_partner { background: color-mix(in srgb, #0078d4 14%, #fff); color: #0067b8; }
.type-startup           { background: color-mix(in srgb, #10b981 14%, #fff); color: #0f9d6b; }
.type-aws_partner       { background: color-mix(in srgb, #ff9900 16%, #fff); color: #d97e00; }
.type-google_partner    { background: color-mix(in srgb, #4285f4 14%, #fff); color: #2f6fdb; }

.pg-card-headline { font-size: 13.5px; color: var(--grey-600, #4b5563); line-height: 1.5; margin: 0; }
.pg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-tag { font: 600 11.5px var(--font-primary); padding: 4px 9px; border-radius: 7px; background: var(--grey-50, #f8fafc); color: var(--grey-600, #4b5563); border: 1px solid var(--border-color, #e2e8f0); }
.pg-tag-more { color: var(--primary-purple, #7c3aed); background: var(--purple-50, #f5f3ff); border-color: var(--purple-200, #ddd6fe); }

.pg-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-color, #e2e8f0); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-intent { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--font-primary); color: var(--accent-green, #10b981); }
.pg-intent svg { width: 13px; height: 13px; }
.pg-card-cta { font: 700 12.5px var(--font-primary); color: var(--primary-purple, #7c3aed); display: inline-flex; align-items: center; gap: 4px; }

/* skeletons */
.pg-skel { pointer-events: none; }
.pg-skel .sk { background: var(--grey-100, #f1f5f9); border-radius: 8px; animation: pgpulse 1.3s ease-in-out infinite; }
@keyframes pgpulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ---------- empty ---------- */
.pg-empty { text-align: center; padding: 70px 20px; color: var(--grey-500, #64748b); }
.pg-empty svg { color: var(--grey-400, #94a3b8); margin-bottom: 14px; }
.pg-empty h3 { color: var(--text-color, #111827); margin: 0 0 6px; font-size: 18px; }
.pg-empty p { margin: 0 0 20px; }

/* ---------- drawer ---------- */
.pg-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(17, 24, 39, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.pg-drawer-backdrop.show { opacity: 1; }
.pg-drawer { position: fixed; top: 0; right: 0; z-index: 61; width: min(560px, 100vw); height: 100vh; overflow-y: auto; background: var(--bg-color, #fff); border-left: 1px solid var(--border-color, #e2e8f0); transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); box-shadow: -30px 0 60px -30px rgba(17,24,39,.4); }
.pg-drawer.show { transform: translateX(0); }
.pg-drawer-close { position: absolute; top: 16px; right: 16px; z-index: 5; width: 38px; height: 38px; border-radius: 10px; border: none; cursor: pointer; background: rgba(255,255,255,.9); color: var(--grey-700, #374151); font-size: 24px; line-height: 1; backdrop-filter: blur(6px); box-shadow: 0 2px 10px -4px rgba(0,0,0,.3); }
.pg-drawer-close:hover { background: #fff; }

.pg-dr-banner { height: 132px; position: relative; }
.pg-dr-logo { position: absolute; left: 28px; bottom: -34px; width: 84px; height: 84px; border-radius: 20px; display: grid; place-items: center; font: 800 30px var(--font-primary); color: #fff; border: 4px solid var(--bg-color, #fff); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.pg-dr-content { padding: 48px 28px 40px; }
.pg-dr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pg-dr-name { font-size: 24px; font-weight: 800; margin: 0; color: var(--text-color, #111827); letter-spacing: -.02em; }
.pg-dr-region { color: var(--grey-500, #64748b); font-size: 13.5px; font-weight: 500; margin: 4px 0 0; display: flex; align-items: center; gap: 6px; }
.pg-dr-section { margin-top: 28px; }
.pg-dr-section h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-500, #64748b); margin: 0 0 12px; }
.pg-dr-about { font-size: 15px; line-height: 1.65; color: var(--grey-700, #374151); margin: 0; }
.pg-dr-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pg-dr-callout { border-radius: 14px; padding: 16px; border: 1px solid var(--border-color, #e2e8f0); }
.pg-dr-callout.offering { background: color-mix(in srgb, var(--accent-green, #10b981) 8%, #fff); border-color: color-mix(in srgb, var(--accent-green, #10b981) 30%, #fff); }
.pg-dr-callout.seeking  { background: var(--purple-50, #f5f3ff); border-color: var(--purple-200, #ddd6fe); }
.pg-dr-callout h4 { margin: 0 0 8px; font: 700 12px var(--font-primary); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 7px; }
.pg-dr-callout.offering h4 { color: var(--accent-green, #10b981); }
.pg-dr-callout.seeking h4 { color: var(--primary-purple, #7c3aed); }
.pg-dr-callout p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--grey-700, #374151); }

.pg-dr-assets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pg-dr-asset { border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: border-color .2s, transform .15s; }
.pg-dr-asset:hover { border-color: var(--purple-200, #ddd6fe); transform: translateY(-2px); }
.pg-dr-asset-thumb { height: 92px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.pg-dr-asset-name { padding: 9px 11px; font-size: 12.5px; font-weight: 600; color: var(--text-color, #111827); }
.pg-dr-asset-type { padding: 0 11px 10px; font-size: 11px; color: var(--grey-500, #64748b); }

.pg-dr-cta { position: sticky; bottom: 0; margin: 32px -28px -40px; padding: 18px 28px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-top: 1px solid var(--border-color, #e2e8f0); display: flex; gap: 12px; }
.pg-dr-cta .pg-btn { flex: 1; padding: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .pg-main { grid-template-columns: 1fr; }
  .pg-filters { position: fixed; top: 0; left: 0; z-index: 70; height: 100vh; max-height: none; width: min(320px, 86vw); border-radius: 0; transform: translateX(-100%); transition: transform .3s ease; }
  .pg-filters.open { transform: translateX(0); }
  .pg-filter-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .pg-hero { padding: 42px 18px 38px; }
  .pg-hero-stats { gap: 26px; }
  .pg-main { padding: 24px 16px 48px; }
  .pg-dr-twocol { grid-template-columns: 1fr; }
}