/* A category made entirely of unavailable directions has the same muted status as its cards. */
#help .help-category-tile.is-prospective {
  background: linear-gradient(145deg, #e9ecee, #dfe3e6);
  color: #4f5b64;
  box-shadow: 0 18px 42px rgba(54,63,70,.06);
}
#help .help-category-tile.is-prospective .help-category-icon img {
  filter: grayscale(1) saturate(0) opacity(.66);
}
#help .help-category-tile.is-prospective .help-category-title { color: #4f5b64; }
#help .help-category-tile.is-prospective .help-category-count,
#help .help-category-tile.is-prospective .help-category-action { color: #707b83; }
#help .help-category-tile.is-prospective .help-category-action { border-color: #aeb7be; }
#help .help-category-tile.is-prospective:hover {
  box-shadow: 0 22px 48px rgba(54,63,70,.09);
}
#help .help-v5-card.is-prospective .help-v5-status-pill {
  border-color: #aeb7be;
  color: #626d75;
}

/* Countries in planning are also inactive directions, not active route cards. */
.future-directions-grid li {
  border-color: #cbd1d5;
  background: #dfe3e6;
  box-shadow: 0 14px 36px rgba(54,63,70,.05);
}
.future-directions-grid img,
.future-directions-grid .future-directions-more-icon { filter: grayscale(1) saturate(0) opacity(.66); }
.future-directions-grid span { color: #4f5b64; }

/* Keep every informational topic visibly muted, including on hover. */
#help .help-v5-card.is-prospective,
#help .help-v5-grid .help-v5-card.is-prospective:hover {
  background: linear-gradient(145deg, #e9ecee, #dfe3e6);
}
#help .help-v5-card.is-prospective .help-v5-visual img,
#help .help-v5-grid .help-v5-card.is-prospective:hover .help-v5-visual img {
  filter: grayscale(1) saturate(0) opacity(.66);
}
#help .help-v5-card.is-prospective .help-v5-title { color: #4f5b64; }
#help .help-v5-grid .detail-body p,
#directions .direction-copy .direction-note { font-size: 16px; line-height: 1.5; }

/* Main section markers use the same 40px circle and 12px numeral as /china/. */
#china .heihe-entry-number,
#organizer .scene-label>span,
#geography .scene-label>span,
#faq .scene-label>span,
#clinics .scene-label>span,
#contact .scene-label>span {
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
}

/* The artwork gets a real grid row, so it cannot cover the title or copy. */
#help .help-v5-card summary,
#help .help-v5-card .help-v5-static {
  grid-template-rows: auto minmax(250px, 1fr) auto auto;
  row-gap: 20px;
  aspect-ratio: auto;
  min-height: clamp(500px, 45vw, 610px);
}
#help .help-v5-card .help-v5-visual {
  --help-art-height: clamp(240px, 25vw, 330px);
  position: relative;
  top: auto;
  right: auto;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: center;
  width: min(85%, 430px);
  height: var(--help-art-height);
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
}
#help .help-v5-card .help-v5-visual img {
  display: block;
  width: 100%;
  height: var(--help-art-height);
  object-fit: contain;
}
#help .help-v5-card .help-v5-copy {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
}

/* Four compact, evenly sized topic cards with the existing icons. */
#directions .directions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}
#directions .direction-item:nth-child(n) {
  --topic-art-row: 399px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--topic-art-row) minmax(0, 1fr);
  row-gap: 8px;
  min-height: 420px;
  height: auto;
  padding: 27px 30px 30px;
}
#directions .direction-index {
  grid-column: 1;
  grid-row: 1;
}
#directions .direction-art,
#directions .direction-item:nth-child(3) .direction-art {
  --topic-image-height: 285px;
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: center;
  width: min(100%, 430px);
  height: 399px;
  min-height: 0;
  margin: 0;
  overflow: visible;
  transform: none;
}
#directions .direction-item:nth-child(n) .direction-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--topic-image-height);
  object-fit: contain;
  transform: scale(1.4);
}
#directions .direction-copy {
  display: grid;
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  grid-template-rows: max-content max-content;
  align-content: start;
  row-gap: 12px;
  width: 100%;
  margin: 12px 0 0;
}
#directions .direction-copy h3,
#directions .direction-copy .direction-note {
  grid-column: 1;
  align-self: start;
  margin: 0;
}
#directions .direction-copy h3 { grid-row: 1; }
#directions .direction-copy .direction-note { grid-row: 2; }

