/* ==========================================================================
   Public FAQ: landing page section (#nsrl-faq-landing) and FAQ page (#nsrl-faq-page)
   Path:   assets/public/css/pages/faq.css   (needs assets/common/css/public/tokens.css)
   Script: assets/public/js/ui/faq-display.js
   Look (2026-10-28):
     landing  = "Frequently Asked Questions" + cards with a "?" mark, illustration on the right (reference 1)
     FAQ page = hero with title, text, button and illustration, then search + the same cards (reference 3)
   The hero button reuses .nsrl-btn from public-ui.css. Colors come from tokens.css only.
   ========================================================================== */

.nsrl-faqs {
  width: 100%;
  padding: clamp(56px, 2rem + 5vw, 112px) var(--nsrl-gutter);
  font-family: var(--nsrl-font-body);
  color: var(--nsrl-color-text);
  background: var(--nsrl-color-card);
  box-sizing: border-box;
}
.nsrl-faqs *, .nsrl-faqs *::before, .nsrl-faqs *::after { box-sizing: border-box; }
.nsrl-faqs[hidden] { display: none; }

/* ---------- Landing: list left, illustration right ---------- */
.nsrl-faqs__wrap {
  max-width: var(--nsrl-container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: stretch;
}
.nsrl-faqs__main { display: flex; flex-direction: column; min-width: 0; }

.nsrl-faqs h2.nsrl-faqs__title {
  margin: 0;
  font-family: var(--nsrl-font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: var(--nsrl-fw-regular);
  line-height: var(--nsrl-lh-snug);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--nsrl-color-heading);
}
.nsrl-faqs h2.nsrl-faqs__title strong { font-weight: var(--nsrl-fw-bold); }
.nsrl-faqs .nsrl-faqs__sub { margin: 8px 0 var(--nsrl-space-6); font-size: var(--nsrl-fs-body); color: var(--nsrl-color-text-muted); }

.nsrl-faqs__art {
  position: relative;
  min-height: 360px;
  border-radius: var(--nsrl-radius-sm);
  overflow: hidden;
  background: var(--nsrl-color-gold-400);
}
.nsrl-faqs__art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.nsrl-faqs .nsrl-faqs__more {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--nsrl-space-5);
  font-weight: var(--nsrl-fw-bold); font-size: var(--nsrl-fs-sm);
  color: var(--nsrl-color-accent-text); text-decoration: none;
}
.nsrl-faqs .nsrl-faqs__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--nsrl-dur-fast) ease; }
.nsrl-faqs .nsrl-faqs__more:hover svg { transform: translateX(4px); }
.nsrl-faqs .nsrl-faqs__more:focus-visible { outline: 2px solid var(--nsrl-color-accent); outline-offset: 4px; border-radius: 4px; }
.nsrl-faqs [data-faq-more][hidden] { display: none; }

/* ---------- Accordion cards (both) ---------- */
.nsrl-faqs__list { display: flex; flex-direction: column; gap: 14px; }
.nsrl-faqs__item {
  background: var(--nsrl-color-card);
  border-radius: var(--nsrl-radius-sm);
  box-shadow: 0 1px 2px rgba(6, 40, 24, .05), 0 4px 14px -6px rgba(6, 40, 24, .14);
  transition: box-shadow var(--nsrl-dur-base) var(--nsrl-ease-out);
  scroll-margin-top: 120px;
}
.nsrl-faqs__item:hover { box-shadow: 0 1px 2px rgba(6, 40, 24, .06), 0 8px 22px -8px rgba(6, 40, 24, .2); }
.nsrl-faqs h3.nsrl-faqs__h { margin: 0; font: inherit; }

