.resources-page {
  block-size: 100%;
}

.resources-layout {
  display: grid;
  grid-template-columns: 20ch 1fr;
  block-size: 100%;
}

@media (max-width: 60ch) {
  .resources-layout {
    grid-template-columns: 1fr;
  }
  .resources-nav {
    border-block-end: 1px solid oklch(var(--lch-black) / 0.1);
    padding-block-end: var(--block-space);
  }
}

.resources-nav {
  border-inline-end: 1px solid oklch(var(--lch-black) / 0.1);
  padding: var(--block-space) var(--inline-space);
  overflow-y: auto;
}

.resources-nav__section {
  margin-block-end: var(--block-space);
}

.resources-nav__heading {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 0.25em;
}

.resources-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.resources-nav__list li {
  margin: 0;
}

.resources-nav__link {
  display: block;
  text-align: start;
  inline-size: 100%;
}

.resources-content {
  overflow-y: auto;
  max-inline-size: 80ch;
}

/* Category cards grid */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
  gap: var(--block-space);
  margin-block-start: var(--block-space);
}

.resource-card {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  background: oklch(var(--lch-gray));
  border-radius: 0.66em;
  padding: var(--block-space) var(--inline-space);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.resource-card:hover {
  background: oklch(var(--lch-black) / 0.08);
}

/* Resource list items */
.resource-item {
  display: flex;
  align-items: center;
  gap: var(--inline-space);
  padding: var(--block-space-half, 0.5rem) var(--inline-space);
  border-radius: 0.33em;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s;
}

.resource-item:hover {
  background: oklch(var(--lch-gray));
}

.resource-item__type {
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-inline-size: 5ch;
}

/* Video embed */
.resource-video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.66em;
  overflow: hidden;
}

.resource-video-embed iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* Admin section styling */
.admin-section + .admin-section {
  margin-block-start: var(--block-space);
}