/* =====================================================================
   industries.html (Private drone system), 23 Oct 2026. Built like capabilities.html on css/netpages.css;
   this file only adds the two parts that page has no class for: the wide picture with three steps,
   and the own-drone / city-network pair. Same type sizes, same black room.
   ===================================================================== */
.np picture { display: block; }
.ind-keep { white-space: nowrap; }

/* ---------- how it will work: one wide picture, then three steps ---------- */
.ind-band { aspect-ratio: 12 / 5; overflow: hidden; background: #070707; }
.ind-band picture { height: 100%; }
.ind-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }   /* less empty sky over the sea */
.ind-how .np-h2 { margin-top: clamp(48px, 5vw, 80px); }
.ind-steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); }
.ind-steps li { border-top: 2px solid var(--accent); padding-top: 22px; }
.ind-steps p { margin: 14px 0 0; max-width: 26em; }

/* ---------- own drone or the shared city network ---------- */
.ind-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 96px); margin-top: 48px; }
.ind-side img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ind-side .np-h3 { margin-top: 28px; }
.ind-facts { margin: 22px 0 0; padding: 0; }
.ind-facts > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding: 10px 0; }   /* space, no rules */
.ind-facts dt { font-size: var(--np-small); line-height: 1.6; color: var(--np-muted); padding-top: 3px; }
.ind-facts dd { margin: 0; font-size: var(--np-body); line-height: 1.55; color: var(--np-ink); }
.ind-facts a { white-space: nowrap; margin-left: 4px; }
/* the city side is the other offer: same layout, its words a step quieter */
.ind-side + .ind-side .ind-facts dd { color: var(--np-muted); }

/* ---------- phone and tablet ---------- */
/* tablet: the six sites wrap into two columns (a cut-off card at the screen edge reads as clipped there);
   phones keep the sideways snap row from netpages.css */
@media (min-width: 600px) and (max-width: 999px) {
  .np-place-list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; overflow: visible; margin: 0; padding: 0; }
}
@media (max-width: 1000px) {
  .ind-steps { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 800px) {
  .ind-band { aspect-ratio: 3 / 2; }
  .ind-pair { grid-template-columns: 1fr; gap: 64px; }
  .ind-facts > div { grid-template-columns: 7em minmax(0, 1fr); gap: 12px; }
}