html body .nsrl-faqs button.nsrl-faqs__q {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 16px;
  width: 100%; min-height: 58px; margin: 0; padding: 16px 22px;
  font-family: var(--nsrl-font-body); font-size: var(--nsrl-fs-body); font-weight: var(--nsrl-fw-bold); line-height: var(--nsrl-lh-snug);
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  color: var(--nsrl-color-ink); background: none; border: 0; border-radius: var(--nsrl-radius-sm); box-shadow: none; cursor: pointer;
  transition: color var(--nsrl-dur-fast) ease;
}
html body .nsrl-faqs button.nsrl-faqs__q:hover,
html body .nsrl-faqs button.nsrl-faqs__q:focus { background: none; color: var(--nsrl-color-accent-text); }
html body .nsrl-faqs button.nsrl-faqs__q:focus-visible { outline: 2px solid var(--nsrl-color-accent); outline-offset: -2px; }
html body .nsrl-faqs .nsrl-faqs__item.is-open button.nsrl-faqs__q { color: var(--nsrl-color-accent-text); }
.nsrl-faqs__qt { overflow-wrap: anywhere; }

.nsrl-faqs__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--nsrl-color-gold-600);
  color: var(--nsrl-color-gold-700);
  font-size: 13px; font-weight: var(--nsrl-fw-bold); line-height: 1;
}

.nsrl-faqs__icon {
  justify-self: end; width: 10px; height: 10px;
  border-right: 2px solid var(--nsrl-color-slate); border-bottom: 2px solid var(--nsrl-color-slate);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--nsrl-dur-base) var(--nsrl-ease-out), border-color var(--nsrl-dur-fast) ease;
}
.nsrl-faqs__item.is-open .nsrl-faqs__icon { transform: translateY(3px) rotate(-135deg); border-color: var(--nsrl-color-accent); }

.nsrl-faqs__a { overflow: hidden; transition: height var(--nsrl-dur-base) var(--nsrl-ease-out); }
.nsrl-faqs__a-inner { padding: 0 22px 20px 62px; max-width: 72ch; font-size: var(--nsrl-fs-body); line-height: var(--nsrl-lh-body); color: var(--nsrl-color-text); }
.nsrl-faqs__a-inner p { margin: 0; }
.nsrl-faqs__a-inner p + p { margin-top: 0.75em; }

.nsrl-faqs__status { margin: 0; padding: var(--nsrl-space-5); text-align: center; color: var(--nsrl-color-text-muted); border: 1px dashed var(--nsrl-color-border); border-radius: var(--nsrl-radius-sm); }
.nsrl-faqs__status[hidden] { display: none; }
.nsrl-faqs[aria-busy="true"] .nsrl-faqs__status { animation: nsrl-faq-pulse 1.4s ease-in-out infinite; }
@keyframes nsrl-faq-pulse { 50% { opacity: .55; } }

