/* Resources hub (/resources/). Owner: WP-F (resources and articles). Every class is prefixed res- (layout)
   or ri- (cover illustrations). Tokens only, no raw colours. Breakpoints: 480, 768, 1024.
   Phones (below 768): note with a "More about me" toggle (author.css), a compact featured card, the other
   seven articles as one bordered list (.row-list in site.css) and the article CTA box. */

/* Shared dotted backdrop for covers */
.res-feature-media, .res-post-cover {
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--bg-2);
  transition: background-color var(--t) var(--ease);
}

/* 1. Hero (the note from the author is styled in author.css) -------------------------------- */
.res-hero { padding-bottom: clamp(28px, 4.5vw, 56px); }
.res-hero .hero-glow { opacity: .55; }
.res-hero h1 { max-width: 20ch; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.03em; }

/* 2. Kicker (number, stage, read time) and "inside" line, used on every card ------------------ */
.res-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-eyebrow); font-weight: 500; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.res-num { font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: .04em; }
.res-num::after { content: ""; display: inline-block; width: 14px; height: 1px; margin-left: 10px; vertical-align: middle; background: var(--line-strong); }
.res-kicker .badge { letter-spacing: 0; text-transform: none; }
.res-time { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-time .icon { width: 15px; height: 15px; color: var(--faint); }
.res-inside { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.res-inside .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.res-inside-label { color: var(--ink); font-weight: 500; }

/* 3. Featured article ------------------------------------------------------------------------ */
.res-feature { display: grid; gap: 0; padding: 0; overflow: hidden; border-radius: var(--r-frame); }
.res-feature-media { position: relative; display: grid; place-items: center; gap: 12px; padding: 28px 20px 16px; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.res-media-note { justify-self: start; padding: 2px 8px; margin-left: -8px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--muted); font-size: 12.5px; }
.res-feature-body { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3.4vw, 48px); }
.res-feature-title { font-size: var(--fs-title, clamp(24px, 2.6vw, 32px)); line-height: 1.15; letter-spacing: -.025em; }
.res-feature-title a { color: inherit; text-decoration: none; }
.res-feature-dek { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 17.5px); line-height: 1.6; }
.res-read { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.res-read .btn-link { font-size: 15px; }
/* The read time sits in the kicker only where the "Read the article" row is hidden (below 768) */
.res-time-kicker { display: none; }
@media (min-width: 1024px) {
  .res-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .res-feature-media { min-height: 400px; padding: 36px 40px 20px; border-bottom: 0; border-right: 1px solid var(--line-soft); }
  .res-feature-body { justify-content: center; }
  .res-media-note { position: absolute; left: 24px; bottom: 18px; margin-left: 0; }
}
@media (hover: hover) {
  .res-feature:hover .res-feature-media, .res-post:hover .res-post-cover { background-color: var(--card-2); }
}

/* The illustrative answer scene inside the featured card */
.res-scene { width: 100%; max-width: 500px; display: grid; gap: 12px; font-size: 14px; line-height: 1.5; }
.res-q {
  justify-self: end; max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--ink); font-weight: 500;
}
.res-answer {
  padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--accent-line);
  box-shadow: var(--highlight), var(--shadow);
}
.res-answer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
.res-answer-head .icon { width: 16px; height: 16px; color: var(--accent); }
.res-answer-text { color: var(--ink-2); }
.res-answer-text b { color: var(--ink); font-weight: 600; }
.res-cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.res-cite { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: 12px; white-space: nowrap; }
.res-missing {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px 4px 6px; border-radius: var(--r-pill);
  border: 1px dashed var(--accent-line); color: var(--accent-text); font-size: 12.5px; font-weight: 500;
}
.res-missing .icon { width: 14px; height: 14px; }
.res-results { display: grid; gap: 8px; -webkit-mask: linear-gradient(180deg, black 20%, transparent 100%); mask: linear-gradient(180deg, black 20%, transparent 100%); }
.res-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.res-result-you { border-color: var(--line-strong); }
.res-rank { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--card-2); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.res-result-you .res-rank { background: var(--ink); color: var(--bg); }
.res-result-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.res-result-url { color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.res-bar { display: block; height: 6px; width: 72%; border-radius: 3px; background: var(--muted); opacity: .3; }
.res-bar-lg { width: 88%; }
.res-bar-md { width: 60%; }
.res-bar-sm { width: 38%; opacity: .45; background: var(--blue); }
/* The faded results list only fits beside the answer (1024 and up), and only two rows of it: in the 400px
   media box a third row ran under the "Illustrative example" note */
@media (max-width: 1023px) { .res-results { display: none; } }
.res-result-extra { display: none; }

/* Phones and small tablets: the question and the answer only; the title link is the only link */
@media (max-width: 767px) {
  .res-feature-media { gap: 8px; padding: 16px 16px 12px; place-items: start stretch; }
  .res-scene { font-size: 13.5px; gap: 10px; }
  .res-q { max-width: 94%; padding: 8px 12px; }
  .res-answer { padding: 12px 14px; }
  .res-answer-head { margin-bottom: 4px; }
  .res-missing { margin-top: 10px; }
  .res-cites, .res-feature .res-inside, .res-feature .res-read { display: none; }
  .res-media-note { margin-left: 0; }
  .res-feature-body { gap: 8px; padding: 16px 18px 18px; }
  .res-feature-title { font-size: 23px; line-height: 1.16; }
  .res-feature-dek { font-size: 16px; line-height: 1.55; }
  .res-feature .res-num::after { display: none; }
  .res-time-kicker { display: inline-flex; }
  /* Narrow phones (below about 370px): the kicker doesn't fit on one line, so the read time wraps
     under the number instead of hanging alone at the right edge */
  .res-feature-body { container-type: inline-size; }
}
@container (max-width: 300px) { .res-feature .res-time-kicker { margin-left: 0; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .res-feature-media { padding: 24px 32px 16px; }
  .res-feature-media .res-scene { max-width: 460px; }
}

/* 4. The article list ------------------------------------------------------------------------ */
.res-more { padding-block: clamp(32px, 6vw, 80px) 0; }
.res-more-title { margin-bottom: clamp(12px, 3vw, 32px); font-size: var(--fs-title, clamp(24px, 2.6vw, 32px)); }

.res-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.res-post { --pad: clamp(20px, 2.2vw, 26px); gap: 0; padding: 0; overflow: hidden; }
.res-post-cover { height: 120px; display: grid; place-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.res-ill { width: 100%; height: 100%; max-width: 320px; overflow: visible; }
.res-post-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: var(--pad); }
.res-post .card-title { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.res-post .card-title a { color: inherit; text-decoration: none; }
.res-post .card-title a.stretched { display: block; padding-block: 1px; } /* single-line titles still give a 24px target */
/* The "inside" line sits at the bottom so titles of different lengths still line up */
.res-post .res-inside { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* Below 768: one bordered list of rows (number, stage, time, then the title). .row-list (site.css) draws the box. */
@media (max-width: 767px) {
  .res-grid { gap: 0; }
  .res-post-cover, .res-post .res-inside { display: none; }
  .res-post-body { gap: 5px; padding: 14px 16px; }
  .res-post .card-title { font-size: 16.5px; line-height: 1.35; letter-spacing: -.01em; }
  .res-post.card-link:focus-within { outline-offset: -2px; }
}
@media (max-width: 767px) and (hover: hover) { .res-grid > .res-post:hover { background: var(--card); } }
@media (min-width: 768px) {
  .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-grid > .res-post:last-child { grid-column: 1 / -1; flex-direction: row; }
  .res-grid > .res-post:last-child .res-post-cover { width: 44%; flex: none; height: auto; min-height: 180px; border-bottom: 0; border-right: 1px solid var(--line-soft); }
}
@media (min-width: 1024px) {
  .res-post-cover { height: 140px; padding: 16px 20px; }
  .res-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .res-grid > .res-post { grid-column: span 2; }
  .res-grid > .res-post-wide, .res-grid > .res-post-wide:last-child { grid-column: span 3; }
  .res-grid > .res-post:last-child { flex-direction: column; }
  .res-grid > .res-post:last-child .res-post-cover { width: auto; height: 140px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .res-post-wide .res-post-cover, .res-grid > .res-post-wide:last-child .res-post-cover { height: 150px; }
}

/* 5. Cover illustrations (decorative, token colors so both themes work) ---------------------- */
.res-ill .ri-row { fill: var(--surface); stroke: var(--line-strong); }
.res-ill .ri-row-hi { fill: var(--accent-soft); stroke: var(--accent-line); }
.res-ill .ri-card { fill: var(--surface); stroke: var(--line-strong); }
.res-ill .ri-bubble { fill: var(--card-2); stroke: var(--line); }
.res-ill .ri-accent { fill: var(--accent); }
.res-ill .ri-blue { fill: var(--blue); }
.res-ill .ri-green { fill: var(--green); }
.res-ill .ri-teal { fill: var(--teal); }
.res-ill .ri-dot { fill: var(--muted); opacity: .45; }
.res-ill .ri-ink { fill: var(--ink); opacity: .55; }
.res-ill .ri-muted { fill: var(--muted); opacity: .35; }
.res-ill .ri-fade { opacity: .45; }
.res-ill .ri-slot { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .9; }
.res-ill .ri-link { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .7; }
.res-ill .ri-link-solid { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .45; }
.res-ill .ri-glass { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.res-ill .ri-band { fill: var(--accent-soft); stroke: var(--accent-line); }
.res-ill .ri-base { stroke: var(--line-strong); stroke-width: 1.5; }
.res-ill .ri-mean { stroke: var(--accent); stroke-width: 1.5; }
.res-ill .ri-dots circle { fill: var(--blue); opacity: .85; }
.res-ill .ri-dropped circle { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 2 2.5; opacity: .7; }
.res-ill .ri-ring { fill: none; stroke: var(--card-2); stroke-width: 18; }
.res-ill .ri-seg { fill: none; stroke-width: 18; }
.res-ill .ri-seg-third { stroke: var(--teal); opacity: .8; }
.res-ill .ri-seg-comp { stroke: var(--blue); }
.res-ill .ri-seg-you { stroke: var(--accent); }
.res-ill .ri-bar-teal { fill: var(--teal); opacity: .8; }
.res-ill .ri-bar-blue { fill: var(--blue); }
.res-ill .ri-bar-accent { fill: var(--accent); }
.res-ill .ri-person { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .75; }
.res-ill .ri-agent { fill: var(--surface); stroke: var(--blue); stroke-width: 1.5; }
.res-ill .ri-agent-mark { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.res-ill .ri-cell { fill: var(--card-2); stroke: var(--line); }

/* 6. Final CTA: the same .cta-box.cta-box-row the articles end with ----------------------------- */
.res-cta-section { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 96px); }
.res-cta .res-cta-note { color: var(--muted); font-size: 13.5px; }
@media (max-width: 479px) { .res-cta > .btn { width: 100%; } }

/* Bigger hit area for the author name link, without moving the layout */
.res-note .byline-name { display: inline-block; padding-block: 10px; margin-block: -10px; }