/* =============================================================================
   BUAMS AI new-ui — BLOG (listing + article)
   Spec: /frontend_design.md §K.12
   ============================================================================= */

/* ── Search ───────────────────────────────────────────────────────────────── */
.bui-blog-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bui-space-2);
  flex-wrap: wrap;
  margin-top: var(--bui-space-6);
  max-width: 620px;
}

.bui-blog-search .bui-input {
  flex: 1 1 220px;
  min-width: 0;
  padding-left: var(--bui-space-10);
}

.bui-blog-search-icon {
  position: absolute;
  left: var(--bui-space-3);
  display: grid;
  place-items: center;
  color: var(--bui-ink-300);
  pointer-events: none;
}

/* Safari renders a proprietary clear button on type=search; hide it so the
   field matches every other input in the system. */
.bui-blog-search input[type='search']::-webkit-search-decoration,
.bui-blog-search input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.bui-blog-count {
  margin-top: var(--bui-space-4);
  font-size: var(--bui-text-sm);
  color: var(--bui-ink-500);
}

.bui-blog-count strong {
  color: var(--bui-ink-900);
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .bui-blog-search .bui-btn { flex: 1 1 auto; }
}

/* ── Post grid ────────────────────────────────────────────────────────────── */
.bui-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bui-space-5);
}

.bui-post-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  overflow: hidden;
  transition: border-color var(--bui-transition),
              box-shadow var(--bui-transition),
              transform var(--bui-transition);
}

.bui-post-card:hover {
  transform: translateY(-2px);
  border-color: var(--bui-primary-200);
  box-shadow: var(--bui-shadow-md);
}

/* ── Card media, and the placeholder used when the file is missing ───────── */
.bui-post-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bui-surface-2);
  overflow: hidden;
}

.bui-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bui-post-media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--bui-primary-700), var(--bui-primary-900));
  color: #fff;
}

.bui-post-media-initial {
  font-size: 2.75rem;
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.03em;
  line-height: 1;
  opacity: .96;
}

/* Watermark glyph behind the initial, so the placeholder reads as deliberate
   rather than as a failed image. */
.bui-post-media-fallback .bi {
  position: absolute;
  right: -10px;
  bottom: -18px;
  font-size: 5.5rem;
  opacity: .12;
}

.bui-post-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--bui-space-5);
}

.bui-post-meta {
  display: flex;
  align-items: center;
  gap: var(--bui-space-2);
  flex-wrap: wrap;
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

.bui-post-dot { color: var(--bui-ink-300); }

.bui-post-title {
  margin-top: var(--bui-space-2);
  font-size: var(--bui-text-h3);
  line-height: var(--bui-lh-snug);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-ink-900);
  /* 23 of 148 titles exceed 70 characters, so cards clamp to two lines to keep
     the grid even. The full title is still the link text for assistive tech. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.bui-post-title a { color: inherit; }
.bui-post-title a:hover { color: var(--bui-primary-700); text-decoration: none; }

.bui-post-excerpt {
  margin-top: var(--bui-space-3);
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.bui-post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bui-space-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--bui-space-5);
}

.bui-post-author {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-2);
  min-width: 0;
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-ink-700);
  overflow-wrap: anywhere;
}

.bui-post-author-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--bui-primary-100);
  border-radius: 50%;
  color: var(--bui-primary-700);
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-heavy);
}

.bui-post-more {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-1);
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-primary-700);
  white-space: nowrap;
}

@media (max-width: 991.98px) { .bui-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)    { .bui-post-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Compact card (sidebars, related lists) ───────────────────────────────── */
.bui-post-mini-list {
  display: flex;
  flex-direction: column;
  gap: var(--bui-space-4);
}

.bui-post-mini-link {
  display: flex;
  align-items: flex-start;
  gap: var(--bui-space-3);
  min-width: 0;
  color: inherit;
}

.bui-post-mini-link:hover { text-decoration: none; }
.bui-post-mini-link:hover .bui-post-mini-title { color: var(--bui-primary-700); }

.bui-post-mini-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--bui-radius-md);
  overflow: hidden;
}

.bui-post-mini-thumb img,
.bui-post-thumb-fallback {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--bui-radius-md);
}

