/* Learn route styles. Shared shell primitives remain in tokens.css. */
:root {
  --learn-soft-teal: color-mix(in srgb, var(--thread-teal) 7%, var(--cloth));
  --learn-soft-sage: color-mix(in srgb, var(--thread-sage) 7%, var(--cloth));
  --learn-soft-clay: color-mix(in srgb, var(--thread-terracotta) 6%, var(--cloth));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --learn-soft-teal: color-mix(in srgb, var(--thread-teal) 11%, var(--cloth));
    --learn-soft-sage: color-mix(in srgb, var(--thread-sage) 11%, var(--cloth));
    --learn-soft-clay: color-mix(in srgb, var(--thread-terracotta) 10%, var(--cloth));
  }
}

[data-theme="dark"] {
  --learn-soft-teal: color-mix(in srgb, var(--thread-teal) 11%, var(--cloth));
  --learn-soft-sage: color-mix(in srgb, var(--thread-sage) 11%, var(--cloth));
  --learn-soft-clay: color-mix(in srgb, var(--thread-terracotta) 10%, var(--cloth));
}

main { overflow: hidden; }
.container { width: min(1184px, calc(100% - 3rem)); margin-inline: auto; }
.content-width { width: min(46rem, 100%); margin-inline: auto; }
.section--centered { text-align: center; }
.section--alt { background: var(--cloth); }
.grid-2, .grid-3 { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.learn-hero,
.hero,
.article-hero {
  position: relative;
  padding: clamp(8rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--cloth);
  border-bottom: 1px solid var(--hairline);
}
.learn-hero__grid,
.hero__inner,
.article-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  width: min(1184px, calc(100% - 3rem));
  margin-inline: auto;
}
.hero__content, .article-hero__content { min-width: 0; }
.hero__illustration { display: grid; place-items: center; }
.hero__img, .learn-hero__art { width: min(100%, 30rem); margin-inline: auto; }
.hero__badge, .article-hero__tag {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-5);
  color: var(--thread-teal);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__badge::before, .article-hero__tag::before {
  content: "";
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.5em;
  background: url("/img/sprig.svg") no-repeat center / contain;
}
.hero__sub, .article-hero__sub { max-width: 60ch; color: var(--ink-2); font-size: var(--text-lede); line-height: 1.65; }

.topic-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  text-align: left;
}
.topic-card {
  grid-column: span 5;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--cloth);
  text-decoration: none;
  transition: transform 300ms var(--ease-weave), box-shadow 300ms var(--ease-weave);
}
.topic-card:nth-child(4n + 1), .topic-card:nth-child(4n) { grid-column: span 7; }
.topic-card__media { display: grid; place-items: center; min-height: 15rem; background: var(--cloth); border-bottom: 1px solid var(--hairline); }
.topic-card__media img { width: min(68%, 15rem); max-height: 17rem; object-fit: contain; }
.topic-card__body { padding: clamp(1.25rem, 3vw, 2rem); }
.topic-card__tag, .exam-card__tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--ink-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topic-card__title { margin-bottom: var(--space-3); }
.topic-card__excerpt { margin-bottom: var(--space-5); color: var(--ink-2); font-size: 0.9375rem; }
.topic-card__read { color: var(--thread-sage); font-size: 0.875rem; font-weight: 600; }
.topic-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }

.clinician-band {
  display: grid;
  grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-top: 2px solid var(--thread-teal);
  border-bottom: 1px solid var(--hairline);
  background: var(--learn-soft-teal);
}
.clinician-band__art { width: min(100%, 22rem); margin-inline: auto; }
.clinician-doorways { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.clinician-doorway {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
}
.clinician-doorway p { margin: 0; color: var(--ink-2); }
.clinician-doorway span { color: var(--thread-teal); font-weight: 600; }

.article {
  width: min(46rem, calc(100% - 3rem));
  margin-inline: auto;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.article h2 { margin-top: clamp(3rem, 7vw, 5rem); }
.article h3 { margin-top: var(--space-8); }
.article p { margin-bottom: var(--space-5); font-size: var(--text-base); line-height: 1.75; }
.article ul, .article ol { margin: var(--space-4) 0 var(--space-6); padding-left: 1.4rem; }
.article li { margin-bottom: var(--space-2); color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.article blockquote, .hero-quote {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--cloth-card);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-lede);
  font-style: italic;
}
.article .grid-2, .article .grid-3 { margin-block: var(--space-6); }
.article details { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--cloth); }
.article details summary { min-height: 44px; color: var(--ink); font-weight: 600; cursor: pointer; }
.hero-quote cite { display: block; margin-top: var(--space-3); color: var(--ink-3); font-family: var(--font-ui); font-size: 0.875rem; font-style: normal; }
.article-disclaimer {
  margin-top: var(--space-16);
  padding: var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--cloth-card);
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.65;
}

