/* The shared "Resources for the floor" section (see _build/resources.mjs).
 *
 * One rounded panel, the same on every page, whether it sits in a page's own section (home,
 * /platform) or inside the article column of a guide page. Cards wrap in a flex row rather than a
 * grid so a short last row stretches instead of leaving empty bordered cells (layout-truth L2).
 * Text is left-aligned at every width, whatever the surrounding section centers. Under 768 each
 * group is a tap-to-open row (resources.js closes them on load). Linked before mobile.css.
 */
.resources { padding: 0 32px 72px; text-align: left; }
.wrap .resources, main .resources { padding: 0; margin: 44px 0 0; }
.res-wrap {
  max-width: 1056px; margin: 0 auto; background: var(--mist); border: 1px solid var(--line);
  border-radius: 20px; padding: 40px 40px 44px;
}
.resources h2 {
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 30px;
  line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px; text-align: left;
}
.res-group { margin-top: 28px; }
.res-sum { list-style: none; cursor: default; display: block; }
.res-sum::-webkit-details-marker { display: none; }
.res-sum::marker { content: ''; }
.res-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--s7); margin: 0 0 12px; text-align: left;
}
.res-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.res-card {
  flex: 1 1 240px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  text-decoration: none; text-align: left; transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* Left-aligned even when a card is alone in its group: mobile.css centers any link that is its
   parent's only child (`html div > a:only-child`), and this selector outranks that one. */
.resources .res-card { align-items: flex-start; text-align: left; }
.res-card:hover {
  transform: translateY(-1px); border-color: var(--accent-soft);
  box-shadow: 0 1px 2px rgba(11,15,25,.04), 0 14px 34px -20px rgba(11,15,25,.18);
}
.res-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47,95,230,.14); border-color: var(--accent); }
.res-t { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); text-align: left; }
.res-card:hover .res-t { color: var(--accent); }
.res-l { font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; color: var(--s7); text-align: left; }

/* Same 80px gutter as the column under 1216 (mobile.css), so the 48px floating buttons clear the
   panel on the pages where it sits in its own section rather than inside the column. */
@media (min-width: 768px) and (max-width: 1215px) {
  .resources { padding-left: 80px; padding-right: 80px; }
  .wrap .resources, main .resources { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
  .resources { padding: 0 20px 48px; }
  .wrap .resources, main .resources { padding: 0; margin-top: 36px; }
  .res-wrap { padding: 24px 16px 12px; border-radius: 16px; }
  .resources h2 { font-size: 24px; margin-bottom: 8px; }
  .res-group { margin-top: 0; border-top: 1px solid var(--line); }
  .res-sum {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 52px; padding: 4px 4px;
  }
  .res-sum:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47,95,230,.14); border-radius: 8px; }
  .res-sum::after {
    content: ''; flex: none; width: 9px; height: 9px; margin-right: 6px;
    border-right: 2px solid var(--s7); border-bottom: 2px solid var(--s7);
    transform: rotate(45deg) translateY(-3px); transition: transform .15s;
  }
  .res-group[open] > .res-sum::after { transform: rotate(-135deg) translateY(-3px); }
  .res-label { font-size: 13px; letter-spacing: .08em; margin: 0; color: var(--ink2); }
  .res-cards { gap: 8px; padding-bottom: 16px; }
  .res-card { flex-basis: 100%; padding: 14px 16px; }
}