/**
 * Success Case Library (NS-M63, disclosure added NS-M230) — styles for the
 * ERP-fed case grid on /success-cases/. Loaded only on that page by
 * functions.php. Brand tokens: orange #e48216, navy #0f2748.
 */

/* ── Specificity note (NS-M230) ─────────────────────────
 *
 * GeneratePress emits, in its inline <style> AFTER this file:
 *
 *   button:not(.menu-toggle), html input[type="button"], … , .button
 *   { font-family:…; font-weight:500; text-transform:uppercase; font-size:14px }
 *
 * That selector weighs 0,1,1 — the same as a plain `button.ss-thing` — and it
 * loads later, so it wins every tie. It is why the tag filter shipped reading
 * 学校OFFER instead of the ERP's own 学校offer. Every button rule below is
 * therefore written `body button.…` (0,1,2) so it outweighs THAT rule outright,
 * whatever the load order. It is not a general shield — a later
 * `.entry-content button:not(.menu-toggle)` (0,2,1) or an `!important` would
 * still win. Correctness never rests on it: what closes the library is the
 * `hidden` attribute, not a class.
 * ────────────────────────────────────────────────────── */

/* ── Banner button (NS-M230) ────────────────────────── */

/* The banner's call to action used to be an <a href="#case-library"> carrying
   these declarations inline. It is now a real <button> so it can own
   aria-expanded, which means the look has to live here instead — same colour,
   same padding, same radius, same shadow as the anchor had. */
body button.ss-library-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* both labels — 更多展示 → and 收起案例库 ↑ — fit this width, so pressing
     the button does not resize it under the reader's cursor */
  min-width: 11.75rem;
  padding: 1rem 2.5rem;
  border: 0;
  border-radius: .5rem;
  background: #e48216;
  color: #fff;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(228, 130, 22, .34);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

body button.ss-library-toggle:hover {
  background: #cf7413;
  box-shadow: 0 14px 30px rgba(228, 130, 22, .42);
  transform: translateY(-1px);
}

body button.ss-library-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ── Section open / closed (NS-M230) ────────────────── */

/* Closed is the page's resting state. The whole <section> goes, not just its
   contents — leaving the section in place would leave 7.5rem of empty white
   padding sitting under the banner.

   The saved markup ALSO carries the `hidden` attribute, and the script keeps
   the two in step. Neither is redundant: this rule is what paints correctly
   before the footer script runs and what the animation hangs off; `hidden`
   is what still closes the library if this file fails to load. */
.ss-library-section { display: none; }
.ss-library-section.is-open { display: block; }

.ss-library-section.is-open .ss-library-wrap {
  animation: ss-library-reveal .34s ease both;
}

@keyframes ss-library-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-library-section.is-open .ss-library-wrap { animation: none; }
  body button.ss-library-toggle { transition: none; }
  body button.ss-library-toggle:hover { transform: none; }
}

.ss-library-wrap {
  max-width: var(--gb-container-width, 1140px);
  margin: 0 auto;
  padding: 0 2rem;
  /* the library is scrolled to on open; keep its top clear of any fixed
     header the theme may grow later */
  scroll-margin-top: 5rem;
}

/* The region is a landmark for screen-reader navigation, not a focus target —
   opening the library leaves the keyboard on the button that opened it. If
   anything ever does focus this container, do not ring the whole block. */
.ss-library-wrap:focus { outline: none; }

/* ── Filter bar ─────────────────────────────────────── */

.ss-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  margin: 0 0 1.15rem;
}