.card, .women-section, .gold-section, .setback-note, .pattern-block, .style-block,
.symptom-list li, .treatment-card, .does-not-help li, .warning-signs li, .do-block,
.dont-block, .cause-block, .topic-block, .india-note, .protocol-step, .checklist-section,
.wrecker-block, .redflags-list li, .age-block, .cultural-idiom {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--cloth-card);
}
.women-section, .gold-section, .setback-note, .do-block, .dont-block, .checklist-section { margin: var(--space-8) 0; padding: clamp(1.5rem, 4vw, 2.5rem); }
.pattern-block, .style-block, .treatment-card, .cause-block, .topic-block, .age-block, .wrecker-block { margin-bottom: var(--space-4); padding: var(--space-5) var(--space-6); }
.style-block__label, .age-block__label { margin-bottom: var(--space-2); color: var(--thread-sage); font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.familiar-group { margin: var(--space-8) 0; }
.familiar-group__label { padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline); color: var(--ink-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.symptom-list, .warning-signs, .does-not-help, .redflags-list, .misdiagnosis-list, .not-list { margin: var(--space-5) 0; padding: 0; list-style: none; }
.symptom-list li, .warning-signs li, .does-not-help li, .redflags-list li, .misdiagnosis-list li, .not-list li { margin-bottom: var(--space-2); padding: var(--space-3) var(--space-4); color: var(--ink-2); font-size: 0.9375rem; }
.misdiagnosis-list li, .not-list li { border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--cloth); }
.misdiagnosis-list li::before { content: "\2192  "; color: var(--thread-terracotta); }
.not-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.not-list li::before { content: "\00D7  "; color: var(--thread-terracotta); font-weight: 700; }
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.do-block h3 { color: var(--thread-sage); }
.dont-block h3 { color: var(--thread-terracotta); }
.cultural-idiom { display: inline-block; margin: var(--space-1) var(--space-1) 0 0; padding: var(--space-2) var(--space-3); font-size: 0.9375rem; }
.protocol-step { position: relative; }
.protocol-step__number { position: absolute; top: var(--space-4); right: var(--space-5); color: var(--thread-flax); font-family: var(--font-display); font-size: 2rem; font-weight: 700; }
.medication-row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline); }
.medication-row__name { color: var(--ink); font-weight: 600; }
.referral-table, .pricing-table { width: 100%; margin: var(--space-5) 0; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums lining-nums; }
.referral-table th, .referral-table td, .pricing-table th, .pricing-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.referral-table th, .pricing-table th { color: var(--ink); background: var(--cloth-card); font-weight: 600; }
.hierarchy-list { padding: 0; counter-reset: hierarchy; list-style: none; }
.hierarchy-list li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); counter-increment: hierarchy; }
.hierarchy-list li::before { content: counter(hierarchy, decimal-leading-zero); color: var(--thread-sage); font-family: var(--font-data); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.supplement-section { margin: var(--space-12) 0; padding-top: var(--space-8); border-top: 1px solid var(--hairline); }

.faq { margin-top: var(--space-8); border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__question { margin: 0; padding: var(--space-4) 0 var(--space-2); color: var(--ink); font-size: 1.125rem; text-align: left; }
.article .faq__question { margin-top: 0; }
.faq__answer { padding-bottom: var(--space-4); color: var(--ink-2); }
.cta-section { padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--hairline); background: var(--cloth); text-align: center; }
.cta-section p { max-width: 46rem; margin-inline: auto; }
.cta-section .btn-group { justify-content: center; }

.crisis-block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.crisis-block__art { width: min(100%, 20rem); max-height: 25rem; object-fit: contain; justify-self: center; }

.resident-hero .hero__badge, .psychotherapy-page .hero__badge { color: var(--thread-teal); }
.residents-page .section, .psychotherapy-page .section { padding-block: clamp(4rem, 8vw, 7rem); }
.residents-page .exam-section__title, .psychotherapy-page .exam-section__title { color: var(--thread-teal); }
.exam-section__subtitle { max-width: 52rem; color: var(--ink-2); }
.exam-grid, .volume-rail { margin-top: var(--space-8); border-top: 1px solid var(--hairline); }
.exam-card, .volume-row {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) minmax(8rem, auto);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--cloth);
  color: inherit;
  text-decoration: none;
}
.exam-card { grid-template-areas: "tag title button" "tag description button"; }
.exam-card__tag { grid-area: tag; align-self: start; }
.exam-card__title { grid-area: title; }
.exam-card__desc { grid-area: description; }
.exam-card__btn { grid-area: button; }
.exam-card__tag { margin: 0; color: var(--thread-teal); }
.exam-card__title { margin: 0; font-size: var(--text-h3); }
.exam-card__desc { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.exam-card__btn, .exam-card__cta {
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--thread-teal);
  border-radius: var(--radius-pill);
  background: var(--cloth);
  color: var(--thread-teal);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.exam-card__btn:hover { background: var(--thread-teal); color: var(--cloth); }
.exam-card__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.exam-card--assimilate .exam-card__tag, .exam-card--assimilate .exam-card__btn { color: var(--thread-teal); border-color: var(--thread-teal); }
.exam-card--psychotherapy .exam-card__tag, .exam-card--psychotherapy .exam-card__btn { color: var(--thread-terracotta); border-color: var(--thread-terracotta); }
.resident-intro { padding: 6px; border: 1px solid var(--hairline); border-radius: var(--radius-outer); background: var(--cloth-warm); }
.resident-intro__inner { padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--hairline); border-radius: var(--radius-inner); background: var(--cloth-card); }
.resident-intro__inner p:last-child { margin-bottom: 0; }

