/* Framed hero variant ------------------------------------------------------
 *
 * Gilt auch fuer Lawenforcement: dessen Webflow-Projekt traegt dieselbe
 * Struktur unter verschobenen Klassennamen (section_home-hero-2,
 * hero_overlay-4, div-block-21/22, bounce-btn-2) — die :is()-Listen unten
 * decken beide Seiten ab, Kundenwunsch 09/2026: "genau das Layout der
 * Defence, mit Lawenforcement-Inhalten".
 *
 * An alternative hero layout modelled on the structure of anduril.com, kept
 * behind a switch so it can be compared against the current one:
 *
 *     /?hero=framed     framed variant
 *     /                 current hero (unchanged)
 *
 * Everything below is scoped to [data-hero="framed"] AND to .section_home-hero.
 * The second half matters: every subpage carries .img_hero, .hero_overlay and
 * .hero-content-wrapper inside its own .section_service-hero, so rules keyed
 * only on those classes inset every hero on the site and expose Webflow's
 * "Background Image" placeholder around them. That is what happened when the
 * framed variant stopped being opt-in and became the default.
 *
 * Measured off anduril.com at 1512x950 (verify/_ref.mjs, since removed):
 *   .mediaWrapper   padding: 0 32.6px    -> media is inset, not full-bleed
 *   video           border-radius: 2px
 *   video rect      1447x912 inside 1512x950
 *   :root           --theme-color-background: #010101
 *   headline        centred, uppercase, leading roughly 0.95
 *
 * The typeface needs no substitution: the site already loads Neue Haas Grotesk
 * Display Pro, which is the same Helvetica lineage as Anduril's Helvetica Now
 * Display.
 */

[data-hero="framed"] {
  --hero-gutter: 32px; /* Anduril: 32.6px */
  /* Bottom edge of .navbar — see --site-header-bottom in navbar.css. */
  --hero-frame-top: var(--site-header-bottom, 111px);
  --hero-radius: 2px;
  --hero-pad: 2.25rem; /* inner padding: content to frame edge */
}

/* The section becomes the black surround the framed media sits in. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) {
  background-color: #010101;
  padding-top: var(--hero-frame-top);
  padding-bottom: var(--hero-gutter);
  padding-left: var(--hero-gutter);
  padding-right: var(--hero-gutter);
}

/* Media and scrim are inset by the gutter instead of bleeding to the edges.
   The top inset clears the navbar, so it sits on solid black exactly as
   Anduril's does rather than floating over the footage. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .img_hero,
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .video_hero,
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) :is(.hero_overlay, .hero_overlay-4) {
  top: var(--hero-frame-top);
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  bottom: var(--hero-gutter);
  /* Sized explicitly rather than left to `inset`: <video> and <img> are
     replaced elements, so `width: auto` resolves to their intrinsic size
     (1920x1080) instead of the box the offsets describe. Percentages here
     resolve against the section's padding box, i.e. the full 1512x950. */
  width: calc(100% - 2 * var(--hero-gutter));
  height: calc(100% - var(--hero-frame-top) - var(--hero-gutter));
  border-radius: var(--hero-radius);
}

/* Anduril runs no scrim at all — their footage is uniformly mid-tone. This
   trailer is not: several shots are near-white sky. So the variant keeps one,
   weighted for where the copy actually sits: light across the top two thirds so
   the footage stays open, ramping up over the bottom third that carries the
   headline, paragraph and button. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .video_hero.is-ready + :is(.hero_overlay, .hero_overlay-4) {
  background-image: linear-gradient(
    180deg,
    rgba(6, 6, 6, 0.28) 0%,
    rgba(6, 6, 6, 0.26) 34%,
    rgba(6, 6, 6, 0.44) 55%,
    rgba(6, 6, 6, 0.68) 78%,
    rgba(6, 6, 6, 0.82) 100%
  );
}

/* Content is anchored to the bottom-left corner *inside* the framed media,
   held off the frame edge by --hero-pad so it never sits flush against it. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) > .container-large {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: var(--hero-pad);
  padding-left: var(--hero-pad);
  padding-right: var(--hero-pad);
}

/* Must not stretch, or the bottom alignment inside .container-large does
   nothing. Its two children — the heading block and :is(.div-block-9, .div-block-21) (the button)
   — are pushed to opposite ends and share a common bottom edge. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .hero-content-wrapper {
  flex: 0 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  height: auto;
  text-align: left;
  /* A hairline across the full frame width turns headline and button into one
     deliberate bottom row instead of two elements drifting apart in opposite
     corners. */
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

/* The button column must not be squeezed by a long heading. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .hero-content-wrapper > :is(.div-block-9, .div-block-21) {
  flex: 0 0 auto;
}

/* Paring the hero back to headline + one action: the standfirst goes. It stays
   in the DOM rather than being removed from the markup, so switching the
   variant off restores it. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .hero_paragrap-wrapper {
  display: none;
}

/* Two moves: leading tightened from 1.2 to 0.95 so the lines lock together as
   one block, and the size cut from Webflow's 100px. At 100px the headline
   filled two thirds of the frame and left the composition bottom-heavy; at
   ~64px the footage carries the hero and the type reads as an anchor. The 18ch
   measure is what breaks it into two balanced lines. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) h1 {
  font-size: clamp(2.25rem, 4.2vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  max-width: 18ch;
}

[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) :is(.div-block-9, .div-block-21) {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}

/* One button only: the "Solutions & Services" CTA. Webflow ships two more
   "Learn more" bounce buttons — one pinned bottom-right (.div-block-5), one
   mobile-only inside :is(.div-block-9, .div-block-21) — and both are dropped here. .div-block-5 is
   also a flex child of the section, so it has to go out of flow entirely,
   otherwise it still reserves its row and the text stops short of the bottom. */
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .div-block-5,
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .div-block-22,
[data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) :is(.bounce-btn, .bounce-btn-2) {
  display: none;
}

@media (max-width: 991px) {
  [data-hero="framed"] {
    --hero-gutter: 16px;
    --hero-pad: 1.5rem;
  }
  [data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) h1 {
    max-width: none;
  }
  /* Side by side there is no room left for the heading at this width, so the
     button drops below it — still bottom-right of the frame. */
  [data-hero="framed"] :is(.section_home-hero, .section_home-hero-2) .hero-content-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
}