/*
 * Integrations page styles. Reuses .sec-hero, .sec-section, .sec-tri-grid,
 * and .sec-card from security.css. Only adds a few page-specific tokens.
 */

/* Format chip lists -- compact, scannable. Used inside each .sec-card. */
.intg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
.intg-chips li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-family: var(--font-mono, "SFMono-Regular", Menlo, Consolas, monospace);
}
.intg-chips-muted li {
  color: var(--ink-muted);
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
}

/* Status pills on cards (shipped / gated OFF / planned). */
.intg-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
  font-weight: 600;
}
.intg-status-shipped {
  background: rgba(131, 191, 79, 0.16);
  color: #b7d99a;
  border: 1px solid rgba(131, 191, 79, 0.32);
}
.intg-status-gated {
  background: rgba(224, 182, 58, 0.14);
  color: #e6cf85;
  border: 1px solid rgba(224, 182, 58, 0.34);
}
.intg-status-planned {
  background: rgba(90, 135, 153, 0.16);
  color: #a8c4d2;
  border: 1px solid rgba(90, 135, 153, 0.34);
}

/* Enterprise software subheads (Shipped / Roadmap split). */
.intg-subhead {
  max-width: 1080px;
  margin: 1.4rem auto 0.8rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #e0e9ee;
}
.intg-subhead-roadmap {
  margin-top: 2.4rem;
  color: #a8c4d2;
}

/* Provider grid -- two columns on wide, one on narrow. */
.intg-provider-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}
.intg-provider {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.3rem;
  background: var(--surface-strong);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}
.intg-provider h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.intg-provider p {
  color: var(--ink-muted);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Overflow hardening: JA phrase-wrapping + long unbreakable runs (inline <code>
   tokens like SLDWORKS.exe, verify_by_operator=TRUE, /api/v1) could spill past
   the card border. min-width:0 lets the flex/grid item shrink to its track;
   overflow-wrap:anywhere breaks the long run so it wraps INSIDE the card. Applies
   to .intg-provider and the reused .sec-card on this page. */
.intg-provider,
.intg-provider p,
.intg-provider h3,
.sec-card,
.sec-card p {
  min-width: 0;
  overflow-wrap: anywhere;
}
.intg-provider code,
.sec-card code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Air-gap callout band -- mirrors security page tinted band tone. */
.intg-callout {
  max-width: 980px;
  margin: 2.2rem auto 0;
  padding: 1.6rem 1.5rem;
  background: rgba(239, 78, 80, 0.06);
  border: 1px solid rgba(239, 78, 80, 0.22);
  border-left: 3px solid rgba(239, 78, 80, 0.55);
  border-radius: 10px;
}
.intg-callout h3 {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-size: 1rem;
}
.intg-callout p {
  color: var(--ink-muted);
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Honest-scope footnote -- italicised, smaller. */
.intg-honest {
  max-width: 880px;
  margin: 1.6rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Collapsible-section CORE styles (.sec-collapse / .sec-summary /
   the chevron / .sec-collapse-controls) now live in styles.css so
   EVERY page can use them. Only the integrations-specific 2-column
   packing grid stays here.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   2-column grid for collapsible sections — when sections are
   closed they pack two-per-row so six summaries fit on screen at
   once. When the user opens a section, that section auto-spans
   both columns so the body content still has the full width to
   work with. The grid only covers the disclosure sections; the
   hero, the Expand/Collapse toolbar, and the bottom CTA stay
   outside in normal flow.
   --------------------------------------------------------------- */
.intg-grid {
  /* Constrain to the SAME centered content column as every .section (hero,
     connector, CTA). Without this the bare grid stretched to the full viewport
     width, so on wide screens the disclosure cards blew out to the edges while
     the rest of the page stayed inset — the "text out of border" report. */
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  grid-auto-flow: dense;
}
.intg-grid > .sec-section {
  /* Override the page-wide .section padding (92px top+bottom is
     too generous when sections are packed two-per-row in compact
     disclosure mode). */
  padding: 28px 24px;
  margin: 0;
  width: auto;
  /* Grid items default to min-width:auto (= min-content), so a cell can't
     shrink below its content's intrinsic width and long runs overflow the
     cell — visible as text spilling past the card border, especially in JA
     where phrase-wrapping (word-break:auto-phrase) keeps longer unbreakable
     runs than EN. min-width:0 lets the cell shrink to its track so the
     content wraps inside instead. */
  min-width: 0;
}
/* When a section is opened, span both columns so the body content
   has the full reading width. `:has()` is widely supported in
   modern Chrome/Safari/Firefox (≥2023). On older engines the
   grid simply degrades to all-half-width which is still legible. */
.intg-grid > .sec-section:has(details[open]) {
  grid-column: 1 / -1;
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (max-width: 940px) {
  /* On phones / tablets, fall back to single-column flow so
     summaries stay tappable and titles don't wrap awkwardly. */
  .intg-grid { grid-template-columns: 1fr; }
  .intg-grid > .sec-section { padding: 36px 16px; }
}