/* ==========================================================================
   Homepage sections.
   Requires tokens.css, typography.css, layout.css, and components.css.
   ========================================================================== */


/* ---------- Hero ----------

   Layers, back to front: terrain image, circle, radar render, text.

   Desktop (901px+)
   - Headline and intro in columns 1–6; the square terrain image in columns
     7–12, bleeding to the right frame line and running the full height.
   - The radar render is anchored to the bottom-right corner. It overhangs the
     text column slightly and rises above the section, behind the header.
   - The circle (1001px) is centered on the page at the hero's bottom edge.

   Tablet and mobile (up to 900px)
   - The text stacks above a full-width square terrain image.
   - The radar rises above the image so its antennae show above the buttons.
   - The circle is centered on the image's top edge. Its size comes from the
     text, so the arc peaks in the gap between the headline and the intro,
     but it never gets smaller than 90% of the screen width.

   In both layouts the circle uses a Multiply blend, so it reads as a light
   line on the Smoke background and stays visible over the terrain. */

.hero {
  --hero-gap: var(--space-60);              /* space between headline and intro */
  --hero-image-gap: var(--space-120);       /* stacked: space between the buttons and the terrain image */

  position: relative;
  clip-path: inset(0);                      /* keeps the circle inside the hero */
  overflow-x: clip;                         /* and stops it widening the page (clip-path alone doesn't) */
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--section-pad-x);          /* the image runs top to bottom, so no vertical padding */
  background: var(--color-surface);
}

/* Text: headline at the top, intro at the bottom, the space between filling
   the column. The text sits above every other layer. */
.hero__content {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--hero-gap);
  padding-block: var(--hero-gap) var(--hero-image-gap);
}
.hero__intro {
  position: relative;                       /* the circle is positioned from here */
  display: grid; gap: var(--space-40);
}
.hero h1,
.hero__intro > p,
.hero__intro > .button-row { position: relative; z-index: 3; }
.hero__intro > p { max-width: var(--text-max); }

/* Outline buttons get a Smoke fill, so the radar's antennae pass cleanly behind them. */
.hero .button:not(.button--primary) { background: var(--color-smoke); }
.hero .button:not(.button--primary):hover,
.hero .button:not(.button--primary):focus-visible { background: var(--color-sand); }

/* Terrain image: at least square; stretches if the text column is taller. */
.hero__media {
  position: relative;
  grid-column: 1 / -1;
  margin-inline: calc(-1 * var(--section-pad-x));   /* bleeds to both frame lines */
}
.hero__media::before { content: ""; display: block; padding-top: 100%; }
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Circle. Its center sits one --hero-image-gap below the intro, which is the
   image's top edge when stacked and the hero's bottom edge on desktop.
   Stacked size: twice the distance from the middle of the headline gap down
   to that center (half a gap + intro height + image gap), but at least 90vw.
   The SVG keeps a 1px line at any size (non-scaling stroke). */
.hero__circle {
  position: absolute; z-index: 1;
  left: 50%;
  top: calc(100% + var(--hero-image-gap));
  height: max(calc(200% + var(--hero-gap) + 2 * var(--hero-image-gap)), 90vw);
  width: auto; aspect-ratio: 1; max-width: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero__circle { display: none; }          /* desktop only: removed once the text and image stack */
}

/* Radar render, stacked: its height is the image's height plus the 120px
   gap above the image, the 40px button row, and 32px of the 40px space
   above the buttons. The antenna tips show above the buttons and stop 8px
   short of the paragraph, and the top of the radar rises well clear of the
   image's top edge. The render is 1.565× taller than it is wide. */
.hero__radar {
  position: absolute; z-index: 2;
  right: 0; bottom: 0;
  width: calc((100% + var(--hero-image-gap) + 40px + 32px) / 1.565);
  height: auto; max-width: none;
  pointer-events: none;
}

/* 3-column tablet: headline and intro no wider than 8 of 12 columns (two-thirds). */
@media (min-width: 811px) and (max-width: 900px) {
  .hero h1,
  .hero__intro > p { max-width: calc((100% - 11 * var(--gutter)) / 12 * 8 + 7 * var(--gutter)); }
}

