/*
 * non-coder-overrides.css — safe styling surface for non-coder / designer edits.
 *
 * WHY THIS FILE EXISTS:
 *   The theme compiles SCSS (css/scss/*.scss) into the main stylesheets, and the
 *   build does NOT run in CI. So editing compiled CSS (main.css, etc.) is unsafe:
 *   the next SCSS rebuild silently overwrites it. This file has NO SCSS source and
 *   is enqueued LAST (functions.php, priority 9999), so:
 *     - an SCSS rebuild can never clobber it, and
 *     - its rules win over the theme's styles.
 *
 * RULES FOR EDITS (enforced by the style-edit skill + CI allowlist guard):
 *   - Styling only: color, background, spacing, font-size, border-radius, etc.
 *   - Target existing selectors. Do NOT change HTML/structure (that's a dev job).
 *   - Prefer the most specific selector that works; avoid !important unless needed
 *     to beat a theme rule, and comment why when you use it.
 *   - One change per pull request; keep it small and reviewable.
 *
 * Designers: the style-edit skill manages this file for you. Add rules below.
 */

/* ---- non-coder style overrides start below ---- */

/* Feature Releases page only (scoped to .page-feature-releases — the
   #use-cases-page id is shared with the Use Cases page, so we must NOT use it).
   The section intro reads as a subtitle of the h2: sit it close under the
   heading, centered and width-capped, with comfortable space before the search. */
.page-feature-releases .sCaseList h2 {
  margin-bottom: 16px;
}

.page-feature-releases .sCaseList__intro {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: #475467;
}

/* Single Feature Release page: the view counter (.view-btn) was left out of the
   share-group rule that lays out .like-btn / .comment-button / .share-button, so
   it rendered inline (number beside icon) instead of stacked like its siblings.
   Match it to the siblings — column on desktop, row in the ≤992px bottom bar. */
.share-group .view-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 9px;
}

@media only screen and (max-width: 992px) {
  .share-group .view-btn {
    flex-direction: row;
    gap: 14px;
  }
}