/* Article template: shared frame for breadcrumb, hero, prose, sidebar and article end. */
.blog .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.blog-article {
  --article-frame: min(100% - 2 * var(--gutter), var(--blog-wide));
  width: var(--article-frame);
  margin-inline: auto;
  margin-block-start: var(--spacing-6xl);
}

/* Breadcrumb styles are shared in components.css. */

/* Hero */
.blog-feature-cover, .blog-card-cover { aspect-ratio: 1200 / 630; }
.blog-feature-cover .blog-cover, .blog-card-cover .blog-cover { object-fit: contain; }
.blog-hero {
  display: grid;
  gap: var(--spacing-4xl);
  margin-block-start: var(--spacing-6xl);
  padding-block-end: var(--spacing-6xl);
  border-block-end: 1px solid var(--hairline);
}
.blog-hero-text {
  min-width: 0;
  max-width: var(--blog-column);
}
.blog-hero-category {
  font-size: var(--type-small);
  line-height: var(--type-small--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--accent);
}
.blog-post-title.blog-hero-title {
  max-width: none;
  margin-block-start: var(--spacing-lg);
  text-align: start;
}
.blog-hero-lead {
  margin-block-start: var(--spacing-xl);
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--fg-secondary);
  text-wrap: pretty;
}
.blog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-lg);
  margin-block-start: var(--spacing-3xl);
  font-size: var(--type-body);
  line-height: var(--type-body--line-height);
  color: var(--fg-tertiary);
}
.blog-hero-meta > * + *::before {
  content: "·";
  margin-inline-end: var(--spacing-lg);
  color: var(--fg-quaternary);
}
.blog-hero-media {
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--bg-panel);
}
.blog-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (width >= 1024px) {
  .blog-hero--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--spacing-6xl);
  }
}

/* Body grid: prose column + sticky TOC on wide screens. */
.blog-article-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--blog-column));
  justify-content: center;
}
.blog-article .blog-prose {
  grid-area: auto;
  margin-block-start: var(--spacing-6xl);
}
/* Below 1280px the TOC hides; the same aside (with the single Share trigger) sits between hero and prose. */
.blog-article-aside {
  order: -1;
  margin-block-start: var(--spacing-4xl);
}
.blog-article-aside .blog-toc { display: none; }
@media (width >= 1280px) {
  .blog-article-grid {
    grid-template-columns: minmax(0, var(--blog-column)) var(--blog-toc-width);
    justify-content: space-between;
    column-gap: var(--spacing-6xl);
  }
  .blog-article-aside .blog-toc { display: block; }
  .blog-article-aside {
    order: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--nav-h) + var(--spacing-5xl));
    align-self: start;
    margin-block-start: var(--spacing-6xl);
    min-width: 0;
  }
  .blog-article-aside .blog-toc {
    position: static;
    grid-area: auto;
    width: auto;
    margin: 0;
    max-height: calc(100dvh - var(--nav-h) - var(--spacing-7xl) - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Hero sharing: one trigger with a lightweight accessible menu. */
.blog-share { margin: 0; }
.blog-share-btn.comma-control:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comma-share-item { display: flex; align-items: center; gap: var(--spacing-md); }
.comma-share-item svg { width: 16px; height: 16px; flex: none; }
.blog-share-btn.comma-control {
  display: inline-flex; align-items: center; gap: var(--spacing-sm);
  min-height: 36px; padding: var(--spacing-sm) var(--spacing-xl);
  border: 1px solid var(--button-secondary-border); border-radius: var(--radius-full);
  background: var(--button-secondary-bg); color: var(--button-secondary-fg);
  font: var(--font-weight-medium) var(--type-small)/var(--type-small--line-height) var(--font-sans);
}
.blog-share-btn.comma-control:hover { background: var(--button-secondary-bg-hover); color: var(--button-secondary-fg-hover); }
.comma-share-menu {
  min-width: 180px; padding: var(--spacing-sm); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); background: var(--bg-panel); color: var(--fg-primary);
  font: var(--type-body)/var(--type-body--line-height) var(--font-sans);
}
.comma-share-item { padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-sm); cursor: pointer; }
.comma-share-item:focus, .comma-share-item[data-highlighted] { background: var(--button-tertiary-bg-hover); color: var(--fg-primary); outline: none; }
.blog-share-manual { width: 100%; margin-block-start: var(--spacing-sm); padding: var(--spacing-sm); border: 1px solid var(--hairline); background: var(--bg-panel); color: var(--fg-primary); }
.blog-share-status { margin-block-start: var(--spacing-sm); font-size: var(--type-small); color: var(--fg-secondary); }