@media (min-width: 901px) {
  .hero {
    --hero-image-gap: var(--hero-gap);      /* side by side: the same 60px top and bottom */
    clip-path: inset(-100vh 0 0 0);
  }         /* top left open so the radar can rise behind the header */

  .hero__content { grid-column: 1 / 7; }
  .hero__media {
    grid-column: 7 / -1;
    margin-inline: 0 calc(-1 * var(--section-pad-x));   /* bleeds to the right frame line only */
  }

  /* Circle: the designed 1001px, centered on the page. The intro spans
     columns 1–6, so the page's center is half a gutter past its right edge. */
  .hero__circle {
    left: calc(100% + var(--gutter) / 2);
    height: 1001px;
  }

  /* Radar: 718px at 1440 (52.8% of the frame), matching the design. */
  .hero__radar { width: 52.8%; }
}


/* ---------- Who We Serve ----------
   A Smoke band.
   Ten partner logos. Each logo's height is set in the HTML (--logo-h) so marks
   of different shapes look equally weighted: seals 80px, emblems with
   wordmarks 56–64px, wide wordmarks 40–56px. Widths follow the artwork.
   Every layout scales those heights by the same factor (--logo-scale), so the
   balance holds at every size.

   Desktop: two rows of five, spanning the frame line to line. Each logo is
   centered in a 220px cell; the cells spread evenly across the row.
   Tablet (811–900px): two rows of five at 75%.
   Small tablet (391–810px): rows of three at 75%, reordered so each row has
   a wide logo in the middle (Navy, DEVCOM, Marines); the Army logo sits
   centered on its own row.
   Mobile: rows of two at 75%, in the desktop order except that Coast Guard
   and DEVCOM swap, so the wide DEVCOM pairs with a seal.
   This section uses 40px top and bottom padding (a documented exception to
   the 60px section standard). */

.partners {
  --logo-scale: 0.75;
  --row-height: calc(80px * var(--logo-scale));   /* the tallest logos fill the row */

  padding: var(--space-40) var(--section-pad-x);
  background: var(--color-smoke);
}

.partners__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: var(--row-height);
  row-gap: var(--space-24);
  margin: 0; padding: 0; list-style: none;
}
.partners__list li { display: grid; place-items: center; }
.partners__list img {
  width: auto;
  height: calc(var(--logo-h) * var(--logo-scale));
}

/* Mobile: Coast Guard (8th) comes before DEVCOM (7th). */
@media (max-width: 390px) {
  .partners__list li:nth-child(7)    { order: 1; }   /* DEVCOM */
  .partners__list li:nth-child(n+9)  { order: 2; }   /* Marines, Army */
}

/* Small tablet: rows of three. The visual order changes so a wide logo sits
   in the middle of each row; the HTML keeps the desktop order. */
@media (min-width: 391px) and (max-width: 810px) {
  .partners__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-40);
  }
  .partners__list li:nth-child(6)  { order: 7; }    /* DARPA   → row 3, left   */
  .partners__list li:nth-child(7)  { order: 5; }    /* DEVCOM  → row 2, middle */
  .partners__list li:nth-child(5)  { order: 6; }    /* Air Force → row 2, right */
  .partners__list li:nth-child(9)  { order: 8; }    /* Marines → row 3, middle */
  .partners__list li:nth-child(8)  { order: 9; }    /* Coast Guard → row 3, right */
  .partners__list li:nth-child(10) { order: 10; grid-column: 2; }   /* Army, centered on its own row */
}

@media (min-width: 811px) {
  .partners { padding-inline: 0; }           /* rows span the frame, line to line */
  .partners__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: var(--space-40);
  }
}

@media (min-width: 901px) {
  .partners { --logo-scale: 1; }
  .partners__list {
    grid-template-columns: repeat(5, minmax(0, 220px));   /* 220px cells, narrower if the frame is tight */
    justify-content: space-between;
  }
}


/* ---------- Capabilities ----------
   Intro: the heading and button in columns 1–6, the paragraph in columns
   9–12. Below it, 120px down, six capability cards in rows of three.

   Capability card: a 60px banner (green icon tile + animated texture), then
   a tag and title at the top and the description and link at the bottom,
   with the space between filling the card. Cards in a row share a height.

   Rows of three from 811px, two from 600px, one below that.
   Cards are at least 440px tall from 391px; on phones they fit their content. */

.capabilities__intro {
  display: grid;
  gap: var(--space-24);
  justify-items: start;
  margin-bottom: var(--space-60);
}
.capabilities__intro > p { max-width: var(--text-max); }