.bui-post-thumb-fallback {
  display: grid;
  place-items: center;
  background: var(--bui-primary-100);
  color: var(--bui-primary-700);
  font-size: 1.15rem;
  font-weight: var(--bui-fw-heavy);
}

.bui-post-mini-body { min-width: 0; }

.bui-post-mini-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-semibold);
  line-height: var(--bui-lh-snug);
  color: var(--bui-ink-900);
  overflow-wrap: anywhere;
  transition: color var(--bui-transition);
}

.bui-post-mini-meta {
  display: block;
  margin-top: var(--bui-space-1);
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.bui-pagination { margin-top: var(--bui-space-10); }

.bui-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bui-space-2);
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

.bui-pager-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-1);
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--bui-space-3);
  justify-content: center;
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-md);
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-ink-700);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--bui-transition),
              border-color var(--bui-transition),
              color var(--bui-transition);
}

.bui-pager-link:hover:not(.is-disabled):not(.is-current) {
  border-color: var(--bui-primary-700);
  color: var(--bui-primary-700);
  text-decoration: none;
}

.bui-pager-link:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: 2px;
}

.bui-pager-link.is-current {
  background: var(--bui-primary-700);
  border-color: var(--bui-primary-700);
  color: #fff;
}

.bui-pager-link.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.bui-pager-gap {
  padding: 0 var(--bui-space-1);
  color: var(--bui-ink-300);
}

/* Below sm the word labels push the pager onto three rows; the chevrons alone
   are enough, and the links keep their accessible names. */
@media (max-width: 575.98px) {
  .bui-pager-word { display: none; }
  .bui-pager-link { min-width: 36px; padding: 0 var(--bui-space-2); }
}

/* ── Article header ───────────────────────────────────────────────────────── */
.bui-article-head {
  padding-block: var(--bui-space-8) var(--bui-space-6);
  background:
    radial-gradient(ellipse 70% 60% at 70% -20%, var(--bui-primary-50), transparent 62%),
    var(--bui-surface);
}

.bui-article-title {
  margin-top: var(--bui-space-4);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  line-height: 1.15;
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.025em;
  color: var(--bui-ink-900);
  overflow-wrap: anywhere;
}

.bui-article-meta {
  display: flex;
  align-items: center;
  gap: var(--bui-space-2);
  flex-wrap: wrap;
  margin-top: var(--bui-space-5);
  font-size: var(--bui-text-sm);
  color: var(--bui-ink-500);
}

.bui-article-author {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-2);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-ink-900);
}

/* A 94-character title in a breadcrumb would wrap to three lines. */
.bui-crumb-truncate {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Hero image ───────────────────────────────────────────────────────────── */
.bui-article-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  margin-top: var(--bui-space-6);
  background: var(--bui-surface-2);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-xl);
  overflow: hidden;
}

.bui-article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bui-article-hero-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--bui-primary-700), var(--bui-primary-900));
  color: #fff;
}

.bui-article-hero-fallback .bui-post-media-initial { font-size: 4rem; }

@media (max-width: 575.98px) {
  .bui-article-hero { aspect-ratio: 16 / 9; border-radius: var(--bui-radius-lg); }
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.bui-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: start;
  gap: var(--bui-space-12);
}

.bui-article-body { min-width: 0; }
.bui-article-aside { min-width: 0; }

@media (max-width: 991.98px) {
  .bui-article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--bui-space-8); }
}

/* ── Prose: the WYSIWYG article body ──────────────────────────────────────
   BlogPresenter::body() has already removed script/iframe/form blocks, event
   handlers, javascript: URLs and inline styles. What is left is ordinary
   structural markup, so typography is defined here rather than inherited from
   whatever the author pasted. */
.bui-prose {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--bui-ink-700);
  overflow-wrap: break-word;
}

.bui-prose > * + * { margin-top: var(--bui-space-5); }

.bui-prose h2,
.bui-prose h3,
.bui-prose h4 {
  margin-top: var(--bui-space-10);
  color: var(--bui-ink-900);
  line-height: var(--bui-lh-snug);
  font-weight: var(--bui-fw-bold);
}

