/* The industry landing pages (/industries/<id>, site-src/templates/industry.html) and their overview
   (/industries). An industry page is the home page's sections with the industry's words, so it loads
   css/hero.css and css/home.css; this sheet holds only what is the industries' own: the hero
   eyebrow's link, the map of what an industry runs and who reaches it (the field map's chips without
   its drawings), and the overview's tiles opening on each film's poster. Sizes come from the design
   system's tokens (css/cantic.css). */

/* The hero's eyebrow goes back to the overview. */
.film__eyebrow a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .film__eyebrow a:hover {
    color: #fff;
  }
}

.film__eyebrow a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Its kinds of business wrap between items, never inside one, and no line starts or ends on a dot:
   each item carries the dot before it, the list is pulled left by one dot's width, and the link clips
   what falls outside, so the dot that opens each line is never seen (a phone's "Hotels · Resorts ·
   Apartments" and "Hostels" under it). */
.film__eyebrow a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: top;
}

.film__eyebrow-items {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2.1em;
}

.film__eyebrow-item {
  white-space: nowrap;
}

.film__eyebrow-dot {
  display: inline-block;
  width: 2.1em;
  text-align: center;
}

/* The map: across the top, the outside firms and their remote access; under them the internet, one
   dotted line; under it each place the business runs, its systems as the field map's chips (css/
   home.css .fmap__kinds), the way in under the red bracket. Everything reads without the script. */

.imap {
  --fm-chip: clamp(12px, .903vw, 17.33px);
  --fm-red: var(--signal);
  margin: var(--sp-96) 0 0;
}

.imap__firms {
  display: grid;
  gap: 20px 48px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0b0b0b;
}

@media (min-width: 900px) {
  .imap__firms {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
  }

  .imap__band {
    grid-column: 1 / -1;
  }
}

.imap__band,
.imap__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 400 var(--fs-card-body)/1.3 var(--sans);
  letter-spacing: -.01em;
  color: var(--fg);
}

.imap__band .node,
.imap__name .node {
  flex: none;
  width: 16px;
  height: 16px;
}

.imap__who {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each firm: a small red node, where its line to the business leaves */
.imap__who li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-card-body);
  line-height: 1.3;
  color: var(--fg);
}

.imap__who li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(.65em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fm-red);
  box-shadow: 0 0 0 3px #0b0b0b, 0 0 0 4px rgba(255, 77, 46, .45);
}

.imap__remote {
  display: grid;
  gap: 10px;
}

.imap__via,
.imap__net {
  margin: 0;
  font: 400 var(--fs-label)/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.imap :is(.fmap__kinds) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the internet: its word, and a dotted line across the page */
.imap__net {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  color: var(--fg);
}

.imap__net::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 2px dotted rgba(255, 255, 255, .5);
}

/* the places, on the film's dot grid, as many to a row as fit */
.imap__places {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
  gap: 40px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.imap__places::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -24px -20px;
  background: radial-gradient(circle, rgba(255, 255, 255, .17) 0 .9px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(ellipse 72% 70% at 50% 45%, #000 50%, transparent 100%);
  mask: radial-gradient(ellipse 72% 70% at 50% 45%, #000 50%, transparent 100%);
  pointer-events: none;
}

.imap__place {
  display: grid;
  align-content: start;
  gap: 16px;
  padding-left: 18px;
  border-left: 1px dashed rgba(255, 255, 255, .28);
}

.imap__legend {
  max-width: 46em;
  margin-top: 40px;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  color: var(--fg-2);
}

.imap__sources {
  display: block;
  margin-top: 8px;
}