/* ==================================================================
   Halo AI — Industry Demo directory.

   The artwork supplies the room, the city and the mascot. Everything
   inside the screen is real HTML sitting on top, so the names, phone
   numbers and buttons are live text: searchable, tappable, readable by
   a screen reader, and editable from config/industries.json without
   ever touching the picture.
   ================================================================== */

:root {
  --d-bg:        #04101f;
  --d-cyan:      #45cdff;
  --d-cyan-soft: rgba(69, 205, 255, 0.42);
  --d-cyan-dim:  rgba(69, 205, 255, 0.18);
  --d-ink:       #dff2ff;
  --d-dim:       #86b4d2;
  --d-card:      rgba(7, 27, 49, 0.72);
  --d-card-lit:  rgba(12, 46, 80, 0.85);
  --d-panel:     rgba(4, 17, 32, 0.9);
}

* { box-sizing: border-box; }

.demo-body {
  margin: 0;
  background: var(--d-bg);
  color: var(--d-ink);
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; color: inherit; }

.skip-link {
  position: fixed; left: 12px; top: -120px; z-index: 200;
  padding: 10px 16px; border-radius: 8px;
  background: var(--d-cyan); color: #04101f; font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.demo-noscript { padding: 30px; text-align: center; color: var(--d-dim); }

/* ---------- the stage ---------------------------------------------
   Same approach as the home page: the artwork keeps its 3:2 shape and
   the panel is positioned as a percentage of it, so the layout tracks
   the picture at every window size instead of drifting off it. */

.demo-shell { min-height: 100vh; display: grid; place-items: center; }

.demo-stage {
  position: relative;
  width: 100%;
  max-width: 1760px;
  aspect-ratio: 1536 / 1024;
  overflow: hidden;
}

.demo-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none; pointer-events: none;
}

/* The screen inside the artwork. These numbers match where the panel is
   painted in the picture, so the live one lands exactly on it. */
.demo-panel {
  position: absolute;
  left: 12.9%; top: 10.2%;
  width: 68.4%; height: 63.4%;
  padding: 1.4% 1.8% 1%;
  display: flex; flex-direction: column;
  border: 1px solid var(--d-cyan-soft);
  border-radius: 14px;
  background: var(--d-panel);
  box-shadow:
    0 0 34px rgba(30, 150, 230, 0.25),
    inset 0 0 40px rgba(10, 70, 130, 0.35);
  backdrop-filter: blur(2px);
}

.demo-title {
  margin: 0;
  text-align: center;
  font-size: clamp(11px, 1.72vw, 31px);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #eaf8ff;
  text-shadow: 0 0 14px rgba(70, 200, 255, 0.75);
}

.demo-sub {
  margin: 0.3em 0 0;
  text-align: center;
  font-size: clamp(6.5px, 0.72vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-dim);
}

/* ---------- the card grid ---------- */

.demo-grid {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 1.2%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(3px, 0.5vw, 9px);
  align-content: start;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--d-cyan-soft) transparent;
}
.demo-grid::-webkit-scrollbar { width: 6px; }
.demo-grid::-webkit-scrollbar-thumb { background: var(--d-cyan-soft); border-radius: 6px; }

.demo-card {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1px, 0.22vw, 4px);
  padding: clamp(4px, 0.5vw, 10px) clamp(3px, 0.4vw, 8px);
  border: 1px solid var(--d-cyan-dim);
  border-radius: 9px;
  background: var(--d-card);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.demo-card:hover, .demo-card:focus-within {
  border-color: var(--d-cyan-soft);
  background: var(--d-card-lit);
  box-shadow: 0 0 18px rgba(60, 190, 255, 0.3);
}

.demo-name {
  margin: 0;
  text-align: center;
  font-size: clamp(7px, 0.86vw, 15px);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 9px rgba(90, 200, 255, 0.5);
}

.demo-phone {
  font-size: clamp(7px, 0.83vw, 15px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--d-ink);
  text-decoration: none;
}
.demo-phone:hover { color: var(--d-cyan); }

.demo-btns { display: flex; gap: clamp(3px, 0.34vw, 7px); margin-top: auto; padding-top: 2px; }

