/* Company page (/company/) — ports src/pages/Company.tsx. Loaded only on that page.
 * All containers are React's 1280/80px (xq-w-1120). */

/* Resets first (WP flow/constrained gap), specific margins after with higher specificity. */
.xq-co-hero > *, .xq-co-hero-copy > *, .xq-co-stats > *, .xq-co-lead > *, .xq-co-lead-head > *,
.xq-co-extra > *, .xq-co-careers > *, .xq-co-contact > * { margin-block: 0; }

/* ── Hero: 100/100 (no visible grid, as in React); copy capped at 720 (p at 600). ── */
.xq-co-hero { padding-top: var(--wp--preset--spacing--section-100); padding-bottom: var(--wp--preset--spacing--section-100); }
.xq-co-hero-copy > * { max-width: 720px; }
.xq-co-hero-copy > .xq-t-h2 { margin-bottom: 24px; max-width: 880px; }
.xq-co-hero-copy > .xq-t-body-lg { max-width: 600px; }

/* ── Stats: bg-surface, 80/80; is-style-bordered-grid strip of 3 cells. ── */
.xq-co-stats { background: var(--wp--preset--color--bg-surface); padding-top: var(--wp--preset--spacing--section-80); padding-bottom: var(--wp--preset--spacing--section-80); }
.xq-co-stats-grid { --xq-cols: 3; }
.xq-co-stat { padding: 32px; }
.xq-co-stat > * { margin-block: 0; }
.xq-co-stat > .xq-co-stat-n {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--stat-lg); font-weight: 800; line-height: 1.6;
  color: var(--wp--preset--color--accent-dark); margin-bottom: 8px;
}
.xq-co-stat > .xq-co-stat-label {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 600; line-height: 1.6;
  color: var(--wp--preset--color--text-0); margin-bottom: 8px;
}
.xq-co-stat-desc { color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--ui); line-height: 1.6; }

/* ── Leadership: bg-base, 80/80, no border-top. Cards are is-style-card. ── */
.xq-co-lead { padding-top: var(--wp--preset--spacing--section-80); padding-bottom: var(--wp--preset--spacing--section-80); }
.xq-co-lead > .xq-co-lead-head { margin-bottom: 48px; }
/* Cards come from a core/query loop (xq_team posts): query > ul.xq-co-lead-grid
 * (post template) > li (one per post, carries .xq-avatar--<key> from post_class)
 * > card. The <li> is the grid item; the card fills it. */
.xq-co-lead-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.xq-co-lead-grid > li { margin-block: 0; }
.xq-co-lead-grid > li > .xq-co-leader { height: 100%; }
/* Reveal stagger (formerly xq-d1…d4 on each card). */
.xq-co-lead-grid > li:nth-child(5n+1) > .xq-aos { transition-delay: 0.07s; }
.xq-co-lead-grid > li:nth-child(5n+2) > .xq-aos { transition-delay: 0.14s; }
.xq-co-lead-grid > li:nth-child(5n+3) > .xq-aos { transition-delay: 0.21s; }
.xq-co-lead-grid > li:nth-child(5n+4) > .xq-aos { transition-delay: 0.28s; }
.xq-co-lead-grid > li:nth-child(5n+5) > .xq-aos { transition-delay: 0.35s; }
.xq-co-leader { text-align: center; }
/* Initials tile: a paragraph bound to meta `initials`. */
.xq-co-leader > .xq-co-avatar {
  width: 64px; height: 64px; border-radius: 6px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title); font-weight: 700; line-height: 1.6;
}
/* Fill per meta `avatar` (XQ_TEAM_AVATARS in inc/content-team-partners.php). */
.xq-avatar--accent .xq-co-avatar { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-0); }
.xq-avatar--accent-hi .xq-co-avatar { background: var(--wp--preset--color--accent-hi); color: var(--wp--preset--color--text-0); }
.xq-avatar--violet .xq-co-avatar { background: linear-gradient(135deg, var(--wp--preset--color--violet), var(--wp--preset--color--indigo)); color: #fff; }
.xq-avatar--cyan .xq-co-avatar { background: var(--wp--preset--color--cyan); color: #fff; }
.xq-co-leader > .xq-co-leader-name {
  margin-bottom: 4px; color: var(--wp--preset--color--text-0); font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--body); font-weight: 600; line-height: 1.6; letter-spacing: normal;
}
.xq-co-leader-role { color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--caption); line-height: 1.6; }

