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

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

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

/* Space between a split head and what follows */
.migr2 .cpdv2-split + .migr2-approach,
.migr2 .cpdv2-split + .migr2-steps,
.migr2 .migr2-how-head + .migr2-steps { margin-top: 40px; }
.migr2 .migr2-scen-head + .migr2-scen { padding-top: 40px; }

/* Approach: three promises next to the parallel-run timeline */
.migr2-approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: stretch; }
.migr2-benefits { display: flex; flex-direction: column; gap: 1px; background: var(--cpd-line); border: 1px solid var(--cpd-line); border-radius: 22px; overflow: hidden; }
.migr2-benefit { flex: 1; display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; row-gap: 4px; align-items: start; padding: 24px 28px; background: var(--cpd-white); }
.migr2 .migr2-benefit__icon { grid-row: span 2; width: 44px; height: 44px; display: block; }
.migr2 .migr2-benefit__title { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--cpd-ink); }
.migr2-benefit > span { font-size: 15px; line-height: 23px; color: var(--cpd-muted); }

.migr2-timeline { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: var(--cpd-ink); color: var(--cpd-white); overflow: hidden; }
.migr2-timeline .cpdv2-kicker { color: #B2B5BC; background: rgba(255, 255, 255, .1); align-self: flex-start; }
.migr2-timeline__row { display: flex; flex-direction: column; gap: 8px; }
.migr2-timeline__label { font-size: 14px; line-height: 20px; color: #C9CBD0; }
.migr2-timeline__track { display: flex; gap: 4px; height: 44px; }
.migr2-timeline__bar { position: relative; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; transform-origin: left; }
.migr2-timeline__bar span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
/* Old LMS stays live until the switch (78%), then fades out */
.migr2-timeline__bar--old { flex: 0 0 78%; background: linear-gradient(90deg, #4A4A4A 0%, #4A4A4A 85%, rgba(74, 74, 74, .15) 100%); color: var(--cpd-white); }
.migr2-timeline__bar--build { flex: 0 0 34%; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 8px, rgba(255, 255, 255, .04) 8px 16px); border: 1px dashed rgba(255, 255, 255, .25); color: #E5E7EB; }
.migr2-timeline__bar--validate { flex: 0 0 calc(44% - 8px); background: rgba(212, 16, 40, .35); border: 1px solid rgba(240, 51, 74, .6); color: var(--cpd-white); }
.migr2-timeline__bar--live { flex: 1; background: var(--cpd-red); color: var(--cpd-white); }
.migr2-timeline__switch { position: relative; margin-left: 78%; padding-left: 12px; border-left: 2px solid var(--cpd-red-soft); font-size: 13px; line-height: 18px; color: var(--cpd-white); transform: translateX(-1px); }
.migr2-timeline__switch::before { content: ""; position: absolute; left: -2px; top: -128px; height: 128px; border-left: 2px dashed rgba(240, 51, 74, .7); }
.migr2-timeline__switch span { display: block; max-width: 140px; }
/* Bars grow in once the section is revealed */
.migr2-timeline__bar { animation: migr2-grow 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.migr2-timeline__bar--validate { animation-delay: .25s; }
.migr2-timeline__bar--live { animation-delay: .5s; }
@keyframes migr2-grow { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* Scenarios window: one picture per platform */
.migr2-shot { border-radius: 12px; overflow: hidden; background: #F4F4F4; border: 1px solid var(--cpd-line); }
.migr2 .migr2-shot img { display: block; width: 100%; height: auto; }
.migr2 .migr2-shot--hd { background: #FFFFFF; }

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

/* Why us: four light cards on the red band */
.migr2-trust-band { margin-top: var(--cpd-section); }
/* Same heading colours as the red cube band: white title, cream accent, white lead */
.migr2-trust-band .cpdv2-h2 { color: var(--cpd-white); }
.migr2-trust-band .cpdv2-h2 .cpdv2-accent { color: #FFEDD5; }
.migr2-trust-band .cpdv2-lead { color: var(--cpd-white); }
.migr2-trust-band .cpdv2-kicker { background: rgba(255, 255, 255, .16); color: var(--cpd-white); }
.migr2-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.migr2-trust__card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 12px; background: linear-gradient(180deg, #FFFDF8 0%, #FFF5E7 100%); }
.migr2 .migr2-trust__icon { width: 48px; height: 48px; display: block; margin-bottom: 16px; }
.migr2 .migr2-trust__title { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--cpd-ink); }
.migr2-trust__card > span { font-size: 15px; line-height: 23px; color: var(--cpd-muted); }

@media (prefers-reduced-motion: reduce) {
    .migr2-timeline__bar { animation: none; }
}

@media (max-width: 1100px) {
    .migr2-proof .home2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .migr2-proof .home2-stat:nth-child(3) { border-left: 1px solid var(--cpd-line); border-top: 0; }
    .migr2-approach { grid-template-columns: 1fr; }
    /* Tabs stack above the window here, so the window's chips would repeat the tab's "What you get" list */
    .migr2-scen .cpdv2-window .cpdv2-chips { display: none; }
    .migr2 .migr2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .migr2-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .migr2-proof .home2-stats { grid-template-columns: 1fr; }
    .migr2-proof .home2-stat + .home2-stat, .migr2-proof .home2-stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--cpd-line); }
    .migr2-benefit { padding: 20px; column-gap: 14px; grid-template-columns: 40px 1fr; }
    .migr2 .migr2-benefit__icon { width: 40px; height: 40px; }
    .migr2 .migr2-benefit__title { font-size: 18px; line-height: 24px; }
    .migr2-timeline { padding: 22px 18px; }
    .migr2-timeline__bar { padding: 0 8px; font-size: 11px; }
    .migr2-timeline__bar--build span, .migr2-timeline__bar--live span { display: none; }
    .migr2-timeline__bar--validate { white-space: normal; line-height: 13px; }
    .migr2-timeline__bar--validate span { overflow: visible; }
    .migr2-timeline__switch { margin-left: 0; padding-left: 0; border-left: 0; font-size: 12px; text-align: right; color: #FFB3BD; }
    .migr2-timeline__switch::before { display: none; }
    .migr2-timeline__switch span { max-width: none; }
    .migr2-timeline__bar--old { flex-basis: 78%; }
    .migr2 .migr2-steps { grid-template-columns: 1fr; row-gap: 0; }
    .migr2-trust { grid-template-columns: 1fr; gap: 10px; }
    .migr2-trust__card { padding: 22px; }
}