/**
 * Insights views — page-scoped styles for all three templates.
 *
 * Loaded on /insights/ (theme route), on a single post and on a category
 * archive by functions.php (assets/css/pages/insights.css). Shared tokens come
 * from assets/css/tokens.css; shared classes used here (.site-container,
 * .page-hero, .page-hero-title, .page-hero-lead, .tech-eyebrow,
 * .section-header, .section-title, .section-sub, .btn, .btn-primary,
 * .btn-light, .btn-secondary, .image-frame, .ratio-*, .link-arrow) come from
 * style.css. Every class declared in this file is prefixed .ins- and is used
 * only by page-insights.php, single.php and category.php.
 */

/* -------------------------------------------------------------
   01 Hero (shared shape on all three views)
------------------------------------------------------------- */
.ins-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/* -------------------------------------------------------------
   02 Topic strip: the Category chips, each a real term archive
------------------------------------------------------------- */
.ins-topics {
  padding-top: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--color-border);
}

.ins-topics-head {
  margin-bottom: 28px;
}

.ins-cat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ins-cat-item {
  margin: 0;
}

.ins-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ins-cat-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ins-cat-count {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-copper);
}

/* -------------------------------------------------------------
   03 Band rhythm (white and soft alternate on every view)
------------------------------------------------------------- */
.ins-latest {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.page-insights .ins-topics {
  background-color: #ffffff;
}

.page-insights .ins-latest {
  background-color: var(--color-surface-soft);
}

.page-insight-category .ins-latest {
  background-color: #ffffff;
}

.page-insight-category .ins-topics {
  background-color: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
}/* -------------------------------------------------------------
   04 Article grid and cards (3 -> 2 -> 1 columns)
------------------------------------------------------------- */
.ins-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.ins-card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.ins-card-media {
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--color-surface-gray);
}

.ins-card-img {
  display: block;
  width: 100%;
}

/* Local gray placeholder when a post has no featured image. */
.ins-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-gray);
}

.ins-ph::before {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  background-color: rgba(38, 52, 61, 0.16);
}

.ins-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 24px 24px 26px;
}

.ins-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ins-chip {
  display: inline-block;
  padding: 4px 10px;
  background-color: rgba(23, 110, 166, 0.08);
  border-radius: 4px;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ins-chip:hover {
  background-color: rgba(23, 110, 166, 0.16);
  color: var(--color-accent-hover);
}

.ins-card-title {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
}

.ins-card-title a {
  color: var(--color-ink);
}

.ins-card-title a:hover {
  color: var(--color-accent);
}

.ins-card-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}

.ins-card-link {
  margin-top: auto;
}

/* -------------------------------------------------------------
   05 Empty state
------------------------------------------------------------- */
.ins-empty {
  max-width: 720px;
  padding: 48px 40px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.ins-empty-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.ins-empty-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-body);
  margin-bottom: 0;
}

.ins-empty .btn {
  margin-top: 24px;
}

/* -------------------------------------------------------------
   06 Pagination (WordPress core markup, restyled in place)
------------------------------------------------------------- */
.ins-latest .pagination {
  margin-top: 48px;
}

.ins-latest .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ins-latest .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ins-latest .page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ins-latest .page-numbers.current {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}

.ins-latest .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  color: var(--color-muted);
}/* -------------------------------------------------------------
   07 Single article: breadcrumb
------------------------------------------------------------- */
.page-insight-single .ins-crumbs {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border-subtle);
}

.page-insight-single .ins-crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.page-insight-single .ins-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-insight-single .ins-crumb + .ins-crumb::before {
  content: "›";
  color: var(--color-muted);
}

.page-insight-single .ins-crumb a {
  color: var(--color-body);
  font-weight: 600;
}

.page-insight-single .ins-crumb a:hover {
  color: var(--color-accent);
}

.page-insight-single .ins-crumb-current {
  color: var(--color-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------
   08 Single article: hero and featured image
------------------------------------------------------------- */
.page-insight-single .ins-article-hero {
  padding-bottom: 64px;
}

.page-insight-single .ins-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.page-insight-single .ins-article-media {
  max-width: 1000px;
  margin: 40px 0 0;
}

/* -------------------------------------------------------------
   09 Single article: body, measure and the aside beside it
------------------------------------------------------------- */
.page-insight-single .ins-body {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background-color: #ffffff;
}

.page-insight-single .ins-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
}

.page-insight-single .ins-main {
  min-width: 0;
}

.page-insight-single .ins-prose {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-body);
}

.page-insight-single .ins-prose > *:first-child {
  margin-top: 0;
}

.page-insight-single .ins-prose p {
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 1.35rem;
}

.page-insight-single .ins-prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  margin: 2.5rem 0 0.9rem;
}

.page-insight-single .ins-prose h3 {
  font-size: 1.3125rem;
  margin: 2rem 0 0.75rem;
}

