.resource-page {
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: 36px var(--ronz-gutter) 100px;
}

.resource-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
  color: var(--ronz-muted);
  font-size: 0.8rem;
}

.resource-breadcrumbs li + li::before {
  content: "/";
  margin-right: 12px;
  color: var(--ronz-line);
}

.resource-breadcrumbs a { text-decoration: none; }
.resource-breadcrumbs a:hover { text-decoration: underline; }

.resource-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.resource-article { min-width: 0; max-width: 46rem; }
.resource-heading h1 {
  margin: 0 0 36px;
  font-size: clamp(2.1rem, 4.2vw, 3.8rem);
  line-height: 1.18;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.resource-content { line-height: 1.95; overflow-wrap: anywhere; }
.resource-content > p { margin: 0 0 1.3em; }
.resource-content > p:first-child { color: var(--ronz-muted); font-size: 1.08rem; }
.resource-content h2 { margin: 2.6em 0 0.9em; font-size: 1.45rem; line-height: 1.4; }
.resource-content h3 { margin: 2em 0 0.7em; font-size: 1.15rem; }
.resource-content a { color: var(--ronz-accent-dark); }
.resource-content li { margin-bottom: 0.5em; }
.resource-content .wp-block-table { margin: 2em 0; overflow-x: auto; }
.resource-content table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 0.87rem; }
.resource-content th, .resource-content td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ronz-line); }
.resource-content th { border-bottom-color: var(--ronz-ink); }
.resource-content .wp-block-code { margin: 2em 0; padding: 20px; background: var(--ronz-surface); overflow-x: auto; font-size: 0.85rem; }
.resource-content .wp-block-image { margin: 2em 0; }
.resource-content img { height: auto; }

.resource-children { margin-top: 48px; }
.resource-children > h2 { margin: 0 0 16px; font-size: 0.9rem; color: var(--ronz-muted); }
.resource-children ul, .resource-sidebar ul { margin: 0; padding: 0; list-style: none; }
.resource-children ul { display: grid; gap: 24px; }
.resource-content .resource-group { margin-top: 56px; scroll-margin-top: 100px; }
.resource-content .resource-group h2 { margin: 0 0 24px; }
.resource-content .resource-group h3 { margin-top: 2em; }
.resource-content .resource-group .resource-card h3 { margin: 0 0 20px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.resource-children li { margin: 0; }
.resource-children .resource-card {
  display: block;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--ronz-ink);
  background: var(--ronz-white);
  color: var(--ronz-ink);
  font-weight: 400;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.resource-card h3 { margin: 0 0 20px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.4; }
.resource-card .resource-card-summary { margin: 0; color: var(--ronz-muted); font-size: 1rem; line-height: 1.85; white-space: pre-line; }
.resource-card-action { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; color: var(--ronz-accent-dark); font-size: 0.9rem; font-weight: 700; }
.resource-card-action > span { font-size: 1.4rem; line-height: 1; }
.resource-children .resource-card:hover, .resource-children .resource-card:focus-visible { border-color: var(--ronz-accent); background: var(--ronz-surface); text-decoration: none; }
.resource-card:focus-visible { outline: 3px solid var(--ronz-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .resource-children .resource-card { transition: none; } }

.resource-sidebar { padding-top: 8px; }
.resource-sidebar h2 { margin: 0 0 18px; font-size: 0.8rem; color: var(--ronz-muted); font-weight: 500; }
.resource-sidebar a { display: block; padding: 8px 0; font-size: 0.9rem; text-decoration: none; }
.resource-sidebar a[aria-current="page"] { color: var(--ronz-accent-dark); font-weight: 700; }
.resource-sidebar a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .resource-layout { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .resource-sidebar { padding-top: 24px; border-top: 1px solid var(--ronz-line); }
  .resource-sidebar ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
}

@media (max-width: 640px) {
  .resource-page { padding-top: 24px; padding-bottom: 88px; }
  .resource-breadcrumbs ol { margin-bottom: 32px; font-size: 0.75rem; }
  .resource-heading h1 { margin-bottom: 28px; }
  .resource-content { font-size: 1rem; }
}