.demo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(2px, 0.28vw, 6px) clamp(4px, 0.55vw, 11px);
  border: 1px solid var(--d-cyan-soft);
  border-radius: 5px;
  background: rgba(4, 26, 48, 0.7);
  color: var(--d-ink);
  font-size: clamp(5.5px, 0.62vw, 11px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.demo-btn:hover:not(:disabled) {
  background: var(--d-cyan); color: #04101f;
  box-shadow: 0 0 14px rgba(69, 205, 255, 0.75);
}
.demo-btn:disabled, .demo-btn.is-soon {
  border-color: rgba(120, 160, 190, 0.3);
  color: #7794ab;
  cursor: default;
  background: rgba(4, 20, 36, 0.55);
}

/* Empty tiles showing there is room for more industries. */
.demo-card.is-slot {
  justify-content: center;
  border-style: dashed;
  border-color: rgba(69, 205, 255, 0.22);
  background: rgba(5, 22, 40, 0.45);
}
.demo-card.is-slot:hover { box-shadow: none; background: rgba(5, 22, 40, 0.45); }
.demo-slot-plus { font-size: clamp(11px, 1.3vw, 24px); color: var(--d-cyan-soft); line-height: 1; }
.demo-slot-text {
  font-size: clamp(5.5px, 0.6vw, 11px); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #6d8ba3;
}

.demo-foot {
  margin: 0.9% 0 0;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(8px, 1.4vw, 26px);
  font-size: clamp(6px, 0.66vw, 12px);
  letter-spacing: 0.09em; text-transform: uppercase;
}
.demo-foot a { color: var(--d-dim); text-decoration: none; }
.demo-foot a:hover { color: var(--d-cyan); }

:focus-visible { outline: 2px solid var(--d-cyan); outline-offset: 2px; }

/* ---------- the video dialog ---------- */

.vid-dialog {
  width: min(940px, calc(100% - 24px));
  padding: 0; border: 1px solid var(--d-cyan-soft); border-radius: 16px;
  background: #061a2e; color: var(--d-ink);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.7), 0 0 40px rgba(40, 160, 230, 0.25);
}
.vid-dialog::backdrop { background: rgba(2, 10, 20, 0.82); backdrop-filter: blur(4px); }
.vid-top { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vid-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--d-cyan); }
.vid-top h2 { margin: 3px 0 0; font-size: clamp(17px, 2.4vw, 25px); font-weight: 750; letter-spacing: 0.04em; }
.vid-close {
  flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--d-cyan-dim);
  border-radius: 50%; background: rgba(8, 34, 58, 0.9); font-size: 24px; line-height: 1; cursor: pointer;
}
.vid-close:hover { background: var(--d-cyan); color: #04101f; }
.vid-frame { position: relative; min-height: 240px; display: grid; place-items: center; background: #000; }
.vid-frame video { display: block; width: 100%; max-height: 66vh; object-fit: contain; }
.vid-message { padding: 46px 24px; text-align: center; }
.vid-message strong { display: block; font-size: 22px; letter-spacing: 0.04em; }
.vid-message p { max-width: 460px; margin: 10px auto 0; color: var(--d-dim); font-size: 14px; }
.vid-actions { padding: 16px 20px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.vid-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border: 1px solid var(--d-cyan-soft); border-radius: 999px;
  background: rgba(8, 34, 58, 0.9); font-size: 13px; font-weight: 750;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.vid-btn:hover { background: var(--d-cyan); color: #04101f; }
.vid-btn-call { background: var(--d-cyan); color: #04101f; }
.vid-btn-call:hover { background: #7fdcff; }

/* ---------- phones and small windows -------------------------------
   Below this width the painted screen is far too small to read, so the
   artwork becomes a banner and the cards become a normal, scrollable,
   thumb-sized list. Nothing is hidden — the same 19 demos are here. */

@media (max-width: 900px) {
  .demo-shell { display: block; }
  .demo-stage { aspect-ratio: auto; max-width: none; }

  .demo-art {
    position: relative; inset: auto;
    height: clamp(150px, 34vw, 300px);
    object-position: 50% 34%;
  }

  .demo-panel {
    position: static;
    width: auto; height: auto;
    margin: -26px 12px 26px;
    padding: 26px 14px 18px;
    border-radius: 16px;
    background: #061426;          /* fully opaque so the artwork cannot show through the title */
    backdrop-filter: none;
  }

  .demo-title { font-size: clamp(17px, 5vw, 26px); }
  .demo-sub { font-size: 11px; margin-top: 8px; }

  .demo-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px; margin-top: 16px; overflow: visible;
  }

  .demo-card { gap: 7px; padding: 14px 10px; border-radius: 12px; }
  .demo-name { font-size: 13px; }
  .demo-phone { min-height: 30px; display: flex; align-items: center; font-size: 15px; }
  .demo-btns { gap: 8px; width: 100%; }
  .demo-btn {
    flex: 1 1 0; min-width: 0;          /* let a long label shrink instead of overflowing */
    min-height: 44px; font-size: 11px; padding: 0 6px;
    letter-spacing: 0.06em;
  }
  .demo-slot-plus { font-size: 22px; }
  .demo-slot-text { font-size: 10px; }
  .demo-foot { margin-top: 18px; font-size: 11px; gap: 14px; }
  .vid-actions { flex-direction: column; }
  .vid-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}