/**
 * Learn — the hub (blog/templates/blog/hub.html) and one article
 * (blog/templates/blog/article.html), plus their shared card and closing card.
 *
 * Public marketing surface, so it wears the site blue like Solutions and
 * Pricing, and phone layouts matter. Everything here is tokens; the only
 * Bootstrap class the templates use is .container, as Solutions does.
 * Article bodies are rendered Markdown, so .learn-prose styles bare tags.
 */

/* ===== Buttons + chips ===== */
.learn-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--om-space-2);
  padding: var(--om-space-3) var(--om-space-5);
  border-radius: var(--om-radius-full);
  border: 1px solid transparent;
  font-size: var(--om-text-sm);
  font-weight: var(--om-font-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--om-duration-150) var(--om-ease-out),
              color var(--om-duration-150) var(--om-ease-out),
              border-color var(--om-duration-150) var(--om-ease-out);
}
.learn-btn--primary { background: var(--om-blue-600); color: var(--om-bg-primary); }
.learn-btn--primary:hover { background: var(--om-blue-700); color: var(--om-bg-primary); }
.learn-btn--ghost { background: transparent; border-color: var(--om-neutral-600); color: var(--om-neutral-100); }
.learn-btn--ghost:hover { border-color: var(--om-neutral-300); color: var(--om-bg-primary); }
/* Outline for light backgrounds; ghost above is for the dark cards. */
.learn-btn--outline { background: var(--om-bg-primary); border-color: var(--om-neutral-300); color: var(--om-neutral-800); cursor: pointer; }
.learn-btn--outline:hover { border-color: var(--om-neutral-900); color: var(--om-neutral-900); }
.learn-btn:focus-visible { outline: 2px solid var(--om-blue-500); outline-offset: 2px; }

.learn-chip {
  display: inline-block;
  margin: 0 0 var(--om-space-3);
  padding: var(--om-space-1) var(--om-space-2-5);
  border-radius: var(--om-radius-full);
  font-size: var(--om-text-xs);
  font-weight: var(--om-font-semibold);
}
.learn-chip--draft { background: var(--om-warning-100); color: var(--om-warning-800); }

/* ===== Hub hero + topic jump links ===== */
.learn-hero {
  padding: var(--om-space-16) 0 var(--om-space-8);
  background: var(--om-bg-primary);
  text-align: center;
}
.learn-hero__head {
  margin: 0 0 var(--om-space-3);
  font-size: var(--om-text-5xl);
  font-weight: var(--om-font-bold);
  letter-spacing: -0.03em;
  line-height: var(--om-leading-none);
  color: var(--om-neutral-900);
}
.learn-hero__sub {
  margin: 0 auto;
  max-width: 36rem;
  font-size: var(--om-text-lg);
  line-height: var(--om-leading-relaxed);
  color: var(--om-neutral-600);
}
/* Search: hidden in the markup, shown by the hub script (useless without JS). */
.learn-search {
  position: relative;
  max-width: 32rem;
  margin: var(--om-space-8) auto 0;
}
.learn-search[hidden] { display: none; }
.learn-search__icon {
  position: absolute;
  top: 50%;
  left: var(--om-space-4);
  transform: translateY(-50%);
  font-size: var(--om-text-sm);
  color: var(--om-neutral-400);
  pointer-events: none;
}
.learn-search__input {
  width: 100%;
  padding: var(--om-space-3) var(--om-space-4) var(--om-space-3) var(--om-space-10);
  border: 2px solid var(--om-neutral-200);
  border-radius: var(--om-radius-full);
  background: var(--om-bg-primary);
  font-size: var(--om-text-base);
  color: var(--om-neutral-900);
  transition: border-color var(--om-duration-150) var(--om-ease-out);
}
.learn-search__input::placeholder { color: var(--om-neutral-400); }
.learn-search__input:focus { outline: none; border-color: var(--om-blue-500); }

