/* ==========================================================================
   journal.css — the Ranch Journal (modules/news).

   Loaded only on the journal's own pages and the admin screens that write
   them, by the module's layout hook in modules/news/config.php.

   The module came from ZASSC with a Sass stylesheet. This site has no build
   step, and converting the nesting mechanically produced rules that looked
   right and silently did nothing, so this is written out plainly instead.

   Everything below uses the --news-* properties mapped in section 1, which
   is the only part that knows which site this is. That is the module's own
   convention (see its README), so ZASSC and Zoiboyz can stay in step.
   ========================================================================== */

/* 1. The module's properties, pointed at this site's tokens ---------------- */

:root {
  --news-surface:      var(--zb-surface);
  --news-tint:         var(--zb-bg-tint);
  --news-heading:      var(--zb-heading);
  --news-link:         var(--zb-link);
  --news-muted:        var(--zb-text-muted);
  --news-border:       var(--zb-rule);
  --news-border-firm:  var(--zb-rule-strong);
  --news-accent:       var(--zb-accent);
  --news-chip-bg:      var(--zb-forest);
  --news-chip-fg:      var(--zb-cream);
  --news-radius:       var(--zb-radius);
  --news-radius-lg:    var(--zb-radius-lg);
  --news-shadow:       var(--zb-shadow-1);
  --news-shadow-lg:    var(--zb-shadow-2);
  --news-font-heading: var(--zb-font-display);
  --news-font:         var(--zb-font-text);
  --news-ease:         var(--zb-ease);
}

/* 2. The page ------------------------------------------------------------- */

/* The H1 and lead, printed by the layout adapter in modules/news/config.php.
   The page's top spacing is here; .news-section below supplies the gap
   between the heading and the posts. */
.news-pagehead { padding-top: var(--zb-section-y); }
.news-pagehead h1 { margin: 0; }

.news-section { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

/* "More from the Ranch Journal" under a post. It had no rule at all, so
   its heading sat directly on the share buttons. */
.news-more { margin-top: var(--zb-space-8); }

.news-sectionhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
}

.news-sectionhead h2 { margin: 0; }

.news-morelink,
.news-feedlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: none;
}

.news-morelink:hover,
.news-feedlink:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* 3. The category filter --------------------------------------------------
   A row of pills, not a bulleted list. The one you are looking at is filled.
   Each is a 44px target, because this gets used on a phone. */

.news-filter { margin-bottom: 1.75rem; }

.news-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-filter a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 1.5px solid var(--news-border-firm);
  border-radius: var(--zb-radius-pill);
  color: var(--news-heading);
  font-size: var(--zb-size-small);
  font-weight: 600;
  text-decoration: none;
}

.news-filter a:hover { border-color: var(--news-link); color: var(--news-link); }

.news-filter a[aria-current="page"] {
  background: var(--news-chip-bg);
  border-color: var(--news-chip-bg);
  color: var(--news-chip-fg);
}

/* 4. Cards ---------------------------------------------------------------- */

.news-cards {
  display: grid;
  gap: var(--zb-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.news-cards--three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--news-surface);
  border: 1.5px solid var(--news-border);
  border-radius: var(--news-radius-lg);
  transition: transform var(--zb-mid) var(--news-ease),
              box-shadow var(--zb-mid) var(--news-ease);
}

.news-card:hover,
.news-card:focus-within { transform: translateY(-2px); box-shadow: var(--news-shadow-lg); }

.news-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--news-tint);
}

.news-card__media img { width: 100%; height: 100%; object-fit: cover; }

.news-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--zb-space-5); }

.news-card__title { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.news-card__title a { text-decoration: none; }
.news-card__title a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.news-card__meta,
.news-card__excerpt { margin: 0; color: var(--news-muted); font-size: var(--zb-size-small); }

/* 5. Chips, labels and status --------------------------------------------- */

.news-chip,
.news-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: var(--zb-radius-sm);
  background: var(--news-tint);
  color: var(--news-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.news-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--zb-size-small);
  font-weight: 600;
  color: var(--news-muted);
}

.news-status--pinned { color: var(--news-accent); }
.news-status--notice { color: var(--zb-sport-zassc); }

/* 6. One post ------------------------------------------------------------- */

.news-post { max-width: var(--zb-measure); }
.news-post > * + * { margin-top: var(--zb-space-4); }

.news-body { max-width: var(--zb-measure); }
.news-body > * + * { margin-top: var(--zb-space-4); }
.news-body h2 { margin-top: var(--zb-space-6); font-size: var(--zb-size-h2); }
.news-body h3 { margin-top: var(--zb-space-5); }
.news-body img { max-width: 100%; height: auto; border-radius: var(--news-radius); }
.news-body ul,
.news-body ol { padding-left: 1.25rem; }
.news-body li + li { margin-top: 0.35rem; }
.news-body blockquote {
  margin: var(--zb-space-5) 0;
  padding-left: var(--zb-space-4);
  border-left: 3px solid var(--news-accent);
  font-style: italic;
}

