/**
 * DocuPOW — Resources Hub page styles (page-templates/resources.php only).
 *
 * Scope: everything lives under .page-resources (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this
 * file adds the centered hero with the button-in-field search, the sticky
 * topic-filter bar, the featured 8/4 card split, the extension grid, the
 * pagination and the empty/preview note.
 *
 * Light-canvas contrast contract (tokens + one documented derived value):
 *  - The hero eyebrow, topic chips/eyebrows and "Read" links are
 *    var(--techblue) — 4.54:1 on white (AA for normal-size text; the mono
 *    labels are 13px/500-600).
 *  - h1 / card titles / author names are var(--ink) — 16.68:1 on white (AA).
 *  - Leads, excerpts, meta lines and the count are var(--text-muted) —
 *    9.34:1 on white, 8.70:1 on --gray (AA).
 *  - Active filter chips + the current pagination number are var(--white)
 *    on var(--techblue) — 4.54:1 (AA for the 13px/500 mono label).
 *  - The avatar circle's initials are var(--techblue) on var(--gray) —
 *    decorative (aria-hidden) and never the only signal: the author's full
 *    name sits beside it in Ink.
 *  - DERIVED HEX #1 — .page-resources__filterbar background
 *    rgba(255,255,255,.95): white at 95% alpha behind the backdrop blur,
 *    mirroring .dp-header's progressive enhancement (documented there).
 *  - CALM-MOTION POLICY: the export's image zoom-on-hover
 *    (group-hover:scale-105) and its card shadows are DROPPED — card
 *    hovers are the house flat treatment only: lift + border -> techblue
 *    + title -> techblue. Zero shadows on this page.
 *
 * Filtering is FUNCTIONAL, not decorative: the [hidden] rule below applies
 * unconditionally (never inside a motion media query), so search/chips work
 * identically under prefers-reduced-motion: reduce.
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if resources.js never runs) everything is visible. NO floats, NO
 *    bobs, NO loops — the ONE bespoke moment is the hero .is-ready entrance.
 *  - resources.js hooks: .is-ready on .page-resources__hero (staged copy
 *    entrance: eyebrow/h1/lead/search). main.js owns [data-dp-reveal] and
 *    the stagger delays (resources.js clears the inline delays post-reveal
 *    so the card hover lifts are never postponed).
 *  - Card hover lifts use the standalone `translate` property (never
 *    `transform`) so they can never fight the reveal's transform.
 *  - The sticky filter bar carries no data-dp-reveal: a transform
 *    transition on a position:sticky element jitters, and the controls are
 *    functional chrome.
 *  - A final prefers-reduced-motion: reduce block stills the lifts.
 */

/* =========================================================================
   Page scope — light canvas, section rhythm, functional [hidden]
   ========================================================================= */
.page-resources {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* Filtering visibility — resources.js toggles the [hidden] attribute.
   Authored display values on the cards (flex) would otherwise beat the UA's
   [hidden] rule, so restate it here. Unconditional: filtering works without
   motion. */
.page-resources [hidden] {
  display: none !important;
}

/* 96px page rhythm on desktop, 64px under 768. Hero and library share the
   white canvas, so they split the 96 between them (48 + 48). */
.page-resources__hero {
  padding-block: var(--space-7) var(--space-5);
}

.page-resources__library {
  padding-block: var(--space-5) var(--space-7);
}

@media (max-width: 767.98px) {
  .page-resources__hero {
    padding-block: var(--space-6) var(--space-4);
  }

  .page-resources__library {
    padding-block: var(--space-4) var(--space-6);
  }
}

/* =========================================================================
   S1 — Hero (centered, max 768, button-in-field search)
   ========================================================================= */
.page-resources__hero {
  text-align: center;
}

.page-resources__hero-inner {
  max-width: 768px; /* export max-w-3xl */
  margin-inline: auto;
}

/* Eyebrow — mono technical label in Tech Blue per the export's text-primary
   (4.54:1 on white — AA at 13px/600). */
.page-resources__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-2);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink per the export. */
.page-resources__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* body-lg lead. */
.page-resources__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px; /* export max-w-2xl */
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* Search field — the export's inline button-in-field design: relative
   wrapper, 20px glyph inset left, primary "Search" button absolute right
   with an 8px inset all round. Focus ring comes from the global
   :focus-visible outline. */
.page-resources__search {
  position: relative;
  max-width: 576px; /* export max-w-xl */
  margin-inline: auto;
}

.page-resources__search-icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  translate: 0 -50%;
  display: block;
  color: var(--text-muted);
  pointer-events: none;
}

.page-resources__search-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* 56px-tall input (export py-4); right padding clears the in-field button
   (button ~103px wide + 8px inset + 8px gap). */