/* Related content aligns with the shared article frame. */
.blog-related { margin-block-start: var(--spacing-7xl); padding-block-start: var(--spacing-5xl); border-block-start: 1px solid var(--hairline); }
.blog-related h2, .comma-faq h2 { font-size: var(--type-heading-3, 2rem); line-height: 1.2; font-weight: var(--font-weight-medium); }
.blog-related-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); margin-block-start: var(--spacing-3xl); }
.blog-related-card { display: flex; flex-direction: column; min-width: 0; width: 100%; max-width: 440px; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--bg-panel); transition: border-color var(--duration-fast), background-color var(--duration-fast); }
.blog-related-card:hover { border-color: var(--accent); background: var(--button-tertiary-bg-hover); }
.blog-related-image { aspect-ratio: 1200 / 630; background: var(--bg-panel); border-block-end: 1px solid var(--hairline); }
.blog-related-image img { width: 100%; height: 100%; object-fit: contain; }
.blog-related-content { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); padding: var(--spacing-xl); }
.blog-related-category { color: var(--accent); font-size: var(--type-small); }
.blog-related-card h3 { font-size: 1.25rem; line-height: 1.5; font-weight: var(--font-weight-medium); }
.blog-related-card h3, .blog-related-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.blog-related-description { color: var(--fg-secondary); font-size: var(--type-body); line-height: var(--type-body--line-height); }
.blog-related-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); margin-block-start: auto; color: var(--fg-tertiary); font-size: var(--type-small); }
@media (width >= 700px) { .blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width >= 1280px) { .blog-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Shared Comma accordion, usable with any content configuration. */
.comma-faq { display: grid; gap: var(--spacing-4xl); margin-block-start: var(--spacing-7xl); padding-block-start: var(--spacing-5xl); border-block-start: 1px solid var(--hairline); }
.comma-faq header p { margin-block-start: var(--spacing-xl); color: var(--fg-secondary); font-size: var(--type-body); }
.comma-faq-items { min-width: 0; border-block-start: 1px solid var(--hairline); }
.comma-faq-item { border-block-end: 1px solid var(--hairline); }
.comma-faq-trigger.comma-control { display: flex; justify-content: space-between; align-items: center; width: 100%; height: auto; gap: var(--spacing-xl); padding: var(--spacing-xl) 0; white-space: normal; text-align: start; background: none; color: var(--fg-primary); border-radius: 0; font: var(--font-weight-medium) var(--type-body-lg)/var(--type-body-lg--line-height) var(--font-sans); }
.comma-faq-trigger.comma-control:hover { color: var(--accent); background: none; }
.comma-faq-trigger svg { flex: none; transition: transform var(--duration-fast); }
.comma-faq-trigger svg.is-open { transform: rotate(45deg); }
.comma-faq-item [role=region] p { padding-block-end: var(--spacing-xl); padding-inline-end: var(--spacing-3xl); color: var(--fg-secondary); font-size: var(--type-body); line-height: var(--type-body--line-height); }
@media (width >= 1024px) { .comma-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
@media (prefers-reduced-motion: reduce) { .comma-faq-trigger svg, .blog-related-card { transition: none; } }

/* Prose details: figures, quotes, tables, media never overflow narrow screens. */
.blog-prose .blog-product-figure {
  margin-block: var(--spacing-4xl);
  width: 100%;
}
.blog-product-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
}
.blog-product-figure figcaption {
  margin-block-start: var(--spacing-lg);
  color: var(--fg-tertiary);
  font-size: var(--type-small);
  line-height: var(--type-small--line-height);
}
.blog-product-figure--portrait img {
  max-width: 360px;
  margin-inline: auto;
}
.blog-prose img,
.blog-prose svg,
.blog-prose video {
  max-width: 100%;
  height: auto;
}
.blog-prose blockquote {
  margin-block: var(--spacing-3xl);
  padding-inline-start: var(--spacing-xl);
  border-inline-start: 2px solid var(--accent);
  color: var(--fg-secondary);
}
.blog-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin-block: var(--spacing-3xl);
  border-collapse: collapse;
  font-size: var(--type-small);
}
.blog-prose th,
.blog-prose td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-block-end: 1px solid var(--hairline);
  text-align: start;
}
@media (width <= 860px) {
  .blog-article { margin-block-start: var(--spacing-4xl); }
  .blog-hero { margin-block-start: var(--spacing-4xl); padding-block-end: var(--spacing-4xl); }
}
@media (width <= 520px) {
  .blog-hero-meta { column-gap: var(--spacing-xl); }
  .blog-hero-meta > * + *::before { content: none; }
}