/* ===========================================================================
   AI Lab page
   ---------------------------------------------------------------------------
   Loaded only on /ai-lab, on top of style.css (see $pageStyles in
   PageController::aiLab and includes/header.php).

   Every colour, radius, shadow, transition and font here comes from the
   variables style.css already defines, and the page reuses .main-content,
   .container, .page-header and .btn-primary rather than restyling them. This
   file only adds the few blocks the site had no existing pattern for - the
   lists, the notices and the Calendly frame - so the page inherits the site's
   visual identity instead of introducing a second one.

   Scoped under .ai-lab throughout, so nothing here can affect another page.
   ======================================================================== */

.ai-lab .lab-hero-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* ─── Feature image ───
   Slightly wider than the text column so it reads as a feature rather than an
   inline illustration, but still narrower than the container so it never
   becomes a full-bleed banner.

   height:auto against the width/height attributes in the markup means the
   image keeps its own 3:2 ratio at every width - it can never be stretched or
   squashed - while the browser still reserves the correct space up front. No
   object-fit and no fixed height, so nothing is cropped either. */
.ai-lab .lab-figure {
  max-width: 960px;
  margin: 0 auto 56px;
}

.ai-lab .lab-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.ai-lab .lab-figure figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-3);
}

/* Matches the rhythm of the other standalone content pages. */
.ai-lab .lab-block {
  max-width: 820px;
  margin: 0 auto 56px;
}

.ai-lab .lab-block:last-child { margin-bottom: 0; }

.ai-lab .lab-block h2 {
  font-family: 'Lora', serif;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.ai-lab .lab-block > p {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.78;
  margin-bottom: 16px;
}

.ai-lab .lab-block > p:last-child { margin-bottom: 0; }

/* ─── Audience / steps lists ───
   Cards rather than bullets, matching the card treatment used across the
   homepage: surface background, hairline border, small radius and shadow. */
.ai-lab .lab-list,
.ai-lab .lab-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}

.ai-lab .lab-list > li,
.ai-lab .lab-steps > li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

.ai-lab .lab-list > li:hover,
.ai-lab .lab-steps > li:hover {
  border-color: var(--blue-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ai-lab .lab-list h3,
.ai-lab .lab-steps h3 {
  font-family: 'Sora', sans-serif;
  font-size: 0.985rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}

.ai-lab .lab-list p,
.ai-lab .lab-steps p {
  font-size: 0.9rem;
  color: var(--text-3);
  line-height: 1.65;
  margin: 0;
}

/* Numbered without a counter on the <li> marker, so the number is decorative
   and screen readers still hear the list's own numbering rather than both. */
.ai-lab .lab-steps { counter-reset: lab-step; }

.ai-lab .lab-steps > li { position: relative; padding-left: 62px; }

.ai-lab .lab-steps > li::before {
  counter-increment: lab-step;
  content: counter(lab-step);
  position: absolute;
  left: 20px;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-pale);
  color: var(--blue);
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Partnership facts ───
   A plain marked list rather than five cards: the items are one line each, and
   giving every one a card would take four times the height to say the same
   thing on a page whose whole point is to stay short. */
.ai-lab .lab-facts {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
}

.ai-lab .lab-facts > li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.7;
}

/* Decorative marker only - the list semantics carry the meaning. */
.ai-lab .lab-facts > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-mid);
}

/* ─── Activity tags ─── */
.ai-lab .lab-tags {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-lab .lab-tags > li {
  padding: 7px 16px;
  border: 1px solid var(--blue-light);
  border-radius: 100px;
  background: var(--blue-pale);
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ─── Notices ───
   .lab-tbc marks content the AI Unit has still to supply; the amber tokens
   distinguish it from ordinary copy without reading as an error. */
.ai-lab .lab-tbc {
  margin-top: 22px !important;
  padding: 14px 18px;
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--amber-pale);
  font-size: 0.9rem !important;
  color: var(--text-2);
}

/* ─── Launch announcement ───
   Built from the same tokens as .lab-notice and .lab-tbc rather than new
   colours, so it reads as part of this page instead of a bolted-on banner.
   The blue left rule marks it as an announcement, matching the amber rule
   .lab-tbc already uses to mark an outstanding item. */
.ai-lab .lab-launch {
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 1px solid var(--blue-light);
  border-left: 3px solid var(--blue-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--blue-pale);
}

.ai-lab .lab-launch-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}

