/* faq.css — /questoes-frequentes/ only. Shared pieces: jn-hero--inner, jn-faq master-detail (blocks.css), jn-scene,
   jn-ico, jn-band + jn-cta-card.
   The explorer: theme tabs → question list → answer on a stage of fixed height (desktop). On phones the same list
   is an accordion; without JS every theme is listed with its answers open. */

.jn-faq__explorer{display:flex;flex-direction:column;gap:1.1rem}

/* ---------- theme tabs (only with JS) ---------- */
.jn-faq__tabs{display:none}
.jn-js .jn-faq__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.jn-faq__tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:.75rem;min-width:0;padding:.8rem .9rem;border-radius:var(--radius-md);border:2px solid var(--jn-line);transition:border-color var(--dur-xs) ease,background-color var(--dur-sm) ease,box-shadow var(--dur-sm) ease}
.jn-faq__tab:hover{border-color:var(--jn-c2)}
.jn-faq__tab:focus-visible{outline:3px solid var(--jn-teal-ink);outline-offset:2px}
.jn-faq__tab.is-active{background:var(--jn-dark);border-color:var(--jn-dark);box-shadow:0 14px 30px rgba(43,20,16,.22)}
.jn-faq__tab-tx{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.jn-faq__tab-name{font-family:var(--ff-display);font-weight:var(--fw-bd);font-size:1rem;line-height:1.2;color:var(--jn-text);transition:color var(--dur-xs) ease}
.jn-faq__tab-n{font-weight:var(--fw-sb);font-size:.8rem;line-height:1.3;color:var(--jn-muted);transition:color var(--dur-xs) ease}
.jn-faq__tab.is-active .jn-faq__tab-name{color:var(--jn-inv)}
.jn-faq__tab.is-active .jn-faq__tab-n{color:var(--jn-c3)}

/* ---------- stage + lists ---------- */
.jn-faq__layout--page{display:block}
.jn-faq__stage--page{display:none}
.jn-faq__pq--long{font-size:clamp(1.5rem,2.3vw,2.05rem);max-width:22ch}

.jn-faq__group + .jn-faq__group{margin-top:2.4rem}
.jn-faq__group-h{display:flex;align-items:center;gap:.75rem;margin:0 0 .9rem;font-family:var(--ff-display);font-weight:var(--fw-xb);font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.15;color:var(--jn-text)}

/* question rows (base look in blocks.css): here each row sits in an entry with its drop-down answer, so the rule
   between rows lives on the entry */
.jn-faq__entry{position:relative}
.jn-faq__entry + .jn-faq__entry::before{content:"";position:absolute;top:0;left:-.4rem;right:-.4rem;height:1px;background:var(--jn-line)}
.jn-faq__item--row{width:100%;gap:.9rem;padding:1rem .9rem}
.jn-faq__item-n{flex:0 0 auto;min-width:1.6rem;font-family:var(--ff-display);font-weight:var(--fw-xb);font-size:1rem;line-height:1;color:var(--jn-c1);font-variant-numeric:tabular-nums}
.jn-faq__item--row .jn-faq__item-q{font-size:1.04rem;line-height:1.3}

/* answer under the question (phones, and everywhere without JS) */
.jn-faq__drop{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-sm) ease}
.jn-faq__drop-in{overflow:hidden}
.jn-faq__drop-p{margin:0;padding:0 .9rem 1.2rem 3.4rem;font-weight:var(--fw-sb);font-size:.98rem;line-height:1.62;color:var(--jn-soft)}
.jn-js .jn-faq__drop{grid-template-rows:0fr}
.jn-js .jn-faq__entry.is-open .jn-faq__drop{grid-template-rows:1fr}

/* with JS the theme lists share one grid cell: the block keeps the height of the longest list */
.jn-js .jn-faq__groups{display:grid}
.jn-js .jn-faq__group{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transition:opacity var(--dur-sm) ease,visibility 0s linear var(--dur-sm)}
.jn-js .jn-faq__group.is-active{opacity:1;visibility:visible;transition:opacity var(--dur-sm) ease,visibility 0s}
.jn-js .jn-faq__group-h{display:none}

@media (min-width:861px){
  .jn-js .jn-faq__layout--page{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .jn-js .jn-faq__stage--page{display:block;min-height:clamp(470px,58vh,540px)}
  .jn-js .jn-faq__drop{display:none}
  .jn-js .jn-faq__group{display:flex;flex-direction:column}
  .jn-js .jn-faq__list--rows{flex:1}
  .jn-js .jn-faq__entry{flex:1;display:flex}
  .jn-js .jn-faq__item--row{flex:1}
}
@media (max-width:860px){
  .jn-js .jn-faq__tabs{grid-template-columns:1fr 1fr}
  .jn-faq__tab:nth-child(n+5){grid-column:1 / -1}
  .jn-faq__entry.is-open .jn-faq__item-arrow{opacity:1;transform:rotate(90deg)}
  .jn-faq__entry.is-open .jn-faq__item--row{background:rgba(232,90,43,.07)}
}
@media (max-width:420px){
  .jn-faq__drop-p{padding-left:.9rem}
}

/* ---------- glossary: dark tiles on a light slab ---------- */
.jn-fp-gloss{position:relative;background-color:var(--jn-bg-2);padding-block:var(--sec-pad)}
.jn-fp-gloss__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0}
.jn-fp-gloss__item{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:.45rem;background:var(--jn-grad-slab);border-radius:var(--radius-md);padding:1.3rem 1.4rem;box-shadow:var(--shadow-card)}
.jn-fp-gloss__dt{font-family:var(--ff-display);font-weight:var(--fw-bd);font-size:1.2rem;line-height:1.2;color:var(--jn-c2)}
.jn-fp-gloss__dd{margin:0;font-weight:var(--fw-sb);font-size:.96rem;line-height:1.55;color:var(--jn-mut-inv)}

@media (max-width:900px){
  .jn-fp-gloss__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .jn-fp-gloss__grid{grid-template-columns:1fr}
}