.learn-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--om-space-2);
  margin-top: var(--om-space-5);
}
.learn-filter__btn {
  padding: var(--om-space-2) var(--om-space-4);
  border: 1px solid var(--om-neutral-200);
  border-radius: var(--om-radius-full);
  background: var(--om-bg-primary);
  font-size: var(--om-text-sm);
  font-weight: var(--om-font-medium);
  color: var(--om-neutral-700);
  text-decoration: none;
  transition: border-color var(--om-duration-150) var(--om-ease-out),
              background-color var(--om-duration-150) var(--om-ease-out),
              color var(--om-duration-150) var(--om-ease-out);
}
.learn-filter__btn:hover { border-color: var(--om-blue-300); color: var(--om-blue-700); }
.learn-filter__btn.is-active { border-color: var(--om-blue-600); background: var(--om-blue-600); color: var(--om-bg-primary); }
.learn-filter__btn:focus-visible { outline: 2px solid var(--om-blue-500); outline-offset: 2px; }
/* Format chips: a quieter second row that toggles on and off. */
.learn-filter--format { margin-top: var(--om-space-3); }
.learn-filter__btn--format { padding: var(--om-space-1-5) var(--om-space-3); font-size: var(--om-text-xs); }
.learn-filter__btn--format.is-active { border-color: var(--om-neutral-800); background: var(--om-neutral-800); }

/* Phone: the topic and format chips wrap to five rows of chrome before the
   first article. Each group becomes one swipeable row (edge-to-edge, so the
   cut-off chip says "more"); the first chip still starts in view. */
@media (max-width: 767px) {
  .learn-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .learn-filter::-webkit-scrollbar { display: none; }
  .learn-filter__btn { flex: 0 0 auto; white-space: nowrap; min-height: var(--om-space-10); }
  .learn-filter__btn--format { min-height: var(--om-space-8); }
}

/* ===== Grid + cards ===== */
.learn-body {
  padding: var(--om-space-12) 0 var(--om-space-16);
  background: var(--om-bg-secondary);
}
.learn-grid--hub { max-width: 72rem; margin: 0 auto; }
.learn-track__title {
  margin: 0 0 var(--om-space-5);
  font-size: var(--om-text-sm);
  font-weight: var(--om-font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--om-neutral-500);
}
.learn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--om-space-5);
}
@media (max-width: 991px) { .learn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .learn-grid { grid-template-columns: minmax(0, 1fr); } }

.learn-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--om-space-6);
  border: 2px solid var(--om-neutral-100);
  border-radius: var(--om-radius-xl);
  background: var(--om-bg-primary);
  text-decoration: none;
  transition: border-color var(--om-duration-150) var(--om-ease-out),
              box-shadow var(--om-duration-150) var(--om-ease-out);
}
/* The hub filter sets [hidden]; display:flex above would otherwise win. */
.learn-card[hidden] { display: none; }
.learn-card:hover { border-color: var(--om-blue-300); box-shadow: var(--om-shadow-md); }
.learn-card__track {
  margin-bottom: var(--om-space-2);
  font-size: var(--om-text-xs);
  font-weight: var(--om-font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--om-blue-700);
}
.learn-card:focus-visible { outline: 2px solid var(--om-blue-500); outline-offset: 2px; }
.learn-card__title {
  margin: 0 0 var(--om-space-2);
  font-size: var(--om-text-lg);
  font-weight: var(--om-font-semibold);
  line-height: var(--om-leading-snug);
  color: var(--om-neutral-900);
}
.learn-card__excerpt {
  flex-grow: 1;
  margin: 0 0 var(--om-space-4);
  font-size: var(--om-text-sm);
  line-height: var(--om-leading-relaxed);
  color: var(--om-neutral-600);
}
.learn-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--om-space-1) var(--om-space-3);
  font-size: var(--om-text-xs);
  color: var(--om-neutral-500);
}
.learn-card__format { font-weight: var(--om-font-semibold); color: var(--om-neutral-700); }
.learn-card__format i { margin-right: var(--om-space-1); color: var(--om-blue-600); }

.learn-nomatch {
  padding: var(--om-space-12) 0;
  text-align: center;
}
.learn-nomatch[hidden] { display: none; }
.learn-nomatch__text {
  margin: 0 0 var(--om-space-4);
  font-size: var(--om-text-lg);
  color: var(--om-neutral-600);
}

.learn-empty {
  padding: var(--om-space-16) 0;
  text-align: center;
  font-size: var(--om-text-lg);
  color: var(--om-neutral-600);
}