.capability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  margin: 0; padding: 0; list-style: none;
}

.capability-card {
  display: flex; flex-direction: column;
  background: var(--color-light-gray);
  border: var(--line-width) solid var(--color-line);
}

.capability-card__banner {
  display: flex;
  height: var(--space-60);
  border-bottom: var(--line-width) solid var(--color-line);
}
.capability-card__icon {
  display: grid; place-items: center; flex: none;
  width: var(--space-60);
  background: var(--color-green);
}
.capability-card__banner .texture { flex: 1; min-width: 0; }

.capability-card__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-40) var(--space-20) var(--space-20);
}
.capability-card__body .tag { margin-bottom: var(--space-24); }
.capability-card__text {
  margin-top: auto;                          /* fill: pushes description and link to the bottom */
  padding-top: var(--space-40);              /* minimum space below the title */
  margin-bottom: var(--space-40);
}

/* Call-to-action card: Sand, heading at the top, link at the bottom. */

@media (min-width: 391px) {
  .capability-card { min-height: 440px; }
}

@media (min-width: 600px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 811px) {
  .capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
  .capabilities__intro {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--space-40);
    margin-bottom: var(--space-120);
  }
  .capabilities__intro > h2     { grid-column: 1 / 7;  grid-row: 1; }
  .capabilities__intro > .button { grid-column: 1 / 7;  grid-row: 2; }
  .capabilities__intro > p       { grid-column: 9 / -1; grid-row: 1 / 3; }
}


/* ---------- Programs ----------

   Desktop (901px+)
   - The heading and exploded graphic (columns 1–4) stay pinned below the
     header while the program cards (columns 5–12, bleeding to the right
     frame line) scroll past. The graphic extends behind the cards.

   Tablet and mobile (up to 900px)
   - The heading and graphic share a row above the cards: heading on the
     left, graphic on the right (half the width), inside the 20px padding.
     The first card overlaps the bottom of the graphic by 40px (on the
     3-column tablet, the first card starts 120px below the heading, so the
     overlap is larger). Both scroll normally.

   Program card
   - From 600px: text on the left (title, systems list, then description and
     button at the bottom), a 400px square on the right (smaller on tablets)
     holding the render over the Mid Gray grid.
   - Below 600px: one column: title, systems list, render (3:2), description,
     button.
   - The render sits centered over the grid (8 × 8 cells, 1px Mid Gray lines at
     any size), with 16px of space around it. */

.programs__aside {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-20);
  margin-bottom: calc(-1 * var(--space-40));   /* the first card overlaps the graphic by 40px */
}
.programs__graphic { width: 50%; height: auto; }

.program-list {
  position: relative; z-index: 1;           /* cards pass over the graphic on desktop */
  display: grid; gap: var(--gutter);
  margin: 0; padding: 0; list-style: none;
}

/* 3-column tablet: the first card starts 120px below the heading and runs
   over the lower part of the graphic. */
@media (min-width: 811px) and (max-width: 900px) {
  .programs__aside { position: relative; margin-bottom: var(--space-120); }
  .programs__graphic { position: absolute; top: 0; right: 0; }
}

/* Card, one column (below 600px) */
.program-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-20);
  background: var(--color-surface);
  border: var(--line-width) solid var(--color-line);
}
.program-card__text { display: contents; }   /* its children join the card's column, around the photo */
.program-card h3 { order: 1; }
.program-card__systems { order: 2; margin: var(--space-16) 0 0; color: var(--color-dark-sand); }   /* H6: Aeonik Fono Medium, 12px */
.program-card__systems span { white-space: nowrap; }   /* system names never break mid-name (e.g. C-RAM) */
.program-card__media { order: 3; align-self: stretch; margin-top: var(--space-40); }
.program-card__description { order: 4; margin: var(--space-40) 0; }
.program-card .button { order: 5; }

/* Render over the Mid Gray grid. The frame sets the shape (3:2, square from
   600px); the grid fills it and the render is fitted inside it. */
