/* The landing page below the hero: the ground under the ziggurat, cut away.
   Sections are mine chambers off a shaft, the footer is the forge. The rock,
   the steel and everything that moves are canvases drawn by
   js/underground/; this file lays out the content they are measured from,
   and a plain look for before (or without) the script. */

/* The page keeps its scrollbar gutter (where the browser honours it on the
   root): a modal (the admin's project editor) stopping the page from
   scrolling then doesn't widen it and reflow the cards under the dialog.
   (The rock waits for a modal to close before it is carved again anyway.) */
html { scrollbar-gutter: stable; }

:root {
  --ug-gutter: var(--gutter);
  --ug-shaft: 96px;  /* the column the shaft runs down, left of the chambers */
  --ug-lvl-x: 40px;  /* chamber side padding */
  --ug-wall: #1e1b17; /* chamber back wall, also the blueprint ghost fill */
}

.underground {
  --bp-bg: var(--ug-wall);
  position: relative;
  overflow: hidden;
  /* On narrow screens the script raises the rock behind the hero text
     (--ug-rise); the content stays where it is. */
  margin-top: calc(-1 * var(--ug-rise, 0px));
  padding-top: var(--ug-rise, 0px);
  background: linear-gradient(#dab67e 0, #c9a06a 90px, #a87850 18%, #7c5339 34%, #54412f 52%, #38322d 70%, #24211e 86%, #1b1916 100%);
}

.ug-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* The actors under the content (.ug-deco), then the hero's night / overcast
   tint fading into the ground over rock and actors alike (.ug-sky, set by the
   script and after .ug-deco in the page), then the content (.ug-inner) and
   the few actors in front of it (.ug-top, after .ug-inner). .ug-top stays
   below the hero text (z-index 3), which the rock rises behind on narrow
   screens. */
.ug-deco,
.ug-sky,
.ug-top {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ug-sky { bottom: auto; }
.ug-top { z-index: 2; }
/* animated actors: small pixel canvases in the gaps, on the floors and in the shaft */
.ug-act {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.ug-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 120px var(--ug-gutter) 56px calc(var(--ug-gutter) + var(--ug-shaft));
}
.shaft-col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ug-gutter);
  width: var(--ug-shaft);
}
.underground main { background: none; }

/* ------------------------------------------------------------ chambers */

.level { position: relative; padding: 54px var(--ug-lvl-x) 76px; }
.underground main .level + .level { margin-top: 136px; }
.underground .block-title { text-shadow: 2px 2px 0 var(--edge); }

.underground .grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 22px;
}
.underground .service-name { color: var(--accent); }

/* the forge: the furnace and the burner drill sit in its left padding */
.forge { width: fit-content; max-width: 100%; margin-top: 120px; padding: 44px 64px 22px 132px; }
.forge p { margin: 0; color: var(--muted); font-size: 13px; }
/* Shorter than the line above, so the digits never change the forge's width. */
.forge .forge-heat { margin-top: 6px; color: var(--accent); font-size: 12px; white-space: nowrap; }

/* Until the rock is drawn (or without the script) the chambers are plain walls. */
.underground:not(.ug-live) .level {
  background: var(--ug-wall);
  box-shadow: inset 0 6px 0 #4a4640, 0 0 0 2px var(--edge);
}
/* ...and so is a chamber that has outgrown the one carved for it, until the
   rock is carved again. */
.underground .level.ug-stale { background: var(--ug-wall); }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 860px) {
  :root { --ug-shaft: 64px; --ug-lvl-x: 28px; }

  /* The hero text sits below the stage: a panel set into the sand, lined up
     with the chambers, right of the shaft that starts at the surface. The
     rock rises behind it; until then the sand is flat. The stage keeps the
     sky colour until (or without) the scene. */
  .hero { background: #dab67e; }
  .stage { background: #6fa3d6; }
  .hero-text {
    margin: 20px var(--ug-gutter) 0 calc(var(--ug-gutter) + var(--ug-shaft));
    padding: 20px 20px 22px;
    background: var(--panel);
    border-top: 0;
    box-shadow: inset 2px 2px 0 var(--panel-hi), inset -2px -2px 0 var(--panel-lo), 0 0 0 2px var(--edge);
  }
}

@media (max-width: 600px) {
  :root { --ug-shaft: 34px; --ug-lvl-x: 16px; --ug-gutter: 6px; }
  .ug-inner { padding-top: 92px; }
  .level { padding-top: 42px; padding-bottom: 68px; }
  .underground main .level + .level { margin-top: 96px; }
  .forge { margin-top: 96px; padding: 40px 24px 20px 100px; }
  .underground .service { gap: 10px; padding: 12px 12px; }
  .hero-text { padding: 18px 16px 20px; }
  /* "INFRASTRUCTURE" has to fit the panel inset by the shaft, down to 320px */
  .hero-text h1 { font-size: clamp(20px, 7.4vw, 26px); }
  /* The HUD stands on the shaft's headframe, edge to edge (its 2px frame
     lines up with the headframe's), as in the approved mockup. */
  .hud { left: var(--ug-gutter); right: var(--ug-gutter); }
}