/*
 * Blog-only styles, layered on styles.css and discoverability.css. Those two
 * already supply the page shell, section rhythm, tables, FAQ list, and footer,
 * so everything here is specific to article reading: the byline, the disclosure
 * band, the app entry cards, and the index card grid.
 *
 * Colours reuse the `--public-*` tokens that `.public-page` defines. The two
 * literals below match the values discoverability.css already uses for links
 * and muted text on paper, and both clear 4.5:1 against `--public-paper`.
 */

.blog-public-page {
  --blog-link: #0b7046;
  --blog-muted: #657269;
  --blog-card: rgba(255, 255, 252, 0.72);
}

.blog-byline-band {
  padding-top: 26px;
}

.blog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--blog-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.blog-byline span[aria-hidden="true"] {
  opacity: 0.55;
}

/* Sits directly under the byline so the commercial interest is visible before
   the reader invests in the article, not after it. */
.blog-disclosure {
  margin-block: 22px 0;
}

/* The disclosure already carries the space above the article body, so the
   intro drops the section padding that would otherwise leave a dead gap. */
.blog-post-page .blog-intro {
  padding-top: 30px;
}

.blog-disclosure p {
  margin: 0;
  padding: 18px 22px;
  border: 1px solid var(--public-line);
  border-left: 4px solid var(--blog-link);
  border-radius: 16px;
  background: var(--blog-card);
  color: var(--public-ink);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 78ch;
}

.blog-intro p {
  font-size: 1.12rem;
  line-height: 1.72;
  max-width: 66ch;
}

.blog-intro p + p {
  margin-top: 18px;
}

/* App entries */

.blog-entry {
  margin-top: 26px;
  padding: 28px 30px;
  border: 1px solid var(--public-line);
  border-radius: 20px;
  background: var(--blog-card);
}

.blog-entry-ours {
  border-color: rgba(11, 112, 70, 0.45);
  background: rgba(54, 223, 140, 0.09);
}

.blog-entry-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.blog-entry-index {
  color: var(--blog-link);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.blog-entry-head h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.1vw, 1.62rem);
  line-height: 1.22;
}

.blog-entry-category {
  margin: 4px 0 0;
  color: var(--blog-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.blog-entry-flag {
  margin: 16px 0 0;
  color: var(--blog-link);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blog-entry > p {
  margin: 16px 0 0;
  line-height: 1.68;
  max-width: 70ch;
}

.blog-entry-facts {
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
}

.blog-entry-facts > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.blog-entry-facts dt {
  margin: 0;
  padding-top: 2px;
  color: var(--blog-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.blog-entry-facts dd {
  margin: 0;
  line-height: 1.6;
}

.blog-entry-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--public-line);
}

.blog-entry-sources .public-text-link {
  font-size: 0.86rem;
}

.blog-prose-section .public-limit-list {
  margin-top: 18px;
}

/* Evaluation posts */

.blog-verdict p {
  max-width: 70ch;
}

.blog-pricing-note {
  margin-top: 34px;
  padding: 22px 24px;
  border: 1px solid var(--public-line);
  border-radius: 16px;
  background: var(--blog-card);
  max-width: 78ch;
}

.blog-pricing-note p {
  margin: 0 0 12px;
  line-height: 1.65;
}

/* Research posts */

.blog-finding {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 18px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--public-line);
}

.blog-finding-index {
  color: var(--blog-link);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}

.blog-finding h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.28;
  max-width: 34ch;
}

.blog-finding p {
  margin: 12px 0 0;
  line-height: 1.68;
  max-width: 70ch;
}

.blog-finding-source,
.blog-finding-meaning {
  font-size: 0.94rem;
}

.blog-finding-source {
  color: var(--blog-muted);
}

.blog-finding .public-text-link {
  margin-top: 14px;
  font-size: 0.88rem;
}

/* Catalog widget on /blog/.
 *
 * The markup contract is shared with the course catalog so `course-pages.js`
 * drives both, but the styling is not: the course catalog's CSS is scoped to
 * `.course-catalog-page`, which carries its own palette and page chrome. The
 * blog is a `.public-page`, so its filter UI is styled here with the
 * `--public-*` tokens instead of inheriting a second colour system.
 */

.blog-index-page .course-filter-shell {
  margin-top: 34px;
  display: grid;
  gap: 18px;
}

.blog-index-page .course-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  padding: 0 18px;
  border: 1px solid var(--public-line);
  border-radius: 999px;
  background: var(--blog-card);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.blog-index-page .course-search:focus-within {
  border-color: var(--blog-link);
  box-shadow: 0 0 0 3px rgba(11, 112, 70, 0.15);
}

.blog-index-page .course-search-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--blog-muted);
}

.blog-index-page .course-search input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--public-ink);
  font: inherit;
  font-size: 0.98rem;
}

