/* ═══════════════════════════════════════════════════════════════════════════
   DRIIF — APPLICATIONS page-specific layout only.
   Copy is drawn from the user's reference document for this page (hero,
   mission filmstrip card list, five detail folds, closing CTA); everything
   below is built from the site's own existing component vocabulary —
   .hero-grid, .problem-resolve/.pic-media/.gap-copy/.copy-list,
   .app-tiles-wrap/.tile/.tile-idx/.tile-cap, .cta-band — rather than the
   reference document's own markup/CSS, which was supplied strictly for copy.
   Note on .tile: its hover behaviour (motion.css) and its filmstrip sizing
   (home.css) are both shared files/rules, but .tile's own visual box —
   position, aspect-ratio, background, the index/caption placement — is
   declared only in home.css, which loads on index.html alone. Rather than
   link the whole of home.css here (pulling in a page's worth of unrelated
   homepage-only rules just for one component), the visual-box rules are
   reproduced below, verbatim, under the same .tile/.tile-idx/.tile-cap
   selectors — same technique .problem-resolve already uses by living in
   components.css instead of nexus.css, just done locally here since .tile
   itself never made that move.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── HERO: darker scrim than the shared default ──────────────────────────
   .media-scrim's default (--scrim-45, components.css) is tuned for the
   generally calm, low-contrast hero photos the other pages use. This
   page's hero (app-header.webp) is a bright, detail-dense UAV ISR feed —
   white telemetry readouts, a lit terrain map, camera tiles — and at 45%
   black the hero-side lead paragraph was landing right over some of that
   busy detail with too little separation to read comfortably. Scoped to
   this page's hero only (#top), rather than raising .media-scrim's own
   default and darkening every other page's hero along with it. */
#top .media-scrim{ background:rgba(var(--rgb-black),.65); }


/* ── TILE: visual box, reproduced from home.css (see note above) ────────────
   Every declaration below is copied as-is from home.css's own .tile/.tile-idx/
   .tile-cap/MEDIA PLACEMENT rules — nothing here is a mission-grid invention,
   so a future change to the homepage's tile look only stays in sync if this
   copy is updated alongside it. */
.tile{ flex:0 0 100%; scroll-snap-align:start; min-width:0;
  border-right:var(--hair) solid var(--color-border-subtle); }
.tile:first-child{ border-left:var(--hair) solid var(--color-border-subtle); }
@media (min-width:1024px){ .tile{ flex-basis:33.3333%; } }
.tile{ position:relative; overflow:hidden; background:var(--color-bg);
  aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--space-5);
  color:var(--color-text);
  transition:background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.tile h3, .tile p, .tile .tile-idx{ transition:color var(--dur-ui) var(--ease-out); }
.tile-idx{ top:var(--space-5); left:var(--space-5); }
.tile-cap{
  position:relative; z-index:1;
  margin:0 calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  padding:var(--space-4) var(--space-5) var(--space-5);
  background:var(--color-bg);
  border-top:var(--hair) solid var(--color-border-subtle);
  transition:background var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out);
}
.tile h3{ margin-bottom:var(--space-2); }
/* Same fixed-lines trick as home.css's own .tile-cap h3 (kept in sync with
   it, per this file's copy-in-sync note above): .tile-cap grows upward from
   the tile's bottom edge, so a heading that wraps to one line made a
   shorter caption band than one that wraps to two, and the border-top
   divider between image and caption sat at a different height per tile
   instead of reading as one aligned line across the row. Reserving two
   lines' worth of height on the heading keeps every tile's caption band —
   and so the divider — the same height regardless of how its own title
   wraps. */
.tile-cap h3{ min-height:calc(var(--text-h3) * var(--lh-snug) * 2); }
.tile-cap .t-label{ line-height:1.4; }
.tile > .media{ z-index:0; }
.tile > *:not(.media):not(.tile-idx){ position:relative; z-index:1; }
.tile > .tile-idx{ position:absolute; z-index:2; }
.tile .media img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center;
  transform:scale(.86); transform-origin:center;
  transition:transform var(--dur-ui) var(--ease-out); }