.ai-lab .lab-launch-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-mid);
  flex-shrink: 0;
}

.ai-lab .lab-launch-title {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.3;
  color: var(--text-1);
}

.ai-lab .lab-launch-body {
  margin: 0;
  max-width: 70ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-2);
}

.ai-lab .lab-notice {
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.7;
}

.ai-lab .lab-notice a { color: var(--blue-mid); text-decoration: underline; }

.ai-lab .lab-privacy {
  font-size: 0.86rem !important;
  color: var(--text-3) !important;
}

.ai-lab .lab-privacy a { color: var(--blue-mid); text-decoration: underline; }

/* ─── Calendly embed ───
   Calendly injects an <iframe> into this container. The height is fixed
   because the iframe is cross-origin: its content cannot be measured, so it
   cannot size itself to fit. These values follow Calendly's documented
   minimums and give the month view room without an inner scrollbar on
   desktop. min-width guards the iframe against being squeezed below the width
   Calendly's own layout needs. */
.ai-lab .lab-calendly {
  min-width: 320px;
  height: 700px;
  margin-top: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.ai-lab .lab-calendly iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ai-lab .lab-notice {
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.7;
}

.ai-lab .lab-notice a { color: var(--blue-mid); text-decoration: underline; }

.ai-lab .lab-privacy {
  font-size: 0.86rem !important;
  color: var(--text-3) !important;
}

.ai-lab .lab-privacy a { color: var(--blue-mid); text-decoration: underline; }

/* ─── Calendly embed ───
   Calendly injects an <iframe> into this container. The height is fixed
   because the iframe is cross-origin: its content cannot be measured, so it
   cannot size itself to fit. These values follow Calendly's documented
   minimums and give the month view room without an inner scrollbar on
   desktop. min-width guards the iframe against being squeezed below the width
   Calendly's own layout needs. */
.ai-lab .lab-calendly {
  min-width: 320px;
  height: 700px;
  margin-top: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.ai-lab .lab-calendly iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Hidden only once the embed has actually rendered - ai-lab.js adds this. The
   link stays in the DOM either way, so it is available to everyone until the
   embed is genuinely working. */
.ai-lab .lab-calendly.is-loaded + .lab-fallback { display: none; }

.ai-lab .lab-fallback { margin-top: 22px; }

/* ─── Back to homepage ───
   A plain, quiet link tucked in the corner rather than a second CTA button -
   the page already has its one button (Book an AI Lab session) and this is
   just an exit, not something to compete for attention. */
.ai-lab .lab-back-home {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: left;
}

.ai-lab .lab-back-home a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
}

.ai-lab .lab-back-home a:hover {
  color: var(--blue-mid);
  text-decoration: underline;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .ai-lab .lab-calendly { height: 760px; }
}

@media (max-width: 640px) {
  /* Calendly's mobile layout is taller; too little height forces a scrollbar
     inside the iframe on top of the page's own, which is hard to use. */
  .ai-lab .lab-calendly {
    height: 860px;
    min-width: 0;
    margin-left: calc(var(--lab-bleed, 0px) * -1);
  }

  .ai-lab .lab-hero-actions .btn-primary,
  .ai-lab .lab-fallback .btn-primary {
    width: 100%;
    justify-content: center;
  }

  .ai-lab .lab-steps > li { padding-left: 20px; padding-top: 54px; }
  .ai-lab .lab-steps > li::before { top: 18px; left: 20px; }
}

/* Respect the accessibility panel's "stop animations" and the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .ai-lab .lab-list > li,
  .ai-lab .lab-steps > li { transition: none; }
  .ai-lab .lab-list > li:hover,
  .ai-lab .lab-steps > li:hover { transform: none; }
}