/**
 * Resources page (page-resources.php).
 * Dark variant of the careers "faculty openings" list (.faculty-open-box in style.css).
 */

/*
 * Figma: title top sits 95px below the breadcrumb top (21px breadcrumb row + its 16px
 * margin + 58px). The theme's `.section.section-inner-hero { padding-top: 30px !important }`
 * otherwise wins over its own 80px desktop rule, so this override needs !important too.
 */
@media (min-width: 768px) {
  .section.section-inner-hero.resources-page {
    padding-top: 58px !important;
  }
}

/* Title: Manrope 700, 72px / 110%, -1.44px tracking, 24px above the first panel. */
.resources-page .section-heading .big {
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

@media (min-width: 1400px) {
  .resources-page .section-heading .big {
    font-size: 4.5rem;
  }
}

/* Centred content column: 997px wide in the 1441px Figma frame. */
.resources-page__inner {
  max-width: 997px;
  margin: 0 auto;
}

.resources-section + .resources-section {
  margin-top: 48px;
}

/* Figma: 16px between a section heading and its panel (wrapper already has pb-16). */
.resources-section .section-heading h2 {
  margin-bottom: 0;
}

.resources-box {
  background-color: #002b27;
  padding: 24px;
}

/* Two columns filled top-to-bottom; --resources-rows is set per list by the template. */
.resources-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--resources-rows, 1), auto);
  column-gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Rows are separated by 12px + divider + 12px; no extra space above/below a column (Figma). */
.resources-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 0;
}

.resources-list li.is-first-row {
  padding-top: 0;
}

.resources-list li.is-last-row {
  border-bottom: 0;
  padding-bottom: 0;
}

.resources-list a {
  display: block;
  position: relative;
  padding-right: 32px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 140%;
  text-decoration: none;
}

.resources-list a::after {
  content: "\e908";
  font-family: "icomoon";
  font-size: 10px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

.resources-list a:hover,
.resources-list a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.resources-list a:hover::after,
.resources-list a:focus-visible::after {
  transform: translate(4px, -50%);
}

.resources-list a:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .resources-list a::after {
    transition: none;
  }

  .resources-list a:hover::after,
  .resources-list a:focus-visible::after {
    transform: translateY(-50%);
  }
}

@media (max-width: 767.98px) {
  .resources-section + .resources-section {
    margin-top: 32px;
  }

  /* Single column: keep a divider between every row, including across the former column break. */
  .resources-list {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .resources-list li.is-first-row {
    padding-top: 12px;
  }

  .resources-list li.is-last-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 12px;
  }

  .resources-list li:first-child {
    padding-top: 0;
  }

  .resources-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .resources-list a {
    font-size: 0.875rem;
  }
}