/* LMS integration page (template-lms-integration-v2.php). Builds on cpd-v2 + home-v2 + lms-v2; only page-specific pieces live here. */

/* Proof panel: three highlight figures, no logo row */
.integ2-proof .home2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Red band heading: wide single column */
.integ2-band-head { max-width: 1040px; }

/* Space between a split head and what follows */
.integ2 .cpdv2-split + .integ2-systems,
.integ2 .cpdv2-split + .integ2-scen,
.integ2 .cpdv2-split + .integ2-steps,
.integ2 .cpdv2-split + .integ2-types,
.integ2 .cpdv2-split + .integ2-trust { margin-top: 40px; }

/* Systems: vertical tab list + panel */
.integ2-systems { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.integ2-systems__panel[hidden] { display: none; }
.integ2-systems__tabs { display: flex; flex-direction: column; gap: 6px; }
.integ2 .integ2-systems__tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--cpd-line); background: var(--cpd-white); color: var(--cpd-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.integ2 .integ2-systems__tab:hover { border-color: var(--cpd-line-2); }
.integ2 .integ2-systems__tab.is-active { background: var(--cpd-ink); border-color: var(--cpd-ink); color: var(--cpd-white); }
.integ2 .integ2-systems__tab:focus-visible { outline: 2px solid var(--cpd-red); outline-offset: 2px; }
.integ2-systems__num { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .08em; color: var(--cpd-red); }
.integ2-systems__tab.is-active .integ2-systems__num { color: var(--cpd-red-soft); }
.integ2-systems__name { flex: 1; font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -.02em; }
.integ2-systems__arrow { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.integ2-systems__tab.is-active .integ2-systems__arrow { opacity: 1; transform: none; }

.integ2-systems__panel { background: var(--cpd-white); border: 1px solid var(--cpd-line); border-radius: 22px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 28px; min-height: 100%; box-sizing: border-box; }
.integ2-flow { display: flex; align-items: center; gap: 0; }
.integ2-flow__node { flex: none; padding: 10px 14px; border-radius: 10px; background: #F4F4F5; border: 1px solid var(--cpd-line); font-size: 14px; line-height: 18px; font-weight: 500; color: var(--cpd-ink); white-space: nowrap; }
.integ2-flow__node--hub { background: var(--cpd-red); border-color: var(--cpd-red); color: var(--cpd-white); }
.integ2-flow__line { position: relative; flex: 1; min-width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--cpd-line-2) 0 6px, transparent 6px 10px); overflow: hidden; }
.integ2-flow__line i { position: absolute; top: -2px; left: -20%; width: 20%; height: 6px; border-radius: 3px; background: var(--cpd-red); animation: integ2-flow 2.4s linear infinite; }
.integ2-flow__line + .integ2-flow__node + .integ2-flow__line i { animation-delay: 1.2s; }
@keyframes integ2-flow { from { left: -20%; } to { left: 100%; } }
.integ2-systems__logos { display: flex; flex-wrap: wrap; gap: 10px; }
.integ2 .integ2-systems__logos img { height: 42px; width: auto; display: block; }
.integ2-systems__features { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--cpd-line); }
.integ2-systems__features ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.integ2-systems__features li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--cpd-ink-2); }
.integ2-systems__features li svg { flex: none; margin-top: 3px; color: var(--cpd-red); }

