/* ==========================================================================
   FRONTGRADE  ·  fg2 CAPABILITY
   The capability template's own layer. Everything here was authored as the
   page-local <style> block of the capability comp and is carried over
   unchanged apart from its indentation; no rule in tokens.css or
   components.css is redefined, and every colour is a token.
   Requires tokens.css and components.css to be loaded first.
   ========================================================================== */

/* ==========================================================================
   PAGE-LOCAL STYLES  ·  capability template
   Only what the shared kit does not already carry. No kit value is
   redefined here: every colour is a token, and every new pair carries its
   computed WCAG 2.1 ratio, derived the same way as tokens.css.
   ========================================================================== */

/* --- Breadcrumb ----------------------------------------------------------
   Sits in the hero copy column, over the media-band scrim. Measured against
   the worst case that scrim can produce (0.90 ink over the lightest point
   the placeholder well can reach, composited backdrop #0d0f17):
     --text-muted    5.45:1  AA   links and separators
     --text-primary 15.87:1  AAA  current page
   An 11px label plus 7px padding-block gives a 29px hit area.             */
.cap-crumbs { margin-bottom: var(--space-6); }
.cap-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  letter-spacing: var(--ls-chip);
}
.cap-crumbs li { display: inline-flex; align-items: center; gap: var(--space-3); }
.cap-crumbs li + li::before { content: "/"; color: var(--text-muted); }
.cap-crumbs a,
.cap-crumbs [aria-current="page"] {
  display: inline-block;
  padding-block: 7px;
  text-decoration: none;
}
.cap-crumbs a { color: var(--text-muted); transition: var(--t-color); }
.cap-crumbs a:hover { color: var(--text-primary); }
.cap-crumbs [aria-current="page"] { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* --- Two blocks inside one band ------------------------------------------
   v2 groups related blocks under one band and separates them with space
   rather than a second band, so the page reads as hairline-ruled sections
   instead of alternating panels.                                           */
.cap-stack { display: grid; gap: clamp(48px, 2.4rem + 3vw, 72px); }

/* --- Enablement tile -----------------------------------------------------
   The kit tile plus the v2 icon pattern: a thin-line glyph inside a 40px
   hairline square. Hover lifts the tile one step on the surface ladder,
   --surface-raised to --surface-panel:
     --text-primary on --surface-panel 14.55:1  AAA  title
     --text-muted   on --surface-panel  4.99:1  AA   descriptor
   The icon square keeps its own --surface-base fill, so the orange stroke
   holds 5.22:1 in both states against a 3:1 non-text minimum.             */
.cap-tile { gap: var(--space-5); }
.cap-tile .fg-icon-square { align-self: flex-start; }
.cap-tile:hover { background: var(--surface-panel); border-color: var(--border-hairline-strong); }
.cap-tile:hover .fg-icon-square { border-color: var(--border-accent); }

/* --- Real media in the hero band well ------------------------------------
   Takes the place of the placeholder component in the hero well. Absolute
   fill, so the image sits under the band's scrim (z-index 1) and copy
   column (z-index 2) exactly where the placeholder sat; z-index stays auto
   here, so no stacking context forms. The image is a backdrop beneath copy
   that already carries the whole message, so it is decorative and takes an
   empty alt.                                                              */
.cap-media { position: absolute; inset: 0; overflow: hidden; }
.cap-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Current-page marker -------------------------------------------------
   aria-current="page" belongs on the links that ARE this page: the
   Microelectronics item in the Capabilities dropdown (cloned into the
   mobile panel by motion.js) and the Microelectronics entry in the footer.
   The Capabilities disclosure trigger is not a link to this page, so it
   does not carry the attribute. Both states pair colour with a second cue.
     --accent on --surface-raised, the dropdown card          4.98:1  AA
     --accent on that card under the white/0.04 hover         4.56:1  AA
     --accent on --surface-base, the footer                   5.22:1  AA   */
.fg-menu-item[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
.fg-menu-item[aria-current="page"] .fg-menu-item__title { color: var(--accent); }
.fg-footer__link[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}


/* --------------------------------------------------------------------------
   THE ALTERNATING GROUND, AND THE SURFACE STEP IT FORCES

   The capability pages carried the same finding as the mission pages: one
   background value, rgb(9,12,20), across all four bands on all four pages,
   separated only by a hairline. The first content band now takes
   --surface-raised, the same alternate the two document pages already use,
   so the sequence from the pagehead down is base, raised, base, base and the
   two content bands no longer read as one column.

   The rule below is the mission stylesheet's rule, restated here rather than
   shared, because the two families load different stylesheets and the one
   file both of them load is not this layer's to write in. The reasoning is
   the same and is written out in full at the foot of mission.css: a card, a
   tile and a stat block are all drawn on --surface-raised, so on a raised
   band they would be the band's own colour and the grids would flatten. They
   step to --surface-panel, which keeps each component exactly one surface
   above whatever ground it sits on.
   -------------------------------------------------------------------------- */

.fg-page > .fg-band--raised :is(.fg-card, .fg-tile, .fg-stat-block) {
  background: var(--surface-panel);
}

.fg-page > .fg-band--raised .cap-tile:hover { background: var(--surface-elevated); }