/* Resources uses the pricing frame and shared blog search illustration. */
.wk-resources { color:var(--wk-ink); background:var(--wk-paper); --wk-resources-inset:max(calc(var(--wk-grid-gutter) + 48px), calc((100% - 1104px) / 2)); }
.wk-resources * { box-sizing:border-box; }
.wk-resources-shell { margin-inline:var(--wk-resources-inset); }
.wk-resources h1,.wk-resources h2,.wk-resources p { margin:0; }
.wk-resources h1,.wk-resources h2 { font-family:var(--wk-display,Newsreader,Georgia,serif); font-weight:375; letter-spacing:-.035em; text-wrap:balance; }
.wk-resources h1 { font-size:clamp(44px,4vw,56px); line-height:1; }
.wk-resources a { color:inherit; text-decoration:none; }
.wk-resources :is(a,button,[tabindex]):focus-visible { outline:2px solid var(--wk-cobalt); outline-offset:3px; }
.wk-resources-head { padding-block:160px 36px; border-bottom:1px solid var(--wk-grid-color); }
.wk-resources-head .wk-resources-shell { position:relative; }
.wk-resources-head p { max-width:510px; margin-top:24px; font-size:16px; line-height:1.5; color:#62676c; }
.wk-resources-pill { position:absolute; top:0; left:0; transform:translateY(calc(-100% - 16px)); padding:5px 9px; border:1px solid #e1e4e9; border-radius:4px; background:#fff; color:#4d5665; font:400 12px/1.4 var(--wk-sans,Inter,sans-serif); box-shadow:0 1px 2px #1820310a,0 3px 7px #18203112; }
.wk-resources-guides { padding-block:12px 40px; }
.wk-resources-section-head { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:20px 24px; }
.wk-resources-section-head h2 { font-size:32px; line-height:1.1; }
.wk-resources-blog-actions { display:flex; align-items:center; gap:24px; }
.wk-resources-blog-actions>a { display:flex; gap:16px; font-size:13px; }
.wk-resources-carousel-controls { display:flex; gap:8px; }
.wk-resources-carousel-controls[hidden] { display:none; }
.wk-resources-carousel-controls button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--wk-stone); border-radius:4px; background:white; color:var(--wk-ink); font:400 18px/1 Inter,sans-serif; cursor:pointer; }
.wk-resources-carousel-controls button:hover:not(:disabled) { background:#f5f5f5; }
.wk-resources-carousel-controls button:disabled { opacity:.3; cursor:default; }
.wk-resources-carousel { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3.15); gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#c7c7c7 transparent; padding:4px 4px 12px; margin-inline:-4px; }
.wk-resources-directory { border-top:1px solid var(--wk-grid-color); padding-block:40px 56px; }
.wk-resources-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.wk-resources-directory a { padding-block:8px; }
.wk-resources-directory h2 { display:flex; justify-content:space-between; gap:16px; font:500 15px/1.5 var(--wk-sans,Inter,sans-serif); letter-spacing:-.02em; }
.wk-resources-directory p { margin-top:12px; max-width:310px; color:#62676c; font-size:14px; line-height:1.6; }
.wk-resources-directory a:hover h2 { color:var(--wk-cobalt); }
@media(max-width:1100px) { .wk-resources-carousel { grid-auto-columns:calc((100% - 32px) / 2.15); } }
@media(max-width:760px) {
 .wk-resources { --wk-resources-inset:calc(var(--wk-grid-gutter) + 16px); }
 .wk-resources-head { padding-block:144px 28px; }
 .wk-resources h1 { font-size:clamp(44px,11vw,52px); }
 .wk-resources-section-head { flex-wrap:wrap; gap:16px; }
 .wk-resources-section-head h2 { font-size:28px; }
 .wk-resources-blog-actions { width:100%; justify-content:space-between; }
 .wk-resources-carousel { grid-auto-columns:88%; gap:12px; }
 .wk-resources-directory { padding-block:20px 40px; }
 .wk-resources-directory-grid { grid-template-columns:1fr; gap:0; }
 .wk-resources-directory a { padding-block:24px; }
 .wk-resources-directory a+a { border-top:1px solid var(--wk-grid-color); }
}
@media(max-width:420px) { .wk-resources { --wk-resources-inset:calc(var(--wk-grid-gutter) + 12px); } }

.wk-resources-blog-actions > .wk-resources-browse { align-items:center; min-height:40px; padding:10px 14px; border:1px solid #000; border-radius:4px; background:#000; color:#fff; }
.wk-resources-blog-actions > .wk-resources-browse:hover { background:#292929; color:#fff; }
.wk-resources-carousel { padding-top:10px; padding-bottom:24px; }

/* Only carousel layout is specific to Resources; cards use blog.css unchanged. */
.wk-resources-carousel > .wk-blog-card { scroll-snap-align:start; }
.wk-resources-carousel { width:auto; padding-bottom:36px; }
.wk-resources-empty { grid-column:1 / -1; padding-block:24px; font-size:15px; color:var(--wk-slate); }

/* Extend the scroll viewport into the rail gutter so card shadows can fade.
   Matching padding keeps the cards aligned with the original content frame. */
.wk-resources-carousel { margin-inline:-32px; padding:16px 32px 56px; scroll-padding-inline:32px; }

/* Keep the Insights anchor clear of the sticky header. */
.wk-resources-guides { scroll-margin-top: 80px; }
/* The anchor receives focus for navigation, but is not an interactive control. */
.wk-resources-guides:focus { outline: none; }