/* ---------- FAQ page: hero ---------- */
.nsrl-faqs--page { padding-top: clamp(40px, 1.5rem + 4vw, 88px); background: var(--nsrl-color-surface); }
.nsrl-faqs__hero {
  max-width: var(--nsrl-container);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: var(--nsrl-color-card);
  border-radius: var(--nsrl-radius-lg);
  box-shadow: var(--nsrl-shadow-md);
}
.nsrl-faqs__hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nsrl-space-5); }
.nsrl-faqs h1.nsrl-faqs__hero-title {
  margin: 0;
  font-family: var(--nsrl-font-display);
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  font-weight: var(--nsrl-fw-display);
  line-height: 1.1;
  text-transform: none;
  color: var(--nsrl-color-heading);
}
.nsrl-faqs h1.nsrl-faqs__hero-title span {
  display: block;
  font-size: 1.15em;
  font-weight: var(--nsrl-fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.nsrl-faqs .nsrl-faqs__hero-lead { margin: 0; max-width: 44ch; font-size: var(--nsrl-fs-body); line-height: var(--nsrl-lh-body); color: var(--nsrl-color-text); }
.nsrl-faqs__hero-art svg { display: block; width: 100%; height: auto; }

.nsrl-faqs__body { max-width: 900px; margin: clamp(36px, 5vw, 64px) auto 0; display: flex; flex-direction: column; gap: var(--nsrl-space-5); }

.nsrl-faqs__search { position: relative; display: block; width: 100%; }
.nsrl-faqs__search svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--nsrl-color-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
html body .nsrl-faqs input.nsrl-faqs__input {
  width: 100%; min-height: 52px; margin: 0; padding: 12px 18px 12px 48px;
  font: inherit; font-size: var(--nsrl-fs-body); color: var(--nsrl-color-ink);
  background: var(--nsrl-color-card); border: 1px solid var(--nsrl-color-border); border-radius: var(--nsrl-radius-pill);
  box-shadow: var(--nsrl-shadow-sm); outline: none;
  transition: border-color var(--nsrl-dur-fast) ease, box-shadow var(--nsrl-dur-fast) ease;
}
html body .nsrl-faqs input.nsrl-faqs__input:focus { border-color: var(--nsrl-color-accent); box-shadow: var(--nsrl-focus-ring); }

.nsrl-faqs__foot { margin: var(--nsrl-space-3) 0 0; text-align: center; color: var(--nsrl-color-text-muted); font-size: var(--nsrl-fs-sm); }
html body .nsrl-faqs .nsrl-faqs__foot a,
html body .nsrl-faqs .nsrl-faqs__foot a:visited { color: var(--nsrl-color-accent-text); font-weight: var(--nsrl-fw-bold); text-decoration: underline; text-underline-offset: 3px; }
html body .nsrl-faqs .nsrl-faqs__foot a:hover { color: var(--nsrl-color-teal-700); }

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .nsrl-faqs__wrap { grid-template-columns: minmax(0, 1fr); }
  .nsrl-faqs__art { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .nsrl-faqs__hero { grid-template-columns: minmax(0, 1fr); }
  .nsrl-faqs__hero-art { order: -1; }
}
@media (max-width: 560px) {
  html body .nsrl-faqs button.nsrl-faqs__q { grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 12px; padding: 14px 16px; }
  .nsrl-faqs__a-inner { padding: 0 16px 16px 50px; }
  .nsrl-faqs__hero { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nsrl-faqs__a, .nsrl-faqs__icon, .nsrl-faqs .nsrl-faqs__more svg { transition: none; }
}

/* ---------- Pages (FAQ page, data-page-size) ---------- */
.nsrl-faqs__pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: var(--nsrl-space-2); font-size: var(--nsrl-fs-sm); color: var(--nsrl-color-text-muted); }
.nsrl-faqs__pager[hidden] { display: none; }
.nsrl-faqs__pager-btns { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nsrl-faqs__pager-btns > span { padding: 0 4px; }
html body .nsrl-faqs .nsrl-faqs__pager button {
  min-width: 36px; height: 36px; margin: 0; padding: 0 10px;
  font: var(--nsrl-fw-bold) var(--nsrl-fs-sm)/1 var(--nsrl-font-body); text-transform: none; letter-spacing: 0;
  color: var(--nsrl-color-ink); background: var(--nsrl-color-card); border: 1px solid var(--nsrl-color-border); border-radius: var(--nsrl-radius-sm);
  box-shadow: none; cursor: pointer; transition: background-color var(--nsrl-dur-fast) ease, border-color var(--nsrl-dur-fast) ease;
}
html body .nsrl-faqs .nsrl-faqs__pager button:hover:not(:disabled) { border-color: var(--nsrl-color-accent); color: var(--nsrl-color-accent-text); background: var(--nsrl-color-card); }
html body .nsrl-faqs .nsrl-faqs__pager button.is-active { background: var(--nsrl-color-green-900); border-color: var(--nsrl-color-green-900); color: #fff; }
html body .nsrl-faqs .nsrl-faqs__pager button:disabled { opacity: .4; cursor: default; }
html body .nsrl-faqs .nsrl-faqs__pager button:focus-visible { outline: 2px solid var(--nsrl-color-accent); outline-offset: 2px; }
@media (max-width: 560px) { .nsrl-faqs__pager { justify-content: center; } .nsrl-faqs__pager-info { flex-basis: 100%; text-align: center; } }