body button.ss-tag-btn {
  appearance: none;
  border: 1px solid #d7dde6;
  background: #fff;
  color: #33455c;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .5rem 1.05rem;
  border-radius: 2rem;
  cursor: pointer;
  /* the theme uppercases button text; the ERP tag is 学校offer, keep it verbatim */
  text-transform: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

body button.ss-tag-btn:hover { border-color: #e48216; color: #e48216; }

body button.ss-tag-btn.ss-tag-active {
  background: #e48216;
  border-color: #e48216;
  color: #fff;
}

.ss-result-count {
  text-align: center;
  color: #64748b;
  font-size: .9375rem;
  margin: 0 0 1.75rem;
}

/* English page only: the case records come from the client's ERP and are
   written in Chinese. This sits in the navy banner UNDER the button, not inside
   the library — a warning the reader can only see after opening the thing it
   warns about is not a warning. */
.ss-library-hint {
  text-align: center;
  color: rgba(255, 255, 255, .62);
  font-size: .875rem;
  line-height: 1.6;
  margin: .9rem 0 0;
}

/* ── Grid ───────────────────────────────────────────── */

.ss-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.ss-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6eaf0;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 39, 72, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}

.ss-card:hover {
  box-shadow: 0 12px 28px rgba(15, 39, 72, .11);
  transform: translateY(-2px);
}

body button.ss-card-figure {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: #f2f5f9;
  cursor: zoom-in;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ss-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.ss-card-body { padding: 1.1rem 1.25rem 1.35rem; }

.ss-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: .6rem;
}

.ss-card-date {
  color: #8593a5;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

.ss-card-tag {
  background: rgba(228, 130, 22, .1);
  color: #b8650c;
  font-size: .75rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 1rem;
}

.ss-card-title {
  color: #21334a;
  font-size: .9375rem;
  line-height: 1.72;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ss-card-title.ss-card-title--open {
  display: block;
  overflow: visible;
}

body button.ss-card-more {
  appearance: none;
  border: 0;
  background: none;
  padding: .5rem 0 0;
  color: #e48216;
  font-size: .875rem;
  font-weight: 600;
  /* the theme uppercases button text — invisible on 展开全文, very visible on
     the English twin's "Read more" */
  text-transform: none;
  cursor: pointer;
}

.ss-card--noimg .ss-card-body { padding-top: 1.35rem; }

/* ── States ─────────────────────────────────────────── */

.ss-loading,
.ss-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 0;
  color: #64748b;
  font-size: .9375rem;
}

.ss-empty-msg { margin: 0 0 1rem; }

/* A failed load has to offer a way forward. Without this the reader's only
   route back is closing and re-opening the library, which nothing tells them. */
body button.ss-retry {
  appearance: none;
  border: 1px solid #e48216;
  background: #fff;
  color: #b8650c;
  font-size: .9375rem;
  font-weight: 600;
  text-transform: none;
  padding: .55rem 1.5rem;
  border-radius: 2rem;
  cursor: pointer;
}

body button.ss-retry:hover:not(:disabled) { background: #e48216; color: #fff; }
body button.ss-retry:disabled { opacity: .5; cursor: default; }

/* ── Pagination ─────────────────────────────────────── */

.ss-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin-top: 2.25rem;
}

body button.ss-page-btn {
  appearance: none;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .6rem;
  border: 1px solid #d7dde6;
  background: #fff;
  color: #33455c;
  border-radius: .4rem;
  font-size: .9375rem;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
}

body button.ss-page-btn:hover:not(:disabled) { border-color: #e48216; color: #e48216; }
body button.ss-page-btn:disabled { opacity: .4; cursor: default; }

body button.ss-page-btn.ss-page-active {
  background: #0f2748;
  border-color: #0f2748;
  color: #fff;
}

.ss-page-ellipsis { color: #8593a5; padding: 0 .25rem; }

/* ── Disclaimer ─────────────────────────────────────── */

.ss-disclaimer {
  max-width: 46rem;
  margin: 2rem auto 0;
  text-align: center;
  color: #7b8798;
  font-size: .8125rem;
  line-height: 1.75;
}

/* ── Lightbox ───────────────────────────────────────── */

.ss-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(9, 20, 36, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}

.ss-lightbox[hidden] { display: none; }

.ss-lightbox-img {
  max-width: min(100%, 900px);
  max-height: 100%;
  object-fit: contain;
  border-radius: .35rem;
  background: #fff;
}

body button.ss-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

body.ss-lightbox-open { overflow: hidden; }

/* ── Mobile ─────────────────────────────────────────── */

@media (max-width: 767px) {
  .ss-library-wrap { padding: 0 1.25rem; }
  .ss-story-grid { grid-template-columns: 1fr; gap: 1.15rem; }
  .ss-filter-bar { gap: .45rem; }
  body button.ss-tag-btn { font-size: .875rem; padding: .45rem .85rem; }
  body button.ss-card-figure { aspect-ratio: 3 / 2; }
}

/* ── Print ──────────────────────────────────────────── */

/* Paper has no filters, no pagination and no open/close. Print whatever cases
   are on screen, and none of the machinery for changing them. */
@media print {
  .ss-filter-bar,
  .ss-pagination,
  .ss-lightbox,
  body button.ss-library-toggle,
  body button.ss-card-more,
  body button.ss-retry { display: none !important; }

  .ss-card { break-inside: avoid; box-shadow: none; }
  .ss-card-title { -webkit-line-clamp: unset; display: block; overflow: visible; }
}