/* Shared editorial components. All appearance roles resolve to the existing UI foundation. */
.sfui-editorial-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sfui-gap); }
.sfui-editorial-grid--pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
.sfui-editorial-layout { display: grid; grid-template-columns: minmax(0,2.5fr) minmax(260px,1fr); gap: var(--sfui-gap); align-items: start; }
.sfui-editorial-layout--single { grid-template-columns: minmax(0,1fr); }
.sfui-editorial-card { display: grid; gap: var(--sfui-space-10); min-width: 0; align-content: start; }
.sfui-editorial-card__title { color: var(--sfui-text); font-size: var(--sfui-size-subtitle); font-weight: var(--sfui-weight-bold); line-height: var(--sfui-line-title); overflow-wrap: anywhere; }
.sfui-editorial-card__excerpt { color: var(--sfui-muted); font-size: var(--sfui-size-body); line-height: var(--sfui-line-copy); overflow-wrap: anywhere; }
.sfui-editorial-card__title a:hover { color: var(--sfui-accent-text); }
.sfui-editorial-card__caption { position: absolute; inset: auto var(--sfui-space-8) var(--sfui-space-8); display: flex; align-items: center; gap: var(--sfui-space-8); padding: var(--sfui-space-10); border-radius: var(--sfui-control-radius); color: var(--sfui-category-ink); background: var(--sfui-category-caption); backdrop-filter: blur(12px); font-size: var(--sfui-size-label); font-weight: var(--sfui-weight-medium); line-height: var(--sfui-line-title); }
.sfui-editorial-card__caption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sfui-editorial-card__caption .sfui-icon { flex-shrink: 0; }
.sfui-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sfui-space-12); color: var(--sfui-muted); font-size: var(--sfui-size-label); line-height: var(--sfui-line-label); }
.sfui-meta > span, .sfui-meta > time { display: inline-flex; align-items: center; gap: var(--sfui-space-6); min-width: 0; }
.sfui-meta--strip { padding: var(--sfui-space-10) var(--sfui-space-12); border-radius: var(--sfui-control-radius); background: var(--sfui-control); border: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-meta__end { margin-inline-start: auto; }
.sfui-meta--tags > span, .sfui-meta--tags > time { padding: var(--sfui-space-8) var(--sfui-space-12); border-radius: var(--sfui-tag-radius); background: var(--sfui-soft); color: var(--sfui-accent-text); }
.sfui-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sfui-space-8); list-style: none; padding: 0; color: var(--sfui-muted); font-size: var(--sfui-size-label); line-height: var(--sfui-line-label); overflow-wrap: anywhere; }
.sfui-breadcrumbs li + li::before { content: '/'; padding-inline-end: var(--sfui-space-8); }
.sfui-breadcrumbs [aria-current] { color: var(--sfui-text); font-weight: var(--sfui-weight-medium); }
.sfui-article__header { display: grid; gap: var(--sfui-space-16); }
.sfui-article__title { color: var(--sfui-text); font-size: var(--sfui-size-hero); font-weight: var(--sfui-weight-bold); line-height: var(--sfui-line-title); overflow-wrap: anywhere; }
.sfui-article__excerpt { color: var(--sfui-muted); font-size: var(--sfui-size-subtitle); line-height: var(--sfui-line-copy); overflow-wrap: anywhere; }
.sfui-article__divider { padding-top: var(--sfui-space-16); border-top: var(--sfui-border-width) solid var(--sfui-border); }
.sfui-prose--article :where(h2,h3,h4,h5,h6) { margin-block: var(--sfui-space-24) var(--sfui-space-12); color: var(--sfui-text); font-weight: var(--sfui-weight-medium); line-height: var(--sfui-line-title); scroll-margin-top: var(--sfui-space-24); }
.sfui-prose--article h2 { font-size: var(--sfui-size-hero); }
.sfui-prose--article > :first-child { margin-top: 0; }
.sfui-prose--article :where(h3,h4,h5,h6) { font-size: var(--sfui-size-title); }
.sfui-prose--article :where(p,ul,ol,blockquote,pre,div) + :where(p,ul,ol,blockquote,pre,div) { margin-top: var(--sfui-space-16); }
.sfui-prose--article :where(ul,ol) { padding-inline-start: var(--sfui-space-24); }
.sfui-prose--article img { display: block; max-width: 100%; height: auto; border-radius: var(--sfui-control-radius); }
.sfui-prose--article a { color: var(--sfui-accent-text); text-decoration: underline; text-underline-offset: var(--sfui-space-3); }
.sfui-prose--article blockquote { margin-inline: 0; padding: var(--sfui-space-16); border-inline-start: var(--sfui-border-width) solid var(--sfui-primary); background: var(--sfui-control); border-radius: var(--sfui-control-radius); }
.sfui-prose--article pre, .sfui-article__table { max-width: 100%; overflow-x: auto; }
.sfui-article__table table { border-collapse: collapse; width: 100%; }
.sfui-article__table :where(th,td) { border: var(--sfui-border-width) solid var(--sfui-border); padding: var(--sfui-space-8); }
.sfui-article__toc { background: var(--sfui-control); }
.sfui-article__toc summary { cursor: pointer; color: var(--sfui-text); font-weight: var(--sfui-weight-bold); }
.sfui-article__toc ol { display: grid; gap: var(--sfui-space-8); padding-inline-start: var(--sfui-space-24); margin-bottom: 0; }
.sfui-article__toc a { color: var(--sfui-muted); }
.sfui-article__toc a:hover { color: var(--sfui-accent-text); }
.sfui-coupon { display: flex; align-items: center; gap: var(--sfui-space-16); }
.sfui-coupon__copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sfui-coupon__copy p { margin-top: var(--sfui-space-6); }
.sfui-coupon .sfui-button { flex-shrink: 0; }
.sfui-copy-status { color: var(--sfui-accent-text); font-size: var(--sfui-size-label); }
.sfui-copy-control { display: inline-grid; gap: var(--sfui-space-6); max-width: 100%; overflow-wrap: anywhere; }
.sfui-copy-status:empty { display: none; }
.sfui-coupon .sfui-copy-control,
.sfui-coupon__action { margin-inline-start: auto; }
.sfui-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sfui-space-10); }
@media (max-width: 991.98px) {
  .sfui-editorial-layout { grid-template-columns: minmax(0,1fr); }
  .sfui-editorial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
  .sfui-editorial-grid { grid-template-columns: minmax(0,1fr); }
  .sfui-coupon { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--sfui-space-12); }
  .sfui-coupon .sfui-copy-control,
  .sfui-coupon__action { grid-column: 1 / -1; justify-self: end; }
}