.news-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--zb-space-6);
  padding-top: var(--zb-space-4);
  border-top: 1.5px solid var(--news-border);
}

.news-share a,
.news-share button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 1.5px solid var(--news-border-firm);
  border-radius: var(--zb-radius-pill);
  background: none;
  color: var(--news-heading);
  font: inherit;
  font-size: var(--zb-size-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.news-share a:hover,
.news-share button:hover { border-color: var(--news-link); color: var(--news-link); }

.news-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--zb-space-4);
  margin-top: var(--zb-space-7);
  padding-top: var(--zb-space-5);
  border-top: 1.5px solid var(--news-border);
}

.news-photo { border-radius: var(--news-radius); overflow: hidden; }
.news-media { display: grid; gap: var(--zb-space-3); grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }

/* 7. Empty states and messages -------------------------------------------- */

.news-empty {
  padding: var(--zb-space-7) var(--zb-space-5);
  border: 1.5px dashed var(--news-border-firm);
  border-radius: var(--news-radius-lg);
  color: var(--news-muted);
  text-align: center;
}

.news-msg,
.news-alert {
  padding: var(--zb-space-4) var(--zb-space-5);
  border-left: 6px solid var(--news-border-firm);
  border-radius: var(--news-radius);
  background: var(--news-tint);
}

.news-notice {
  display: flex;
  gap: var(--zb-space-4);
  padding: var(--zb-space-5);
  border: 1.5px solid var(--news-border);
  border-left-width: 6px;
  border-left-color: var(--news-accent);
  border-radius: var(--news-radius);
  background: var(--news-surface);
}

.news-notice__icon { flex: none; font-size: 1.5rem; color: var(--news-accent); }

/* 8. The editor and the admin list ---------------------------------------- */

.news-admin > * + * { margin-top: var(--zb-space-6); }

.news-rows { display: flex; flex-direction: column; }

.news-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem var(--zb-space-4);
  padding: var(--zb-space-4) 0;
  border-bottom: 1px solid var(--news-border);
}

.news-row__title { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.news-row__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--news-muted); font-size: var(--zb-size-small); }

.news-box {
  padding: var(--zb-space-5);
  background: var(--news-surface);
  border: 1.5px solid var(--news-border);
  border-radius: var(--news-radius-lg);
}

.news-box--notice { border-left: 6px solid var(--zb-sport-zassc); }
.news-box--publish { border-left: 6px solid var(--zb-pasture); }

.news-form { display: flex; flex-direction: column; gap: var(--zb-space-4); }
.news-optional { color: var(--news-muted); font-weight: 400; }
.news-slug { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--zb-size-small); }

.news-cat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--news-border);
}

.news-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 0;
  border-radius: var(--news-radius-lg);
  background: var(--news-surface);
  color: var(--bs-body-color);
  box-shadow: var(--news-shadow-lg);
}

.news-dialog--wide { width: min(48rem, calc(100vw - 2rem)); }
.news-dialog::backdrop { background: rgb(11 27 9 / 0.6); }

.news-revs { display: flex; flex-direction: column; gap: 0.25rem; }

/* EasyMDE, dressed to match the rest of the admin. */
.news-editor .EasyMDEContainer .CodeMirror {
  border-color: var(--news-border-firm);
  border-radius: 0 0 var(--zb-radius-sm) var(--zb-radius-sm);
  background: var(--news-surface);
  color: var(--bs-body-color);
  font-family: var(--news-font);
  font-size: 1.0625rem;
}

.news-editor .editor-toolbar {
  border-color: var(--news-border-firm);
  border-radius: var(--zb-radius-sm) var(--zb-radius-sm) 0 0;
  background: var(--news-tint);
  opacity: 1;
}

.news-editor .editor-toolbar button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--zb-radius-sm);
  color: var(--news-heading);
}

.news-editor .editor-toolbar button:hover,
.news-editor .editor-toolbar button.active {
  background: var(--news-surface);
  border-color: var(--news-border);
}

.news-editor .editor-preview,
.news-editor .editor-preview-side { background: var(--news-tint); }

/* The Markdown colours. EasyMDE's own are greys chosen for a white page (a
   link's address was 2.1:1 on cream) and CodeMirror's defaults are pure
   blue and green. These are the site's tokens, so both themes read, and
   the cursor and selection follow the theme too: CodeMirror draws a black
   cursor, which disappears in dark mode. */