/* Preserve a clear separation even at narrow widths and browser zoom. */
#route .route-step,
#route .route-step:last-child {
  grid-template-rows: minmax(280px, auto) auto;
  row-gap: 28px;
}
#route .route-icon { --route-art-height: 280px; height: var(--route-art-height); }
#route .route-icon img {
  display: block;
  width: 100%;
  height: var(--route-art-height);
  object-fit: contain;
}
#route .route-step > div:last-child { margin-top: 0; }

@media (max-width: 900px) {
  #directions .direction-item:nth-child(n) {
    --topic-art-row: 315px;
    min-height: 365px;
    padding: 23px 24px 25px;
  }
  #directions .direction-art,
  #directions .direction-item:nth-child(3) .direction-art {
    --topic-image-height: 225px;
    width: min(100%, 320px);
    height: 315px;
  }
  #directions .direction-item h3,
  #directions .direction-item:nth-child(3) h3 {
    font-size: clamp(19px, 2.7vw, 22px);
  }
  #route .route-step,
  #route .route-step:last-child {
    grid-template-rows: minmax(240px, auto) auto;
  }
  #route .route-icon { --route-art-height: 215px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  #help .help-category-tile:nth-child(n+3) .help-category-title {
    font-size: clamp(20px, 2.4vw, 25px);
    overflow-wrap: anywhere;
  }
}

@media (max-width: 700px) {
  #help .help-v5-description,
  #help .help-v5-grid .detail-body p {
    font-size: 16px;
    line-height: 1.5;
  }
  #help .help-v5-card summary,
  #help .help-v5-card .help-v5-static {
    grid-template-rows: auto minmax(240px, 1fr) auto auto !important;
    min-height: 500px !important;
  }
  #help .help-v5-card .help-v5-visual {
    --help-art-height: 250px;
    width: min(88%, 300px);
  }
  #directions .direction-item:nth-child(n) {
    --topic-art-row: 150px;
    --topic-title-row: clamp(42px, 6.75vw, 48px);
    grid-template-rows: max-content var(--topic-title-row) var(--topic-art-row) 36px;
    align-content: start;
    align-items: start;
    row-gap: 8px;
    min-height: 0;
    padding: 18px 20px 19px;
  }
  #directions .direction-index {
    position: static;
    inset: auto;
    grid-row: 1;
  }
  #directions .direction-copy { display: contents; }
  #directions .direction-copy h3 { grid-row: 2; }
  #directions .direction-copy .direction-note {
    grid-row: 4;
    align-self: start;
  }
  #directions .direction-art,
  #directions .direction-item:nth-child(3) .direction-art {
    --topic-image-height: var(--topic-art-row);
    grid-row: 3;
    width: min(100%, 180px);
    height: var(--topic-art-row);
  }
  #directions .direction-item:nth-child(n) .direction-art img {
    inset: 0;
    transform: scale(1.6);
  }
  #route .route-step,
  #route .route-step:last-child {
    grid-template-rows: minmax(220px, auto) auto;
    row-gap: 24px;
  }
  #route .route-icon { --route-art-height: 200px; }
}

@media (min-width: 561px) and (max-width: 700px) {
  #directions .direction-item h3,
  #directions .direction-item:nth-child(3) h3 {
    font-size: clamp(18px, 3vw, 21px);
  }
}

@media (max-width: 560px) {
  #directions .directions-grid { grid-template-columns: minmax(0, 1fr); }
  #directions .direction-item:nth-child(n) { --topic-art-row: 190px; }
  #directions .direction-art,
  #directions .direction-item:nth-child(3) .direction-art { width: min(100%, 220px); }
  #directions .direction-item:nth-child(n) .direction-art img { transform: scale(1.5); }
}