/* Shared layer colors for this overview and the following capability pages. */
:root {
  --ai-platforms: #205c9d;
  --ai-models: #65459d;
  --ai-infrastructure: #254f7e;
}

.slide-ai-foundation[lang^="zh"] { font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif; }
.ai-foundation-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: clamp(12px, .85vw, 16px);
  padding-top: clamp(17px, 1.6vw, 29px);
}
.ai-foundation-intro {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3em;
  margin: 0;
  padding: 0 12px 16px;
  text-align: center;
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 450;
  line-height: 1.5;
  max-width: 94%;
  transform: translateY(41px);
}
.ai-foundation-intro strong {
  color: #315fa8;
  font-weight: 700;
  background: linear-gradient(110deg, #2567b5, #6c54ac);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ai-foundation-intro::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: clamp(100px, 11vw, 180px);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #66caff00, #6cb7f3 24%, #9b83e2 76%, #9b83e200);
  box-shadow: 0 3px 10px #779bde16;
  transform: translateX(-50%);
  content: "";
}
.ai-foundation-stack {
  position: relative;
  align-self: center;
  width: min(96%, 1420px);
  height: 100%;
  max-height: 640px;
  min-height: 0;
  margin: 0;
  container-type: size;
}
.ai-foundation-stage {
  --ai-layer-bottom-padding: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82%, 164cqh);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
/* Keep the raster's transparent margins outside the composition box. */
.ai-foundation-art {
  display: block;
  position: absolute;
  top: 44.4%;
  left: 49%;
  width: 90%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ai-foundation-layer {
  position: absolute;
  left: calc(51% - 25px);
  bottom: calc(100% - var(--layer-floor) + var(--ai-layer-bottom-padding));
  width: 38%;
}
/* Match each shelf's front surface edge; copy grows upward as either language wraps. */
.ai-foundation-platforms { --layer-floor: 27.6%; --layer-ink: var(--ai-platforms); --layer-accent: #7bddff; --copy-line-inset: 8%; }
.ai-foundation-models { --layer-floor: 59.6%; --layer-ink: var(--ai-models); --layer-accent: #cfb2ff; }
.ai-foundation-models { width: 44%; }
.ai-foundation-infrastructure { --layer-floor: 92.7%; --layer-ink: var(--ai-infrastructure); --layer-accent: #84e8f0; width: 42%; }
.ai-foundation-layer h2 {
  display: table;
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 0 0 8px;
  padding: 5px 16px 6px 23px;
  border: 1px solid color-mix(in srgb, var(--layer-accent) 68%, #fff);
  border-bottom-color: color-mix(in srgb, var(--layer-ink) 65%, #101e3d);
  border-radius: 8px 13px 8px 13px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--layer-ink) 82%, #d9f2ff), var(--layer-ink) 42%, color-mix(in srgb, var(--layer-ink) 62%, #0c1a38));
  box-shadow: inset 0 1px 0 #ffffff87, inset 0 -1px 0 #11223d55, 0 3px 0 color-mix(in srgb, var(--layer-ink) 36%, #dce8fa), 0 7px 14px color-mix(in srgb, var(--layer-ink) 18%, transparent);
  color: #f7fcff;
  font-size: clamp(24px, calc(2.65cqw + 1px), 35px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.35px;
  text-shadow: 0 1px 1px #12244266;
}
.ai-foundation-layer h2::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 8px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(#fff, var(--layer-accent));
  box-shadow: 0 0 6px color-mix(in srgb, var(--layer-accent) 70%, transparent);
  content: "";
}
.ai-foundation-layer p {
  margin: 0;
  color: #294767;
  max-width: 100%;
  font-size: clamp(17px, 1.65cqw, 21px);
  font-weight: 550;
  line-height: 1.38;
  text-shadow: 0 1px 0 #ffffff80;
}
/* Follow the shelf's sloping right edge: taper the first two lines. */
.ai-foundation-layer p::before {
  float: right;
  width: var(--copy-line-inset, 18%);
  height: 2lh;
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 44% 100%, 44% 50%, 0 50%);
  content: "";
}
.ai-foundation-takeaway {
  position: relative;
  isolation: isolate;
  display: flex;
  width: max-content;
  max-width: 94%;
  align-items: center;
  gap: clamp(16px, 1.5vw, 28px);
  padding: clamp(12px, .85vw, 17px) clamp(22px, 2vw, 38px);
  border: 1px solid #e3e3f6;
  border-top-color: #fff;
  border-radius: 60px;
  background: linear-gradient(115deg, #f5f9fff5, #fff9 48%, #f1edfcf2);
  box-shadow: 0 3px 0 #dce4f745, 0 10px 26px #6555aa0d, inset 0 1px 0 #fff;
  backdrop-filter: blur(10px);
  transform: translateY(-45px);
}
.ai-foundation-takeaway::before {
  position: absolute;
  z-index: -2;
  inset: -78% -17%;
  background: url("assets/ai-foundation-takeaway-mist-v1.png") center / 100% 100% no-repeat;
  mask-image: radial-gradient(ellipse at center, #000 34%, transparent 74%);
  opacity: .42;
  pointer-events: none;
  content: "";
}
.ai-foundation-takeaway::after {
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: -8px;
  left: 7%;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(90deg, #68c9f5, #b0adf1 52%, #ae89e0);
  filter: blur(13px);
  opacity: .28;
  pointer-events: none;
  content: "";
}
.ai-foundation-takeaway-mark {
  flex: none;
  padding-right: clamp(15px, 1.5vw, 28px);
  border-right: 1px solid #bea8ed;
  color: var(--ai-models);
  font-size: clamp(28px, 2.5vw, 42px);
  font-weight: 400;
  line-height: 1;
}
.slide .ai-foundation-conclusion {
  flex: 0 1 auto;
  min-width: 0;
  max-inline-size: 57ch;
  margin: 0;
  color: var(--slide-ink);
  text-align: left;
  font-size: clamp(15px, calc(1.35vw - 3px), 22px);
  font-weight: 550;
  line-height: 1.4;
  white-space: normal;
  text-wrap: balance;
}
.slide-ai-foundation[lang^="zh"] .ai-foundation-conclusion { max-inline-size: 22em; }

@media (max-width: 1100px) {
  .ai-foundation-intro { font-size: 17px; }
  .slide .ai-foundation-conclusion { font-size: 15px; }
}
@media (max-width: 760px) {
  .slide-ai-foundation .slide-content { min-height: 590px; }
  .ai-foundation-body { grid-template-rows: auto auto auto; gap: 24px; padding-block: 24px; }
  .ai-foundation-stack { width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .ai-foundation-stage { --ai-layer-bottom-padding: 7px; width: 100%; }
  .ai-foundation-layer { left: calc(51% - 12px); }
  .ai-foundation-layer h2 { font-size: clamp(13px, calc(2.65cqw + 1px), 24px); margin-bottom: 4px; padding: 3px 8px 4px 12px; border-radius: 5px 8px 5px 8px; letter-spacing: -.2px; }
  .ai-foundation-layer h2::before { top: 5px; bottom: 5px; left: 4px; width: 2px; }
  .ai-foundation-layer p { font-size: clamp(10px, 1.65cqw, 15px); }
  .ai-foundation-intro { max-width: 30em; flex-wrap: wrap; column-gap: .25em; row-gap: 0; font-size: 14px; transform: none; }
  .ai-foundation-takeaway { width: 100%; gap: 12px; padding: 13px 17px; border-radius: 23px; }
  .ai-foundation-takeaway-mark { font-size: 27px; padding-right: 12px; }
  .slide .ai-foundation-conclusion { font-size: 12px; }
}