/* Slide treatment, grouped navigation, and interaction polish for Value Stream Conference with AI. */

.with-ai-overview-layout,
.with-ai-phase-grid,
.with-ai-guardrail-grid {
  perspective: 75rem;
}

.with-ai-3d-surface {
  transform: translateZ(0);
  transform-origin: center;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* Shared header/sidebar navigation -------------------------------------- */

.hub-navigation__menu--with-ai .hub-navigation__dropdown {
  max-height: calc(100svh - 5.5rem);
}

.hub-navigation__menu--with-ai .hub-navigation__dropdown-group-heading {
  padding: 0.7rem 0.8rem 0.35rem;
  color: var(--with-ai-teal);
  border-top: 0;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hub-navigation__menu--with-ai .hub-navigation__dropdown-group-heading:not(:first-child) {
  margin-top: 0.35rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(8, 39, 68, 0.12);
}

.hub-navigation__menu--with-ai .hub-navigation__dropdown-group-heading + li {
  border-top: 0;
}

.hub-navigation__menu--with-ai .hub-navigation__dropdown-link {
  min-height: 3.25rem;
  padding: 0.55rem 0.75rem;
}

.hub-navigation__menu--with-ai .hub-navigation__dropdown-number {
  width: 2rem;
  height: 2rem;
}

.with-ai-navigation__group + .with-ai-navigation__group {
  margin-top: 0.35rem;
  border-top: 1px solid rgba(18, 59, 102, 0.12);
}

/* Overview and conference phases --------------------------------------- */

.with-ai-phase-heading__line {
  display: block;
}

.with-ai-phase-heading__line + .with-ai-phase-heading__line {
  margin-top: 0.08em;
}

.with-ai-phase-card::before {
  background: var(--with-ai-blue);
}

.with-ai-no-break {
  white-space: nowrap;
}

/* Workflow slides ------------------------------------------------------- */

.with-ai-workflow-slides {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.with-ai-workflow-slide-list {
  width: 100%;
  max-width: none;
}

.with-ai-workflow-slide {
  min-height: min(50rem, calc(100svh - 7rem));
  align-items: start;
  background:
    radial-gradient(circle at 92% 8%, rgba(220, 239, 237, 0.82), transparent 21rem),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 55%, #edf7ff 100%);
  grid-template-columns: clamp(4.75rem, 8vw, 6.5rem) minmax(0, 1fr);
}

.with-ai-workflow-slide--even {
  background:
    radial-gradient(circle at 8% 10%, rgba(220, 239, 237, 0.78), transparent 20rem),
    linear-gradient(135deg, #f8fcff 0%, #ffffff 58%, #f1f8fb 100%);
}

.with-ai-workflow-slide::before {
  background: linear-gradient(90deg, var(--with-ai-blue), var(--with-ai-teal), var(--with-ai-coral));
}

.with-ai-workflow-slide .with-ai-step__number {
  width: clamp(4.5rem, 7vw, 6rem);
  height: clamp(4.5rem, 7vw, 6rem);
  margin-top: 0.18rem;
  align-self: start;
  background: linear-gradient(145deg, var(--with-ai-blue), var(--with-ai-teal));
  box-shadow: 0 0.9rem 2.2rem rgba(8, 39, 68, 0.2);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
}

.with-ai-workflow-slide__content {
  min-width: 0;
}

.with-ai-workflow-slide .introduction-step__eyebrow {
  margin-top: 0;
  margin-bottom: 0.7rem;
  color: var(--with-ai-coral);
}

.with-ai-workflow-slide h2 {
  margin-bottom: 0.65rem;
  color: var(--with-ai-blue-deep);
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-wrap: balance;
}

.with-ai-workflow-slide h2::after {
  display: block;
  width: clamp(4.5rem, 8vw, 7rem);
  height: 0.3rem;
  margin-top: 0.9rem;
  content: "";
  background: linear-gradient(90deg, var(--with-ai-blue), var(--with-ai-teal));
  border-radius: 999px;
}

.with-ai-workflow-slide__question {
  display: block;
  max-width: 62rem;
  color: var(--with-ai-teal);
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  line-height: 1.45;
}

.with-ai-workflow-slide .with-ai-step__layout {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.with-ai-workflow-slide .with-ai-visual {
  min-height: 23rem;
}

.with-ai-workflow-slide .speaker-notes {
  margin-top: 0;
}

.with-ai-workflow-slide .speaker-notes > summary,
.with-ai-workflow-slide .workshop-slide-navigation {
  height: 3.75rem;
  min-height: 3.75rem;
}

.with-ai-workflow-slide .speaker-notes > summary {
  padding-right: 8rem;
}

.with-ai-workflow-slide .workshop-slide-navigation {
  margin: 0 0.75rem 0 0;
  align-self: start;
}

.with-ai-workflow-slide .speaker-notes__body {
  background: rgba(231, 244, 255, 0.9);
}

/* Collapsible source grounding ----------------------------------------- */

.with-ai-source-details {
  width: 100%;
  margin-top: 0.5rem;
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.with-ai-source-details > summary {
  display: grid;
  min-height: 3.75rem;
  padding: 0.75rem;
  align-items: center;
  gap: 0.75rem;
  color: white;
  border-radius: 0.7rem;
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto;
  list-style: none;
  transition: color 160ms ease, background 160ms ease;
}

.with-ai-source-details > summary::-webkit-details-marker {
  display: none;
}

.with-ai-source-details > summary:hover,
.with-ai-source-details > summary:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.with-ai-source-details > summary:focus-visible {
  outline: 0.18rem solid white;
  outline-offset: 0.18rem;
}

.with-ai-source-details__label {
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-decoration: underline;
  text-decoration-thickness: 0.09rem;
  text-transform: uppercase;
  text-underline-offset: 0.24rem;
}

.with-ai-source-details .speaker-notes__chevron {
  color: white;
  grid-column: 3;
}

.with-ai-source-details[open] .speaker-notes__chevron {
  transform: rotate(225deg) translate(-0.05rem, -0.05rem);
}

.with-ai-source-details__body {
  display: grid;
  margin: 0.5rem 0 0.25rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  align-items: center;
  gap: 1rem 2rem;
  grid-template-columns: minmax(0, 1fr) auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.9rem;
}

.with-ai-source-details__body p {
  margin: 0;
  color: #d9e8ef;
  font-size: 0.88rem;
  line-height: 1.6;
}

.with-ai-source-details__body strong {
  color: white;
}

.with-ai-source-details__body a {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  padding: 0.65rem 0.9rem;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.with-ai-source-details__body a:hover,
.with-ai-source-details__body a:focus-visible {
  color: var(--with-ai-blue-deep);
  background: white;
}

.with-ai-source-details__body a:focus-visible {
  outline: 0.18rem solid white;
  outline-offset: 0.18rem;
}

@media (hover: hover) and (pointer: fine) {
  .with-ai-3d-surface:hover {
    border-color: rgba(29, 122, 119, 0.5);
    box-shadow: 0 1.75rem 3.75rem rgba(8, 39, 68, 0.16);
    transform: translateY(-0.45rem) rotateX(1.2deg) rotateY(-0.9deg) scale(1.012);
  }

  .with-ai-loop-visual.with-ai-3d-surface:hover .with-ai-loop-core {
    box-shadow: 0 1.5rem 3.2rem rgba(8, 39, 68, 0.3);
  }
}

@media (max-width: 52rem) {
  .with-ai-workflow-slide {
    min-height: 0;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    grid-template-columns: 1fr;
  }

  .with-ai-workflow-slide .with-ai-step__number {
    width: 3.75rem;
    height: 3.75rem;
    margin-top: 0;
    margin-bottom: 0.25rem;
    grid-column: 1;
  }

  .with-ai-workflow-slide__content,
  .with-ai-workflow-slide .speaker-notes {
    grid-column: 1;
  }

  .with-ai-workflow-slide .with-ai-step__layout {
    margin-top: 1.5rem;
  }

  .with-ai-source-details__body {
    grid-template-columns: 1fr;
  }

  .with-ai-source-details__body a {
    width: fit-content;
    white-space: normal;
  }
}

@media (max-width: 38rem) {
  .with-ai-workflow-slides {
    width: min(100% - 2rem, var(--content-width));
  }

  .with-ai-workflow-slide {
    padding: 1.25rem;
  }

  .with-ai-workflow-slide h2 {
    font-size: clamp(1.85rem, 10vw, 2.65rem);
  }

  .with-ai-workflow-slide__question {
    font-size: 1rem;
  }

  .with-ai-workflow-slide .speaker-notes > summary {
    padding-right: 7.5rem;
  }

  .with-ai-no-break {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .with-ai-3d-surface,
  .with-ai-source-details > summary {
    transition: none;
  }

  .with-ai-3d-surface:hover {
    transform: none;
  }
}