/* AY+ product pages (Microsoft 365 training, Behavioural skills, Leadership): only what shared/product.css lacks.
   Owned by the pages-product tab, 3 Nov. Linked from those three pages only. */

/* The MVP badge beside its fact */
.facts b.mvp { display: inline-flex; align-items: center; gap: 10px; }
.facts b.mvp img { width: 34px; height: auto; }

/* The live lesson library (its own code and styles, scoped to #ayl-lib), dressed to the page */
.lib-embed { margin-top: 8px; }
.lib-embed #ayl-lib { --cardbg: var(--cream); --line: var(--line); --hover: #efece6; font-size: 16px; }
.lib-embed #ayl-lib .ayl-card { border-radius: var(--r-xl); box-shadow: none; }

/* Three facts instead of four, with award badges under them (Behavioural skills) */
.facts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.awards { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; margin-top: clamp(28px, 3vw, 40px); }
.awards img { height: 72px; width: auto; }

/* Four expert headshots in one frame (Behavioural skills, Expert series) */
.heads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.heads img { width: 100%; height: auto; aspect-ratio: 259 / 400; object-fit: cover; object-position: 50% 15%; border-radius: var(--r-m); max-height: none; }

/* Client quotes (Behavioural skills, Recognised for innovation) */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.quotes figure { margin: 0; border-top: 1px solid var(--ink); padding-top: 24px; display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-content: start; }
.quotes blockquote { margin: 0; grid-column: 1 / -1; font-size: var(--t-h4); font-weight: 400; line-height: 1.45; }
.quotes figcaption { color: var(--ink-soft); }
.quotes figcaption b { display: block; color: var(--ink); font-weight: 500; }
.quotes figure img { width: 56px; height: 56px; border-radius: var(--r-m); object-fit: contain; }

/* A product picture under the closing ask's buttons */
.closer .shot { width: min(560px, 100%); height: auto; margin-top: 8px; position: relative; }

/* Step note (Leadership, How it works) */
.step-note { color: var(--ink-soft); font-size: var(--t-small); margin-top: 16px; }

@media (max-width: 767px) {
  .facts.three { grid-template-columns: 1fr; }
  .facts.three > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .heads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: 1fr; }
  .awards img { height: 56px; }
}

/* The library's format tabs don't fit two to a row on a phone inside the page's card; let their names wrap */
@media (max-width: 767px) {
  .lib-embed #ayl-lib.ayl-compact .ayl-tab { flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
  .lib-embed #ayl-lib.ayl-compact .ayl-tab-name { white-space: normal; }
}

/* A band with words and a button but no picture tile (Talent toolkits, "Turn learning into action, faster") */
.other.no-tile { grid-template-columns: 1fr auto; background: var(--paper); margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 767px) { .other.no-tile { grid-template-columns: 1fr; justify-items: start; } }

/* The lesson list on phones: featured rows wrap instead of squashing "View a sample", the badge and the format tag (review, shared fix 2) */
@media (max-width: 560px) {
  #ayl-lib .ayl-head { flex-wrap: wrap; }
  #ayl-lib .ayl-sample, #ayl-lib .ayl-badge { flex: none; white-space: nowrap; border-radius: 999px; }
  #ayl-lib .ayl-kind { flex-direction: row; gap: 4px; }
}

/* The lesson list's lightest grey, darkened to pass AA on small text (review, shared fix 10) */
body #ayl-lib { --ink-3: #5a6c80; }
/* Accessibility fixes, 3 Nov: the counts on the unselected tabs as solid text (opacity left them at 3.47:1 on white) */
.lib-embed #ayl-lib .ayl-tab:not([aria-selected="true"]) .ayl-tab-count, .lib-embed #ayl-lib .ayl-kind:not([aria-selected="true"]) .ayl-n { color: var(--slate-text); opacity: 1; }