/* Insights (sohub skin): journal list + article reader.
   Shared by /insights/ and /insights/article.
   Ice canvas, soft panels, ink panels. No borders, no shadows, no lines. */

/* ---------- List hero ---------- */

.insights-hero {
  padding-top: calc(var(--nav-height) + clamp(3rem, 12vh, 7rem));
}

.insights-hero .eyebrow {
  display: block;
  margin-bottom: 1.25rem;
}

.insights-headline { max-width: 16ch; }

.insights-lead {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  max-width: 44ch;
  font-weight: 500;
}

/* ---------- Journal list head ---------- */

.insights-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 5vh, 3.25rem);
}

.insights-count:empty { display: none; }

/* ---------- Journal grid ---------- */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .insights-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .insights-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* Card: soft rounded panel with an image (or ink placeholder) on top */
.insight-card {
  display: flex;
  flex-direction: column;
  background: var(--soft);
  border-radius: var(--r-panel);
  padding: 1rem 1rem 1.5rem;
  transition: transform 0.3s var(--ease-spring);
}
.insight-card:hover { transform: scale(1.02); }

.insight-cover {
  border-radius: var(--r-card);
  overflow: clip;
  aspect-ratio: 16 / 10;
  margin-bottom: 1.25rem;
}
.insight-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.insight-card:hover .insight-cover img { transform: scale(1.03); }

/* Cover placeholder: ink panel, large Varela Round initial */
.insight-cover-ph {
  display: grid;
  place-items: center;
  background: var(--ink);
}
.insight-cover-ph span {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 1;
  color: var(--on-dark);
  transform: translateY(-0.05em);
}

.insight-meta { margin-bottom: 1rem; }
.insight-meta .tag,
.article-kicker .tag { white-space: normal; }

.insight-title {
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 600;
  letter-spacing: var(--track-3);
  line-height: 1.1;
  max-width: 22ch;
  padding-inline: 0.25rem;
}

.insight-summary {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: var(--text-small);
  max-width: 48ch;
  padding-inline: 0.25rem;
}

.insight-date {
  margin-top: auto;
  padding-top: 1.1rem;
  padding-inline: 0.25rem;
}

/* ---------- Grid states: loading, empty, error ---------- */

.insights-state {
  grid-column: 1 / -1;
  justify-self: start;
}

.insights-state-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
  justify-items: start;
  background: var(--soft);
  border-radius: var(--r-panel);
  padding: clamp(2rem, 6vh, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}
.insights-state-copy {
  font-size: var(--text-small);
  max-width: 44ch;
}
.insights-state-block .pill { margin-top: 0.5rem; }

/* ---------- Article reader ---------- */

.article-main {
  padding-top: calc(var(--nav-height) + clamp(2.5rem, 9vh, 5.5rem));
  padding-bottom: var(--space-section);
}

.article-col {
  max-width: calc(68ch + 2 * var(--gutter));
  margin-inline: auto;
}

.article-back {
  display: flex;
  margin-bottom: clamp(2.5rem, 8vh, 4.5rem);
}

.article-head { margin-bottom: clamp(2rem, 6vh, 3.5rem); }

.article-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.article-date { font-weight: 500; }

.article-title {
  font-size: clamp(1.875rem, 4vw, 3.5rem);
  max-width: 20ch;
}

.article-cover {
  border-radius: var(--r-panel);
  overflow: clip;
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}
.article-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Article states: not found, error */
.article-state {
  display: grid;
  gap: 1rem;
  justify-items: start;
  background: var(--soft);
  border-radius: var(--r-panel);
  padding: clamp(2rem, 6vh, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}
.article-state[hidden] { display: none; }
.article-state-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: var(--track-5);
  line-height: 1.05;
  text-wrap: balance;
}
.article-state-copy {
  font-size: var(--text-small);
  max-width: 44ch;
}
.article-state .pill { margin-top: 0.5rem; }

/* ---------- Prose (rendered markdown), ink on ice ---------- */

.prose {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #3a4147;
}

.prose > * + * { margin-top: 1.15em; }

.prose h2,
.prose h3,
.prose h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-3);
  text-wrap: balance;
}
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2.4em; letter-spacing: var(--track-5); }
.prose h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-top: 2em; }
.prose h4 { font-size: 1.0625rem; margin-top: 1.8em; }

.prose strong { color: var(--ink); font-weight: 600; }

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease-out);
}
.prose a:hover { color: var(--muted); }

.prose ul,
.prose ol {
  padding-left: 1.4rem;
  display: grid;
  gap: 0.5em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--muted); }

.prose blockquote {
  background: var(--soft);
  border-radius: var(--r-card);
  padding: 1.25rem 1.5rem;
  margin-block: 1.8em;
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--track-3);
  color: var(--ink);
}
.prose blockquote > * + * { margin-top: 0.75em; }

.prose pre {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-card);
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}
.prose :not(pre) > code {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: 0.5em;
  padding: 0.12em 0.45em;
}

.prose img {
  width: 100%;
  border-radius: var(--r-card);
  margin-block: 1.8em;
}

.prose hr {
  border: 0;
  margin-block: 2.5em;
}

.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--soft);
  border-radius: var(--r-card);
  overflow: clip;
  font-size: var(--text-small);
}
.prose th,
.prose td {
  text-align: left;
  padding: 0.7rem 0.9rem;
}
.prose th { color: var(--ink); font-weight: 600; }