/* The Resources blog: the hub's list (/resources/), a topic's own archive
   (/resources/<topic>/) and one article. inc/setup.php loads this sheet for
   those three views together with assets/css/detail-pages.css, which already
   carries the blocks the section is built from — the page head, the breadcrumb
   and the closing clay band — so nothing of theirs is re-declared here.

   The list is rendered by template-parts/resource-index.php, which the hub and
   a topic page both use: a TOPIC rail of links beside the article cards and the
   pager under them, twenty articles to a page (four cards a row, five rows).
   The article page is single-post.php.

   Colours, radii, spacing and type come from tokens.css; the primitives
   (.container, .section, .section-heading, .eyebrow, .page-head, .breadcrumb,
   .btn, .text-link, .note-line, .media-slot) come from layout.css. No colour is
   invented and no !important is used; the card grid and the pager follow
   catalog.css, so the product grid and the article grid read as one site. */

/* ---------- Page head: the hub and a topic ---------- */
/* The band below the head (a white .section) brings its own air, so the head
   keeps its rhythm without the shared 34px foot. */
.resources-head{margin-bottom:0}
.resources-head__lead{margin-top:var(--space-md);max-width:640px;font-family:var(--font-display);font-size:1.06rem;font-weight:600;line-height:1.45;letter-spacing:-.015em}
.resources-head__intro{margin-top:var(--space-sm);max-width:660px;font-size:.94rem;line-height:1.62;color:var(--muted)}
.resources-head__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-lg)}

/* ---------- The list: the TOPIC rail beside the cards ---------- */
/* The rail is rendered only while the taxonomy holds a term, so the two-column
   shape is declared for a layout that actually carries one and the plain case
   keeps the whole width: without the aside the list must not end up sitting in
   the rail's narrow column. Term lists are read by everyone, so the fallback is
   the single-column declaration rather than the other way round. */
.resources-layout{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-lg)}
@media (min-width:901px){
  .resources-layout:has(.topic-filter){grid-template-columns:240px minmax(0,1fr);column-gap:var(--space-lg)}
}
.resources-list{min-width:0}
/* The "showing x–y of z" line, in the products index's own type. */
.resources-list__range{margin:0 0 var(--space-md);font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.resources-list__empty{margin:0;padding:var(--space-md) 0;font-size:.88rem;color:var(--muted)}

/* ---------- The TOPIC rail ---------- */
.topic-filter{align-self:start;min-width:0}
.topic-filter__title{margin:0;padding-bottom:var(--space-sm);border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
/* The marker column is reserved on every link, so the current one is marked by
   a dot and weight rather than by the text moving sideways. */
.topic-filter__list{list-style:none;margin:var(--space-xs) 0 0;padding:0}
.topic-filter__item{min-width:0}
.topic-filter__link{position:relative;display:block;padding:8px 0 8px 14px;font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--muted);transition:color .22s}
.topic-filter__link::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--clay);transform:translateY(-50%) scale(0);transition:transform .22s}
.topic-filter__link:hover{color:var(--ink)}
.topic-filter__link--current{color:var(--ink);font-weight:800}
.topic-filter__link--current::before{transform:translateY(-50%) scale(1)}

/* ---------- The article cards: four to a row ---------- */
/* The card is the product card's shape in an article's clothes: same surface,
   same radius, same lift on hover, so the two lists belong to one site. */
.resource-grid{list-style:none;margin:0;padding:0;display:grid;gap:30px 20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.resource-grid__item{min-width:0}
.resource-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card);overflow:hidden;transition:transform .24s,border-color .24s}
.resource-card:hover{transform:translateY(-4px);border-color:var(--line)}
/* The frame the picture sits in. Its proportions belong to the card, not to the
   shared .media-slot the card falls back to when no featured image exists: that
   panel keeps whatever layout.css gives it and is only asked to fill the frame. */
