/* ═══════════════════════════════════════════════════════════
   Blue Arctic · Resources
   Archive, category/tag/search listings and the article template.
   Built on the same tokens as the marketing pages so Resources reads
   as part of the site, not a separate blog. No new colours or fonts.
   ═══════════════════════════════════════════════════════════ */

/* ── Listing hero: the compact navy canvas, a touch tighter ── */
.res-hero .bahero-lead { max-width: 40rem; }
.res-hero .wp-block-term-description p { margin: 0; }

/* ── Topic bar: category pills + search ─────────────────── */
.res-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.res-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.5rem;
  padding-block: 1rem;
}
.res-cats.wp-block-categories {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.res-cats .cat-item a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: .3rem .95rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-2);
  font-size: var(--fs-tiny);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fast), color var(--dur-fast), background-color var(--dur-fast);
}
.res-cats .cat-item a:hover { border-color: var(--blue-500); color: var(--blue-600); }
.res-cats .current-cat a { background: var(--blue-100); border-color: var(--blue-500); color: var(--blue-700); }

.res-search.wp-block-search { margin: 0; min-width: min(20rem, 100%); }
.res-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: .2rem .2rem .2rem .9rem;
  background: var(--paper);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.res-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(45, 121, 245, .18); }
.res-search .wp-block-search__input { border: 0; background: transparent; padding: .4rem 0; font-size: var(--fs-small); color: var(--ink); min-width: 0; }
.res-search .wp-block-search__input:focus { outline: none; }
.res-search .wp-block-search__button {
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--blue-600);
  color: #fff;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  display: grid;
  place-items: center;
}
.res-search .wp-block-search__button:hover { background: var(--blue-700); }
.res-search .wp-block-search__button svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* ── Card grid ──────────────────────────────────────────── */
.res-list { padding-top: var(--space-section-lg); }
.res-grid .wp-block-post-template { gap: var(--space-card-gap); margin: 0; padding: 0; list-style: none; }
.res-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-2); }
.res-card-image { margin: 0; }
.res-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* No featured image: a quiet navy band with the brand mark, so a card never
   looks broken and the grid keeps one rhythm. */