.news-editor .cm-s-easymde .cm-header    { color: var(--zb-heading); }
.news-editor .cm-s-easymde .cm-link      { color: var(--zb-link); }
.news-editor .cm-s-easymde .cm-url,
.news-editor .cm-s-easymde .cm-string,
.news-editor .cm-s-easymde .cm-quote,
.news-editor .cm-s-easymde .cm-hr        { color: var(--zb-text-muted); }
.news-editor .cm-s-easymde .cm-comment   { color: var(--zb-accent); }      /* `code` */
.news-editor .cm-s-easymde .cm-tag       { color: var(--zb-sport-asfa); }
.news-editor .cm-s-easymde .cm-attribute { color: var(--zb-sport-notra); }
.news-editor .CodeMirror-cursor { border-left-color: var(--zb-text); }
.news-editor .CodeMirror-selected,
.news-editor .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--zb-link) 22%, transparent); }

/* 9. The remaining pieces -------------------------------------------------
   The module's markup is BEM, so most of these are children of blocks
   already styled above and need only their own small part. */

/* A post's own page. */
.news-title { margin-bottom: 0.5rem; }

.news-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-bottom: var(--zb-space-5);
  color: var(--news-muted);
  font-size: var(--zb-size-small);
}

.news-post__photo {
  margin-bottom: var(--zb-space-5);
  border-radius: var(--news-radius-lg);
  overflow: hidden;
}

.news-post__photo img { width: 100%; height: auto; display: block; }

.news-post__related {
  margin-top: var(--zb-space-7);
  padding-top: var(--zb-space-5);
  border-top: 1.5px solid var(--news-border);
}

/* The count beside a category in the filter: present but quiet. */
.news-filter__n { color: var(--news-muted); font-weight: 400; }

/* An event notice, where one is shown. */
.news-notice__title { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; }
.news-notice__text { margin: 0; }
.news-notice__when { color: var(--news-muted); font-size: var(--zb-size-small); }
.news-notice__link { font-weight: 600; }

/* The editor: the body on the left, its settings on the right, stacking on
   a narrow screen. Tom and KC will meet this on a phone, so the side column
   goes underneath rather than squeezing. */
.news-form__main { min-width: 0; }

.news-form__side {
  display: flex;
  flex-direction: column;
  gap: var(--zb-space-4);
}

@media (min-width: 62em) {
  .news-editor .news-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--zb-space-6);
    align-items: start;
  }
}

.news-box__status { font-weight: 600; }
.news-box__saved { color: var(--news-muted); font-size: var(--zb-size-small); }
.news-box__errors { color: var(--zb-accent); }
.news-box__buttons,
.news-dialog__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zb-space-3);
  margin-top: var(--zb-space-4);
}
.news-box__links { display: flex; flex-wrap: wrap; gap: var(--zb-space-3); }

.news-dialog__img { max-width: 100%; height: auto; border-radius: var(--news-radius); }

/* Photos in the editor. */
.news-photo__set { display: grid; gap: var(--zb-space-3); grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.news-photo__drop {
  padding: var(--zb-space-5);
  border: 1.5px dashed var(--news-border-firm);
  border-radius: var(--news-radius);
  text-align: center;
  color: var(--news-muted);
}
.news-photo__drop.is-over { outline: 3px dashed var(--news-link); outline-offset: 4px; }
.news-photo__empty { color: var(--news-muted); }
.news-photo__busy { margin: 0.5rem 0 0; color: var(--news-muted); font-size: var(--zb-size-small); }
.news-photo__busy:empty { display: none; }

/* The admin list and the categories editor. */
.news-admin__bar { display: flex; flex-wrap: wrap; gap: var(--zb-space-3); align-items: center; }
.news-row__main { flex: 1 1 18rem; min-width: 0; }
.news-row__actions { display: flex; flex-wrap: wrap; gap: var(--zb-space-2); }
.news-row__auto { color: var(--zb-sport-zassc); font-size: var(--zb-size-small); }
.news-cats__list { display: flex; flex-direction: column; }
.news-cats__addrow { display: flex; flex-wrap: wrap; gap: var(--zb-space-3); align-items: flex-end; margin-top: var(--zb-space-4); }
.news-cats__add { flex: 1 1 12rem; }
.news-cats { margin-top: var(--zb-space-6); }

.news-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.news-check input { width: 24px; height: 24px; margin-top: 0.125rem; flex: none; }

.news-slug__base { color: var(--news-muted); }

.news-preview { border: 1.5px solid var(--news-border); border-radius: var(--news-radius); padding: var(--zb-space-5); }

/* 10. The home-page block ------------------------------------------------- */

.news-home { padding-block: var(--zb-section-y); }

/* 11. Motion off when it is not wanted ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .news-card { transition: none; }
  .news-card:hover,
  .news-card:focus-within { transform: none; }
}