.resource-card__media{position:relative;aspect-ratio:4/3;background:var(--cream);overflow:hidden}
.resource-card__media .media-slot{width:100%;height:100%;border-radius:0}
.resource-card__image{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.resource-card:hover .resource-card__image{transform:scale(1.045)}
.resource-card__body{display:flex;flex:1;flex-direction:column;padding:18px 18px 20px}
.resource-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.resource-card__topic{color:var(--clay)}
/* A middot between the topic and the date, only when both are there. */
.resource-card__topic + .resource-card__date::before{content:"·";margin-right:8px;color:var(--line)}
.resource-card__date{font-weight:600;letter-spacing:.1em}
.resource-card__title{margin-top:var(--space-sm);font-size:1.02rem;line-height:1.32;letter-spacing:-.02em}
.resource-card:hover .resource-card__title{color:var(--clay)}
/* Two articles on one row keep their feet level whatever the excerpt's length. */
.resource-card__excerpt{margin-top:10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:.82rem;line-height:1.5;color:var(--muted)}

/* ---------- The pager ---------- */
/* paginate_links() hands over .page-numbers (a link, the .current page, the
   .prev/.next words and the .dots gap); only their shape is set, and it is the
   product grid's shape to the pixel. */
.resource-pagination{margin-top:var(--space-lg)}
.resource-pages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.resource-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);color:var(--ink);font-family:var(--font-display);font-size:.82rem;font-weight:700;transition:border-color .22s,background .22s}
.resource-pagination a.page-numbers:hover{border-color:var(--ink);background:var(--canvas)}
.resource-pagination .page-numbers.current{border-color:var(--clay);background:var(--cream)}
.resource-pagination .page-numbers.dots{border-color:transparent;background:transparent}

/* ---------- One article ---------- */
/* An article is one measured column of text — several minutes of reading — and not
   a page of blocks, so its trail, its head, its copy and its foot all hold to the
   same column, centred in the page the way the legal documents' reading column sits
   in theirs. The featured photograph above them is the article's one wide element
   and keeps the page's full width. */
.article .breadcrumb,.article__head{max-width:76ch;margin-inline:auto}
/* The head is the shared .page-head; only what an article adds to it is here:
   the topic it is filed under as a link, and the date under the title. */
.article__head .page-head__eyebrow{margin-bottom:var(--space-sm)}
/* An article title runs to two or three lines rather than across the whole
   container at 3.4rem. */
