/* davideriboni.com v9 · Applied AI pages (applied-ai.html, applied-ai-it.html)
   Loaded after /v9.css. Page layer only: the shared system owns tokens, type, chapters, FAQ, cards and the contact band.
   The three area diagrams reuse the home's self-drawing .dg markup (v9.js arms any .dg below the fold).
   Owner rule: no halo, glow, ring or wash. Coral-gold only on type, rules and actions. */

/* ---------- Opening frame: title left, chapter index right ---------- */
.ai-hero__inner { display: grid; gap: 40px; }

/* the gradient phrase fills once on load, left to right over the plain text colour (never invisible) */
.ai-fill { background-image: var(--grad-text), linear-gradient(var(--text), var(--text)); background-size: 100% 100%, 100% 100%; background-repeat: no-repeat; }
@keyframes ai-fill { from { background-size: 0% 100%, 100% 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .intro .ai-fill { animation: ai-fill 1.5s var(--ease-x) .85s backwards; }
  .intro .ai-index { animation: soft-rise .8s var(--ease-x) 1s backwards; }
}

.ai-index { display: grid; border-top: 1px solid var(--line); align-self: end; }
.ai-index a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 60px; padding: 12px 0; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none; font: 500 16px/1.35 var(--sans);
}
.ai-index__n {
  font: 400 24px/1 var(--serif); font-variant-numeric: lining-nums; justify-self: start;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .1em;
}
.ai-index .i { color: var(--text2); transition: transform .32s var(--ease-x), color .22s var(--ease); }
.ai-index a:hover .i { transform: translateY(4px); color: var(--text); }
.ai-index a:hover .ai-index__t { text-decoration: underline; text-decoration-color: #FF5F6D; text-decoration-thickness: 1px; text-underline-offset: 6px; }
:root[data-theme="light"] .ai-index a:hover .ai-index__t { text-decoration-color: #A52F43; }

@media (min-width: 901px) {
  .ai-hero__inner { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 64px; align-items: end; }
  .ai-index a { min-height: 64px; font-size: 17px; }
}

/* ---------- The three areas: large chapters with a giant sticky numeral ---------- */
.ai-area .chapter__num, .ai-principles .chapter__num, .ai-faq .chapter__num { font-size: 64px; line-height: .9; }
@media (min-width: 901px) {
  .ai-area { padding: 128px 0 136px; }
  .ai-area .chapter__num, .ai-principles .chapter__num, .ai-faq .chapter__num { font-size: clamp(112px, 10.5vw, 168px); line-height: .86; letter-spacing: -.02em; }
  .ai-area .chapter__label, .ai-principles .chapter__label, .ai-faq .chapter__label { gap: 22px; }
}

/* the diagram plate: a quiet panel, square corners, no shadow */
.ai-plate { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 32px 20px 28px; max-width: none; }
.prose > .ai-plate { margin-top: 44px; }
.prose > .ai-plate + h3 { margin-top: 52px; }
.prose > .ai-plate + ul { margin-top: 40px; }
.ai-plate .dg { margin: 0; }

/* 01 converge: give the labels room above the top curve */
.ai-plate--converge { padding-top: 40px; }
/* phone: long source labels would cross the curves, so they move into a column left of where each line starts,
   and the output label sits under the output line (the svg stretches with preserveAspectRatio="none", so the % labels stay on their lines) */
@media (max-width: 600px) {
  .ai-plate--converge { padding: 28px 16px 24px; }
  .ai-plate .dg-converge { aspect-ratio: 640 / 420; }
  .ai-plate .dg-converge svg { left: 38%; width: 62%; }
  .ai-plate .dg-converge .dg-l, .ai-plate .dg-converge .dg-l--below { left: 0; width: calc(38% - 10px); white-space: normal; text-align: right; line-height: 1.25; transform: translateY(-50%); }
  .ai-plate .dg-converge .dg-o { top: calc(50% + 10px); transform: none; max-width: 28%; }
  /* the stretched viewBox scales x by 420 / (320 x .62), so the node is widened by the same factor to stay square */
  .ai-plate .dg-converge .dg-node { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(2.12); }
}

/* 02 heat: scenario grid with its two assumption axes */
.ai-heat { margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 12px; max-width: 560px; }
.ai-heat .dg-heat { grid-column: 2; grid-row: 1; width: 100%; max-width: none; }
.ai-axis { font: 500 13px/1.3 var(--sans); letter-spacing: .02em; color: var(--text2); white-space: nowrap; }
.ai-axis--y { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; }
.ai-axis--x { grid-column: 2; grid-row: 2; }

/* 03 flow: the four steps run across the whole plate */
.ai-plate--flow { padding: 36px 24px 32px; }
.ai-plate .dg-flow { max-width: none; }
/* phone: v9.css drops the even nodes 16px under the rail (bottom: -30px); set them back on the line (bottom: -14px) */
@media (max-width: 600px) {
  .ai-plate .dg-flow li:nth-child(even)::before { bottom: -14px; }
}

@media (min-width: 901px) {
  .ai-plate { padding: 48px 48px 44px; }
  .ai-plate--converge { padding: 56px 48px 48px; }
  .ai-plate .dg-converge .dg-l, .ai-plate .dg-converge .dg-o { font-size: 15px; }
  .ai-plate--flow { padding: 56px 56px 52px; }
  .ai-plate .dg-flow li { font-size: 15px; }
}

/* ---------- Principles (the black frame) and questions ---------- */
.ai-principles .h2 { max-width: 14em; }
.ai-principles .numbered { margin-top: 48px; }
@media (min-width: 901px) {
  .ai-principles .numbered { column-gap: 64px; }
  .ai-principles .numbered > li { padding: 32px 0 40px; }
}
.prose > .ai-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .ai-cta .btn { flex: 1 1 100%; } }

@media print {
  .ai-index { display: none !important; }
  .ai-plate { break-inside: avoid; }
}