.page-resources__search-input {
  width: 100%;
  padding: 15px 128px 15px 44px; /* 44 = 16 inset + 20 glyph + 8 gap */
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.page-resources__search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* The in-field primary button — stretches between the 8px insets. */
.page-resources__search-btn {
  position: absolute;
  right: var(--space-1);
  top: var(--space-1);
  bottom: var(--space-1);
  padding-block: 0;
  border-radius: 6px; /* export rounded-md, nested inside the 8px field */
}

/* <480 — keep the field usable on the narrowest phones: the button hugs a
   tighter padding and the input clears less. */
@media (max-width: 479.98px) {
  .page-resources__search-input {
    padding-right: 104px;
  }

  .page-resources__search-btn {
    padding-inline: var(--space-2);
  }
}

/* =========================================================================
   S2 — Sticky filter bar (pinned under the 72px global header)
   ========================================================================= */
.page-resources__filterbar {
  position: sticky;
  top: 72px; /* .dp-nav__inner height in main.css — the bar tucks under the header hairline */
  z-index: 100; /* below the header (1000) and drawer (1100) */
  background-color: var(--white);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-2);
}

/* Progressive enhancement mirroring .dp-header: translucent + blur where
   supported (white at 95% — derived, documented in the header comment). */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .page-resources__filterbar {
    background-color: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.page-resources__filterbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Chip row — scrolls horizontally when it cannot fit (phones), scrollbar
   hidden (the house no-scrollbar treatment, scoped here). */
.page-resources__filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Breathing room so chip focus rings are not clipped by the scroll box. */
  padding-block: 2px;
}

.page-resources__filters::-webkit-scrollbar {
  display: none;
}

/* Filter chips — real buttons, mono 13, pill radius. Muted-on-gray resting
   state (8.70:1 — AA); active = techblue fill + white text (4.54:1 — AA),
   always paired with aria-pressed="true" so state is never colour-only. */
.page-resources__chip-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-2);
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 9999px; /* pill — sanctioned for chips/tags per DESIGN.md */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.page-resources__chip-btn:hover {
  border-color: var(--techblue);
}

.page-resources__chip-btn[aria-pressed="true"] {
  background-color: var(--techblue);
  border-color: var(--techblue);
  color: var(--white);
}

/* The "All" reset chip reads slightly heavier, like the export's lead chip. */
.page-resources__chip-btn--all {
  font-weight: 600;
}

/* Hairline between the reset chip and the topic chips. */
.page-resources__filters-divider {
  flex: none;
  width: 1px;
  height: 24px;
  background-color: var(--border);
}

/* Result count — aria-live status, mono 13 muted (9.34:1 on white — AA);
   never shrinks into the scrolling chip row. */
.page-resources__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

/* =========================================================================
   S3 — Cards: featured 8/4 split, stack, extension grid
   ========================================================================= */

/* Featured split — 8/4 of the 12-col grid at >=1024 (2fr 1fr with the
   shared 24px gutter), stacked single column below. */
.page-resources__featured-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3);
  align-items: stretch;
}

.page-resources__featured-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-resources__featured-grid {
    grid-template-columns: 1fr;
  }
}

/* Secondary stack — the two 4-col cards share the featured card's height. */
.page-resources__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page-resources__stack > .page-resources__card {
  flex: 1 1 0;
}

/* Article card — white, hairline border, clipped media, flex column.
   CALM-MOTION POLICY: the export's image zoom-on-hover + shadow are
   dropped; hover = flat lift (standalone `translate`, never `transform`,
   so it cannot fight the reveal) + border -> techblue + title -> techblue.
   The reveal stagger's inline transition-delay would postpone the first
   hover — resources.js clears it post-reveal. */
.page-resources__card {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px; /* export rounded-lg card scale */
  overflow: hidden;
  transition:
    opacity .6s ease,
    transform .6s ease,
    translate .18s ease,
    border-color .18s ease;
}

.page-resources__card:hover {
  translate: 0 -4px;
  border-color: var(--techblue);
}

.page-resources__card:hover .page-resources__featured-title,
.page-resources__card:hover .page-resources__card-title {
  color: var(--techblue);
}

/* Media panel — 16:9, relative so the floating chip can anchor. */
.page-resources__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--gray);
  border-bottom: 1px solid var(--border);
}

/* Real thumbnails (WP attachment output) fill the panel. */
.page-resources__thumb,
.page-resources__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder media surface — the clean gray panel with a centered muted
   document glyph, used whenever a post has no thumbnail (and for every
   empty-state preview card). Purely decorative (aria-hidden). */
.page-resources__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.page-resources__media-placeholder svg {
  display: block;
}

/* Floating topic chip — top-left over the featured media; solid white pill
   (the export's white/90 blur simplified to a flat surface), mono 13
   techblue (4.54:1 — AA). */
.page-resources__chip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-2);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 9999px; /* pill — sanctioned for chips/tags per DESIGN.md */
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--techblue);
}

/* Card body — generous padding on the featured card, tighter on smalls. */
.page-resources__card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--space-4);
}

.page-resources__card--small .page-resources__card-body {
  padding: var(--space-3);
}

@media (max-width: 767.98px) {
  .page-resources__card-body {
    padding: var(--space-3);
  }
}

/* Featured title — 28/1.3/600 Ink, -> techblue on card hover. */
.page-resources__featured-title {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
  transition: color .18s ease;
}

/* Small-card title — 20/1.3/500 Ink, -> techblue on card hover. */
.page-resources__card-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
  transition: color .18s ease;
}