.page-insight-single .ins-prose h4 {
  font-size: 1.125rem;
  margin: 1.75rem 0 0.625rem;
}

.page-insight-single .ins-prose ul,
.page-insight-single .ins-prose ol {
  margin: 0 0 1.35rem;
  padding-left: 1.4rem;
}

.page-insight-single .ins-prose li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.page-insight-single .ins-prose li > ul,
.page-insight-single .ins-prose li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0;
}.page-insight-single .ins-prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-insight-single .ins-prose blockquote {
  margin: 2rem 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--color-accent);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-ink);
}

.page-insight-single .ins-prose blockquote p:last-child {
  margin-bottom: 0;
}

.page-insight-single .ins-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.page-insight-single .ins-prose figure {
  margin: 2rem 0;
}

.page-insight-single .ins-prose figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.page-insight-single .ins-prose table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.page-insight-single .ins-prose th,
.page-insight-single .ins-prose td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-subtle);
}

.page-insight-single .ins-prose thead th {
  background-color: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink);
  font-weight: 700;
}

.page-insight-single .ins-prose figure.wp-block-table,
.page-insight-single .ins-prose .wp-block-table {
  overflow-x: auto;
}

.page-insight-single .ins-prose code {
  padding: 2px 6px;
  background-color: var(--color-surface-gray);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.page-insight-single .ins-prose pre {
  margin: 2rem 0;
  padding: 20px;
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

.page-insight-single .ins-prose pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: inherit;
}

/* -------------------------------------------------------------
   10 Single article: topics and RFQ panels
------------------------------------------------------------- */
.page-insight-single .ins-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 100px;
}

.page-insight-single .ins-panel {
  padding: 24px;
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.page-insight-single .ins-panel-cta {
  background-color: #ffffff;
}

.page-insight-single .ins-panel-title {
  font-size: 1.0625rem;
  margin-bottom: 14px;
}

.page-insight-single .ins-panel-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.page-insight-single .ins-panel-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-insight-single .ins-panel-list:last-child {
  margin-bottom: 0;
}

.page-insight-single .ins-panel-item {
  margin-bottom: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.page-insight-single .ins-panel-item:last-child {
  margin-bottom: 0;
}

.page-insight-single .ins-panel-link {
  color: var(--color-ink);
  font-weight: 600;
}

.page-insight-single .ins-panel-link:hover {
  color: var(--color-accent);
}

.page-insight-single .ins-panel-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-body);
  margin-bottom: 0;
}

.page-insight-single .ins-panel-arrow {
  margin-top: 14px;
}

/* -------------------------------------------------------------
   11 Single article: protected post (title + native password form)
------------------------------------------------------------- */
.page-insight-single .ins-article-locked {
  padding-bottom: var(--space-section);
}

.page-insight-single .ins-locked {
  max-width: 520px;
  margin-top: 28px;
}

.page-insight-single .ins-locked .post-password-form {
  margin: 0;
  padding: 28px 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.page-insight-single .ins-locked .post-password-form p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-body);
}

.page-insight-single .ins-locked .post-password-form input[type="password"] {
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-ink);
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.page-insight-single .ins-locked .post-password-form input[type="submit"] {
  height: 48px;
  padding: 0 24px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.page-insight-single .ins-locked .post-password-form input[type="submit"]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}/* -------------------------------------------------------------
   12 Single article: related reading
------------------------------------------------------------- */
.page-insight-single .ins-related {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background-color: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
}

/* -------------------------------------------------------------
   13 RFQ band (graphite, as on the other single templates)
------------------------------------------------------------- */
.ins-cta {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background-color: var(--color-ink);
  color: #ffffff;
}

.ins-cta-box {
  max-width: 860px;
}

.ins-cta-title {
  color: #ffffff;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: 16px;
}

.ins-cta-lead {
  max-width: 720px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #b5c3cb;
  margin-bottom: 28px;
}

.ins-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ins-cta .btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.ins-cta .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  color: #ffffff;
}

/* -------------------------------------------------------------
   14 Responsive
------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-insight-single .ins-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .page-insight-single .ins-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .ins-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ins-hero-actions .btn,
  .ins-cta-actions .btn {
    width: 100%;
  }

  .ins-topics,
  .ins-latest,
  .ins-cta,
  .page-insight-single .ins-body,
  .page-insight-single .ins-related,
  .page-insight-single .ins-article-locked {
    padding-top: var(--space-section-mobile);
    padding-bottom: var(--space-section-mobile);
  }

  .page-insight-single .ins-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-insight-single .ins-prose,
  .page-insight-single .ins-prose p {
    font-size: 16.5px;
  }

  .page-insight-single .ins-article-hero {
    padding-bottom: 40px;
  }

  .page-insight-single .ins-article-media {
    margin-top: 28px;
  }

  .ins-card-body {
    padding: 20px 20px 22px;
  }

  .ins-empty {
    padding: 32px 24px;
  }
}