/* ===========================================================
   RESOURCES — the free printable tools
   -----------------------------------------------------------
   Cards pair a drawn preview with the description, because the
   thing being offered is a physical sheet of paper and people
   decide whether to print it by looking at it. Tokens come from
   pln-base.css; nothing is redefined here.
   =========================================================== */

/* The page sits inside the shared .wrap, which carries the gutters; this
   just gives it room under the fixed bar and before the footer. */
/* No top padding: .masthead already owns the space between the heading and
   the first card. Adding more here is what made this page sit lower than
   Gear while using the same heading. */
.res-main { padding: 0 0 72px; }

/* ---------- one page width ----------
   This page was 1180px while every tool it links to is 898px, so following a
   card shifted the left edge nearly 150px. 1080 is the compromise: narrower
   than it was, and still wide enough for two cards to hold their actions on
   one line. */
:root { --res-outer: 920px; }
/* The PAGE's container, not the chrome's. `body:has(.res-page) .wrap`
   matched the nav's wrap too, so the top bar got narrower on this page than
   on every other one. The bar is shared furniture and keeps its own width. */
.res-page > .wrap { max-width: var(--res-outer); }
body:has(.res-page) pln-masthead .wrap { max-width: var(--res-outer); }

/* ---------- the grid ---------- */
.res-grid {
  list-style: none; margin: 0 0 36px; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
}

/* A column, so the footer strip can span the whole card under the icon. */
/* Padding on all four sides. It was 18px 18px 0, which was fine while a
   footer strip sat at the bottom; with that gone the buttons ran into the
   card edge. */
.res-card {
  display: flex; flex-direction: column;
  background: var(--card); border-radius: 10px; padding: 22px;
  box-shadow: 0 1px 2px rgba(51,47,40,.05);
  transition: box-shadow .18s ease, transform .18s ease;
}
.res-card:hover { box-shadow: 0 8px 26px rgba(51,47,40,.11); transform: translateY(-1px); }
.res-top { display: flex; gap: 16px; align-items: flex-start; flex: 1; }

/* ---------- subject icon ----------
   One colour, no tile. Four tinted squares in four different hues made the
   list read as four unrelated things rather than one set of tools. */
.res-thumb {
  flex: none; width: 42px; height: 42px; font-size: 31px; color: var(--rust);
  display: flex; align-items: center; justify-content: center;
}
.res-thumb svg { width: 100%; height: 100%; }

/* ---------- the words ---------- */
.res-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.res-card h2 {
  font-family: var(--disp); font-weight: 600; font-size: 22px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .02em; color: var(--head);
  margin: 0 0 6px; text-wrap: balance;
}
.res-desc { font-size: 16.5px; line-height: 1.45; color: var(--text); margin: 0 0 18px; }
.res-desc b { color: var(--ink); }

/* ---------- the two actions ----------
   One label on every card, and the download beside it, so a reader can tell
   at a glance which cards have a tool and which are print only. */
.res-cta { display: flex; gap: 9px; align-items: stretch; flex-wrap: wrap; margin-top: auto; }
.res-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-field);
  padding: 10px 20px; -webkit-appearance: none; appearance: none;
}
.res-btn-go { background: var(--rust); color: #fff; min-width: 6.5rem; }
.res-btn-go:hover { background: #a9220f; }
/* The download sits beside the button as a quieter second action. No border:
   the page-coloured fill is enough to separate it from the primary. */
.res-btn-pdf { background: var(--page); color: var(--head); }
.res-btn-pdf:hover { background: #e2dccd; }
.res-btn-pdf i { font-size: 16px; color: var(--rust); }

/* ---------- the privacy line ----------
   One sentence under the cards. It was a bordered panel inside a bordered
   panel, which gave a single sentence the weight of a section. */
.res-privacy {
  font-size: 16.5px; line-height: 1.5; color: var(--muted);
  text-align: center; margin: 4px auto 0; max-width: 40rem;
}

/* The preview is the first thing to go: on a narrow screen the words and the
   download button are what matter. */
@media (max-width: 560px) {
  .res-top { flex-direction: column; gap: 14px; }
}

/* ---------- the whole card is the target ----------
   One stretched link covers the tile. It is aria-hidden and not tabbable, so
   assistive tech and the keyboard still use the real button inside and do not
   meet the same destination twice. The button and the PDF link are lifted
   above it, which is what keeps "or print a blank one" separately clickable. */
.res-card { position: relative; }
.res-hit { position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.res-card:focus-within { box-shadow: 0 0 0 3px var(--select); }
.res-body { position: relative; z-index: 2; }
.res-cta { position: relative; z-index: 2; }
.res-card:hover .res-btn-go { background: #a9220f; }