/* Links page styles. Loaded after style.css only by links.html. */

.sub-hero-links {
  background:
    linear-gradient(135deg, rgba(18, 59, 42, 0.92), rgba(46, 107, 71, 0.82)),
    url("../images/hero.png") center center / cover no-repeat;
}

.link-category + .link-category {
  margin-top: 56px;
}

.links-description {
  margin: -8px 0 20px;
  color: var(--subtext);
}

.link-list {
  display: grid;
  gap: 20px;
}

.link-card {
  display: block;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 1.75;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.link-card:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 107, 71, 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}

.link-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(46, 107, 71, 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}

@media (min-width: 821px) {

  .sub-hero.sub-hero-links + .section.links-main-section {
    padding-top: 34px;
  }

  .section.links-main-section {
    padding-bottom: 64px;
  }

  .links-main-section .section-heading {
    margin-bottom: 22px;
  }
}

.link-title {
  display: block;
  margin-bottom: 8px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--deep-green);
}

.link-url {
  display: block;
  font-size: 0.95rem;
  color: var(--subtext);
  word-break: break-all;
}

@media (max-width: 820px) {

  .link-category + .link-category {
    margin-top: 44px;
  }

  .link-card {
    padding: 18px 18px;
  }
}

/* Mirrors the former global density tuning that applied to .link-card. */
.link-card {
  padding: 24px 22px;
}

@media (max-width: 820px) {

  .link-card {
    padding: 20px 18px;
  }
}

@media (max-width: 560px) {

  .link-card {
    padding: 16px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .link-card:hover,
  .link-card:focus-visible {
    transform: none;
  }
}