/* Reliability band */
.integ2-band-gap { margin-top: var(--cpd-section); }
.integ2 .integ2-reliability { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.integ2 .integ2-reliability .lmsv2-block { gap: 32px; }
/* These icons carry their own white tile: show them whole instead of inside the red square */
.integ2 .integ2-reliability .lmsv2-block__icon { background: transparent; }
.integ2 .integ2-reliability .lmsv2-block__icon img { width: 48px; height: 48px; border-radius: 12px; }
.integ2 .integ2-block__text { margin-top: 10px; font-size: 16px; line-height: 24px; color: #C9CBD0; }
.integ2-architecture { margin: 0; padding: clamp(12px, 2vw, 24px); border-radius: 16px; background: var(--cpd-white); }
.integ2 .integ2-architecture img { display: block; width: 100%; height: auto; }
.integ2-architecture__hint { display: none; }

/* Scenarios: chip tabs + diagram / copy */
.integ2-scen__tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 16px; }
.integ2-scen__tabs::-webkit-scrollbar { display: none; }
.integ2 .integ2-scen__tab { flex: 1 0 168px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--cpd-line); background: var(--cpd-white); color: var(--cpd-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.integ2 .integ2-scen__tab:hover { border-color: var(--cpd-line-2); }
.integ2 .integ2-scen__tab.is-active { background: var(--cpd-ink); border-color: var(--cpd-ink); color: var(--cpd-white); }
.integ2 .integ2-scen__tab:focus-visible { outline: 2px solid var(--cpd-red); outline-offset: 2px; }
.integ2-scen__tab-name { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -.01em; }
.integ2-scen__badge { display: inline-flex; padding: 3px 8px; border-radius: 6px; background: rgba(212, 16, 40, .08); color: var(--cpd-red); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.integ2-scen__tab.is-active .integ2-scen__badge { background: rgba(255, 255, 255, .12); color: #FFB3BD; }
.integ2-scen__badge--lg { font-size: 12px; padding: 4px 10px; }
.integ2-scen__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; background: var(--cpd-white); border: 1px solid var(--cpd-line); border-radius: 22px; padding: clamp(16px, 2.4vw, 32px); }
.integ2-scen__panel[hidden] { display: none; }
.integ2-scen__diagram { border-radius: 14px; overflow: hidden; background: #F0F0F0; }
.integ2 .integ2-scen__diagram img { display: block; width: 100%; height: auto; }
.integ2-scen__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.integ2 .integ2-scen__title { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--cpd-ink); }
.integ2-scen__row { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--cpd-line); width: 100%; }
.integ2 .integ2-scen__row p { font-size: 16px; line-height: 24px; color: var(--cpd-muted); }
.integ2-scen__row--result { padding: 16px 18px; border: 0; border-radius: 12px; background: #FFF6F6; box-sizing: border-box; }
.integ2 .integ2-scen__row--result .cpdv2-kicker { color: var(--cpd-red); }
.integ2 .integ2-scen__row--result p { color: var(--cpd-ink); font-weight: 500; }

/* Process: five steps with checklists (as on the consulting page) */
.integ2 .integ2-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
.integ2 .integ2-steps .cpdv2-step { padding-right: 0; }
.integ2 .integ2-step__text { font-size: 15px; line-height: 23px; color: var(--cpd-muted); }
.integ2-step__list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--cpd-line); }
.integ2-step__list-title { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cpd-ink); }
.integ2-step__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.integ2-step__list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--cpd-ink-2); }
.integ2-step__list li svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--cpd-red); }
.integ2 #how .cpdv2-inline-cta { margin-top: 48px; }

/* Integration types: two cards with standard chips */
.integ2-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.integ2-type { background: var(--cpd-white); border: 1px solid var(--cpd-line); border-radius: 22px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.integ2 .integ2-type .lmsv2-card__icon { margin-bottom: 8px; }
.integ2 .integ2-type__title { font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--cpd-ink); }
.integ2 .integ2-type__text { font-size: 16px; line-height: 24px; color: var(--cpd-muted); max-width: 520px; }
.integ2-type__items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.integ2-type__items span { padding: 8px 12px; border-radius: 10px; background: #F4F4F5; border: 1px solid var(--cpd-line); font-size: 14px; line-height: 18px; font-weight: 500; color: var(--cpd-ink); }

/* FAQ answers keep their lists */
.integ2 .integ2-faq__a { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 22px; }
.integ2 .integ2-faq__a p { padding: 0; }
.integ2 .integ2-faq__a p, .integ2 .integ2-faq__a li { font-size: 16px; line-height: 24px; color: var(--cpd-muted); }
.integ2 .integ2-faq__a ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; list-style: disc; }

@media (prefers-reduced-motion: reduce) {
    .integ2-flow__line i { animation: none; display: none; }
}

@media (max-width: 1100px) {
    .integ2-proof .home2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .integ2-proof .home2-stat:nth-child(3) { border-left: 1px solid var(--cpd-line); border-top: 0; }
    .integ2-systems { grid-template-columns: 1fr; }
    .integ2-systems__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .integ2-systems__tabs::-webkit-scrollbar { display: none; }
    .integ2 .integ2-systems__tab { flex: none; width: auto; }
    .integ2-systems__arrow { display: none; }
    .integ2 .integ2-reliability { grid-template-columns: 1fr; }
    .integ2-scen__panel { grid-template-columns: 1fr; }
    .integ2 .integ2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 768px) {
    .integ2-proof .home2-stats { grid-template-columns: 1fr; }
    .integ2-proof .home2-stat + .home2-stat, .integ2-proof .home2-stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--cpd-line); }
    .integ2-flow__node { padding: 8px 10px; font-size: 12px; white-space: normal; text-align: center; }
    .integ2-flow__node--hub { max-width: 110px; }
    .integ2-systems__features ul { grid-template-columns: 1fr; }
    .integ2 .integ2-systems__logos img { height: 34px; }
    .integ2 .integ2-steps { grid-template-columns: 1fr; row-gap: 0; }
    .integ2 .integ2-faq__a { padding: 0 20px 20px; }
    .integ2-types { grid-template-columns: 1fr; }
    .integ2 .integ2-scen__tab { flex: none; width: 200px; }
    /* The architecture diagram is too detailed to shrink to phone width: let it scroll sideways */
    .integ2-architecture { padding: 10px; }
    .integ2-architecture__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .integ2 .integ2-architecture__scroll img { width: 860px; max-width: none; }
    .integ2-architecture__hint { display: block; padding: 10px 4px 2px; font-size: 13px; line-height: 18px; color: var(--cpd-muted); text-align: center; }
    /* Compact reliability cards */
    .integ2 .integ2-reliability .lmsv2-block { gap: 18px; }
}