/* Learn section (index, glossary, explainers). Shared tokens and components live in base.css. FAQ and CTA rules mirror home.css. */

/* ---------- Page head (same geometry as the home hero text block) ---------- */
.page-hero { padding-block: var(--s5) var(--section); }
.page-hero__grid { display: grid; gap: var(--s4); }
.page-hero__body { display: grid; gap: var(--s4); }
.page-hero__meta { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.page-hero__meta li { display: grid; gap: 2px; justify-items: start; }
.page-hero__meta .eyebrow { margin-bottom: 0; }
.page-hero__crumb { display: inline-flex; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--s2); }
.page-hero__crumb a:hover { color: var(--brass); }
@media (min-width: 1024px) {
  .page-hero { padding-block: var(--s7) var(--section); }
  .page-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: var(--s7); align-items: end; }
  .page-hero__meta { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}

/* ---------- Learn index: cards ---------- */
.learn__grid { display: grid; gap: var(--s2); grid-auto-rows: 1fr; }
.learn-card { transition: border-color 300ms var(--ease); }
.learn-card:hover { border-color: var(--brass); }
.learn-card .eyebrow { margin-bottom: var(--s2); }
.learn-card__title { font-family: var(--font-display); font-size: var(--h3); line-height: 1.15; margin-bottom: var(--s2); }
.learn-card__foot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: auto; }
.learn-card__time { font-size: var(--text-sm); color: var(--muted); }
@media (min-width: 700px) { .learn__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); } }
@media (min-width: 1200px) { .learn__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Glossary ---------- */
.glossary__tools { display: grid; gap: var(--s3); margin-bottom: var(--head-gap); }
.glossary__search { display: grid; gap: 8px; }
.glossary__search .field__label { font-weight: 500; font-size: var(--text-sm); }
.glossary__search input {
  width: 100%; min-height: var(--btn-h); padding: 14px 16px;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid rgba(28,27,26,0.35); border-radius: var(--radius);
  transition: border-color 240ms var(--ease);
}
.glossary__search input::placeholder { color: var(--muted-light); }
.glossary__search input:focus { outline: none; border-color: var(--brass); }
.glossary__search input:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.letters { display: flex; flex-wrap: wrap; gap: 8px; }
.letter {
  min-width: 44px; height: 44px; padding-inline: 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 500;
  transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), opacity 240ms var(--ease);
}
.letter:hover { border-color: var(--brass); }
.letter[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.letter[disabled] { opacity: 0.3; cursor: default; }
.letter[disabled]:hover { border-color: var(--line); }
.glossary__count { color: var(--muted); font-size: var(--text-sm); }
.terms { display: grid; border-top: 1px solid var(--line); }
.term { display: grid; gap: 8px; padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.term[hidden] { display: none; }
.term__name { font-family: var(--font-display); font-size: var(--h3); line-height: 1.15; }
.term__def { color: var(--muted); max-width: 62ch; }
.term dt, .term dd { margin: 0; }
.term__link { justify-self: start; }
.terms__empty { padding-block: var(--s4); color: var(--muted); }
.terms__empty[hidden] { display: none; }
@media (min-width: 1024px) {
  .glossary__tools { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); align-items: end; gap: var(--s5); }
  .term { grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr); column-gap: var(--s6); align-items: start; }
  .term__more { grid-column: 2; }
}

