/* Page tail — dark ground ----------------------------------------------------
 *
 * The page split in half: hero, capability browser, process and the offer grid
 * on #010101/#151515, then everything from the logo wall down on #f2f2f2. Both
 * dark references close on the ground they opened on (harmattan.ai footer
 * #0C0C0C, anduril.com transparent over black); the one light reference, Terra,
 * is the theme the design system explicitly did not take.
 *
 * So the tail is flipped. This has to cover *all* of it — flipping only the
 * three blocks that were asked for would leave the light tabs and CTA stranded
 * between them and chop the page ending into stripes.
 *
 * Own file so a re-scrape of dronivo.css cannot overwrite it.
 */

.section_home-marquee,
.section_acreditations-home,
.home_section-tabs,
.section_home-cta,
.footer_component {
  --tail-bg: #0b0b0b;
  --tail-fg: #ffffff;
  --tail-muted: rgba(255, 255, 255, 0.62);
  --tail-line: rgba(255, 255, 255, 0.14);
  background-color: var(--tail-bg);
  color: var(--tail-fg);
}

/* The Webflow blocks below set their ink against a light ground in a dozen
   places. Rather than chase each rule, the ink is reset at the top of each
   block and the exceptions are listed under it. */
.home_section-tabs :is(h1, h2, h3, h4, p, div, span, a, li),
.section_home-cta :is(h1, h2, h3, h4, p, div, span, li) {
  color: inherit;
}

.home_section-tabs .text-color-opacity,
.section_home-cta .text-color-opacity,
.home_section-tabs p,
.section_home-cta p {
  color: var(--tail-muted);
}

/* Taglines were black-on-light; on the dark ground they take the brand sand,
   as every other label on the rebuilt pages does. */
.home_section-tabs .text-style-tagline.text-color-black,
.section_home-cta .text-style-tagline.text-color-black,
.section_home-marquee .text-style-tagline.text-color-black {
  color: var(--site-accent, #c4b798);
}

/* Hairlines instead of the light-ground dividers. */
.home_section-tabs .divider_white,
.section_home-cta .divider_white {
  background-color: var(--tail-line);
}

/* The site's primary button is dark-on-light; inverted here so it stays the
   filled one, exactly as the framed hero's CTA does. */
.home_section-tabs .button,
.section_home-cta .button {
  background-color: #fff;
  border-color: #fff;
  color: #0b0b0b;
}

.home_section-tabs .button:hover,
.section_home-cta .button:hover {
  background-color: transparent;
  color: #fff;
}

/* --- Spacing and radius fixes ---------------------------------------------
 *
 * Scoped like the rest of the rebuild: the second ported site is served
 * verbatim and must not pick these up.
 */

/* The CTA box ended flush against the footer — measured, 0px between them, and
   the section carries no padding of its own to give it any. It is a bordered
   panel, so it needs air under it or it reads as part of the footer. */
[data-mode="frontier"] .section_home-cta {
  padding-bottom: var(--fr-section-tight, clamp(3rem, 5vw, 4.5rem));
}

/* Events sat 1px apart, and the item's own border was a 1px *left* edge in
   black — invisible on #0b0b0b. Each entry now carries its own hairline box
   with a real gap between them, so the break between one event and the next is
   legible.

   The list itself has to stop being the line for that to work: Webflow fills it
   with the hairline colour and lets 1px gaps between the items show through —
   the same "the gap is the line" trick .fr-cards uses. Widening the gap without
   clearing the fill just turned that hairline into a 16px grey band. */
[data-mode="frontier"] .home_section-tabs .collection-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: transparent;
  border: 0;
}

[data-mode="frontier"] .home_section-tabs .event_item {
  border: 1px solid var(--tail-line);
  border-radius: var(--fr-radius, 2px);
}

/* Name left, the facts right. Stacked in one column the card ran 348px tall and
   used barely half its 624px width — everything queued down the left edge while
   the right half stayed empty.
   
   The heading spans the three rows in column one, so the three date rows
   auto-place into column two beside it; the button lands in the row below the
   heading. No per-row placement, so re-ordering the fields in the CMS cannot
   put a row in the wrong cell. */
[data-mode="frontier"] .home_section-tabs .event_item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  align-content: start;
}

[data-mode="frontier"] .home_section-tabs .event_item > div:first-child {
  grid-column: 1;
  grid-row: 1;
}

/* Stretched to the column. They were only as wide as their own text, so the
   hairline over each one ended at a different place — 145, 149 and 134px — and
   read as three ragged rules rather than a table. */
[data-mode="frontier"] .home_section-tabs .event_item > .event_date-wrapper {
  grid-column: 2;
  width: 100%;
}