/* ===== Article ===== */
.learn-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--om-space-1);
  z-index: var(--z-reading-progress);
  pointer-events: none;
}
.learn-progress__bar {
  height: 100%;
  background: var(--om-blue-600);
  transform: scaleX(0);
  transform-origin: left;
}

.learn-article { padding-bottom: var(--om-space-16); background: var(--om-bg-primary); }

/* One reading width for the header, body and next-step card. */
.learn-measure { max-width: 44rem; margin: 0 auto; }

.learn-article__head {
  padding: var(--om-space-12) 0 var(--om-space-8);
  background: var(--om-bg-primary);
}
.learn-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--om-space-2);
  margin-bottom: var(--om-space-4);
  font-size: var(--om-text-sm);
  color: var(--om-neutral-400);
}
.learn-crumbs a,
.learn-article__meta a { color: var(--om-blue-700); text-decoration: none; }
.learn-article__meta a:hover { text-decoration: underline; }
.learn-crumbs a:hover { text-decoration: underline; }
.learn-article__title {
  margin: 0 0 var(--om-space-4);
  font-size: var(--om-text-4xl);
  font-weight: var(--om-font-bold);
  letter-spacing: -0.02em;
  line-height: var(--om-leading-tight);
  color: var(--om-neutral-900);
}
@media (max-width: 767px) {
  .learn-hero { padding-top: var(--om-space-10); }
  .learn-hero__head { font-size: var(--om-text-4xl); }
  .learn-article__head { padding-top: var(--om-space-8); }
  .learn-article__title { font-size: var(--om-text-3xl); }
}
.learn-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--om-space-1) var(--om-space-4);
  margin: 0;
  font-size: var(--om-text-sm);
  color: var(--om-neutral-500);
}

