/* ================================================================
   PARTNERS SECTION — clean partner tiles
   Built to scale to MANY partners: compact, equal-height white tiles
   in the site's light card language (.why-card DNA — lift + purple
   border + soft purple shadow on hover). Logo at natural size, name,
   a 3-line-clamped short description (keeps all cards equal height
   regardless of copy length), and a "Learn more" button that opens
   the partner popup (modal system unchanged).

   Grid uses auto-FILL so a handful of partners keeps sane card widths
   (no stretching into full-width slabs) and N partners wrap forever.

   The popup reuses the service-modal classes (.svc-modal* in main.css);
   only the id-scoped #partner-modal-overlay container is replicated
   here, matching #svc-modal-overlay 1:1. Tokens only.
   ================================================================ */

/* White fading into brand lavender (--primary-50, the old iFourLabs section
   color) with the theme's faint .bg-grid texture — gives Partners its own
   identity between the white Why-Foursees above and soft-gray Insights below. */
#partners {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-white) 0%, var(--primary-50) 22%);
  padding: 120px 0;
}

/* Keep content above the decorative grid layer (.bg-grid from main.css) */
#partners .container {
  position: relative;
  z-index: 1;
}

.partners-subheading {
  color: var(--smoky-500);
  max-width: 700px;
}

/* ── Grid — scales from 1 to N partners ────────────────────────────*/
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 1fr; /* every row equals the tallest — uniform tiles at any N */
  gap: var(--space-6);
  margin-top: var(--space-10);
}

/* ── Tile ──────────────────────────────────────────────────────────*/
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px 28px;
  background: var(--surface-white);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: all 0.35s var(--ease-out-quart);
}

.partner-card:hover {
  border-color: var(--primary-200);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(163, 82, 166, 0.12);
}

/* ── Logo — natural size, no backing plate ─────────────────────────*/
.partner-logo {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: 18px;
}

.partner-logo img {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* No-logo tiles: the name heading doubles as the wordmark — larger,
   vertically aligned with neighbours' logo rows for a tidy grid. */
.partner-card--no-logo .partner-name {
  font-size: 22px;
  min-height: 48px;
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

/* ── Name ──────────────────────────────────────────────────────────*/
.partner-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--smoky-800);
  margin: 0 0 8px;
}

/* ── Short description — clamped so all tiles stay equal height ────*/
.partner-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--smoky-500);
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── "Learn more" — opens the popup (full text in the modal) ───────*/
.partner-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-600);
  transition: gap 0.3s var(--ease-out-quart), color 0.3s var(--ease-out-quart);
}

.partner-cta:hover {
  color: var(--primary-500);
  gap: 12px;
}

.partner-cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s;
}

/* ================================================================
   PARTNER MODAL OVERLAY — replicates #svc-modal-overlay (main.css)
   exactly; everything inside reuses .svc-modal* classes directly.
   ================================================================ */
#partner-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#partner-modal-overlay.active {
  display: flex;
}

#partner-modal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 14, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out-quart);
}

#partner-modal-overlay.visible::before {
  opacity: 1;
}

#partner-modal-overlay.visible .svc-modal.active .svc-modal-panel {
  transform: translateY(0);
}

/* ── Popup body content (WYSIWYG long_description) ─────────────────*/
.partner-modal-content {
  font-size: 16px;
  line-height: 1.7;
  color: var(--smoky-600);
}

.partner-modal-content p {
  margin: 0 0 18px;
}

.partner-modal-content ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.partner-modal-content li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.6;
}

.partner-modal-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-400));
}

.partner-modal-content li strong {
  color: var(--smoky-800);
  font-weight: 700;
}

/* ── Responsive ────────────────────────────────────────────────────*/
@media (max-width: 640px) {
  #partners {
    padding: 80px 0;
  }
  .partners-grid {
    grid-template-columns: 1fr;
  }
  .partner-card {
    padding: 28px 24px;
  }
  /* Full-screen popup (mirrors #svc-modal-overlay mobile rules;
     inner .svc-modal* mobile rules in main.css apply via classes) */
  #partner-modal-overlay.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: var(--surface-white);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #partner-modal-overlay.active .svc-modal.active {
    display: block;
  }
}