/* Layout and resource rows for /resources/ only. Each resource is a native <details> row, so the list can grow
   long and stay scannable; no script needed. The open/close icon is components/disclosure.css.
   Markup: .resources > .resources__section > h2 + ul.resource-list > li > details.resource
   (summary.resource__summary with .resource__title and .resource__host, then .resource__body with .resource__text and .resource__link). */

.resources { padding-block: var(--space-7) var(--space-8); }
.resources__inner { max-width: 52rem; }

.resources__section { padding-block: var(--space-6); border-top: 1px solid var(--line); }
.resources__section h2 { margin: 0 0 var(--space-2); }
.resources__intro { max-width: 58ch; margin: 0 0 var(--space-4); color: var(--muted); }

.resource-list { margin: 0; padding: 0; list-style: none; }
.resource-list > li { border-bottom: 1px solid var(--line); }
.resource-list > li:first-child { border-top: 1px solid var(--line); }

.resource__summary { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; list-style: none; cursor: pointer; }
.resource__summary::-webkit-details-marker { display: none; }
.resource__summary:hover .resource__title { color: var(--teal-ink); }
.resource__title { flex: 1; font-size: 1.08rem; font-weight: 700; }
.resource__host { color: var(--muted); font-size: .9rem; }

.resource__body { max-width: 62ch; padding: 0 0 var(--space-5); }
.resource__text { margin: 0 0 var(--space-3); color: var(--muted); }
.resource__link { color: var(--teal-ink); font-weight: 700; }
.resource__link::after { content: " \2197"; }   /* north-east arrow: leaves the site */

@media (max-width: 760px) {
  .resources { padding-block: var(--space-6) var(--space-7); }
  .resource__summary { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-4); }   /* host sits under the title */
  .resource__summary::after { grid-column: 2; grid-row: 1 / span 2; }
}