/* Partners page (/partners/) — ports src/pages/Partners.tsx. Loaded only on that page.
 * One bg-base section (no visible grid, as in React), padding 100/80, 1280/80px container (xq-w-1120). */

/* Resets first (WP flow/constrained gap), specific margins after with higher specificity. */
.xq-partners > *, .xq-partners-hero > *, .xq-partners-block > *, .xq-partners-cta > *, .xq-partners-cta-copy > * { margin-block: 0; }

.xq-partners { padding-top: var(--wp--preset--spacing--section-100); padding-bottom: var(--wp--preset--spacing--section-80); }

/* Hero: React maxWidth 640 (text capped, block stays in the container). */
.xq-partners > .xq-partners-hero { margin-bottom: 72px; }
.xq-partners-hero > * { max-width: 640px; }
.xq-partners-hero > .xq-t-h2 { margin-bottom: 20px; max-width: 880px; }

/* Subsection eyebrow (React: 11px display, .15em, uppercase, text-2, mb 28). */
.xq-partners-block > .xq-partners-label {
  color: var(--wp--preset--color--text-2); font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--meta); font-weight: 400; line-height: 1.6; letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 28px;
}
.xq-partners > .xq-partners-block--tech { margin-bottom: 64px; }

/* Cards come from core/query loops (xq_partner posts): query > ul.<grid> (post
 * template) > li (one per post) > card. The <li> is the grid item; the card fills it.
 * Technology cards (is-style-card, padding 28/32 on the block): 2 columns, gap 18. */
.xq-partners-tech-grid, .xq-partners-si-grid { display: grid; gap: 18px; }
.xq-partners-tech-grid { grid-template-columns: repeat(2, 1fr); }
.xq-partners-tech-grid > li, .xq-partners-si-grid > li { margin-block: 0; }
.xq-partners-tech-grid > li > .is-style-card, .xq-partners-si-grid > li > .is-style-card { height: 100%; }
/* xq-hover-border supplies the hover. Page nuance: stagger the reveal
 * (opacity/transform) only, so the hover border never lags. Stagger by position
 * (formerly xq-d1…d4 per card): tech cycles 1-4, integrators 1-3. */
.xq-partner-card.xq-aos { transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s; }
.xq-partners-tech-grid > li:nth-child(4n+1) > .xq-partner-card { transition-delay: 0.07s, 0.07s, 0s; }
.xq-partners-tech-grid > li:nth-child(4n+2) > .xq-partner-card { transition-delay: 0.14s, 0.14s, 0s; }
.xq-partners-tech-grid > li:nth-child(4n+3) > .xq-partner-card { transition-delay: 0.21s, 0.21s, 0s; }
.xq-partners-tech-grid > li:nth-child(4n+4) > .xq-partner-card { transition-delay: 0.28s, 0.28s, 0s; }
.xq-partners-si-grid > li:nth-child(1) > .xq-aos { transition-delay: 0.07s; }
.xq-partners-si-grid > li:nth-child(2) > .xq-aos { transition-delay: 0.14s; }
.xq-partners-si-grid > li:nth-child(3) > .xq-aos { transition-delay: 0.21s; }
.xq-partners-si-grid > li:nth-child(n+4) > .xq-aos { transition-delay: 0.28s; }
.xq-partner-card > h3, .xq-si-card > h3 {
  color: var(--wp--preset--color--text-0); font-family: var(--wp--preset--font-family--display);
  line-height: 1.6; letter-spacing: normal;
}
/* Website link on the name (inc/content-team-partners.php), stretched over the card. */
.xq-partner-card, .xq-si-card { position: relative; }
.xq-partner-link { color: inherit; text-decoration: none; }
.xq-partner-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.xq-partner-link:hover, .xq-partner-link:focus-visible { color: var(--wp--preset--color--accent); }
.xq-partner-link:focus-visible { outline: none; }
/* Links inside a description sit above the card-wide website link. */
.xq-partner-card > p a, .xq-si-card > p a { position: relative; z-index: 1; color: var(--wp--preset--color--accent); }
.xq-partner-link:focus-visible::after { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.xq-partner-card > h3 { font-size: var(--wp--preset--font-size--title-sm); font-weight: 700; margin-bottom: 10px; }
.xq-partner-card > p { margin-bottom: 16px; color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--ui); line-height: 1.65; }
/* Tags: core/post-terms (xq_partner_tag), terms rendered as <span class="xq-partner-tag">
 * by inc/content-team-partners.php. Pill = the badge style, smaller, blue-tinted. */
.xq-partner-card > .xq-partner-tags { display: flex; gap: 8px; }
.xq-partner-tags > .wp-block-post-terms__separator { display: none; }
.xq-partner-tags > .xq-partner-tag {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--micro); font-weight: 600; line-height: 1.6; letter-spacing: normal;
  background: rgba(59, 130, 246, 0.07); color: var(--wp--preset--color--cyan);
  border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 3px 10px;
}

/* System integrator cards (is-style-card): 3 columns, gap 16, no hover. */
.xq-partners-si-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xq-si-card > h3 { font-size: var(--wp--preset--font-size--h-4); font-weight: 600; margin-bottom: 8px; }
.xq-si-card > p { color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

/* Become a partner: inline accent-dim box, mt 72. */
.xq-partners > .xq-partners-cta {
  margin-top: 72px; background: var(--wp--preset--color--accent-dim); border: 1px solid var(--wp--preset--color--border-mid);
  border-radius: 6px; padding: 48px 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.xq-partners-cta-copy > .xq-partners-cta-h {
  font-size: var(--wp--preset--font-size--title-lg); font-weight: 700; line-height: 1.6; letter-spacing: normal; color: var(--wp--preset--color--text-0);
  margin-bottom: 8px;
}
.xq-partners-cta-copy > .xq-partners-cta-p { color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--body); line-height: 1.6; }
.xq-partners-cta-actions { display: flex; }

/* React keeps the fixed 2/3-column grids; stack below 900px, where they no
 * longer fit the phone widths. */
@media (max-width: 900px) {
  .xq-partners-si-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .xq-partners-tech-grid { grid-template-columns: 1fr; }
  .xq-partner-tags { flex-wrap: wrap; }
  .xq-partners > .xq-partners-cta { padding: 32px 24px; }
}