/* Title anchors inherit the heading colour (real posts only — the
   empty-state preview titles are plain text with no anchor). */
.page-resources__title-link {
  color: inherit;
  text-decoration: none;
}

.page-resources__title-link:hover,
.page-resources__title-link:focus-visible {
  color: inherit;
}

/* Excerpt — body-lg muted; flex-grow pushes the author row to the bottom. */
.page-resources__excerpt {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1 0 auto;
  margin-bottom: var(--space-3);
}

/* Featured footer row — author left, Read link right. */
.page-resources__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
}

.page-resources__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* 40px avatar circle — author INITIALS on the gray surface (no fake
   headshots; decorative — the full name sits beside it). */
.page-resources__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--gray);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--techblue);
}

.page-resources__author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Author name — mono 13 Ink (16.68:1 — AA). */
.page-resources__author-name {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}

/* Date • reading time — mono 12 muted (9.34:1 — AA). */
.page-resources__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: auto; /* pins to the small-card bottom */
}

.page-resources__author-meta .page-resources__meta {
  margin-top: 0;
}

/* Read link — techblue 600 (4.54:1 — AA); the arrow nudges right on
   hover/focus via `translate`. The muted variant is a SPAN, not an anchor
   (empty-state preview — see the template comment). */
.page-resources__read {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--techblue);
}

.page-resources__read svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: translate .18s ease;
}

a.page-resources__read:hover,
a.page-resources__read:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.page-resources__read:hover svg,
a.page-resources__read:focus-visible svg {
  translate: 4px 0;
}

.page-resources__read--muted {
  color: var(--text-muted);
}

/* Small-card category eyebrow — mono 11 uppercase techblue (4.54:1 — AA). */
.page-resources__card-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-1);
}

/* Extension grid — posts 4+ in the same small-card pattern:
   3 -> 2 (<1024) -> 1 (<768). Sits below the featured split. */
.page-resources__more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.page-resources__more-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-resources__more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .page-resources__more-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   Pagination (paginate_links 'list' output) — clean numbered, mono 13,
   8px gaps; current = techblue fill + white text (4.54:1 — AA).
   ========================================================================= */
.page-resources__pagination {
  margin-top: var(--space-5);
}

.page-resources__pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-resources__pagination li {
  display: block;
}

/* Anchor/span items (WP reuses .page-numbers on them). */
.page-resources__pagination a.page-numbers,
.page-resources__pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  transition: border-color .18s ease, color .18s ease;
}

.page-resources__pagination a.page-numbers:hover,
.page-resources__pagination a.page-numbers:focus-visible {
  border-color: var(--techblue);
  color: var(--techblue);
}

.page-resources__pagination span.page-numbers.current {
  background-color: var(--techblue);
  border-color: var(--techblue);
  color: var(--white);
}

.page-resources__pagination span.page-numbers.dots {
  border-color: transparent;
}

/* =========================================================================
   Empty-state preview note + zero-results state
   ========================================================================= */

/* Centered mono note under the placeholder trio (empty state only). */
.page-resources__note {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-5);
}

/* Zero-results state — hidden until resources.js filters out every card;
   centered mono message + a real reset button. */
.page-resources__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}

.page-resources__empty-msg {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 28->24
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-resources__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-resources__featured-title {
    font-size: 24px;
    line-height: 1.3;
  }
}

/* =========================================================================
   Motion — entrance base states (no-preference only). Filtering is NOT
   here: it must work under every motion preference.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — resources.js adds .is-ready to the hero on init
     (double rAF); copy rises in with 0/80/160/240ms delays. */
  .page-resources__hero .page-resources__eyebrow,
  .page-resources__hero .page-resources__title,
  .page-resources__hero .page-resources__lead,
  .page-resources__hero .page-resources__search {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-resources__hero .page-resources__title {
    transition-delay: 80ms;
  }

  .page-resources__hero .page-resources__lead {
    transition-delay: 160ms;
  }

  .page-resources__hero .page-resources__search {
    transition-delay: 240ms;
  }

  .page-resources__hero.is-ready .page-resources__eyebrow,
  .page-resources__hero.is-ready .page-resources__title,
  .page-resources__hero.is-ready .page-resources__lead,
  .page-resources__hero.is-ready .page-resources__search {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static. Filtering
   ([hidden], chips, count, empty state) is untouched: it is functional.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-resources__hero .page-resources__eyebrow,
  .page-resources__hero .page-resources__title,
  .page-resources__hero .page-resources__lead,
  .page-resources__hero .page-resources__search {
    opacity: 1;
    transform: none;
  }

  /* No hover lifts or arrow nudges — :hover included so this outweighs the
     hover rules. */
  .page-resources__card,
  .page-resources__card:hover {
    translate: none;
  }

  .page-resources__read svg,
  a.page-resources__read:hover svg,
  a.page-resources__read:focus-visible svg {
    translate: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own —
   named here so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-resources__card--featured {
  /* no-op: the featured card differs only via its children (title scale,
     footer row); the grid places it in the 8-col track */
}

.page-resources__empty-reset {
  /* no-op: styled by .dp-btn--secondary; named as the reset hook */
}