/* A broad shadow supplies height; the close shadow defines the card edge. */
.wahdah-page .network-directory .network-card {
  --card-shadow-color: var(--theme-dark, #173e34);
  box-shadow:
    0 20px 32px -14px color-mix(in srgb, var(--card-shadow-color) 28%, transparent),
    0 6px 12px -5px color-mix(in srgb, var(--card-shadow-color) 18%, transparent),
    0 1px 2px color-mix(in srgb, var(--card-shadow-color) 8%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 85%);
}
.wahdah-page .network-directory .network-card:hover,
.wahdah-page .network-directory .network-card:focus-visible {
  box-shadow:
    0 24px 36px -14px color-mix(in srgb, var(--card-shadow-color) 33%, transparent),
    0 8px 14px -5px color-mix(in srgb, var(--card-shadow-color) 22%, transparent),
    0 1px 2px color-mix(in srgb, var(--card-shadow-color) 10%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 90%);
}
@media (max-width: 650px) {
  .wahdah-page .network-directory .network-grid { gap: 12px; }
  .wahdah-page .network-directory .network-card {
    box-shadow:
      0 12px 20px -10px color-mix(in srgb, var(--card-shadow-color) 25%, transparent),
      0 3px 6px -2px color-mix(in srgb, var(--card-shadow-color) 14%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 85%);
  }
}