/* ═══════════════════════════════════════════════════════════════════════════
   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),.5); }


/* ── 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. */
/* Each tile closes all four sides now, and the strip no longer draws a frame
   of its own. With border-block on .app-tiles plus one border-right per tile
   the rules ran straight across the 8px gaps, so the five read as cells in a
   single table rather than as five boxes. Four-sided tiles and no strip frame
   is what makes them individual. */
.tile{ flex:0 0 100%; scroll-snap-align:start; min-width:0;
  border: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. */
/* CONTAINED, NOT FULL-BLEED, AND EVERY TILE A CLOSED BOX (2026-11-12, by
   request: "they extend to the ends of the screen while that is not the case
   anywhere else on the homepage"). This resolves the drift SECTION-TYPES type 1
   recorded and declined to pick for us — the strip is contained.
   The padding goes on the WRAP, not on .app-tiles: the wrap holds the strip
   and its controls, so one rule pulls both off the edge and the controls stay
   aligned to the same line as the heading above. .app-tiles is width:100% of
   that reduced box, which is also the box Swiper measures, so the slide
   arithmetic follows without touching carousels.js. */
.app-tiles-wrap{ display:flex; flex-direction:column; padding-inline:var(--edge); }
/* 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); }
/* 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 photo + copy band per application ────────────────────
   Five stacked bands, each a large photograph on one side and the copy on the
   other, the photo side alternating (01 left, 02 right, 03 left, 04 right,
   05 left) via .app-fold--left / .app-fold--right; the surfaces already
   alternate dark/light. The photo sits inside the page margins (not
   end-to-end — direct feedback, 2026-11-13, after the first full-bleed
   version) at a 3:2 frame, so it reads big without filling the screen.
   Below 1024px the photo stacks on top and the copy follows. The photo is
   object-fit:cover, so each fold sets an object-position that keeps its
   subject in frame. The five photos are the commissioned set
   (assets/img/app-fold-*.webp). */
.app-fold{ display:grid; grid-template-columns:minmax(0,1fr); align-items:center;
  gap:var(--space-8); padding-inline:var(--edge); }
.app-fold-media{ margin:0; position:relative; overflow:hidden; aspect-ratio:3/2; }
.app-fold-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.app-fold-body{ display:flex; flex-direction:column; justify-content:center; gap:var(--space-4); }
.app-fold-body .gap-copy{ margin-top:var(--space-6); }
@media (min-width:1024px){
  .app-fold{ column-gap:var(--gutter-lg); }
  .app-fold--left{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
  .app-fold--right{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .app-fold--right .app-fold-media{ order:2; }
}
#border-security .app-fold-media img{ object-position:40% 50%; }
#autonomous-logistics .app-fold-media img{ object-position:38% 50%; }
#critical-infrastructure .app-fold-media img{ object-position:80% 50%; }  /* keeps the parked aircraft and the drone both in frame */
#isr .app-fold-media img{ object-position:50% 50%; }
#maritime-security .app-fold-media img{ object-position:58% 50%; }

/* 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; }