/* ============================================================
   Joolr — Hot Takes (blog) styles
   Extends ../css/styles.css (shared design system).
   ============================================================ */

.container.reading { max-width: 44rem; }

/* ---------- Index / listing ---------- */
.ht-hero { padding-block: clamp(4.5rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem); }
.ht-hero .lede { margin-top: 1.25rem; }

.ht-list {
  list-style: none;
  border-top: 1px solid var(--neutral-200);
  margin-top: 1rem;
}
.ht-item { border-bottom: 1px solid var(--neutral-200); }
.ht-item a {
  display: grid;
  gap: 0.5rem;
  padding: 2rem 0.25rem;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.ht-item a:hover { opacity: 0.7; }
.ht-item a:hover .ht-item-title { color: var(--jewel-dark); }
.ht-item-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jewel);
}
.ht-item-title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--neutral-950);
  transition: color 0.15s ease;
}
.ht-item-excerpt { color: var(--neutral-600); font-size: 1rem; max-width: 42rem; }

.ht-empty { color: var(--neutral-500); padding: 3rem 0; }

/* ---------- Single post ---------- */
.ht-article { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }

.ht-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-500);
  text-decoration: none;
  margin-bottom: 2.5rem;
}
.ht-back:hover { color: var(--neutral-900); }

.ht-dateline {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jewel);
  margin-bottom: 1rem;
}
.ht-title {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.03;
  text-wrap: balance;
  color: var(--neutral-950);
}
.ht-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
  align-items: center;
  margin-top: 1.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--neutral-200);
  font-size: 0.9375rem;
  color: var(--neutral-500);
}
.ht-byline strong { color: var(--neutral-800); font-weight: 600; }

/* TL;DR box — LLMs preferentially quote a clearly-marked summary */
.ht-tldr {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-left: 3px solid var(--jewel);
  border-radius: 0.75rem;
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
}
.ht-tldr p { margin: 0; color: var(--neutral-800); font-size: 1.0625rem; }
.ht-tldr .ht-tldr-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jewel);
  margin-bottom: 0.5rem;
}

/* Prose */
.ht-prose { margin-top: 2.5rem; }
.ht-prose > * + * { margin-top: 1.5rem; }
.ht-prose p, .ht-prose li {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--neutral-800);
  text-wrap: pretty;
}
.ht-prose h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--neutral-950);
  margin-top: 3rem;
}
.ht-prose h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--neutral-950);
  margin-top: 2rem;
}
.ht-prose ul, .ht-prose ol { padding-left: 1.5rem; }
.ht-prose li + li { margin-top: 0.625rem; }
.ht-prose a { color: var(--jewel-dark); text-decoration: underline; text-underline-offset: 2px; }
.ht-prose a:hover { color: var(--jewel); }
.ht-prose strong { color: var(--neutral-950); font-weight: 700; }
.ht-prose blockquote {
  border-left: 3px solid var(--neutral-300, #d4d4d4);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--neutral-600);
}
.ht-prose hr { border: 0; border-top: 1px solid var(--neutral-200); margin: 3rem 0; }

/* Tables — scroll horizontally on small screens instead of breaking layout */
.ht-table-wrap { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; }
.ht-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 34rem;
}
.ht-prose th, .ht-prose td {
  text-align: left;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--neutral-200);
  vertical-align: top;
  line-height: 1.5;
}
.ht-prose thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-500);
  border-bottom: 2px solid var(--neutral-300, #d4d4d4);
}
.ht-prose tbody tr:hover { background: var(--neutral-50); }
.ht-prose td:first-child { font-weight: 700; color: var(--neutral-950); }

/* FAQ — each Q&A is a bordered row; the markup maps to FAQPage schema */
.ht-faq { margin-top: 1rem; border-top: 1px solid var(--neutral-200); }
.ht-faq-item { border-bottom: 1px solid var(--neutral-200); padding: 1.5rem 0; }
.ht-faq-item h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.ht-faq-item p { margin: 0; }

/* Key stat callout — a citable, quotable fact */
.ht-stat {
  margin: 2.5rem 0;
  padding: 2rem;
  border-radius: 0.875rem;
  background: linear-gradient(120deg, var(--jewel-dark), var(--jewel) 60%, #4d97b3);
  color: var(--white);
}
.ht-stat .ht-stat-value {
  display: block;
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ht-stat .ht-stat-label { display: block; margin-top: 0.625rem; font-size: 1rem; color: rgb(255 255 255 / 0.85); }

/* End-of-post CTA */
.ht-cta {
  margin-top: 3.5rem;
  padding: 2rem;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  background: var(--neutral-50);
}
.ht-cta h3 { margin-bottom: 0.5rem; }
.ht-cta p { color: var(--neutral-600); margin-bottom: 1.25rem; }