.program-card__frame { position: relative; aspect-ratio: 3 / 2; }
.program-card__grid,
.program-card__render {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.program-card__grid { object-fit: cover; }
.program-card__render {
  padding: var(--space-16);
  object-fit: contain;
}

@media (min-width: 600px) {
  .program-card { margin-right: calc(-1 * var(--section-pad-x)); border-right: 0; }   /* bleeds to the right frame line */
}

/* Card, side by side (600px+) */
@media (min-width: 600px) {
  .program-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(45%, 400px);
    gap: var(--space-40);
  }
  .program-card__text { display: flex; flex-direction: column; align-items: flex-start; }
  .program-card__description {
    margin: auto 0 var(--space-40);          /* fill: description and button sit at the bottom */
    padding-top: var(--space-40);            /* minimum space below the systems list */
    max-width: 340px;                        /* about three columns */
  }
  .program-card__media { align-self: start; margin-top: 0; }
  .program-card__frame { aspect-ratio: 1; }
}

@media (min-width: 901px) {
  .programs {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .programs__aside {
    display: block;
    grid-column: 1 / 5;
    position: sticky; top: calc(var(--header-height) + var(--section-pad-y));
    margin-bottom: 0;
  }
  .programs h2 { margin-bottom: var(--space-40); }
  .programs__graphic { width: 560px; max-width: none; }   /* overhangs behind the cards */
  .program-list { grid-column: 5 / -1; }
  .program-card { grid-template-columns: minmax(0, 1fr) 400px; min-height: 440px; }
}


/* ---------- Our Company ----------
   A Sand section: text on the left; on the right, a Dark Sand grid, a Dark
   Sand circle, and the founder's portrait on the section's bottom edge.
   Layers, back to front: grid, circle, portrait, text.

   Desktop: text in columns 1–4 (half the width below 1200px). The portrait
   is 720px at the right frame line (53% of the frame on narrower screens).
   The grid and circle are placed relative to the portrait, so they keep the
   same position behind it at every desktop width.

   Below desktop: the text stacks above the artwork. The portrait (up to
   600px), grid, and circle are all centered on the section; the portrait
   sits on the bottom edge and the grid rises 80px above it. */

.company {
  position: relative;
  overflow: hidden;                          /* clips the circle */
  padding-bottom: 0;                         /* the portrait sits on the bottom edge */
}

.company__text { position: relative; z-index: 3; }
.company__text .text-h4 { margin-top: var(--space-40); }
.company__body { display: grid; gap: var(--space-24); margin-block: var(--space-40); max-width: var(--text-max); }

/* Artwork, stacked */
.company__media {
  position: relative;
  margin: var(--space-40) calc(-1 * var(--section-pad-x)) 0;   /* bleeds to both frame lines */
  padding-top: var(--space-80);
}
.company__art {                              /* the grid's square, centered on the section */
  position: absolute; top: 0; left: 50%;
  width: min(80%, 480px); aspect-ratio: 1;
  transform: translateX(-50%);
}
.company__grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.company__circle {                           /* centered on the grid, same proportion as the design */
  position: absolute; top: 50%; left: 50%;
  width: 163%; height: auto; max-width: none;
  transform: translate(-50%, -50%);
}
.company__portrait {
  position: relative; z-index: 2;
  display: block;
  width: min(100%, 600px); height: auto;
  margin-inline: auto;                       /* centered on the section, like the grid and circle */
}

@media (min-width: 901px) {
  .company { min-height: 645px; padding-bottom: var(--section-pad-y); }
  .company__text { width: 50%; }
  .company__art { display: contents; }       /* grid and circle position against the portrait box */

  /* A box the size of the portrait, anchored bottom-right. The grid and
     circle are placed in proportion to it (values measured from the design
     at 1440, where the portrait is 720 × 595). */
  .company__media {
    position: absolute; right: 0; bottom: 0;
    width: min(720px, 53%); aspect-ratio: 720 / 595;
    margin: 0; padding: 0;
  }
  .company__portrait { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
  .company__grid {                           /* 560px, 60px in from the right, 80px from the section top */
    inset: auto 8.33% 1.68% auto;
    width: 77.8%; height: auto;
  }
  .company__circle {                         /* 913px, extending past the right edge and below the section */
    top: auto; left: auto; right: -29.7%; bottom: -67.7%;
    width: 126.8%;
    transform: none;
  }
}

@media (min-width: 1200px) {
  .company__text { width: calc((100% - 11 * var(--gutter)) / 12 * 4 + 3 * var(--gutter)); }   /* columns 1–4 */
}