/*
  ailab-overrides.css: fixes on top of the canvas export, linked by nginx after shared.css.

  Everything that was here has been ported into the canvas (shared.css):
  - trainer photos, light-only colour scheme, phone inputs, word wrapping: block faiz-port (canvas version 288);
  - page width, side margins, header alignment, minimum text size and the case study column: block layout-v2
    (canvas version 289, the owner's "middle ground": content up to 85rem, about 3% side margins).
  Add new live-only fixes below, and port them into the canvas when convenient.
*/

/* full-width start (Faiz, 11 Nov 2026: "use the full width for the pages and components")
   Replaces the 85rem "middle ground" of layout-v2. Content runs to the side margins on every screen, and text
   blocks, intros and components that were held to a reading measure (about 46ch to 61rem) now fill their
   container. Headings keep their own line length. */
:root { --maxw: 200rem !important; --measure: none !important; }

/* Intros, notes and components that had a fixed reading width. */
.lead, .section-head .lead, .pg-custom-solutions #cs-stories .lead, .hero-sub, .hero-proof,
.page-hero .subtitle, .hub-hero .subtitle, .pg-case-study .subtitle, .xref-banner p, .sched-help p,
.course-room, .course-note, .compare-intro, .cert-note, .cite-note, .cite-block > p:last-child, .cred-proof,
.hrd-intro, .hrd-pointer p, .pg-corporate-training .hrd-pointer p, .pg-hrd .hrd-glance, .rollout-note,
.train-strip p, .groups-strip p, .pair-closing, .path-intro, .case-links, .track-check, .start-facts,
.pl-tip, .pl-check-note, .pl-prompt, .pl-form, .pl-done, .home-prompts .pl-index, .pl-try .pl-feature,
.dept-includes, .cred-table-wrap, .cred-notes, .ws-list, .news-stats-2, .news-item, .about-box,
.workflow-first, .pg-ai-transformation .workflow-first p, .level-chooser, .level-needs, .risk-table,
.path-link.proof-case, .proof-testimonials.proof-one, .proof-stats.proof-stats-2, .proof-stats.proof-stats-3,
.proof-one .pt-body blockquote, :is(.pg-corporate-training .pt-lead > .pt-card:first-child, .pg-ai-transformation .proof-one .pt-card) blockquote,
.pair-grid.pair-one, .plans, .faq-list, .agenda-list, .agenda-timeline, .showcase-timeline, .showcase-footer,
.process-steps, .process-list, .prog-ticks, .prog-v2 .prog-next, .prog-v2 .module-card.mod > p,
.pt-next, .pt-promise, .pt-voice-quote p, .pt-voice-transcript p, .alumni-card, .band-seats, .band-team-note,
.tp-licence, .tp-dates, .tp-note, .tp-none, .ab-tools, .cs-grid > .cs-card:only-child,
.cta-band .call-sent, .cta-contacts {
  max-width: none !important;
}
@media (min-width: 901px) {
  .rp-vcards { max-width: none !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Case studies: the article and its text fill the column up to the side rail. */
.cs-article, .cs-article > :is(p, ul, ol, blockquote, h2, h3, .cs-sources),
.pg-res-cs .cs-quote-display, .cs-cta-card p:not(.card-label), .pg-res-cs .cs-cta-card p:not(.card-label) {
  max-width: none !important;
}

/* Card grids: when a row has fewer cards than fit, the cards share the row instead of leaving an empty
   column on the right (auto-fill kept the empty track; auto-fit collapses it). Desktop only, so the phone
   rules in shared.css still apply. */
@media (min-width: 769px) {
  .audience-grid:not(.audience-3) { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .lvl-who .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}

/* Footer: the short AI Lab blurb uses the width of its column or row. */
.footer-brand p, .footer-brand > p { max-width: none !important; }

/* Closing band: "Prefer to message? Email ... or WhatsApp ..." on one line. It moves out of the narrow left
   column into its own row under the steps and the form, with the HRD Corp badge at the right. */
@media (min-width: 901px) {
  .cta-band .cta-grid { grid-template-areas: "head head" "steps form" "actions actions"; grid-template-rows: auto auto auto; }
  .cta-band .cta-left > .cta-actions { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.18); justify-content: space-between; }
  .cta-band .cta-actions .call-or { white-space: nowrap; font-size: var(--text-body); }
}
/* full-width end */

/* section-spacing start (Faiz, 11 Nov 2026: "each section is spaced too far from each other")
   Space above and below each section, about 40% less on every screen. Was 6.5rem (8.75rem on proof and
   closing bands), 4.5rem/5.5rem on tablets and 3.5rem/4.25rem on phones. */
:root { --section-y: 4rem !important; --section-y-lg: 5rem !important; }
@media (max-width: 768px) { :root { --section-y: 3rem !important; --section-y-lg: 3.5rem !important; } }
@media (max-width: 480px) { :root { --section-y: 2.5rem !important; --section-y-lg: 3rem !important; } }
/* section-spacing end */

/* form-sent start (Faiz, 11 Nov 2026: "make it obvious I already submitted it")
   After sending, the page sets `hidden` on the form and shows the confirmation. `.pl-form { display: grid }` was
   overriding `hidden`, so the filled-in form stayed on screen with the thank-you below it. Now the form disappears
   and the confirmation takes its place; ailab-forms.js clears the fields and scrolls the message into view. */
form.pl-form[hidden], .call-sent[hidden], .pl-done[hidden] { display: none !important; }
.cta-band .call-sent { margin-top: 0; border: 2px solid #157578; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.cta-band .call-sent h3 { display: flex; align-items: center; gap: .75rem; font-size: var(--text-lg, 1.25rem); margin: 0; }
.cta-band .call-sent h3::before { content: "\2713"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #157578; color: #fff; font-size: 1.15rem; font-weight: 700; }
.cta-band .call-sent:focus { outline: 3px solid #8fd3d4; outline-offset: 3px; }
.pl-done:focus { outline: 3px solid #8fd3d4; outline-offset: 3px; }
/* form-sent end */

/* crumbs-phone start (Faiz, 11 Nov 2026: breadcrumb "AI Lab" sat lower than "/ AI Tool Deep Dives" on phones)
   The phone tap-target rule makes the breadcrumb links 44px tall with centred text, but the current-page item
   stayed text height at the top of the row, so the two looked 11px apart. Every item now gets the same 44px
   row with centred text, the row padding goes (the 44px already gives the space), and a long current-page
   title (case studies) stays on one line and ends in "..." instead of wrapping onto two or three lines. The
   full title is the heading right under it. */
@media (max-width: 768px) {
  .crumbs { padding-top: 0; padding-bottom: 0; }
  .crumbs ol { flex-wrap: nowrap; align-items: center; min-width: 0; }
  .crumbs li { display: inline-flex; align-items: center; min-height: 44px; flex: none; white-space: nowrap; }
  .crumbs li[aria-current] { display: block; flex: 0 1 auto; min-width: 0; max-width: none; line-height: 44px; overflow: hidden; text-overflow: ellipsis; }
}
/* crumbs-phone end */