/* ── WP-only extra: Careers + Contact (footer targets), in the source's language. ── */
.xq-co-careers > * { max-width: 640px; }
.xq-co-careers > .xq-t-h2 { margin-bottom: 20px; max-width: 880px; }
.xq-co-careers > .xq-co-careers-actions { margin-top: 32px; }
.xq-co-extra > .xq-co-contact {
  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-co-contact > .xq-co-contact-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); }
.xq-co-contact-actions { display: flex; }

/* React keeps the fixed grids; stack where they no longer fit. */
@media (max-width: 1100px) {
  .xq-co-lead-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .xq-co-lead-grid { grid-template-columns: repeat(2, 1fr); }
}
/* The shared bordered grid goes 2-up at 900px; this strip stays 3-up until 768. */
@media (max-width: 900px) {
  .xq-co-stats-grid.is-style-bordered-grid { grid-template-columns: repeat(3, 1fr); }
  .xq-co-stats-grid.is-style-bordered-grid > * { border-bottom: 0; }
}
@media (max-width: 768px) {
  .xq-co-stats-grid.is-style-bordered-grid { grid-template-columns: 1fr; }
  .xq-co-stats-grid.is-style-bordered-grid > :not(:last-child) { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--border); }
  .xq-co-extra > .xq-co-contact { padding: 32px 24px; }
}
@media (max-width: 480px) {
  .xq-co-lead-grid { grid-template-columns: 1fr; }
}

/* Advisors (patterns/company-advisors.php): the leadership card design, plus
 * a LinkedIn link rendered only when the person has a profile URL. */
.xq-co-advisors { padding-top: 0; }
.xq-co-leader-role:empty { display: none; }
.xq-co-leader > .xq-co-linkedin { margin-top: 12px; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.xq-co-linkedin a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--wp--preset--color--text-1); text-decoration: none; }
.xq-co-linkedin a::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3V9zm7 0h3.8v1.64h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.6c0-1.34-.02-3.06-1.87-3.06-1.87 0-2.16 1.46-2.16 2.96V21h-4V9z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3V9zm7 0h3.8v1.64h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.6c0-1.34-.02-3.06-1.87-3.06-1.87 0-2.16 1.46-2.16 2.96V21h-4V9z%22/%3E%3C/svg%3E") center / contain no-repeat; }
.xq-co-linkedin a:hover, .xq-co-linkedin a:focus-visible { color: var(--wp--preset--color--text-0); text-decoration: underline; }

/* #about hero: particle animation background (assets/js/page-company.js loads
 * assets/js/particles.js). data-xq-particles is set only when the animation
 * will run, so reduced-motion / no-WebGL visitors keep the plain hero. */
.xq-co-hero[data-xq-particles] { position: relative; overflow: hidden; isolation: isolate; min-height: min(640px, 85svh); display: flex; flex-direction: column; justify-content: center; }
.xq-co-hero[data-xq-particles] > .xq-co-hero-copy { width: 100%; } /* flex column: keep the block-layout width and left edge */
.xq-co-hero > .xq-particles { position: absolute !important; inset: 0; z-index: -1; max-width: none !important; margin: 0 !important; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.xq-co-hero > .xq-particles.is-ready { opacity: 1; }
.xq-co-hero > .xq-particles canvas { display: block; width: 100% !important; height: 100% !important; }
/* Narrow screens: the shapes sit behind the copy — keep the text readable. */
@media (max-width: 991px) { .xq-co-hero > .xq-particles.is-ready { opacity: 0.45; } }