.article__head .page-head__title{max-width:26ch}
.article__topic{padding-bottom:2px;border-bottom:1px solid currentColor}
.article__topic:hover{color:var(--clay-dark)}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm)}
.article__date{font-family:var(--font-display);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* The featured photograph: full width, capped in height, so a tall upload does
   not push the article itself off the first screen. */
.article__media{margin:0 auto var(--space-xl)}
.article__image{display:block;width:100%;height:auto;max-height:640px;object-fit:cover;background:var(--cream);border-radius:var(--radius-card);box-shadow:0 22px 44px rgb(76 55 39 / 10%)}

/* The article body: the reading column and, under it, the article's own foot.
   The air below it belongs to the closing band's padding as well, so the page
   does not end on the last line. */
.article__body{padding-bottom:var(--space-xl)}

/* ---------- What the editor writes: the WordPress body ---------- */
/* One rhythm for everything the editor can put in an article, at a measure a
   buyer can read for several minutes. The consecutive-sibling rule carries the
   default gap; headings, quotes, figures and rules take more, lists and tables
   keep their own internal spacing so their margins are never flattened. */
.article__prose{max-width:76ch;margin-inline:auto;font-size:1.02rem;line-height:1.72;color:var(--ink)}
.article__prose > * + *{margin-top:var(--space-md)}
.article__prose > :first-child{margin-top:0}
.article__prose :is(p,ul,ol,dl){margin-top:var(--space-md)}
.article__prose h2,.article__prose h3,.article__prose h4{font-family:var(--font-display)}
.article__prose h2{margin-top:var(--space-xl);font-size:clamp(1.6rem,2.4vw,2.05rem);line-height:1.22}
.article__prose h3{margin-top:var(--space-lg);font-size:1.3rem;line-height:1.3}
.article__prose h4{margin-top:var(--space-lg);font-size:1.06rem;line-height:1.35;letter-spacing:-.01em}
.article__prose a{color:var(--clay);border-bottom:1px solid rgb(154 77 50 / 32%)}
.article__prose a:hover{border-bottom-color:currentColor}
.article__prose ul,.article__prose ol{padding-left:22px}
.article__prose li + li{margin-top:6px}
.article__prose li > ul,.article__prose li > ol{margin-top:6px}
.article__prose blockquote{margin:var(--space-lg) 0 0;padding:var(--space-sm) 0 var(--space-sm) var(--space-md);border-left:3px solid var(--apricot);font-family:var(--font-display);font-size:1.06rem;line-height:1.55;color:var(--muted)}
.article__prose blockquote > * + *{margin-top:var(--space-sm)}
.article__prose blockquote cite{display:block;margin-top:var(--space-xs);font-size:.78rem;font-style:normal;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.article__prose img{display:block;max-width:100%;height:auto;border-radius:var(--radius-card)}
.article__prose figure{margin:var(--space-lg) 0 0}
.article__prose figure img{margin-inline:auto}
.article__prose figcaption{margin-top:10px;font-size:.8rem;line-height:1.5;color:var(--muted);text-align:center}
.article__prose table{width:100%;border-collapse:collapse;font-size:.9rem}
.article__prose th,.article__prose td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.article__prose th{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.article__prose hr{margin:var(--space-xl) 0;border:0;border-top:1px solid var(--line)}

/* ---------- What a guide's own copy brings with it ---------- */
/* A copy that opens with its own table of contents is carrying navigation, so it
   is drawn as a panel rather than as one more paragraph of the guide. */
.article__prose nav{margin-top:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card)}
.article__prose nav > *{margin:0}
.article__prose nav > * + *{margin-top:8px}
.article__prose nav strong{font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}

/* A copy that opens with a line of bold text prints it as the lead it reads as,
   rather than as a second title set inside the body. */
.article__prose header > strong:first-child{display:block;font-family:var(--font-display);font-size:1.08rem;line-height:1.45;letter-spacing:-.015em;color:var(--muted)}

/* A link into a section of a long guide has to land below the sticky header: the
   copy's own sections and its headings are both targets. */
.article__prose [id]{scroll-margin-top:calc(var(--layout-header-height) + var(--space-md))}

/* ---------- The foot of an article ---------- */
/* Aligned with the reading column above it, because the rule is part of the
   article's edge rather than of the page. */
.article__foot{max-width:76ch;margin:var(--space-xl) auto 0;padding-top:var(--space-md);border-top:1px solid var(--line)}
.article__topics{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-sm);margin:0}
.article__topics-label{font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- The password form of a protected article ---------- */
/* WordPress asks for the password with its own form before an article is read;
   it is rendered instead of the prose, so it is dressed as this theme's panel
   and its fields as this theme's fields. */
.article__protected{margin-inline:auto;max-width:520px;padding:var(--space-md) var(--space-lg);background:var(--white);border:1px dashed var(--line);border-left:3px solid var(--clay);border-radius:var(--radius-control);font-size:.92rem;line-height:1.6;color:var(--muted)}
.article__protected p{margin-top:var(--space-sm)}
.article__protected p:first-child{margin-top:0}
.article__protected label{display:block;font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.article__protected input[type="password"]{display:block;width:100%;max-width:280px;min-height:44px;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--white);color:var(--ink);font-size:.85rem}
.article__protected input[type="password"]:focus{border-color:var(--clay)}
.article__protected input[type="submit"],.article__protected button[type="submit"]{min-height:44px;margin-top:var(--space-sm);padding:11px 22px;border:1px solid transparent;border-radius:var(--radius-control);background:var(--clay);color:var(--white);font-family:var(--font-display);font-size:.82rem;font-weight:700}
.article__protected input[type="submit"]:hover,.article__protected button[type="submit"]:hover{background:var(--clay-dark)}

/* ---------- Narrow screens ---------- */
/* The rail moves above the list on its own: the layout falls back to its single
   column, which is also what a page with no topics keeps at every width. The
   card grid steps down at the widths catalog.css uses, so a row holds four,
   three, two and at last one card. */
@media (max-width:1100px){
  .resource-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article__prose{font-size:1rem;line-height:1.68}
}
@media (max-width:560px){
  .resource-grid{grid-template-columns:1fr;gap:var(--space-md)}
  .resource-card__excerpt{-webkit-line-clamp:4}
  .resources-head__actions{width:100%}
  .resources-head__actions .btn{flex:1 1 auto}
  .article__media{margin-bottom:var(--space-lg)}
  .article__image{max-height:60vh}
  .article__prose table{font-size:.84rem}
  .article__prose th,.article__prose td{padding:10px 11px}
}