/* ===== Video + downloads (from the header, above the body) ===== */
.learn-media { margin-bottom: var(--om-space-8); }
.learn-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--om-radius-xl);
  background: var(--om-neutral-900);
  box-shadow: var(--om-shadow-md);
}
.learn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.learn-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--om-space-2);
  margin: var(--om-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.learn-downloads a {
  display: inline-flex;
  align-items: center;
  gap: var(--om-space-2);
  padding: var(--om-space-2) var(--om-space-4);
  border: 1px solid var(--om-neutral-200);
  border-radius: var(--om-radius-full);
  font-size: var(--om-text-sm);
  font-weight: var(--om-font-medium);
  color: var(--om-neutral-800);
  text-decoration: none;
}
.learn-downloads a:hover { border-color: var(--om-blue-300); color: var(--om-blue-700); }
.learn-downloads i { color: var(--om-blue-600); }

/* ===== Article body (rendered Markdown) ===== */
.learn-prose {
  padding-bottom: var(--om-space-8);
  font-size: var(--om-text-lg);
  line-height: var(--om-leading-loose);
  color: var(--om-neutral-700);
}
.learn-prose > :first-child { margin-top: 0; }
.learn-prose p,
.learn-prose ul,
.learn-prose ol { margin: 0 0 var(--om-space-6); }
.learn-prose ul,
.learn-prose ol { padding-left: var(--om-space-6); }
.learn-prose li { margin-bottom: var(--om-space-2); }
.learn-prose h2 {
  margin: var(--om-space-12) 0 var(--om-space-4);
  font-size: var(--om-text-2xl);
  font-weight: var(--om-font-bold);
  line-height: var(--om-leading-tight);
  color: var(--om-neutral-900);
}
.learn-prose h3 {
  margin: var(--om-space-8) 0 var(--om-space-3);
  font-size: var(--om-text-xl);
  font-weight: var(--om-font-semibold);
  line-height: var(--om-leading-snug);
  color: var(--om-neutral-900);
}
.learn-prose strong { font-weight: var(--om-font-semibold); color: var(--om-neutral-900); }
/* ==highlights==: the passages a skimming reader should hit. */
.learn-prose mark { padding: 0 var(--om-space-0-5); border-radius: var(--om-radius-base); background: var(--om-warning-100); color: var(--om-neutral-900); }
.learn-prose a { color: var(--om-blue-700); text-underline-offset: 2px; }
.learn-prose hr { margin: var(--om-space-10) 0; border: 0; border-top: 2px solid var(--om-neutral-100); opacity: 1; }

/* The Short Answer: the block search engines and AI assistants quote. */
.learn-prose blockquote {
  margin: 0 0 var(--om-space-8);
  padding: var(--om-space-5) var(--om-space-6);
  border-left: var(--om-space-1) solid var(--om-blue-600);
  border-radius: 0 var(--om-radius-lg) var(--om-radius-lg) 0;
  background: var(--om-blue-50);
  color: var(--om-neutral-800);
}
.learn-prose blockquote p:last-child { margin-bottom: 0; }

/* Worked-example tables. A money column is marked in the Markdown with a
   right-aligned separator (|---:|); markdown-it puts text-align:right on those
   cells, and only they get the numbers face and no-wrap. Guessing from column
   position broke text tables whose last column is words. */
.learn-table {
  margin: 0 0 var(--om-space-8);
  overflow-x: auto;
  border: 2px solid var(--om-neutral-100);
  border-radius: var(--om-radius-lg);
}
.learn-table table { width: 100%; border-collapse: collapse; font-size: var(--om-text-base); }
.learn-table th,
.learn-table td {
  padding: var(--om-space-2-5) var(--om-space-4);
  border-bottom: 1px solid var(--om-neutral-100);
  text-align: left;
  vertical-align: top;
}
.learn-table th {
  background: var(--om-neutral-50);
  font-size: var(--om-text-sm);
  font-weight: var(--om-font-semibold);
  color: var(--om-neutral-700);
}
.learn-table tr:last-child td { border-bottom: 0; }
/* Phone: tighter cells so more columns fit, and edge shadows that appear only
   on the side that still has columns to scroll to. */
@media (max-width: 767px) {
  .learn-table th,
  .learn-table td { padding: var(--om-space-2) var(--om-space-3); font-size: var(--om-text-sm); }
  .learn-table {
    background:
      linear-gradient(to right, var(--om-bg-primary) 30%, transparent) 0 0 / var(--om-space-8) 100% no-repeat local,
      linear-gradient(to left, var(--om-bg-primary) 30%, transparent) 100% 0 / var(--om-space-8) 100% no-repeat local,
      linear-gradient(to right, var(--om-neutral-300), transparent) 0 0 / var(--om-space-3) 100% no-repeat scroll,
      linear-gradient(to left, var(--om-neutral-300), transparent) 100% 0 / var(--om-space-3) 100% no-repeat scroll;
  }
}
.learn-table td[style*="right"] {
  white-space: nowrap;
  font-family: var(--om-font-financial);
  font-variant-numeric: tabular-nums;
}

/* ===== Next step (per article) ===== */
.learn-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--om-space-4);
  padding: var(--om-space-6);
  border-radius: var(--om-radius-xl);
  background: var(--om-neutral-900);
}
.learn-next__text {
  flex: 1 1 18rem;
  margin: 0;
  font-size: var(--om-text-base);
  line-height: var(--om-leading-relaxed);
  color: var(--om-neutral-100);
}

/* ===== More in this track ===== */
.learn-more {
  padding: var(--om-space-2) 0 var(--om-space-16);
  background: var(--om-bg-secondary);
}
.learn-more .learn-track__title { max-width: 72rem; margin: var(--om-space-10) auto var(--om-space-5); }
.learn-more .learn-grid { max-width: 72rem; margin: 0 auto; }

/* ===== Closing card (hub, and articles without a next step) ===== */
.learn-close {
  padding: var(--om-space-16) 0;
  background: var(--om-bg-primary);
}
.learn-close__card {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--om-space-10) var(--om-space-6);
  border-radius: var(--om-radius-2xl);
  background: var(--om-neutral-900);
  text-align: center;
}
.learn-close__title {
  margin: 0 auto var(--om-space-3);
  font-size: var(--om-text-3xl);
  font-weight: var(--om-font-bold);
  letter-spacing: -0.02em;
  line-height: var(--om-leading-tight);
  color: var(--om-bg-primary);
}
.learn-close__lead {
  margin: 0 auto var(--om-space-6);
  max-width: 40rem;
  font-size: var(--om-text-base);
  line-height: var(--om-leading-relaxed);
  color: var(--om-neutral-300);
}
.learn-close__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--om-space-3);
}