/* ---------- Explainer article ---------- */
.article { padding-block: var(--section); }
.article__layout { display: grid; gap: var(--s5); }
.article__body { max-width: 62ch; display: grid; gap: var(--s3); }
.article__body h2 { font-size: var(--h2); margin-top: var(--s3); }
.article__body h2:first-child { margin-top: 0; }
.article__body h3 { font-size: 1.375rem; margin-top: var(--s1); }
.article__body p, .article__body li { color: var(--ink-3); }
.article__body ul, .article__body ol { display: grid; gap: 8px; padding-left: 1.25em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body a { border-bottom: 1px solid var(--brass); }
.article__body a:hover { color: var(--brass); }
.article__body .attorney {
  display: grid; gap: var(--s1); padding: var(--s3); background: var(--ivory); border-radius: var(--radius); border-left: 2px solid var(--brass);
}
.article__body .attorney .eyebrow { margin-bottom: 0; }
.article__body .attorney p { margin: 0; }
/* In-article CTA (after the second H2): price + Start a File + Text Kristen */
.article__body .article__cta {
  display: grid; gap: var(--s2); padding: var(--s3); background: var(--ink); color: var(--ivory); border-radius: var(--radius-lg); margin-block: var(--s2);
}
.article__body .article__cta .eyebrow { margin-bottom: 0; }
.article__body .article__cta p { margin: 0; color: var(--muted-light); }
.article__body .article__cta strong { color: var(--ivory); font-weight: 500; }
.article__body .article__cta .btn-row { margin-top: var(--s1); }
.article__body .article__cta .btn--primary { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.article__body .article__cta .btn--primary:hover { background: var(--paper); border-color: var(--paper); }
.article__body .article__cta .btn--secondary { color: var(--ivory); border-color: rgba(245,241,232,0.4); }
.article__body .article__cta .btn--secondary:hover { border-color: var(--ivory); }
.article__body .article__cta a.btn { border-bottom: 1px solid transparent; }
.article__body .article__cta a.btn:hover { color: inherit; }
.article__body .article__cta .btn--primary:hover { color: var(--ink); }
.article__aside { display: grid; gap: var(--s3); align-content: start; }
.aside-card { background: var(--ink); color: var(--ivory); border-radius: var(--radius-lg); padding: var(--s4); display: grid; gap: var(--s3); }
.aside-card .eyebrow { margin-bottom: 0; }
.aside-card h3 em { color: var(--brass-2); }
.aside-card p { color: var(--muted-light); }
.aside-card__price { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding-block: 12px; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.aside-card__price .num { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.aside-card .btn--primary { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.aside-card .btn--primary:hover { background: var(--paper); border-color: var(--paper); }
.aside-card .btn--secondary { color: var(--ivory); border-color: rgba(245,241,232,0.4); }
.aside-card .btn--secondary:hover { border-color: var(--ivory); }
.aside-card .btn-row { grid-template-columns: 1fr; }
.toc { display: grid; gap: 4px; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.toc .eyebrow { margin-bottom: var(--s1); }
.toc a { padding-block: 6px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); color: var(--muted); }
.toc a:last-child { border-bottom: 0; }
.toc a:hover { color: var(--ink); }
@media (min-width: 1024px) {
  .article__layout { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.6fr); gap: var(--s7); align-items: start; }
  .article__aside { position: sticky; top: calc(var(--header-h) + var(--s3)); }
  .article__body { max-width: 66ch; }
  .aside-card { padding: var(--s5); }
}
@media (min-width: 1600px) { .article__layout { grid-template-columns: minmax(0, 1.5fr) minmax(420px, 0.5fr); } }

/* ---------- FAQ (same as home) ---------- */
.faq__list { display: grid; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding-block: var(--s3); font-family: var(--font-display); font-size: var(--h3); line-height: 1.2;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { width: 14px; height: 14px; position: relative; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--brass); left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 300ms var(--ease); }
.faq__icon::before { width: 14px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 14px; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding-bottom: var(--s3); max-width: 62ch; color: var(--muted); }
@media (min-width: 1024px) { .faq__list { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } .faq__item:nth-child(2) { border-top: 0; } }

/* ---------- Related (explainer foot) ---------- */
.related__grid { display: grid; gap: var(--s2); grid-auto-rows: 1fr; }
@media (min-width: 700px) { .related__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } }

/* ---------- Final CTA (same as home) ---------- */
.cta__inner { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.cta__inner .eyebrow { margin-bottom: 0; }
.cta__inner .btn-row { width: 100%; }
.cta__title { max-width: 18ch; }
.cta__contact a { color: var(--ivory); border-bottom: 1px solid var(--brass-2); }