/* ─────────────────────────────────────
RESOURCES PAGE - CSS
────────────────────────────────────── */

/* hero */
#resources-hero {
  padding: 170px 0 90px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

/* resource cards */
.resource-card {
  background: #ffffff;
  border-radius: 32px;
  padding: 42px 48px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* card glow */
.resource-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 38px;
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.03);
  z-index: -1;
}

.resource-card:hover {
  transform: translateY(-6px);
}

.resource-card h2 {
  font-size: 2.1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--text);
}

.resource-card h3 {
  font-size: 1.65rem;
  font-weight: 650;
  margin-top: 1.2rem;
  margin-bottom: 0.7rem;
  color: var(--text);
}

.resource-card p,
.resource-card li {
  font-size: 1.32rem;
  line-height: 1.58;
  color: var(--text);
}

.resource-card ul {
  margin-top: 0.35rem;
  padding-left: 1.4rem;
}

/* spacing between stacked cards */
.resource-card:not(:last-child) {
  margin-bottom: 50px;
}

/* Responsive */
@media (max-width: 992px) {
  .resource-card {
    padding: 34px 32px;
  }

  .resource-card h2 {
    font-size: 1.85rem;
  }

  .resource-card h3 {
    font-size: 1.45rem;
  }

  .resource-card p,
  .resource-card li {
    font-size: 1.2rem;
  }
}