.tile--isr .media img{ transform:scale(.86) rotate(-20deg); }
.tile--isr:hover .media img{ transform:scale(1) rotate(-20deg); }
.tile .tile-cap{ z-index:2; }
.tile .tile-static, .tile .tile-hover{ transition:opacity var(--dur-ui) var(--ease-out); }
.tile .tile-hover{ opacity:0; }


/* ── MISSION FILMSTRIP: same edge-to-edge, arrows-below strip as the homepage ─
   Reused verbatim from home.css's own #applications section — the exact
   .app-tiles-wrap/.app-tiles/#app-tiles/.app-tiles-controls/
   .app-tiles-scroll-btn markup and behaviour (carousels.js binds by id
   (id="app-tiles") globally, so it picks this page up for free, no JS
   change needed). Reproduced here rather than linking home.css for the same
   reason .tile's visual box above is: home.css is index.html-only and
   carries a page's worth of unrelated rules alongside this one component.
   Scoped to #missions instead of home.css's #applications — this page's
   own section id — everything else is identical, arrows-below layout and
   Swiper fallback included. */
.app-tiles-wrap{ display:flex; flex-direction:column; }
/* width:100% is load-bearing here too — see home.css's #applications block
   for the full explanation (Swiper's auto cross-axis margins otherwise
   override this flex-column wrap's stretch alignment). */
.app-tiles{ width:100%; margin-top:var(--section-y-sm);
  border-block:var(--hair) solid var(--color-border-subtle); }
/* FALLBACK: if Swiper's vendor file didn't load, carousels.js never flips
   .swiper-initialized on and this strip needs to still be a strip — the
   exact scroll-snap rules this used to carry unconditionally, now scoped so
   they only engage in that failure case instead of fighting Swiper's own
   layout the rest of the time. */
.app-tiles:not(.swiper-initialized){ display:flex; flex-wrap:nowrap;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; }
.app-tiles:not(.swiper-initialized)::-webkit-scrollbar{ display:none; }
/* Right-aligned rather than centred — same treatment as home.css's own
   #applications controls below its tile strip. */
/* The row itself is .strip-controls in components.css now (one component,
   was three identical copies). Only genuinely local rules stay here. */
/* The prev/next pair is .strip-btn in components.css now — one filled
   component instead of this same block pasted into four page stylesheets.
   Nothing page-specific remains: #missions .app-tiles-scroll-btn carried no rule
   the other three did not carry identically. Positioning stays local (the
   *-controls rule above); the button's own look does not. */


/* ── DETAIL FOLDS: one .problem-resolve per application ─────────────────────
   Five stacked instances of the same image-left/copy-right pattern the
   Counter-UAS Challenge section (nexus.html) already established for
   "one supporting image + a lede + a feature list" — reused as-is, right
   down to letting .gap-copy's own column width bound the lede rather than
   adding a redundant max-width (components.css's own note on .problem-resolve
   already explains why the 28ch cap is for a bare heading only). No new
   layout at all here — reused rather than a new alternating-side pattern,
   since no page on the site alternates that layout and this page has no
   reason to be the first. Each fold's own .eyebrow is a plain "NN/05" —
   this fold's position out of five, updating per fold — rather than the
   descriptive "NN — Label" shape used elsewhere on the site (e.g. the
   homepage's own "05 — Applications"), per direct request. Each .pic-media
   now holds one of the five commissioned photos (assets/img/app-fold-*.webp)
   instead of the home-tile renders it launched with. */

/* Fold ledes ("Monitor the perimeter, airspace and critical assets from a
   unified view." etc.) break to more lines sooner — direct request; they
   ran far too wide across the right column. A ch cap on the five fold
   .t-h2 ledes only, with text-wrap:balance so the lines come out even
   rather than leaving a one-word orphan. Headings stay as they were.
   36ch (up from 20ch, which gave three lines) is sized so the longest of
   the five ledes (~77 chars) lands on exactly two balanced lines. */
.app-fold .gap-copy > .t-h2{ max-width:36ch; text-wrap:balance; }