.res-card:not(:has(.res-card-image))::before {
  content: "";
  display: block;
  height: 4.25rem;
  background:
    radial-gradient(420px 220px at 85% -10%, rgba(95, 185, 238, .28), transparent 60%),
    linear-gradient(150deg, var(--navy-800), var(--navy-950));
}
.res-card:not(:has(.res-card-image))::after {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1.35rem;
  width: 1.6rem;
  height: 1.45rem;
  background: linear-gradient(135deg, #8ED2F6 20%, var(--sky-400) 78%);
  -webkit-mask: var(--brand-peak) center / contain no-repeat;
  mask: var(--brand-peak) center / contain no-repeat;
  opacity: .9;
}

.res-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: 1.25rem 1.4rem 1.35rem;
}
.res-card-cat,
.article-cats {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.res-card-cat a, .article-cats a { color: inherit; text-decoration: none; }
.res-card-cat a:hover, .article-cats a:hover { text-decoration: underline; }
.res-card-cat .wp-block-post-terms__separator { color: var(--ink-3); }
.res-card-title {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -.012em;
  margin: 0;
}
.res-card-title a { color: var(--ink); text-decoration: none; }
/* The whole card is the target; the title link stretches over it. */
.res-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.res-card-title a:hover { color: var(--blue-600); }
.res-card-cat a { position: relative; z-index: 2; }
.res-card-title a:focus-visible { outline: none; }
.res-card:has(.res-card-title a:focus-visible) { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.res-card-excerpt { margin: 0; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.res-card-excerpt p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-card-excerpt .wp-block-post-excerpt__more-text { display: none; }
.res-card-date { margin-top: auto; padding-top: .35rem; font-size: var(--fs-tiny); color: var(--ink-3); }

.res-pagination { margin-top: 2.5rem; gap: .4rem; font-weight: 600; font-size: var(--fs-small); }
.res-pagination a, .res-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  text-decoration: none;
}
.res-pagination .page-numbers.current { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.res-empty { color: var(--ink-2); }

/* ── Article ────────────────────────────────────────────── */
.container-article { max-width: calc(48rem + 2 * var(--container-pad)); }
.article-head {
  background:
    radial-gradient(900px 300px at 90% -40%, rgba(95, 185, 238, .12), transparent 60%),
    var(--mist);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 3.5vw, 2.5rem);
}
.article-crumbs { gap: .5rem; align-items: center; margin-bottom: 1rem; }
.article-crumbs p { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.article-crumbs-home a { color: var(--ink-3); text-decoration: none; }
.article-crumbs-home a:hover { color: var(--blue-600); }
.article-crumbs-home::after { content: "›"; margin-left: .5rem; color: var(--ink-3); }
.article-title {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.article-meta { gap: .35rem 1rem; font-size: var(--fs-small); color: var(--ink-2); }
.article-meta > * { margin: 0; }
.article-meta .wp-block-post-author-name { font-weight: 600; color: var(--ink); }
.article-meta .wp-block-post-author-name::before { content: "By "; font-weight: 400; color: var(--ink-2); }
.article-meta .article-updated::before { content: "Updated "; }
.article-meta > * + *::before { margin-right: 1rem; }
.article-image { margin: 2rem 0 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.article-image img { display: block; width: 100%; height: auto; }

/* Long-form reading: one measure, generous rhythm, real hierarchy. */
.article-body { padding-block: clamp(2rem, 4vw, 3rem) 1rem; font-size: 1.0625rem; line-height: 1.75; color: var(--ink); }
.article-body > * { margin-block: 0; }
.article-body > * + * { margin-top: 1.15em; }
.article-body > h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.22; margin-top: 2.2em; }
.article-body > h3 { font-size: 1.25rem; line-height: 1.3; margin-top: 1.9em; }
.article-body > h4 { font-size: 1.0625rem; margin-top: 1.6em; }
.article-body > h2 + *, .article-body > h3 + *, .article-body > h4 + * { margin-top: .6em; }
.article-body a { text-decoration: underline; text-decoration-color: rgba(21, 96, 232, .35); text-underline-offset: .18em; }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body strong { font-weight: 650; color: var(--ink); }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body li + li { margin-top: .4em; }
.article-body li::marker { color: var(--blue-600); }
.article-body blockquote {
  margin-inline: 0;
  padding: .3rem 0 .3rem 1.25rem;
  border-left: 3px solid var(--sky-400);
  color: var(--ink-2);
  font-size: 1.1rem;
}
.article-body blockquote p { margin: 0; }
.article-body code { font-family: var(--wp--preset--font-family--mono); font-size: .9em; background: var(--frost); padding: .1em .35em; border-radius: 4px; }
.article-body pre.wp-block-code {
  background: var(--navy-950);
  color: #DCE8F3;
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font-size: .875rem;
  line-height: 1.6;
}
.article-body pre.wp-block-code code { background: none; padding: 0; color: inherit; }
.article-body .wp-block-image img { border-radius: var(--r-md); }
.article-body figcaption { font-size: var(--fs-tiny); color: var(--ink-3); margin-top: .5rem; text-align: center; }
.article-body .wp-block-separator { border: 0; height: 1px; background: var(--line); margin-block: 2.2em; }
.article-body .wp-block-table { overflow-x: auto; }

/* Callouts: a group with the "Card" style inside an article. */
.article-body .is-style-card {
  background: var(--ice-100);
  border: 1px solid var(--ice-200);
  border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
}

.article-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2rem; font-size: var(--fs-tiny); }
.article-tags a {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: var(--r-pill);
  background: var(--frost);
  color: var(--ink-2);
  text-decoration: none;
}
.article-tags a:hover { background: var(--blue-100); color: var(--blue-700); }
.article-tags .wp-block-post-terms__separator { display: none; }

.article-cta {
  margin: 2.75rem 0 clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-xl);
  color: #A8BFD3;
  background:
    radial-gradient(600px 260px at 92% -30%, rgba(95, 185, 238, .22), transparent 60%),
    linear-gradient(140deg, var(--navy-900), var(--navy-950));
}
.article-cta .eyebrow { color: var(--sky-400); margin-bottom: .5rem; }
.article-cta .article-cta-title { color: #F4F9FD; font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin-bottom: .5rem; }
.article-cta p { margin: 0 0 1.2rem; max-width: 38rem; }
.article-cta .btn-secondary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.article-cta .btn-secondary:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); color: #fff; }
.article-cta :focus-visible { outline-color: var(--sky-400); }

.article-related-title { font-size: var(--fs-h3); margin-bottom: 1.5rem; }

@media (max-width: 700px) {
  /* nowrap: a wrapping column flexbox sizes its line to the widest item, so the
     unwrapped category pills pushed the bar past 320px (WCAG 1.4.10); one line
     keeps both rows at the container width and the pills scroll inside theirs. */
  .res-bar-inner { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .res-cats.wp-block-categories { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .res-cats .cat-item a { white-space: nowrap; }
}