/* Shared compact editorial links, originally used by the platform overview. */
.platform-useful-link:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.platform-useful {
  display: none;
}

@media (max-width: 640px) {
  .platform-useful {
    display: block;
  }

  .platform-useful-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-useful-link {
    min-width: 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .platform-useful-links:not(.platform-useful-links--stacked) .platform-useful-link {
    padding-right: 14px;
  }

  .platform-useful-links:not(.platform-useful-links--stacked) .platform-useful-link + .platform-useful-link {
    padding-right: 0;
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }

  .platform-useful-icon {
    width: 24px;
    height: 24px;
    color: var(--orange);
  }

  .platform-useful-title {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.015em;
  }

  .platform-useful-description {
    display: block;
    margin-top: 6px;
    color: #7b8596;
    font-size: 12px;
    line-height: 1.45;
  }

  /* Stacked variant keeps body-size descriptions readable on narrow screens. */
  .platform-useful-links--stacked {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .platform-useful-links--stacked .platform-useful-title {
    font-size: inherit;
    line-height: 1.5;
    font-weight: 600;
  }

  .platform-useful-links--stacked .platform-useful-description {
    color: var(--muted);
    font-size: inherit;
    line-height: 1.5;
  }

}

/* Described editorial links can also appear on desktop platform pages. */
@media (min-width: 641px) {
  .platform-useful-links--described {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .platform-useful-links--described .platform-useful-link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
    min-height: 44px;
  }

  .platform-useful-links--described .platform-useful-icon {
    width: 24px;
    height: 24px;
    color: var(--orange);
  }

  .platform-useful-links--described .platform-useful-title,
  .platform-useful-links--described .platform-useful-description {
    display: block;
    line-height: 1.5;
  }

  .platform-useful-links--described .platform-useful-title {
    font-weight: 600;
  }

  .platform-useful-links--described .platform-useful-description {
    margin-top: 6px;
    color: var(--muted);
    font-size: 15px;
  }
}