.breadcrumb { padding-top: 7.5rem; color: var(--ink-3); font-size: 0.875rem; }
.breadcrumb a { color: var(--ink-2); }
.volume-row__number { color: var(--thread-teal); font-family: var(--font-data); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.volume-row__copy h3 { margin-bottom: var(--space-2); }
.volume-row__copy p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.volume-row__cta { color: var(--thread-teal); font-size: 0.875rem; font-weight: 600; }

.wp-volume { overflow-x: hidden; }
.wp-volume #main-content { padding-top: 6rem; overflow: visible; }
.wp-volume nav.pt-back {
  position: relative;
  z-index: 10;
  padding: var(--space-4) max(var(--space-6), calc((100vw - 1184px) / 2));
  border-bottom: 1px solid var(--hairline);
  background: var(--cloth);
  color: var(--ink-3);
  font-family: var(--font-ui) !important;
  font-size: 0.875rem;
}
.wp-volume nav.pt-back a { color: var(--thread-teal); font-weight: 600; text-decoration: none; }
.wp-volume .site-footer { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-body); }
.download-gate__fallback input[type="text"], .download-gate__fallback input[type="email"] { min-height: 48px; width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--cloth); color: var(--ink); }

@media print {
  .wp-volume .site-header, .wp-volume .site-footer, .wp-volume .wp-crisis { display: none !important; }
  .wp-volume #main-content { padding-top: 0; }
}

@media (max-width: 767px) {
  .container, .learn-hero__grid, .hero__inner, .article-hero__inner { width: min(100% - 2rem, 680px); }
  .learn-hero__grid, .hero__inner, .article-hero__inner, .clinician-band { grid-template-columns: 1fr; }
  .hero__illustration { grid-row: 1; }
  .hero__img, .learn-hero__art { width: min(70%, 18rem); }
  .topic-layout { grid-template-columns: 1fr; }
  .topic-card, .topic-card:nth-child(4n + 1), .topic-card:nth-child(4n) { grid-column: auto; }
  .topic-card__media { min-height: 12rem; }
  .grid-2, .grid-3, .do-dont, .not-list { grid-template-columns: 1fr; }
  .care-bridge { grid-template-columns: 1fr; }
  .crisis-block { grid-template-columns: 1fr; }
  .crisis-block__art { grid-row: 1; width: min(58%, 14rem); max-height: 17rem; }
  .exam-card, .volume-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .exam-card { grid-template-areas: "tag" "title" "description" "button"; }
  .exam-card__btn, .exam-card__cta { justify-self: start; width: auto; }
  .medication-row { grid-template-columns: 1fr; }
  .referral-table, .pricing-table { display: block; overflow-x: auto; }
  .breadcrumb { padding-top: 6.5rem; }
}