/* v7 · Infrastructure — where the AI runs.
   A white data hall for the head; the three ways to host it as a side-by-side choice of three photographed
   options with their specs ruled and aligned across the row; managed hosting as a full-bleed navy band with a
   photographed status panel; the technical requirements as a hairline spec grid that closes on a photograph.
   Layout and look only: the text, its order and the menu are untouched. */

/* ── photographs (each used once on this page; M4 Mac mini only) ── */
body[data-page="infrastructure"] {
  --hero: url("../img/photos/dc-hall-white.jpg"); --hero-pos: 50% 55%; --hero-blend: normal;
  --cta: url("../img/photos/london-night.jpg"); --cta-pos: 50% 55%; --cta-blend: normal;
}
body[data-page="infrastructure"] .three > .card:nth-child(1) .stage { --img: url("../img/photos/mac-light-sm.jpg"); --img-pos: 50% 45% }
body[data-page="infrastructure"] .three > .card:nth-child(2) .stage { --img: url("../img/photos/dc-racks-sm.jpg"); --img-pos: 40% 50% }
body[data-page="infrastructure"] .three > .card:nth-child(3) .stage { --img: url("../img/photos/dc-corridor-sm.jpg"); --img-pos: 50% 50% }

/* ── head: the house proportions (v7.css); the white hall under a firmer veil on the text side ── */
@media (min-width: 641px) {
  body[data-page="infrastructure"] .hero {
    background-image:
      linear-gradient(90deg, rgba(11, 19, 34, .93) 0%, rgba(11, 19, 34, .8) 38%, rgba(11, 19, 34, .38) 70%, rgba(11, 19, 34, .16) 100%),
      linear-gradient(0deg, rgba(11, 19, 34, .62), rgba(11, 19, 34, 0) 50%),
      var(--hero);
  }
}
/* tablets: the lede runs nearly the full width over the white floor, so the veil holds across */
@media (min-width: 641px) and (max-width: 1100px) {
  body[data-page="infrastructure"] .hero {
    background-image:
      linear-gradient(90deg, rgba(11, 19, 34, .93) 0%, rgba(11, 19, 34, .84) 45%, rgba(11, 19, 34, .72) 80%, rgba(11, 19, 34, .62) 100%),
      linear-gradient(0deg, rgba(11, 19, 34, .62), rgba(11, 19, 34, 0) 50%),
      var(--hero);
  }
}
body[data-page="infrastructure"] .hero h1 { max-width: 13ch; margin-top: 1rem }
body[data-page="infrastructure"] .hero .lede { max-width: 41rem; font-size: 1.3rem; line-height: 1.55; color: rgba(255, 255, 255, .9); margin-top: 1.6rem }

/* ── split section heads (all three sections): heading left, serif lede right, one rule across ── */
body[data-page="infrastructure"] .poster > section.machine:has(> .section-lead) {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: 0; align-items: end;
}
body[data-page="infrastructure"] .poster > section.machine:has(> .section-lead)::before { content: ""; grid-column: 1 / -1; border-top: 2px solid var(--fg) }
body[data-page="infrastructure"] .poster > section.machine:has(> .section-lead) > * { grid-column: 1 / -1; min-width: 0 }
body[data-page="infrastructure"] .poster > section.machine:has(> .section-lead) > .sh { grid-column: 1; border-top: 0; padding-top: 1.5rem; margin: 0 }
body[data-page="infrastructure"] .poster > section.machine:has(> .section-lead) > .section-lead { grid-column: 2; margin: 0; padding-top: 1.5rem; font-size: 1.24rem; color: #3A4458 }

/* ── the three ways: a choice of three, photographed, specs aligned across the row ── */
body[data-page="infrastructure"] .three { margin-top: clamp(2.4rem, 4vw, 3.4rem) }
body[data-page="infrastructure"] .three > .card { box-shadow: 0 1px 0 rgba(20, 33, 58, .04) }
body[data-page="infrastructure"] .three > .card .body > span:first-child { font-size: .74rem }
body[data-page="infrastructure"] .three > .card .body h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.04 }
body[data-page="infrastructure"] .three > .card .body p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: #3A4458 }
body[data-page="infrastructure"] .three ul.tick { gap: 0; margin-top: .4rem; border-top: 1px solid var(--line) }
body[data-page="infrastructure"] .three ul.tick li { padding: .66rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; line-height: 1.45 }
body[data-page="infrastructure"] .three ul.tick li:last-child { border-bottom: 0 }
body[data-page="infrastructure"] .three ul.tick li::before { width: 5px; height: 5px; margin-top: .52em; border-radius: 0 }

