/*
 * Page styles of /termekek/ai-alapu-egyedi-termelestamogato-szoftver/ (PKG-DCBC7D). Every selector starts with the
 * page-ai-production body class (plan §8.3); the building blocks follow the software page (steps, chips).
 */

/* --- Head --- */
/* The full title (55 characters) is much longer than the other page titles, and this head has no image column. With
   the shared size and 22ch cap it took one or two lines more and made the head taller than on the other subpages
   (PKG-BSKQ4C: one head height). A one step smaller, fluid size without the cap keeps the head exactly as tall as
   the others: measured 320–1920px, see ai/PKG-DCBC7D.md. On large screens it reaches the shared maximum. */
.page-ai-production .page-hero__text h1 {
  max-width: none;
  font-size: clamp(1.55rem, 1.15rem + 2.4vw, 3.9rem);
}

/* --- Overview figure: the infographic on a white card, full container width --- */
.page-ai-production .ai__overview {
  margin: 0;
}

.page-ai-production .ai__overview-frame {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
}

.page-ai-production .ai__overview-frame img {
  height: auto;
}

.page-ai-production .ai__overview-caption {
  margin-top: var(--space-4);
  max-width: 72ch;
  color: var(--c-text-2);
  font-size: var(--fs-0);
}

.page-ai-production .ai__overview-caption a {
  white-space: nowrap;
}

/* --- Text columns --- */
.page-ai-production .ai__text .lead {
  margin-bottom: var(--space-5);
}

.page-ai-production .ai__nobr {
  white-space: nowrap;
}

/* The "AI is not an end in itself" remark: a quiet callout with the turquoise brand line. */
.page-ai-production .ai__note {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--c-turq);
  background: var(--c-mist);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

/* --- Numbered stages: a real sequence, joined by a hairline (as on the software page) --- */
.page-ai-production .ai__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ai-step;
}

.page-ai-production .ai__step {
  counter-increment: ai-step;
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  min-height: 2.75rem;
  padding-bottom: var(--space-5);
  font: 500 var(--fs-2) / var(--lh-snug) var(--ff-display);
  color: var(--c-text);
}

@media (min-width: 40em) {
  .page-ai-production .ai__step {
    column-gap: var(--space-5);
  }
}

.page-ai-production .ai__step:last-child {
  padding-bottom: 0;
}

.page-ai-production .ai__step::before {
  content: counter(ai-step);
  grid-column: 1;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-paper);
  font: 300 var(--fs-3) / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-turq-700);
}

.page-ai-production .ai__step::after {
  content: '';
  position: absolute;
  left: calc(1.375rem - 0.5px);
  top: 3.25rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--c-line);
}

.page-ai-production .ai__step:last-child::after {
  display: none;
}

/* --- The development process is the dark dotted band (like the hardware process): the paragraphs are muted
   (like .lead), the stages and the note stay light, the circles and the joining line use the dark hairline. --- */
.page-ai-production .section--ink .ai__text p {
  color: var(--c-on-dark-2);
}

.page-ai-production .section--ink .ai__text .ai__note {
  color: var(--c-on-dark);
  background: rgba(26, 188, 156, 0.1);
}

.page-ai-production .section--ink .ai__step {
  color: var(--c-on-dark);
}

.page-ai-production .section--ink .ai__step::before {
  border-color: var(--c-ink-line);
  background: var(--c-ink-2);
  color: var(--c-turq);
}

.page-ai-production .section--ink .ai__step::after {
  background: var(--c-ink-line);
}

/* --- Business benefits --- */
.page-ai-production .ai__benefits {
  max-width: 60rem;
}

/* --- Building blocks: hairline chips --- */
.page-ai-production .ai__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
}

.page-ai-production .ai__chip {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-paper);
  color: var(--c-text);
  font-size: var(--fs-1);
  line-height: 1.3;
  white-space: nowrap;
}

@media (min-width: 60em) {
  .page-ai-production .ai__chips {
    padding-top: 0.35rem;
  }
}