/* Shared image-led resource directories: the blog and free tools. */
.resource-directory { padding-bottom: clamp(64px, 8vw, 112px); }
.resource-head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--space-8); padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 52px); }
.resource-head h1 { font-family: var(--font-display); font-weight: var(--font-display-weight); margin-top: var(--space-5); font-size: var(--fs-d1); line-height: 1.02; letter-spacing: -.05em; }
.resource-head .lead { max-width: 27em; justify-self: end; padding-bottom: var(--space-2); line-height: 1.75; text-wrap: pretty; }
.resource-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); color: var(--caption); font-size: var(--fs-xs); }
.resource-link { display: inline-flex; align-items: center; gap: var(--icon-gap-md); margin-top: var(--space-6); color: var(--ink); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.resource-link .bg-icon { transition: translate var(--duration-normal) var(--ease-out); }
.resource-link:hover .bg-icon { translate: 3px 0; }
.resource-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.resource-nav > span { margin-right: auto; color: var(--caption); font-size: var(--fs-sm); }
.resource-nav a { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); font-size: var(--fs-sm); text-decoration: none; }
.resource-nav a:hover { color: var(--gold-deep); }
.resource-nav a span { color: var(--caption); font: var(--fs-xs) var(--font-sans); }
.resource-nav, .resource-section { scroll-margin-top: 84px; }
.resource-section { padding-top: clamp(48px, 6vw, 80px); }
.resource-section__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-8); margin-bottom: var(--space-8); }
.resource-section__head h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -.035em; }
.resource-section__head p { max-width: 28em; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--space-7); }
.resource-card { min-width: 0; }
.resource-card > a { display: block; height: 100%; text-decoration: none; border-radius: var(--r-lg); }
.resource-card > a:focus-visible { outline: 2px solid var(--site-accent); outline-offset: var(--space-2); }
.resource-card__visual { position: relative; aspect-ratio: 1.6; overflow: hidden; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--resource-stage, var(--stage-sand)); }
.resource-card__visual--sage { background: var(--stage-sage); }
.resource-card__visual--clay { background: var(--stage-clay); }
.resource-card__visual--sand { background: var(--stage-sand); }
.resource-card__visual > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.resource-card__arrow { position: absolute; right: var(--space-3); bottom: var(--space-3); display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--ink); }
.resource-card__copy { padding: var(--space-5) var(--space-1) 0; }
.resource-card h3 { margin-top: var(--space-3); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; letter-spacing: -.025em; text-wrap: pretty; }
.resource-card__description { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.65; text-wrap: pretty; }
.resource-card__detail { margin-top: var(--space-2); color: var(--caption); font-size: var(--fs-xs); line-height: 1.65; }
.resource-card a:hover h3 { color: var(--gold-deep); }
.resource-card--actions { display: flex; flex-direction: column; }
.resource-card--actions .resource-card__copy { flex: 1; }
.resource-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.resource-card__actions .resource-link { margin-top: 0; padding-block: var(--space-2); }
.resource-card__actions a:focus-visible { outline: 2px solid var(--site-accent); outline-offset: var(--space-2); }
.resource-directory--compact { padding-bottom: var(--space-8); }
.resource-directory--compact .page-head { padding-block: var(--space-8) var(--space-5); text-wrap: balance; }
.resource-directory--compact .resource-section { padding-top: var(--space-6); }
.resource-directory--compact .resource-card__visual { aspect-ratio: auto; padding: var(--space-2); }
.resource-directory--compact .resource-card__visual > img { display: block; height: auto; aspect-ratio: 2; object-fit: cover; object-position: center top; }
.resource-directory--compact .resource-card__copy { padding-top: var(--space-2); }
.resource-end { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.resource-end h2 { font-family: var(--font-display); font-weight: var(--font-display-weight); margin-top: var(--space-4); font-size: clamp(30px, 3vw, 42px); line-height: 1.12; }
.resource-end > div:last-child { max-width: 28em; justify-self: end; color: var(--text-muted); }
@media (max-width: 980px) {
  .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-head .lead { font-size: var(--fs-body); }
}
@media (max-width: 640px) {
  .resource-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .resource-head .lead { justify-self: start; max-width: 27em; }
  .resource-nav { column-gap: var(--space-5); }
  .resource-nav > span { width: 100%; }
  .resource-section__head { display: block; margin-bottom: var(--space-6); }
  .resource-section__head p { margin-top: var(--space-3); }
  .resource-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .resource-card h3 { font-size: var(--fs-xl); }
  .resource-card__copy { padding-top: var(--space-4); }
  .resource-end { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .resource-end > div:last-child { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .resource-link .bg-icon { transition: none; } }