/* Insights & Guides page — the notes index this page is built around, plus the
   one treatment the guide cards below it need. The palette, the spacing, the
   radii and the motion come from assets/css/tokens.css and assets/css/pages.css;
   nothing is redefined here.
   This sheet is enqueued site-wide (functions.php), so every rule is scoped:
   #guides for the guide cards, .notes-* for the index, .note-card for a note.
   The note card and the shared .notes-search form are also what the search
   results page renders, so their base look is defined here, in one sheet, and
   assets/css/search.css holds only the search page's own shell. */

/* The guide cards open on a full-bleed field photograph, so the shared
   white-background product-shot treatment (.card__image padding and
   .card__photo mix-blend-mode) is undone here for this section alone. */
#guides .card__image--cover{padding:0;height:200px;background:var(--color-pale)}
#guides .card__photo--cover{mix-blend-mode:normal;object-fit:cover}

/* ------------------------------------------------------ The note search -- */
/* One form on two surfaces: the index and the search results page. It is a
   plain GET form that works with JavaScript off, so it is laid out as a
   labelled row that wraps on its own when the screen is narrow. */
.notes-search{display:grid;gap:8px;max-width:640px}
.notes-search__label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
.notes-search__row{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.notes-search__input{flex:1 1 220px;min-width:0;min-height:50px;padding:12px 16px;border:1px solid var(--color-field-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:16px;transition:border-color var(--transition-fast)}
.notes-search__input::placeholder{color:var(--color-field-line)}
.notes-search__input:focus{border-color:var(--color-accent)}
.notes-search__input:focus-visible{outline-offset:2px}
.notes-search__submit{flex:0 0 auto}
.notes-search__note{margin:0;font-size:14px;color:var(--color-muted)}

/* ------------------------------------------------------- The topic filter -- */
/* Every chip is a link to this page with one topic chosen, so the filter works
   without JavaScript and a filtered view can be bookmarked or shared. */
.notes-filter__list{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
.notes-filter__chip{display:inline-flex;align-items:center;min-height:38px;padding:7px 16px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-surface);color:var(--color-navy);font-size:13px;font-weight:600;text-decoration:none;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}
.notes-filter__chip:hover{background:var(--color-accent-pale);border-color:var(--color-accent);color:var(--color-accent)}
.notes-filter__chip:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
/* The chip for the view being read. The accent fill is the visible state and
   aria-current="page" carries the same fact for a screen reader, so the chip is
   never marked by colour alone. */
.notes-filter__chip--active,.notes-filter__chip--active:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

/* -------------------------------------------------------------- The index -- */
.notes-index__tools{display:grid;gap:var(--space-2)}
.notes-index__empty{margin:var(--space-4) 0 0;font-size:16px;color:var(--color-muted)}
.notes-index__empty a{color:var(--color-accent);font-weight:600;text-underline-offset:3px}

/* The notes themselves: .cards holds the grid, and a card opens on the note's
   own picture, cropped to fill, exactly as the guide cards above do. The meta
   line is set here as well because a note's card carries a date and a category
   rather than the label the other cards use. */
.notes-grid{margin-top:var(--space-5)}
.note-card .card__image--cover{padding:0;height:200px;background:var(--color-pale)}
.note-card .card__photo--cover{mix-blend-mode:normal;object-fit:cover}
.note-card .card__meta{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.note-card .note-card__title{font-size:19px;line-height:1.3}
.note-card .note-card__title a{color:var(--color-heading);text-decoration:none}
.note-card .note-card__title a:hover{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.note-card .note-card__title a:focus-visible{border-radius:var(--radius-sm);outline:3px solid var(--color-focus);outline-offset:2px}
.note-card .note-card__text{margin:12px 0 0;font-size:15px;color:var(--color-muted)}

/* ------------------------------------------------------------- The paging -- */
/* paginate_links() with type=list: the list is the row, and each item is a
   square target large enough for a finger or a keyboard. */
.notes-paging{margin-top:var(--space-4)}
.notes-paging .page-numbers{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
.notes-paging .page-numbers li{margin:0}
.notes-paging a.page-numbers,.notes-paging span.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-heading);font-size:14px;font-weight:600;text-decoration:none;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}
.notes-paging a.page-numbers:hover{background:var(--color-accent-pale);border-color:var(--color-accent);color:var(--color-accent)}
.notes-paging a.page-numbers:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.notes-paging .page-numbers.current{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
.notes-paging .page-numbers.dots{min-width:0;padding:0 4px;border-color:transparent;background:none}

/* ----------------------------------------------------------- Narrow screens -- */
/* One column, with the same rhythm: the cards, the chips and the page links all
   keep their own spacing above. */
@media(max-width:760px){
  .notes-grid{margin-top:var(--space-4)}
  .notes-paging{margin-top:var(--space-3)}
}