/* LMS v2 — components the LMS page needs on top of assets/cpd-v2/cpd-v2.css. Scoped to .lmsv2 */

/* Hero: product screenshot in the dark frame, highlights under the buttons */
.lmsv2 .lmsv2-hero-frame { overflow: hidden; }
.lmsv2 .lmsv2-hero-shot { display: block; width: 100%; height: auto; border-radius: 12px; }
.lmsv2 .lmsv2-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lmsv2-highlights > span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--cpd-line-2); border-radius: 10px; background: rgba(238, 238, 238, .92); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -.2px; color: var(--cpd-ink); }
.lmsv2-highlights svg { color: var(--cpd-red); flex: none; }

/* Client logos: the LMS logo set is light-on-dark artwork, so render it as solid grey */
.lmsv2 .cpdv2-logos__row img { filter: brightness(0); opacity: .55; }

/* Tighter gap between the logos and the red band: less padding under the logos and above the band copy */
.lmsv2 .cpdv2-logos { padding-bottom: 16px; }
.lmsv2 .cpdv2-band--cubes .cpdv2-band__inner { padding-top: clamp(40px, 5vw, 64px); }

/* Problem: three cards in a row, icon first */
.lmsv2 .lmsv2-problem-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lmsv2-problem__icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--cpd-red); color: var(--cpd-white); box-shadow: 0 6px 16px -6px rgba(212, 16, 40, .55); }
.lmsv2 .lmsv2-problem-grid .cpdv2-problem p { max-width: none; text-wrap: wrap; }

/* 80/20: proven blocks on the dark band */
.cpdv2-band--gap { padding-top: var(--cpd-section); }
.lmsv2-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.lmsv2-block { position: relative; display: flex; flex-direction: column; gap: 40px; padding: 28px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.lmsv2-block__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--cpd-red); }
.lmsv2-block__icon img { width: 22px; height: 22px; }
.lmsv2-block__num { position: absolute; top: 28px; right: 28px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .08em; color: #B2B5BC; }
.lmsv2 .lmsv2-block .lmsv2-block__title { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--cpd-white); }

/* All core features: 4 x 2 grid with hairlines, like the CPD feature groups */
.lmsv2-benefits { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--cpd-line-2); border: 1px solid var(--cpd-line-2); border-radius: 22px; overflow: hidden; }
.lmsv2-benefit { background: var(--cpd-white); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.lmsv2-benefit__icon { width: 40px; height: 40px; margin-bottom: 14px; }
.lmsv2 .lmsv2-benefit .lmsv2-benefit__title { font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -.02em; }
.lmsv2-benefit > span { font-size: 15px; line-height: 23px; color: var(--cpd-muted); }

/* Growth cards: CPD tabbed block (tabs + product window) */
/* Bottom padding dropped: the next section brings its own top padding, so the gap doesn't double. */
.lmsv2 .lmsv2-growth { padding-top: var(--cpd-section); padding-bottom: 0; }
.lmsv2 .lmsv2-growth .cpdv2-pillar__detail { gap: 14px; }
.lmsv2-growth__get { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--cpd-line); }
.lmsv2-growth__get ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lmsv2 .lmsv2-growth .primary-button { align-self: flex-start; margin-top: 4px; }
.lmsv2 .lmsv2-shot { background: #F4F4F4; border: 1px solid var(--cpd-line); }

/* Who it's for: tickable scenario cards; the result bar lights up once two or more are ticked */
.lmsv2-fit { margin-top: 40px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.lmsv2-fit__card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 12px; background: var(--cpd-white); border: 1px solid var(--cpd-line); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s; }
.lmsv2-fit__card:hover { border-color: var(--cpd-line-2); transform: translateY(-2px); }
.lmsv2-fit__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lmsv2-fit__top { display: flex; justify-content: space-between; align-items: center; }
.lmsv2-fit__box { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--cpd-line-2); display: flex; align-items: center; justify-content: center; color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.lmsv2-fit__box svg { width: 14px; height: 14px; }
.lmsv2-fit__text { font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -.3px; color: var(--cpd-ink); text-wrap: pretty; }
.lmsv2-fit__input:checked ~ .lmsv2-fit__top .lmsv2-fit__box { background: var(--cpd-red); border-color: var(--cpd-red); color: var(--cpd-white); }
.lmsv2-fit__card:has(.lmsv2-fit__input:checked) { border-color: var(--cpd-red); background: #FFF6F6; }
.lmsv2-fit__input:focus-visible ~ .lmsv2-fit__top .lmsv2-fit__box { outline: 2px solid var(--cpd-red); outline-offset: 2px; }

.lmsv2-fit__result { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 24px; border-radius: 12px; background: var(--cpd-white); border: 1px solid var(--cpd-line); transition: background-color .3s, border-color .3s; }
.lmsv2-fit__count { flex: none; min-width: 64px; height: 64px; padding: 0 12px; border-radius: 12px; background: var(--cpd-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--cpd-muted-2); transition: background-color .3s, color .3s; }
.lmsv2-fit__count strong { font-size: 30px; font-weight: 500; color: var(--cpd-ink); transition: color .3s; }
.lmsv2 .lmsv2-fit__result p { flex: 1 1 380px; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -.02em; color: var(--cpd-ink); }
.lmsv2-fit.is-match .lmsv2-fit__result { border-color: var(--cpd-red); background: #FFF6F6; }
.lmsv2-fit.is-match .lmsv2-fit__count { background: var(--cpd-red); color: rgba(255, 255, 255, .7); }
.lmsv2-fit.is-match .lmsv2-fit__count strong { color: var(--cpd-white); }

/* Process: step icons + retainer note */
.lmsv2-step__top { display: flex; align-items: center; gap: 12px; }
.lmsv2-step__icon { width: 32px; height: 32px; object-fit: contain; flex: none; }
.lmsv2 .lmsv2-process__note { margin-top: 40px; font-size: 17px; line-height: 25px; color: var(--cpd-muted); }
.lmsv2 .lmsv2-process__note strong { color: var(--cpd-ink); font-weight: 500; }

/* Pricing: section head with the currency switch, two package cards */
.lmsv2-pricing__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.lmsv2-pricing__head .cpdv2-head { max-width: 760px; gap: 20px; }
.lmsv2-pricing__head .cpdv2-currency { margin-left: 0; align-self: flex-end; }
.lmsv2-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: stretch; }
.lmsv2 .lmsv2-package .cpdv2-price-card__amount { font-size: clamp(44px, 4.6vw, 64px); }
.lmsv2 .lmsv2-package .cpdv2-included { flex: 1; }
.lmsv2 .lmsv2-package.is-featured { border-color: var(--cpd-ink); }
.lmsv2-pricing__fine { display: block; margin-top: 20px; }

/* Why us: icon on each card */
.lmsv2-card__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(212, 16, 40, .08); margin-bottom: 20px; }
.lmsv2-card__icon img { width: 22px; height: 22px; }
.lmsv2 .cpdv2-section > .cpdv2-head + .cpdv2-cards { margin-top: 40px; }

@media (max-width: 1199px) {
    .lmsv2-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .lmsv2-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .lmsv2-benefits { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
    .lmsv2-benefit { padding: 22px; }
    .lmsv2-block { gap: 28px; padding: 22px; }
    .lmsv2-block__num { top: 22px; right: 22px; }
    .lmsv2-fit { grid-template-columns: minmax(0, 1fr); }
    .lmsv2-fit__result { padding: 18px; }
    .lmsv2-fit__card { padding: 20px; }
}