/* aiforce.army — what every route needs.
 *
 * Loaded on all twelve pages, above the page's own stylesheet. It holds the chrome the
 * router and the navigation depend on (the progress bar, the footer index, the drawer
 * groups) and the one page-level component that more than one route uses: the section
 * banner. Everything reusable lives in css/aiforce.css and is not touched here.
 */

/* --------------------------------------------------------------------------
   Router progress
   A 2px brass rule under the masthead, shown only once a fetch has taken longer
   than 200ms. Under prefers-reduced-motion the router never adds .is-on at all,
   and the rule below removes the travel as well.
   -------------------------------------------------------------------------- */

.rt-progress {
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--bw));
  height: 2px;
  width: 0;
  background: var(--c-brass);
  opacity: 0;
  pointer-events: none;
}

.rt-progress.is-on {
  opacity: 1;
  animation: rt-progress-travel 8s var(--ease) forwards;
}

@keyframes rt-progress-travel {
  0% {
    width: 0;
  }
  40% {
    width: 62%;
  }
  100% {
    width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-progress,
  .rt-progress.is-on {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Section banners
   The hero-banner treatment at section scale: shorter, with the heading in the left
   third where every plate in the second batch is calm. object-position is per plate,
   checked at 375px, as design/DESIGN.md requires. --lead is the variant used when the
   banner opens a page and there is no section above it.
   -------------------------------------------------------------------------- */

.rt-band {
  min-height: clamp(300px, 46vw, 420px);
  border-top: var(--bw) solid var(--c-line-brass);
  margin-top: var(--section-y);
}

.rt-band--lead {
  margin-top: 0;
  border-top: 0;
}

/* A section band opens on the ribbon it closes on. */
.rt-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background-image: var(--orn-ribbon);
  pointer-events: none;
  z-index: 1;
}

.rt-band .aif-hero-banner__inner {
  padding-block: var(--s-7) var(--s-6);
}

.rt-band .aif-display-2 {
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

.rt-band--signal .aif-hero-banner__img {
  object-position: 66% 50%;
}

.rt-band--foundry .aif-hero-banner__img {
  object-position: 62% 58%;
}

.rt-band--chair .aif-hero-banner__img {
  object-position: 70% 62%;
}

.rt-band--recruiting .aif-hero-banner__img {
  object-position: 34% 50%;
}

.rt-band--parade .aif-hero-banner__img {
  object-position: 38% 50%;
}

.rt-band--gpu .aif-hero-banner__img {
  object-position: 56% 50%;
}

.rt-band--abundance .aif-hero-banner__img {
  object-position: 60% 50%;
}

.rt-band--handshake .aif-hero-banner__img {
  object-position: 50% 50%;
}

.rt-band--works-v2 .aif-hero-banner__img {
  object-position: 62% 50%;
}

.rt-band--chair-v2 .aif-hero-banner__img {
  object-position: 72% 50%;
}

.rt-band--terafab-parade .aif-hero-banner__img {
  object-position: 62% 50%;
}

.rt-band--terafab .aif-hero-banner__img {
  object-position: 50% 50%;
}

@media (min-width: 860px) {
  .rt-band .aif-hero-banner__inner {
    max-width: 34rem;
    /* The wrap centres itself; a banner's copy belongs on the left third, over the
       calm part of the plate. */
    margin-inline: 0;
  }

  .rt-band--signal .aif-hero-banner__img {
    object-position: 50% 46%;
  }

  .rt-band--foundry .aif-hero-banner__img {
    object-position: 50% 56%;
  }

  .rt-band--chair .aif-hero-banner__img {
    object-position: 54% 58%;
  }

  .rt-band--recruiting .aif-hero-banner__img {
    object-position: 50% 42%;
  }

  .rt-band--parade .aif-hero-banner__img {
    object-position: 50% 46%;
  }

  .rt-band--gpu .aif-hero-banner__img {
    object-position: 50% 40%;
  }

  .rt-band--abundance .aif-hero-banner__img {
    object-position: 50% 42%;
  }

  .rt-band--handshake .aif-hero-banner__img {
    object-position: 50% 55%;
  }

  .rt-band--works-v2 .aif-hero-banner__img {
    object-position: 50% 65%;
  }

  .rt-band--chair-v2 .aif-hero-banner__img {
    object-position: 50% 55%;
  }

  .rt-band--terafab-parade .aif-hero-banner__img {
    object-position: 50% 48%;
  }

  .rt-band--terafab .aif-hero-banner__img {
    object-position: 50% 62%;
  }
}

/* A closing row of onward links, common to several routes. */
.rt-onward {
  margin-top: var(--s-7);
}

/* Mission: the six standing orders as cards, three across, between the lede and the
   closing paragraph. */
.ms-orders {
  margin-block: var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
   The drawer
   Below 720px the masthead's links collapse behind the toggle.
   -------------------------------------------------------------------------- */

@media (max-width: 719px) {
  .aif-masthead[data-nav="ready"] .aif-nav {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

}