/* The eyebrow was centred over a left-aligned title — `align-items: center` on
   the wrapper, which centres each child on its own width. It sat 103px in from
   the title's own left edge. */
[data-mode="frontier"] .home_section-tabs .event_heading-wrapper {
  align-items: flex-start;
}

/* Row 2, directly under the name — it used to sit in row 4 while the heading
   spanned rows 1-3, which parked it below all three date rows and left ~100px
   of nothing between the title and the button.
   
   `justify-self: start` is the important half: as a stretched grid item the
   wrapper was 259px wide, and the button inside it is a block-level flex
   container, so it stretched to 243px against 152px of content. That is what
   pulled the label and the arrow apart — the two halves are meant to sit
   against each other. */
[data-mode="frontier"] .home_section-tabs .event_item > .margin-top {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
}

/* 20px, the only element in the tail still rounded to the Webflow original.
   Everything around it — the collection list, the buttons, the CTA panel — is
   already on the system's 2px. */
[data-mode="frontier"] .home_section-tabs .tab_image {
  border-radius: var(--fr-radius, 2px);
}

/* --- The block as one composition ------------------------------------------
 *
 * "Upcoming:" was a full-width row of its own with 80px under it, and the
 * picture began level with the first card — so the heading had nothing beside
 * it and nothing under it, and read as though it belonged to no section at
 * all. Measured: heading at y+60, cards at y+194, 134px of nothing between.
 *
 * The fix is one grid over the whole block instead of a heading stacked on a
 * two-column row: heading top-left, cards under it, picture spanning both rows
 * on the right. The picture now starts at the heading's cap height and runs to
 * the foot of the last card, which is what ties the three pieces together.
 *
 * `display: contents` on .home_events is what makes that possible without
 * touching the markup — the list and the picture become items of the outer
 * grid, so the picture can span a row the heading is in while still living
 * inside the block Webflow wrote. */
[data-mode="frontier"] .home_section-tabs .padding-global {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

[data-mode="frontier"] .home_section-tabs .home_events {
  display: contents;
}

/* The heading row. Its 80px bottom margin was set for a full-width heading and
   is far too much once the cards sit directly beneath it. */
[data-mode="frontier"] .home_section-tabs .padding-global > .margin-bottom {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

[data-mode="frontier"] .home_section-tabs .home_events > div:first-child {
  grid-column: 1;
  grid-row: 2;
}

[data-mode="frontier"] .home_section-tabs .animation_wrapper {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  height: 100%;
}

/* The picture carries fixed 616x640 attributes, so it has to be told to fill
   the taller box rather than keep its own proportions. */
[data-mode="frontier"] .home_section-tabs .tab_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The heading, given the block it belongs to. Everywhere else on the rebuilt
   pages a section opens with the mono eyebrow; this one opened with a bare h2
   and a colon, which is most of why it read as orphaned. */
[data-mode="frontier"] .home_section-tabs .padding-global > .margin-bottom > div::before {
  content: "// Events";
  display: block;
  margin-bottom: 0.875rem;
  color: var(--site-accent, #c4b798);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 991px) {
  /* Back to one column: the picture goes under the cards rather than beside
     them, and stops spanning a row that no longer exists. */
  [data-mode="frontier"] .home_section-tabs .padding-global {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-mode="frontier"] .home_section-tabs .animation_wrapper {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-top: 2rem;
  }
}

/* The card itself, on a phone.
 *
 * Name left / facts right is a desktop reading: at 390px it gave two 134px
 * columns, which put "Ger, Ludwigshafen" and "17.–19. August 2026" on two lines
 * each and broke "LEARN MORE" across the button. One column, in the order the
 * information is actually read. */
@media (max-width: 767px) {
  [data-mode="frontier"] .home_section-tabs .event_item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
    padding: 1.5rem;
  }
  /* Every explicit placement is handed back to auto-flow, which lays the
     children out in DOM order — name, the three facts, then the action. That
     is already the order to read them in, so nothing needs positioning.

     `grid-row: auto` rather than a large row number: the first attempt parked
     the button on row 99 to push it last, and the 1.25rem row-gap then applied
     to all 95 empty rows in between. The card grew by ~1900px and the page
     went from 6943 to 10944. */
  [data-mode="frontier"] .home_section-tabs .event_item > div:first-child,
  [data-mode="frontier"] .home_section-tabs .event_item > .event_date-wrapper,
  [data-mode="frontier"] .home_section-tabs .event_item > .margin-top {
    grid-column: 1;
    grid-row: auto;
  }
  [data-mode="frontier"] .home_section-tabs .event_item > .margin-top {
    margin-top: 0.25rem;
  }
}