/* ==========================================================================
   DarkSpaceDepot — the homepage's two middle sections
   Path: MITD/v5/sites/dsd-home/assets/dsd/css/home-bands.css

   Loaded AFTER section.css, and only by the homepage (see 'extra_css' in
   inc/dsd/home-content.php). Pairs with inc/dsd/bands/home-band.php.

   WHY A THIRD SHEET. The front door needs two shapes the section pages do not
   have: an art panel with a 2x2 capability grid beside the copy, and a row of
   large picture cards. The nearest existing shapes are in mall.css, which is
   30KB of carousels, a finder bar, a wallet panel and the Scrolls gold loaded
   by three pages deliberately -- borrowing two shapes would have put all of it
   on the busiest page on the site, and put every future mall change inside it.
   Growing section.css instead would hand Launch, Travel, Explore and Build
   about 4KB they never render, and -- the part that matters -- would put a
   homepage change inside the file those four depend on.

   Tokens, reset, masthead, buttons, hero, rail, path cards, banner, footer and
   the .i icon stroke all come from section.css. This file only adds.

   EVERY PICTURE IS OPTIONAL. Each image slot falls back to the same designed
   gradient the rest of the site uses, via .is-empty, so the page is finished
   before the art is. Drop the file named in home-content.php into
   assets/dsd/img/ and the slot switches to a real <img> with no code change.
   ========================================================================== */

/* ==========================================================================
   MITD AI systems
   ========================================================================== */
/* BOTTOM PADDING ONLY, which is the convention every band on this site
   follows. The section above a band already pads its own bottom -- .path does,
   .hsys does -- so a band that also pads its top produces two gaps where the
   design has one. At the top of the clamp that is 168px of nothing between the
   path cards and this panel, which is what the first render of this page
   looked like. */
.hsys { padding: 0 var(--gut) clamp(44px, 6vw, 84px); }

/* ART BEHIND, CONTENT IN TWO COLUMNS OVER IT.

   The copy column is flexible and the capability grid is definite. Two
   flexible tracks would have shared the panel by their growth limits, and the
   2x2 grid -- whose cards hold a word and a three-word note -- would have
   taken half of it and left the heading wrapping at four words a line. A
   clamp() track gives the copy the priority it should have and still lets the
   cards grow with the viewport. */
.hsys__panel {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 32%, 420px);
  align-items: center; gap: clamp(20px, 3vw, 48px);
  min-height: clamp(320px, 30vw, 440px);
  padding: clamp(26px, 3.4vw, 52px);
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  overflow: hidden;
}
.hsys__art {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
}
.hsys__panel.is-empty {
  background:
    radial-gradient(64% 86% at 76% 44%, rgba(79, 168, 255, .24), transparent 72%),
    radial-gradient(54% 70% at 18% 72%, rgba(122, 92, 255, .20), transparent 74%),
    linear-gradient(150deg, #0A1524, #05080F);
}

/* Directional, because the copy is on the left and the cards on the right need
   a floor under them: clear in the middle where the art's own subject sits,
   with a wash at the right end so a white render cannot wash out a card
   label. */
.hsys__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(4, 6, 11, .92) 0%, rgba(4, 6, 11, .68) 30%,
                              rgba(4, 6, 11, .30) 56%, rgba(4, 6, 11, .58) 100%),
    linear-gradient(to top,   rgba(4, 6, 11, .62) 0%, rgba(4, 6, 11, 0) 46%);
}

.hsys__copy { position: relative; z-index: 2; }

.hsys__eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(232, 238, 246, .9);
  text-shadow: var(--lift);
}
.hsys__eyebrow .is-accent { color: var(--beacon); }

.hsys__title {
  margin-top: 16px;
  font-size: clamp(24px, 2.7vw, 38px); font-weight: 700; font-stretch: 104%;
  line-height: 1.06; letter-spacing: -.02em; text-transform: uppercase;
  text-shadow: var(--lift);
}
.hsys__title span { display: block; }