.blog-index-page .course-search input:focus {
  outline: none;
}

.blog-index-page .course-search input::placeholder {
  color: var(--blog-muted);
}

.blog-index-page .course-search input::-webkit-search-cancel-button {
  appearance: none;
}

.blog-index-page .course-search-clear {
  flex: none;
  border: 0;
  background: none;
  padding: 4px 2px;
  color: var(--blog-link);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.blog-index-page .course-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-index-page .course-filter button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--public-line);
  border-radius: 999px;
  background: var(--blog-card);
  color: var(--public-ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.blog-index-page .course-filter button:hover {
  border-color: var(--course-tint, var(--blog-link));
}

.blog-index-page .course-filter button[aria-pressed="true"] {
  border-color: var(--course-tint, var(--blog-link));
  background: var(--course-tint-soft, rgba(11, 112, 70, 0.12));
  color: var(--course-tint-text, var(--blog-link));
}

.blog-index-page .course-filter-count {
  color: var(--blog-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.blog-index-page .course-filter button[aria-pressed="true"] .course-filter-count {
  color: inherit;
}

.blog-index-page .course-filter-status {
  margin: 0;
  color: var(--blog-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.blog-index-page .course-category-group {
  margin-top: 46px;
}

.blog-index-page .course-category-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--course-tint-soft, var(--public-line));
}

.blog-index-page .course-category-heading h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  color: var(--course-tint-text, var(--public-ink));
}

.blog-index-page .course-category-count {
  margin: 0;
  color: var(--blog-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.blog-index-page .course-search-empty {
  margin-top: 30px;
  color: var(--blog-muted);
  font-size: 0.98rem;
}

/* The shared hero grid is sized for a portrait phone mockup. A landscape
   illustration needs a wider column or it reads as an afterthought. */
.blog-post-page .public-hero-shell {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
}

.blog-post-page .public-hero h1 {
  max-width: 15ch;
}

@media (max-width: 900px) {
  .blog-post-page .public-hero-shell {
    grid-template-columns: 1fr;
  }
}

.public-hero-illustration {
  margin: 0;
  position: relative;
  z-index: 2;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(4, 20, 14, 0.34);
  animation: public-visual-in 760ms 90ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.public-hero-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .public-hero-illustration {
    animation: none;
  }
}

/* Research charts */

.blog-chart-section {
  padding-top: 0;
}

.blog-chart {
  margin: 0;
  padding: 30px 32px 26px;
  border: 1px solid var(--public-line);
  border-radius: 20px;
  background: var(--blog-card);
  color: var(--public-ink);
  max-width: 780px;
}

.blog-chart figcaption {
  display: grid;
  gap: 7px;
  margin-bottom: 22px;
}

.blog-chart figcaption strong {
  font-family: var(--font-display, "Fraunces", serif);
  font-size: 1.25rem;
  font-weight: 600;
}

.blog-chart figcaption span {
  color: var(--blog-muted);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 66ch;
}

.blog-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Index groupings */

.blog-category-group + .blog-category-group {
  margin-top: 54px;
}

.blog-category-blurb {
  margin: 6px 0 0;
  color: var(--blog-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 62ch;
}

.blog-category-group .blog-card-grid {
  margin-top: 24px;
}

/* Index card grid */

.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 20px;
  margin-top: 38px;
}

.blog-card-art {
  display: block;
  width: calc(100% + 52px);
  margin: -28px -26px 4px;
  height: auto;
  aspect-ratio: 600 / 315;
  border-radius: 20px 20px 0 0;
  object-fit: cover;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px;
  border: 1px solid var(--public-line);
  border-radius: 20px;
  background: var(--blog-card);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* An author `display` rule outranks the user-agent [hidden] rule at equal
   specificity, so filtered-out cards need this or they stay on screen. */
.blog-card[hidden] {
  display: none;
}

.blog-card:hover,
.blog-card:focus-visible {
  border-color: rgba(11, 112, 70, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(16, 28, 20, 0.1);
}

.blog-card-eyebrow {
  margin: 0;
  color: var(--blog-link);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.blog-card h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  line-height: 1.26;
}

.blog-card-dek {
  margin: 0;
  color: var(--blog-muted);
  font-size: 0.96rem;
  line-height: 1.62;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--blog-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.blog-card-meta span[aria-hidden="true"] {
  opacity: 0.55;
}

.blog-card-cue {
  margin-top: auto;
  padding-top: 8px;
  color: var(--blog-link);
  font-size: 0.9rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  .blog-entry {
    padding: 22px 20px;
  }

  .blog-entry-facts > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .blog-intro p {
    font-size: 1.04rem;
  }

  .blog-disclosure p {
    padding: 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    transition: none;
  }

  .blog-card:hover,
  .blog-card:focus-visible {
    transform: none;
  }
}