@media (min-width: 1001px) {
  body[data-page="infrastructure"] .three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    column-gap: 1.4rem; row-gap: 0;
  }
  body[data-page="infrastructure"] .three > .card {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 5;
  }
  body[data-page="infrastructure"] .three > .card .stage,
  body[data-page="infrastructure"] .three > .card:nth-child(even) .stage {
    grid-row: 1; order: 0; height: auto; min-height: 0; aspect-ratio: 5 / 4;
  }
  body[data-page="infrastructure"] .three > .card .body {
    grid-row: 2 / span 4; grid-template-rows: subgrid; row-gap: .85rem; align-content: start;
    padding: 1.7rem 1.8rem 1.4rem;
  }
}

/* ── 02 · managed hosting: a full-bleed navy band, the status panel on a photograph ── */
body[data-page="infrastructure"] .poster > section.machine:has(> .split-2) {
  width: 100vw; margin-left: calc(50% - 50vw);
  padding: clamp(4.4rem, 8vw, 7rem) var(--gutter);
  background: var(--navy-deep);
  color: #EEF0F3;
}
body[data-page="infrastructure"] .poster > section.machine:has(> .split-2)::before { border-top-color: rgba(255, 255, 255, .34) }
body[data-page="infrastructure"] .poster > section.machine:has(> .split-2) .sh-num { color: var(--gold-light) }
body[data-page="infrastructure"] .poster > section.machine:has(> .split-2) h2 { color: #fff }
body[data-page="infrastructure"] .poster > section.machine:has(> .split-2) > .section-lead { color: #C3CBD8 }
body[data-page="infrastructure"] .split-2 {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; margin-top: clamp(2.4rem, 4vw, 3.4rem);
  border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255, 255, 255, .14);
}
body[data-page="infrastructure"] .split-2 > .ai-block { border: 0; border-radius: 0; background: transparent; overflow: hidden }
body[data-page="infrastructure"] .split-2 > .ai-block:last-child { background: var(--navy-2) }
body[data-page="infrastructure"] .split-2 .ai-stage {
  height: 100%; min-height: clamp(380px, 38vw, 540px) !important; padding: 2rem;
  background-color: var(--navy);
  background-image: linear-gradient(rgba(11, 19, 34, .38), rgba(11, 19, 34, .38)), url("../img/photos/dc-panels-blue.jpg");
  background-size: cover; background-position: center, 50% 50%;
}
body[data-page="infrastructure"] .split-2 .ai-stage svg.scene {
  width: min(400px, 84%); height: auto; padding: 1.2rem 1.4rem .9rem; border-radius: var(--radius);
  background: rgba(8, 14, 26, .84); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px); box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
/* the status panel's small labels, lifted to a readable strength */
body[data-page="infrastructure"] .split-2 .ai-stage svg.scene text { opacity: .92 }
body[data-page="infrastructure"] .split-2 .ai-content { padding: clamp(2rem, 3.6vw, 3.2rem); gap: 1rem; align-content: center; height: 100% }
body[data-page="infrastructure"] .split-2 .ai-content h3 { color: #fff; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.05 }
body[data-page="infrastructure"] .split-2 .ai-block ul { gap: 0; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 0 }
body[data-page="infrastructure"] .split-2 .ai-block li { color: #D3D9E3; font-size: .98rem; line-height: 1.5; padding: .8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12) }
body[data-page="infrastructure"] .split-2 .ai-block li::before { background: #E0646B; width: 5px; height: 5px; border-radius: 0; margin-top: .6em }
body[data-page="infrastructure"] .split-2 .ai-content > p {
  color: #fff; font-family: var(--serif); font-style: italic; font-size: 1.06rem !important; line-height: 1.5; margin-top: .4rem !important; opacity: .8 !important;
}

/* ── 03 · technical requirements: a hairline spec grid that closes on a photograph ── */
body[data-page="infrastructure"] ol.points {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2.4rem, 4vw, 3.4rem);
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
body[data-page="infrastructure"] ol.points li {
  display: flex; flex-direction: column; gap: 1.1rem;
  background: var(--white); border: 0; padding: clamp(1.6rem, 2.6vw, 2.3rem);
}
body[data-page="infrastructure"] ol.points .n { display: block; text-align: left; margin: 0; font-size: .76rem; letter-spacing: .14em; padding-bottom: 1rem; border-bottom: 2px solid var(--fg); align-self: stretch }
body[data-page="infrastructure"] ol.points li strong { font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: .6rem }
body[data-page="infrastructure"] ol.points li p { font-size: .97rem; line-height: 1.6 }
body[data-page="infrastructure"] ol.points::after {
  content: ""; min-height: 280px;
  background: var(--navy) url("../img/photos/dc-switches-sm.jpg") 50% 50% / cover no-repeat;
}

/* ── responsive ── */
@media (max-width: 1000px) {
  body[data-page="infrastructure"] ol.points { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 860px) {
  body[data-page="infrastructure"] .poster > section.machine:has(> .section-lead) { grid-template-columns: minmax(0, 1fr) }
  body[data-page="infrastructure"] .poster > section.machine:has(> .section-lead) > .section-lead { grid-column: 1; padding-top: 1rem }
  body[data-page="infrastructure"] .split-2 { grid-template-columns: minmax(0, 1fr) }
  body[data-page="infrastructure"] .split-2 .ai-stage { min-height: 300px !important }
}
@media (max-width: 640px) {
  /* the white hall is bright to the top of the frame: a firmer phone veil so the eyebrow and headline hold AA */
  body[data-page="infrastructure"] .hero { background-image: linear-gradient(0deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 55%, rgba(11, 19, 34, .5) 100%), linear-gradient(0deg, rgba(11, 19, 34, 0), rgba(11, 19, 34, 0)), var(--hero) }
  body[data-page="infrastructure"] .hero .lede { font-size: 1.12rem }
  body[data-page="infrastructure"] .section-lead { font-size: 1.12rem !important }
  body[data-page="infrastructure"] .three > .card .stage { min-height: 0; aspect-ratio: 3 / 2 }
  body[data-page="infrastructure"] .poster > section.machine:has(> .split-2) { padding: 3.6rem 1rem }
  body[data-page="infrastructure"] .split-2 .ai-stage { min-height: 260px !important; padding: 1rem }
  body[data-page="infrastructure"] .split-2 .ai-stage svg.scene { width: 94%; padding: .8rem .9rem .6rem }
  body[data-page="infrastructure"] .split-2 .ai-content { padding: 1.6rem 1.3rem 1.8rem }
  body[data-page="infrastructure"] ol.points { grid-template-columns: minmax(0, 1fr) }
  body[data-page="infrastructure"] ol.points li { padding: 1.5rem 1.3rem }
  body[data-page="infrastructure"] ol.points::after { min-height: 220px }
}

/* ── the close: the house band, as on Home (the call stacked on the left); the core joins it to the footer ── */
body[data-page="infrastructure"] .cta-band {
  grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2rem;
  min-height: clamp(440px, 60vh, 600px); align-content: center; margin-top: 0;
  background-image: linear-gradient(90deg, rgba(11, 19, 34, .94) 0%, rgba(11, 19, 34, .8) 40%, rgba(11, 19, 34, .3) 100%), var(--cta);
}
body[data-page="infrastructure"] .cta-band h2 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-bottom: 1rem }
body[data-page="infrastructure"] .cta-band p { font-size: 1.28rem; color: rgba(255, 255, 255, .86) }
@media (max-width: 640px) {
  body[data-page="infrastructure"] .cta-band { min-height: 0; gap: 1.6rem; padding: 4.4rem 1rem; background-image: linear-gradient(180deg, rgba(11, 19, 34, .86), rgba(11, 19, 34, .74) 55%, rgba(11, 19, 34, .9)), var(--cta) }
  body[data-page="infrastructure"] .cta-band h2 { font-size: clamp(2rem, 9vw, 2.4rem); margin-bottom: .8rem }
  body[data-page="infrastructure"] .cta-band p { font-size: 1.12rem }
}