.hsys__lede {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.85;
  color: rgba(232, 238, 246, .86);
  text-shadow: var(--lift);
}
.hsys__lede span { display: block; }

.hsys__copy .btn { margin-top: clamp(20px, 2.4vw, 30px); }

/* --- the four capabilities -------------------------------------------- */
.hcaps {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
.hcap {
  min-width: 0;
  padding: clamp(14px, 1.5vw, 20px);
  border: 1px solid var(--hairline-lo); border-radius: 12px;
  background: linear-gradient(160deg, rgba(20, 32, 54, .62), rgba(8, 12, 20, .84));
  backdrop-filter: blur(6px);
}
.hcap__glyph {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: rgba(79, 168, 255, .06);
  color: var(--beacon);
}
.hcap__glyph .i { width: 18px; height: 18px; }
.hcap__title {
  display: block; margin-top: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  overflow-wrap: break-word;
}
.hcap__note {
  display: block; margin-top: 4px;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.6; color: rgba(232, 238, 246, .66);
  overflow-wrap: break-word;
}

/* --- the MITD signature ----------------------------------------------- */
.hsig { padding: clamp(24px, 3vw, 38px) 0 0; text-align: center; }
.hsig__mark {
  display: block;
  font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; font-stretch: 118%;
  letter-spacing: .06em; line-height: 1;
}
.hsig__mark .is-accent { color: var(--beacon); }
.hsig__line {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ash);
}
.hsig__line:first-of-type { margin-top: 14px; }

/* ==========================================================================
   Immersive technologies
   ========================================================================== */
.hshow { padding: 0 var(--gut) clamp(44px, 6vw, 84px); }

.shcards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(26px, 3vw, 40px);
}

/* NO HOVER LIFT AND NO BORDER GLOW, unlike .pcard. Those cards are links;
   these have nowhere to go yet, and the whole point of this rebuild was that
   you could not tell which was which. */
.shcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline-lo); border-radius: 14px;
  background: linear-gradient(165deg, rgba(20, 32, 54, .5), rgba(8, 12, 20, .8));
  overflow: hidden;
}

.shcard__media { display: block; }
.shcard__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.shcard.is-empty .shcard__media {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(70% 70% at 36% 30%, rgba(122, 92, 255, .32), transparent 72%),
    linear-gradient(145deg, #121A2E, #06080F);
}

.shcard__body { padding: clamp(16px, 1.8vw, 22px); }
.shcard__title {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.shcard__note {
  display: block; margin-top: 8px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.7; color: rgba(232, 238, 246, .74);
  overflow-wrap: break-word;
}

/* ==========================================================================
   Narrow windows

   AFTER the rules they override, not before. A media block placed earlier in
   the file than its base rule loses at equal specificity -- twice now on this
   site, both times silently.

   This is about narrow DESKTOP windows, not phones: the homepage is served to
   a phone at width=980 and pinched into, exactly like the five section pages,
   so a phone gets the two-column panel and the three-across cards. The
   breakpoint sits at 860 so it cannot fire on that 980.
   ========================================================================== */
@media (max-width: 860px) {
  .hsys__panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: clamp(22px, 5vw, 34px);
  }
  /* Stacked, there is no empty half for the art to show through: the heading
     is at the TOP of the panel and the four cards fill the rest, so every part
     of the picture now has type over it. A directional wash here only decides
     which paragraph gets the thin end -- the first version put the thin end at
     the top, which is exactly where the heading had moved to. So it is near
     uniform, easing only slightly in the middle. */
  .hsys__veil {
    background:
      linear-gradient(to bottom, rgba(4, 6, 11, .93) 0%, rgba(4, 6, 11, .80) 45%,
                                 rgba(4, 6, 11, .90) 100%);
  }
  .shcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .hcaps   { grid-template-columns: minmax(0, 1fr); }
  .shcards { grid-template-columns: minmax(0, 1fr); }
  .hsig    { text-align: left; }
}