/* Dronivo General on the design system.
 * ===========================================================================
 *
 * General is a one-page router: it sends visitors on to Defence, Lawenforcement
 * and the three shops. Everything it shares with the other two sites — navbar,
 * footer, marquee, accreditations, the tag buttons — is already carried by the
 * common design layer and needs nothing here.
 *
 * What is left is the page's own two section headers. Webflow centres them
 * (`.text-align-center`) at `heading-style-h3`. All three references set their
 * section openings hard left against the gutter and let the measure of the
 * line do the work — anduril.com and terraindustries.co never centre a section
 * heading, and harmattan.ai only centres inside a card. Centred type also
 * fights the left-aligned tag buttons directly beneath it.
 */

[data-site="general"][data-mode="frontier"] .text-align-center {
  text-align: left;
}

/* The eyebrow rule the rebuilt Defence sections use: mono, tracked out, in the
   accent. Added here rather than in frontier.css because these two headers are
   plain Webflow markup with no eyebrow element of their own. */
[data-site="general"][data-mode="frontier"] .text-align-center h1::before {
  content: "//";
  color: var(--site-accent, #ffffff);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 1.25rem;
}

/* Sentence case at 500, matching .fr-h2 on the rebuilt pages. `decapitalize`
   is Webflow's own class and already on the element; this only settles the
   weight and the tracking. */
[data-site="general"][data-mode="frontier"] .text-align-center h1 {
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* The lead under each header keeps the measure the references use — a centred
   line stretched the full grid width and read as a banner. */
[data-site="general"][data-mode="frontier"] .text-align-center + *,
[data-site="general"][data-mode="frontier"] .text-align-center p {
  max-width: 46ch;
}

/* Placeholder copy the live site still carries — see lib/site-general.ts. It
   stays readable, but must not pass for finished text. */
[data-site="general"][data-mode="frontier"] [data-placeholder] {
  outline: 1px dashed var(--site-accent, #ffffff);
  outline-offset: 3px;
  opacity: 0.65;
}

/* Not done here: the rule under the hero lead. It stays centred because IX2
   animates it — `.divider_white` carries a data-w-id and the interaction
   writes its width as an inline style, which no stylesheet can outrank. Moving
   it flush left means changing the interaction in Webflow or replacing the
   element, not adding CSS. Left as it is rather than shipping rules that look
   like they do something. */

/* No sand on this site. Two paths carry it besides --site-accent: Webflow's own
   `--colors--brand-yellow`, which the compiled sheet uses for the marquee and
   the accreditations panel, and navbar.css, which derives --site-accent from
   that same primitive. Both are pinned here so the token cannot leak back in
   through a block that predates the design system. */
[data-site="general"] {
  --_primitives---colors--brand-yellow: #ffffff;
  --site-accent: #ffffff;
}

[data-site="general"] .navbar {
  --site-accent: #ffffff;
}

/* The hero's three routing tiles.
 * ===========================================================================
 *
 * The markup is Webflow's own, lifted out of the scrape so that IX2 keeps
 * driving the hover — the card squaring off, and the label's two-line bounce.
 * Re-authoring it would have looked identical at rest and done nothing on
 * hover, which is the part that was asked for.
 *
 * What changes is the dressing. The original sits on a 1.25rem radius, which
 * is the one shape the design system does not use anywhere; the gesture is
 * kept but restated at 2px, so hovering still squares the card off — just from
 * a corner the rest of the site actually has.
 */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles {
  margin-top: 2.5rem;
}

[data-site="general"][data-mode="frontier"] .div-block-10 {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

/* 2px at rest, square on hover — the reference sites' corner, the original's
   gesture. `is-left` carried the rounded pair on the first card only. */
[data-site="general"][data-mode="frontier"] .card,
[data-site="general"][data-mode="frontier"] .card.is-left {
  border-radius: 2px;
  overflow: hidden;
  transition: border-radius 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-site="general"][data-mode="frontier"] .card:hover,
[data-site="general"][data-mode="frontier"] .card.is-left:hover {
  border-radius: 0;
}

/* The scrim: the original fades from 25% up, which left the label sitting on
   whatever the photograph happened to be. The references run a deeper, longer
   gradient so the type has a ground of its own. */
[data-site="general"][data-mode="frontier"] .card-shade {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.18) 45%, transparent 72%);
}

/* The label sits bottom-left against the gutter, not centred — the same place
   the tile captions sit on the rebuilt pages. */
[data-site="general"][data-mode="frontier"] .card-content {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.75rem;
}

/* The scraped grid brings no width of its own — on the live site it sat inside
   a Webflow container. Here it is given the page container and a landscape
   ratio: the source images are 437x711 portraits, which at a third of the grid
   each ran taller than the viewport and pushed the rest of the page below the
   fold. The references keep a routing row to roughly 4:3. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card {
  aspect-ratio: 4 / 3;
  align-self: auto;
  /* `.card { flex: 0 auto }` left each one at the image's intrinsic 437px, so
     the three sat with 33px of slack between them instead of the 2px seam the
     rest of the site uses. */
  width: 100%;
}

/* Sub-brand wordmarks inside the hero tiles: hidden, not deleted. The scrape's
   mapping is wrong (see withTileNames in lib/site-general.ts) and the marks
   carry the blue and the sand. Delete this rule to bring a corrected set back. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card-content img {
  display: none;
}

/* The division name, in the system's own type. */
[data-site="general"][data-mode="frontier"] .fr-tile-name {
  color: #fff;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
}

/* The original button is a full-width bar inside the card. The references keep
   this a tag: it sits with the label, not across the tile. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .button {
  align-self: flex-start;
  width: auto;
}

/* buttons.css stretches the Webflow pill to fill its parent, which inside a
   tile turns it into a bar across the whole card. Inside the hero tiles it has
   to stay a tag sitting next to the label. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card-content .button,
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .button-inner-wrap {
  width: auto;
  max-width: max-content;
  align-self: flex-start;
  margin: 0;
}

/* The middle tile nests its button one level deeper than the other two, so the
   flex-start above landed on a wrapper that was itself centred. Set on the
   column instead, where it applies to whatever depth each card happens to use. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card-content > * {
  align-self: flex-start;
}

/* The original pins the button to the card's bottom edge, which is how it was
   a full-width bar. Back into the flow, so it sits inside the padding on the
   same left edge as the label above it. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card-content .button,
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card-content .button-inner-wrap,
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card-content > div {
  position: static;
  inset: auto;
}

/* !important, and only here: on the middle tile IX2 writes position and width
   onto the button as an inline style, which no ordinary rule can outrank. The
   other two tiles are unaffected — they resolve from the rules above. */
/* The middle tile hangs its button directly off `.card`, outside
   `.card-content` — Webflow markup, inconsistent between the three. Both
   parents are addressed so the row aligns regardless of which one a tile uses.
   !important because IX2 writes position and width inline. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card-content > .button {
  position: static !important;
  width: max-content !important;
  align-self: flex-start;
  margin: 0;
}

/* Only the tile that hangs its button off the card needs the gutter; the two
   that keep it inside .card-content already sit within that padding. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card > .button {
  position: absolute !important;
  z-index: 4;
  left: 1.75rem;
  right: auto;
  bottom: 1.75rem;
  width: max-content !important;
  margin: 0;
}

/* Reverting the card to flex broke the overlay — the image and the label
   stacked instead of layering — so the odd tile's button is placed instead of
   reflowed: same corner, same gutter as the two that sit inside .card-content. */

/* On the tile whose button is placed rather than in the flow, the label has to
   make room for it — otherwise the two land on the same baseline. */
[data-site="general"][data-mode="frontier"] .fr-hero-tiles .card:has(> .button) .card-content {
  padding-bottom: 4.75rem;
}