.bui-prose h2 { font-size: 1.5rem; }
.bui-prose h3 { font-size: 1.25rem; }
.bui-prose h4 { font-size: 1.0625rem; }

.bui-prose p { margin: 0; }

.bui-prose a {
  color: var(--bui-primary-700);
  font-weight: var(--bui-fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bui-prose a:hover { color: var(--bui-primary-800); }

.bui-prose ul,
.bui-prose ol {
  padding-left: var(--bui-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--bui-space-2);
}

.bui-prose ul { list-style: disc; }
.bui-prose ol { list-style: decimal; }
.bui-prose li::marker { color: var(--bui-primary-700); }

.bui-prose strong { color: var(--bui-ink-900); font-weight: var(--bui-fw-bold); }

.bui-prose blockquote {
  margin: 0;
  padding: var(--bui-space-4) var(--bui-space-5);
  background: var(--bui-primary-50);
  border-left: 3px solid var(--bui-primary-700);
  border-radius: 0 var(--bui-radius-md) var(--bui-radius-md) 0;
  color: var(--bui-ink-900);
}

.bui-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bui-radius-lg);
}

.bui-prose hr {
  border: 0;
  border-top: 1px solid var(--bui-line);
}

.bui-prose code {
  padding: 2px 6px;
  background: var(--bui-surface-2);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-sm);
  font-family: var(--bui-font-mono);
  font-size: .9em;
}

.bui-prose pre {
  padding: var(--bui-space-4);
  background: var(--bui-ink-900);
  border-radius: var(--bui-radius-md);
  color: #fff;
  overflow-x: auto;
}

.bui-prose pre code { background: none; border: 0; color: inherit; padding: 0; }

/* A pasted table must scroll inside its own box, never widen the page. */
.bui-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--bui-text-sm);
}

.bui-prose th,
.bui-prose td {
  padding: var(--bui-space-2) var(--bui-space-3);
  border: 1px solid var(--bui-line);
  text-align: left;
}

.bui-prose th { background: var(--bui-surface-2); font-weight: var(--bui-fw-bold); }

/* ── Share ────────────────────────────────────────────────────────────────── */
.bui-share {
  display: flex;
  align-items: center;
  gap: var(--bui-space-4);
  flex-wrap: wrap;
  margin-top: var(--bui-space-10);
  padding-top: var(--bui-space-6);
  border-top: 1px solid var(--bui-line);
}

.bui-share-label {
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bui-ink-500);
}

.bui-share-list {
  display: flex;
  gap: var(--bui-space-2);
  padding: 0;
  list-style: none;
}

.bui-share-list a {
  display: grid;
  place-items: center;
  width: var(--bui-touch-min);
  height: var(--bui-touch-min);
  background: var(--bui-surface-2);
  border: 1px solid var(--bui-line);
  border-radius: 50%;
  color: var(--bui-ink-500);
  transition: background-color var(--bui-transition), color var(--bui-transition);
}

.bui-share-list a:hover {
  background: var(--bui-primary-700);
  border-color: var(--bui-primary-700);
  color: #fff;
  text-decoration: none;
}

.bui-share-list a:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: 2px;
}

/* ── Prev / next ──────────────────────────────────────────────────────────── */
.bui-article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bui-space-4);
  margin-top: var(--bui-space-8);
}

.bui-article-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--bui-space-2);
  min-width: 0;
  padding: var(--bui-space-5);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  color: var(--bui-ink-900);
  transition: border-color var(--bui-transition), box-shadow var(--bui-transition);
}

.bui-article-nav-link:hover {
  border-color: var(--bui-primary-200);
  box-shadow: var(--bui-shadow-sm);
  text-decoration: none;
}

.bui-article-nav-link.is-next { text-align: right; }

.bui-article-nav-dir {
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bui-primary-700);
}

.bui-article-nav-title {
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-semibold);
  line-height: var(--bui-lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .bui-article-nav { grid-template-columns: minmax(0, 1fr); }
  .bui-article-nav-link.is-next { text-align: left; }
}

/* ── Sidebar CTA ──────────────────────────────────────────────────────────── */
.bui-aside-cta {
  background: var(--bui-primary-50);
  border-color: var(--bui-primary-200);
}