/*
 * 03 AI and automation.
 *
 * Every measurement comes from the design prototype. The prototype sized this
 * section with container queries against a wrapper this theme does not have,
 * so its two breakpoints are media queries at 1100px and 640px. Nothing in
 * this section was fluid (no cqw values), so there is no vw substitution to
 * make.
 *
 * Logical properties throughout, because the page also renders in Hebrew RTL.
 * The one place the prototype used a physical offset is the caret's
 * margin-left, which is margin-inline-start here.
 */

.ad-ai {
  /*
   * 0 top: section 02 above already pays 140px on its own bottom edge.
   * There is no token for the 64px/56px panel padding or the 28px stack gap
   * below, so those stay literal, as in about.css.
   */
  padding-block: 0 var(--ad-space-section);
  padding-inline: var(--ad-space-page);
}

/* ----------------------------------------------------- the hairline grid */

/*
 * The 1px lines are not borders on the panels. The grid paints the line
 * colour and shows through a 1px gap and a 1px border; each panel then paints
 * its own opaque fill on top. minmax(0,1fr) rather than 1fr so the log box,
 * which scrolls horizontally, cannot blow its column out.
 */
.ad-ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ad-space-hairline);
  background: var(--ad-color-hairline);
  border: var(--ad-space-hairline) solid var(--ad-color-hairline);
}

/* Only one panel has content, so the empty half is not left as a line-colour slab. */
.ad-ai__grid--solo {
  grid-template-columns: minmax(0, 1fr);
}

.ad-ai__panel {
  display: flex;
  flex-direction: column;
  padding: 64px 56px;
  /* Grid items default to min-content width; 0 lets the log box scroll instead. */
  min-width: 0;
}

.ad-ai__panel--copy {
  gap: 28px;
  background: var(--ad-color-panel);
}

.ad-ai__panel--demo {
  justify-content: center;
  gap: var(--ad-space-card-gap);
  background: var(--ad-color-bg);
}

/* ---------------------------------------------------------- copy panel */

.ad-ai__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ad-font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--ad-color-accent);
}

.ad-ai__title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ad-color-text);
  text-wrap: pretty;
}

.ad-ai__body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ad-color-text-secondary);
  text-wrap: pretty;
}

/* ------------------------------------------------------ capability rows */

/*
 * The list draws its own hairlines: bottom on the wrapper, top on each row,
 * so consecutive rows share one line and the group closes on both edges.
 */
.ad-ai__rows {
  display: flex;
  flex-direction: column;
  border-block-end: var(--ad-space-hairline) solid var(--ad-color-hairline);
}

.ad-ai__row {
  display: flex;
  gap: 20px;
  padding-block: 26px;
  border-block-start: var(--ad-space-hairline) solid var(--ad-color-hairline);
}

.ad-ai__row-icon {
  display: flex;
  flex: none;
  /* Optical alignment with the cap height of the title beside it. */
  margin-block-start: 2px;
  color: var(--ad-color-accent);
}

.ad-ai__row-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/*
 * A real h3 where the prototype used <strong> as a sub-heading (SC 1.3.1,
 * 2.4.6). base.css sets 700 on headings and the design asks for 600 here, so
 * the weight is the only thing that has to be restated: the element changed,
 * the pixels did not.
 */
.ad-ai__row-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ad-color-text);
}

.ad-ai__row-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ad-color-text-muted);
}

/* ---------------------------------------------------------- demo panel */

.ad-ai__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  /*
   * The prototype used #5B6470 here, which measures 3.32:1 on the page ground
   * and fails SC 1.4.3 for 11px text. --ad-color-text-meta is the corrected
   * token from inc/tokens.php.
   */
  color: var(--ad-color-text-meta);
}

.ad-ai__status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The only border-radius in the design. */
.ad-ai__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ad-color-accent);
  animation: ad-ai-blink 1.2s steps(1) infinite;
}

/* ------------------------------------------------------------- log box */

/*
 * Forced LTR in the markup, because the content is machine output in Latin
 * script whatever language the page is in. text-align:start rather than the
 * prototype's text-align:left: inside a dir="ltr" box the two are identical,
 * and start cannot break if the box is ever reused.
 */
.ad-ai__log {
  padding: 28px;
  font-family: var(--ad-font-mono);
  font-size: 13px;
  line-height: 1.9;
  text-align: start;
  background: var(--ad-color-panel);
  border: var(--ad-space-hairline) solid var(--ad-color-hairline);
  /* Narrow screens scroll the log rather than reflowing its columns. The
     markup gives this box tabindex="0" so the scroll is reachable by
     keyboard (SC 2.1.1). */
  overflow-x: auto;
  min-width: 0;
}

/*
 * pre keeps the column alignment the log depends on, and is what produces the
 * horizontal overflow above. The prototype split each line into a dim
 * timestamp and a bright payload; the schema stores one string per line, so
 * the line takes the single muted colour rather than inventing a parser.
 */
.ad-ai__log-line {
  white-space: pre;
  color: var(--ad-color-text-muted);
}

.ad-ai__log-line--done {
  color: var(--ad-color-accent);
}

.ad-ai__caret {
  display: inline-block;
  width: 8px;
  height: 14px;
  /* Physical margin-left in the prototype. */
  margin-inline-start: 6px;
  vertical-align: -2px;
  background: var(--ad-color-accent);
  animation: ad-ai-blink 1s steps(1) infinite;
}

/* -------------------------------------------------- technology strip */

/* The same hairline recipe as the outer grid, three cells wide. */
.ad-ai__stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ad-space-hairline);
  background: var(--ad-color-hairline);
  border: var(--ad-space-hairline) solid var(--ad-color-hairline);
}

.ad-ai__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: var(--ad-color-bg);
}

.ad-ai__cell-label {
  font-family: var(--ad-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ad-color-text-meta);
}

.ad-ai__cell-value {
  font-size: 14px;
  color: var(--ad-color-text-secondary);
}

/* ---------------------------------------------------------- responsive */

/* The two panels stack, and the 1px gap becomes one horizontal hairline. */
@media (max-width: 1100px) {
  .ad-ai__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ad-ai {
    /* The section pays its own top padding once it is no longer sitting
       under a full-height neighbour. */
    padding-block: var(--ad-space-section-mobile);
    padding-inline: var(--ad-space-page-mobile);
  }

  .ad-ai__panel {
    padding-inline: var(--ad-space-page-mobile);
  }

  .ad-ai__title {
    font-size: 34px;
  }

  .ad-ai__stack {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------- motion */

/*
 * Named for this section so the stylesheet does not redefine hero.css's
 * ad-blink, which is the same shape at a different duration.
 */
@keyframes ad-ai-blink {
  50% { opacity: 0; }
}

/*
 * Both blinks run forever, so they stop for the OS preference and for the
 * site's own pause control (SC 2.2.2), following hero.css. The scroll reveal
 * and its two motion escape hatches are defined in hero.css and are not
 * repeated here.
 */
@media (prefers-reduced-motion: reduce) {
  .ad-ai__dot,
  .ad-ai__caret {
    animation: none;
  }
}

[data-ad-motion="off"] .ad-ai__dot,
[data-ad-motion="off"] .ad-ai__caret {
  animation: none;
}