@sonordev/site-kit 5.3.1 → 5.4.0

package/dist/blog-styles-6EY3BS5Y.js

@@ -0,0 +1,595 @@
+'use strict';
+
+var chunkYQTE32QK_js = require('./chunk-YQTE32QK.js');
+require('./chunk-SNAQBZPT.js');
+
+// src/blog/blog-styles.ts
+var blogPostCss = (
+  /* css */
+  `
+${chunkYQTE32QK_js.blogTableCss}
+/* ===== Layout ===== */
+.sk-blog-article {
+  --_sk-primary: var(--sk-primary, #2563eb);
+  --_sk-bg: var(--sk-bg, #ffffff);
+  --_sk-bg-el: var(--sk-bg-elevated, #f8fafc);
+  --_sk-text: var(--sk-text-primary, inherit);
+  --_sk-text2: var(--sk-text-secondary, #475569);
+  --_sk-text3: var(--sk-text-tertiary, #94a3b8);
+  --_sk-border: var(--sk-surface-border, #e2e8f0);
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  color: var(--_sk-text);
+}
+
+/* ===== Header ===== */
+.sk-blog-header { margin-bottom: 2.5rem; }
+
+.sk-blog-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.8125rem;
+  color: var(--_sk-text3);
+}
+.sk-blog-breadcrumb a {
+  color: var(--_sk-primary);
+  text-decoration: none;
+  font-weight: 500;
+}
+.sk-blog-breadcrumb a:hover { text-decoration: underline; }
+.sk-blog-breadcrumb-sep { color: var(--_sk-text3); }
+
+.sk-blog-title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.02em;
+  text-wrap: balance;
+  margin: 0 0 0.75rem;
+  color: var(--_sk-text);
+}
+.sk-blog-subtitle {
+  font-size: 1.25rem;
+  line-height: 1.5;
+  color: var(--_sk-text2);
+  margin: 0 0 1rem;
+}
+.sk-blog-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--_sk-text3);
+}
+.sk-blog-meta-item { white-space: nowrap; }
+.sk-blog-meta-dot {
+  width: 3px; height: 3px;
+  border-radius: 50%;
+  background: var(--_sk-text3);
+  flex-shrink: 0;
+}
+
+/* ===== Featured image ===== */
+.sk-blog-featured-wrap {
+  margin: 0 0 2.5rem;
+  border-radius: 0.75rem;
+  overflow: hidden;
+}
+.sk-blog-featured-img {
+  display: block;
+  width: 100%;
+  max-height: 500px;
+  object-fit: cover;
+}
+
+/* ===== Content + TOC grid ===== */
+.sk-blog-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 3rem;
+}
+@media (min-width: 1024px) {
+  .sk-blog-layout--has-toc {
+    grid-template-columns: 1fr 320px;
+  }
+}
+
+/* ===== Article body typography ===== */
+.sk-blog-content {
+  min-width: 0;
+  font-size: 1.125rem;
+  line-height: 1.8;
+  color: var(--_sk-text);
+  overflow-wrap: break-word;
+}
+.sk-blog-content > * + * { margin-top: 1.5em; }
+.sk-blog-content h2,
+.sk-blog-content h3,
+.sk-blog-content h4 {
+  scroll-margin-top: 5rem;
+  line-height: 1.3;
+  font-weight: 700;
+  color: var(--_sk-text);
+}
+.sk-blog-content h2 { font-size: 1.5rem; margin-top: 2.5em; margin-bottom: 0.75em; }
+.sk-blog-content h3 { font-size: 1.25rem; margin-top: 2em; margin-bottom: 0.5em; }
+.sk-blog-content h4 { font-size: 1.1rem; margin-top: 1.5em; margin-bottom: 0.5em; }
+.sk-blog-content p { margin: 0 0 1.5em; }
+.sk-blog-content a {
+  color: var(--_sk-primary);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);
+  text-underline-offset: 2px;
+  transition: text-decoration-color 0.15s;
+}
+.sk-blog-content a:hover {
+  text-decoration-color: var(--_sk-primary);
+}
+.sk-blog-content strong { font-weight: 700; color: var(--_sk-text); }
+.sk-blog-content em { font-style: italic; }
+.sk-blog-content blockquote {
+  border-left: 3px solid var(--_sk-primary);
+  padding: 0.75em 1.25em;
+  margin: 1.5em 0;
+  color: var(--_sk-text2);
+  font-style: italic;
+  background: color-mix(in srgb, var(--_sk-primary) 5%, var(--_sk-bg));
+  border-radius: 0 0.5rem 0.5rem 0;
+}
+.sk-blog-content blockquote p:last-child { margin-bottom: 0; }
+.sk-blog-content ul,
+.sk-blog-content ol {
+  padding-left: 1.5em;
+  margin: 1.25em 0;
+}
+.sk-blog-content li { margin-bottom: 0.5em; }
+.sk-blog-content li::marker { color: var(--_sk-primary); }
+.sk-blog-content code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  border-radius: 0.25rem;
+  background: color-mix(in srgb, var(--_sk-text) 8%, var(--_sk-bg));
+}
+.sk-blog-content pre {
+  margin: 1.5em 0;
+  padding: 1.25em 1.5em;
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--_sk-text) 6%, var(--_sk-bg));
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.7;
+}
+.sk-blog-content pre code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+.sk-blog-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 1.5em auto;
+  display: block;
+}
+.sk-blog-content hr {
+  border: none;
+  height: 1px;
+  background: var(--_sk-border);
+  margin: 2.5em 0;
+}
+.sk-blog-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5em 0;
+  font-size: 0.95rem;
+}
+.sk-blog-content th,
+.sk-blog-content td {
+  text-align: left;
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid var(--_sk-border);
+}
+.sk-blog-content th {
+  font-weight: 600;
+  color: var(--_sk-text);
+}
+.sk-blog-content td { color: var(--_sk-text2); }
+
+/* ===== Table of contents ===== */
+.sk-blog-toc {
+  position: sticky;
+  top: 6rem;
+  align-self: start;
+  padding: 1.25rem;
+  border-radius: 0.75rem;
+  background: var(--_sk-bg-el);
+  border: 1px solid var(--_sk-border);
+  max-height: calc(100vh - 8rem);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--_sk-border) transparent;
+}
+.sk-blog-toc::-webkit-scrollbar { width: 5px; }
+.sk-blog-toc::-webkit-scrollbar-track { background: transparent; }
+.sk-blog-toc::-webkit-scrollbar-thumb { background: var(--_sk-border); border-radius: 3px; }
+.sk-blog-toc::-webkit-scrollbar-thumb:hover { background: var(--_sk-text3); }
+.sk-blog-toc-title {
+  margin: 0 0 0.75rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--_sk-text3);
+}
+.sk-blog-toc-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.sk-blog-toc-list li { margin-bottom: 0.4rem; }
+.sk-blog-toc-list a {
+  display: block;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--_sk-text2);
+  text-decoration: none;
+  padding: 0.15rem 0;
+  transition: color 0.15s;
+}
+.sk-blog-toc-list a:hover { color: var(--_sk-primary); }
+.sk-blog-toc-indent-3 { padding-left: 0.75rem; }
+.sk-blog-toc-indent-4 { padding-left: 1.5rem; }
+
+@media (max-width: 1023px) {
+  .sk-blog-toc { display: none; }
+}
+
+/* ===== Tags ===== */
+.sk-blog-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 2.5rem;
+}
+.sk-blog-tag {
+  display: inline-block;
+  padding: 0.25rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border-radius: 9999px;
+  background: var(--_sk-bg-el);
+  border: 1px solid var(--_sk-border);
+  color: var(--_sk-text2);
+  text-decoration: none;
+  transition: color 0.15s, border-color 0.15s;
+}
+.sk-blog-tag:hover {
+  color: var(--_sk-primary);
+  border-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);
+}
+
+/* ===== Author card ===== */
+.sk-blog-author {
+  margin-top: 3rem;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  background: var(--_sk-bg-el);
+  border: 1px solid var(--_sk-border);
+  display: flex;
+  gap: 1.25rem;
+  align-items: flex-start;
+}
+.sk-blog-author-avatar {
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.sk-blog-author-name {
+  margin: 0 0 0.125rem;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  color: var(--_sk-text);
+}
+.sk-blog-author-title {
+  margin: 0 0 0.25rem;
+  font-size: 0.8125rem;
+  color: var(--_sk-text3);
+}
+.sk-blog-author-bio {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--_sk-text2);
+}
+.sk-blog-author-links {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.625rem;
+}
+.sk-blog-author-links a {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--_sk-primary);
+  text-decoration: none;
+}
+.sk-blog-author-links a:hover { text-decoration: underline; }
+
+@media (max-width: 640px) {
+  .sk-blog-author { flex-direction: column; align-items: center; text-align: center; }
+  .sk-blog-author-links { justify-content: center; }
+}
+
+/* ===== Related posts ===== */
+.sk-blog-related { margin-top: 3.5rem; }
+.sk-blog-related-title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  margin: 0 0 1.5rem;
+  color: var(--_sk-text);
+}
+.sk-blog-related-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1.25rem;
+}
+.sk-blog-related-card {
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: var(--_sk-bg-el);
+  border: 1px solid var(--_sk-border);
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+.sk-blog-related-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+}
+.sk-blog-related-card img {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+}
+.sk-blog-related-card-body { padding: 1rem 1.125rem; }
+.sk-blog-related-card h3 {
+  font-size: 0.9375rem;
+  font-weight: 650;
+  line-height: 1.4;
+  margin: 0 0 0.375rem;
+  color: var(--_sk-text);
+}
+.sk-blog-related-card p {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--_sk-text2);
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ===== Not found ===== */
+.sk-blog-not-found {
+  text-align: center;
+  padding: 5rem 1rem;
+}
+.sk-blog-not-found h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 0.75rem;
+  color: var(--_sk-text);
+}
+.sk-blog-not-found p {
+  color: var(--_sk-text2);
+  margin: 0 0 1.5rem;
+}
+.sk-blog-not-found a {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  background: var(--_sk-primary);
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+.sk-blog-not-found a:hover { opacity: 0.9; }
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+  .sk-blog-title { font-size: 1.75rem; }
+  .sk-blog-subtitle { font-size: 1.0625rem; }
+  .sk-blog-content { font-size: 1rem; }
+  .sk-blog-related-grid { grid-template-columns: 1fr; }
+}
+`.trim()
+);
+var blogListCss = (
+  /* css */
+  `
+/* ===== BlogList layout ===== */
+.sk-bloglist {
+  --_sk-primary: var(--sk-primary, #2563eb);
+  --_sk-bg: var(--sk-bg, #ffffff);
+  --_sk-bg-el: var(--sk-bg-elevated, #f8fafc);
+  --_sk-text: var(--sk-text-primary, inherit);
+  --_sk-text2: var(--sk-text-secondary, #475569);
+  --_sk-text3: var(--sk-text-tertiary, #94a3b8);
+  --_sk-border: var(--sk-surface-border, #e2e8f0);
+}
+
+/* ===== Category filter ===== */
+.sk-bloglist-cats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}
+.sk-bloglist-cat {
+  display: inline-block;
+  padding: 0.375rem 1rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  border: 1px solid var(--_sk-border);
+  background: var(--_sk-bg-el);
+  color: var(--_sk-text2);
+}
+.sk-bloglist-cat:hover {
+  border-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);
+  color: var(--_sk-primary);
+}
+.sk-bloglist-cat--active {
+  background: var(--_sk-primary);
+  color: #fff;
+  border-color: var(--_sk-primary);
+}
+.sk-bloglist-cat--active:hover { color: #fff; opacity: 0.9; }
+
+/* ===== Card grid ===== */
+.sk-bloglist-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+/* ===== Post card ===== */
+.sk-bloglist-card {
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: var(--_sk-bg-el);
+  border: 1px solid var(--_sk-border);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+}
+.sk-bloglist-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+  border-color: color-mix(in srgb, var(--_sk-primary) 30%, var(--_sk-border));
+}
+.sk-bloglist-card-img-link { display: block; overflow: hidden; }
+.sk-bloglist-card-img {
+  display: block;
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+.sk-bloglist-card:hover .sk-bloglist-card-img { transform: scale(1.03); }
+.sk-bloglist-card-body {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.sk-bloglist-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+.sk-bloglist-card-category {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: color-mix(in srgb, var(--_sk-primary) 12%, transparent);
+  color: var(--_sk-primary);
+}
+.sk-bloglist-card-date {
+  font-size: 0.8125rem;
+  color: var(--_sk-text3);
+}
+.sk-bloglist-card-title {
+  font-size: 1.0625rem;
+  font-weight: 700;
+  line-height: 1.4;
+  margin: 0 0 0.5rem;
+}
+.sk-bloglist-card-title a {
+  color: var(--_sk-text);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.sk-bloglist-card:hover .sk-bloglist-card-title a { color: var(--_sk-primary); }
+.sk-bloglist-card-excerpt {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--_sk-text2);
+  margin: 0 0 1rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  flex: 1;
+}
+.sk-bloglist-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--_sk-border);
+  font-size: 0.8125rem;
+  color: var(--_sk-text3);
+}
+
+/* ===== Pagination ===== */
+.sk-bloglist-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 3rem;
+}
+.sk-bloglist-page-link {
+  display: inline-block;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  background: var(--_sk-primary);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.15s;
+}
+.sk-bloglist-page-link:hover { opacity: 0.9; }
+.sk-bloglist-page-info {
+  font-size: 0.8125rem;
+  color: var(--_sk-text3);
+}
+
+/* ===== Empty state ===== */
+.sk-bloglist-empty {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--_sk-text2);
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 640px) {
+  .sk-bloglist-grid { grid-template-columns: 1fr; }
+}
+`.trim()
+);
+
+exports.blogListCss = blogListCss;
+exports.blogPostCss = blogPostCss;
+//# sourceMappingURL=blog-styles-6EY3BS5Y.js.map
+//# sourceMappingURL=blog-styles-6EY3BS5Y.js.map

package/dist/blog-styles-6EY3BS5Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/blog/blog-styles.ts"],"names":["blogTableCss"],"mappings":";;;;;;AA0BO,IAAM,WAAA;AAAA;AAAA,EAAwB;AAAA,EACnCA,6BAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAsZZ,IAAA;AAAK;AAMA,IAAM,WAAA;AAAA;AAAA,EAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAyKnC,IAAA;AAAK","file":"blog-styles-6EY3BS5Y.js","sourcesContent":["/**\n * Scoped CSS for BlogPost and BlogList default rendering.\n *\n * Injected via `<style>` in the server component output so consumers\n * get a polished blog with zero configuration.\n *\n * All colours use `--sk-*` CSS custom properties with `color-mix()` fallbacks\n * that adapt to both light and dark host sites. The host can set:\n *\n *   --sk-primary          Brand accent (links, highlights)\n *   --sk-bg               Page background\n *   --sk-bg-elevated      Card / elevated surface background\n *   --sk-text-primary     Main text\n *   --sk-text-secondary   Subdued text\n *   --sk-text-tertiary    Faint text / meta\n *   --sk-surface-border   Subtle border color\n *\n * If none are set the defaults produce a clean neutral light-mode look.\n */\n\nimport { blogTableCss } from './blog-tables'\n\n// ---------------------------------------------------------------------------\n// BlogPost styles\n// ---------------------------------------------------------------------------\n\nexport const blogPostCss = /* css */ `\n${blogTableCss}\n/* ===== Layout ===== */\n.sk-blog-article {\n  --_sk-primary: var(--sk-primary, #2563eb);\n  --_sk-bg: var(--sk-bg, #ffffff);\n  --_sk-bg-el: var(--sk-bg-elevated, #f8fafc);\n  --_sk-text: var(--sk-text-primary, inherit);\n  --_sk-text2: var(--sk-text-secondary, #475569);\n  --_sk-text3: var(--sk-text-tertiary, #94a3b8);\n  --_sk-border: var(--sk-surface-border, #e2e8f0);\n  max-width: 1080px;\n  margin: 0 auto;\n  padding: 0 1rem;\n  color: var(--_sk-text);\n}\n\n/* ===== Header ===== */\n.sk-blog-header { margin-bottom: 2.5rem; }\n\n.sk-blog-breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  margin-bottom: 1.25rem;\n  font-size: 0.8125rem;\n  color: var(--_sk-text3);\n}\n.sk-blog-breadcrumb a {\n  color: var(--_sk-primary);\n  text-decoration: none;\n  font-weight: 500;\n}\n.sk-blog-breadcrumb a:hover { text-decoration: underline; }\n.sk-blog-breadcrumb-sep { color: var(--_sk-text3); }\n\n.sk-blog-title {\n  font-size: 2.5rem;\n  font-weight: 800;\n  line-height: 1.15;\n  letter-spacing: -0.02em;\n  text-wrap: balance;\n  margin: 0 0 0.75rem;\n  color: var(--_sk-text);\n}\n.sk-blog-subtitle {\n  font-size: 1.25rem;\n  line-height: 1.5;\n  color: var(--_sk-text2);\n  margin: 0 0 1rem;\n}\n.sk-blog-meta {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  font-size: 0.8125rem;\n  color: var(--_sk-text3);\n}\n.sk-blog-meta-item { white-space: nowrap; }\n.sk-blog-meta-dot {\n  width: 3px; height: 3px;\n  border-radius: 50%;\n  background: var(--_sk-text3);\n  flex-shrink: 0;\n}\n\n/* ===== Featured image ===== */\n.sk-blog-featured-wrap {\n  margin: 0 0 2.5rem;\n  border-radius: 0.75rem;\n  overflow: hidden;\n}\n.sk-blog-featured-img {\n  display: block;\n  width: 100%;\n  max-height: 500px;\n  object-fit: cover;\n}\n\n/* ===== Content + TOC grid ===== */\n.sk-blog-layout {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 3rem;\n}\n@media (min-width: 1024px) {\n  .sk-blog-layout--has-toc {\n    grid-template-columns: 1fr 320px;\n  }\n}\n\n/* ===== Article body typography ===== */\n.sk-blog-content {\n  min-width: 0;\n  font-size: 1.125rem;\n  line-height: 1.8;\n  color: var(--_sk-text);\n  overflow-wrap: break-word;\n}\n.sk-blog-content > * + * { margin-top: 1.5em; }\n.sk-blog-content h2,\n.sk-blog-content h3,\n.sk-blog-content h4 {\n  scroll-margin-top: 5rem;\n  line-height: 1.3;\n  font-weight: 700;\n  color: var(--_sk-text);\n}\n.sk-blog-content h2 { font-size: 1.5rem; margin-top: 2.5em; margin-bottom: 0.75em; }\n.sk-blog-content h3 { font-size: 1.25rem; margin-top: 2em; margin-bottom: 0.5em; }\n.sk-blog-content h4 { font-size: 1.1rem; margin-top: 1.5em; margin-bottom: 0.5em; }\n.sk-blog-content p { margin: 0 0 1.5em; }\n.sk-blog-content a {\n  color: var(--_sk-primary);\n  text-decoration: underline;\n  text-decoration-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);\n  text-underline-offset: 2px;\n  transition: text-decoration-color 0.15s;\n}\n.sk-blog-content a:hover {\n  text-decoration-color: var(--_sk-primary);\n}\n.sk-blog-content strong { font-weight: 700; color: var(--_sk-text); }\n.sk-blog-content em { font-style: italic; }\n.sk-blog-content blockquote {\n  border-left: 3px solid var(--_sk-primary);\n  padding: 0.75em 1.25em;\n  margin: 1.5em 0;\n  color: var(--_sk-text2);\n  font-style: italic;\n  background: color-mix(in srgb, var(--_sk-primary) 5%, var(--_sk-bg));\n  border-radius: 0 0.5rem 0.5rem 0;\n}\n.sk-blog-content blockquote p:last-child { margin-bottom: 0; }\n.sk-blog-content ul,\n.sk-blog-content ol {\n  padding-left: 1.5em;\n  margin: 1.25em 0;\n}\n.sk-blog-content li { margin-bottom: 0.5em; }\n.sk-blog-content li::marker { color: var(--_sk-primary); }\n.sk-blog-content code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 0.875em;\n  padding: 0.15em 0.4em;\n  border-radius: 0.25rem;\n  background: color-mix(in srgb, var(--_sk-text) 8%, var(--_sk-bg));\n}\n.sk-blog-content pre {\n  margin: 1.5em 0;\n  padding: 1.25em 1.5em;\n  border-radius: 0.75rem;\n  background: color-mix(in srgb, var(--_sk-text) 6%, var(--_sk-bg));\n  overflow-x: auto;\n  font-size: 0.875rem;\n  line-height: 1.7;\n}\n.sk-blog-content pre code {\n  background: none;\n  padding: 0;\n  font-size: inherit;\n}\n.sk-blog-content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 0.5rem;\n  margin: 1.5em auto;\n  display: block;\n}\n.sk-blog-content hr {\n  border: none;\n  height: 1px;\n  background: var(--_sk-border);\n  margin: 2.5em 0;\n}\n.sk-blog-content table {\n  width: 100%;\n  border-collapse: collapse;\n  margin: 1.5em 0;\n  font-size: 0.95rem;\n}\n.sk-blog-content th,\n.sk-blog-content td {\n  text-align: left;\n  padding: 0.625rem 0.875rem;\n  border-bottom: 1px solid var(--_sk-border);\n}\n.sk-blog-content th {\n  font-weight: 600;\n  color: var(--_sk-text);\n}\n.sk-blog-content td { color: var(--_sk-text2); }\n\n/* ===== Table of contents ===== */\n.sk-blog-toc {\n  position: sticky;\n  top: 6rem;\n  align-self: start;\n  padding: 1.25rem;\n  border-radius: 0.75rem;\n  background: var(--_sk-bg-el);\n  border: 1px solid var(--_sk-border);\n  max-height: calc(100vh - 8rem);\n  overflow-y: auto;\n  scrollbar-width: thin;\n  scrollbar-color: var(--_sk-border) transparent;\n}\n.sk-blog-toc::-webkit-scrollbar { width: 5px; }\n.sk-blog-toc::-webkit-scrollbar-track { background: transparent; }\n.sk-blog-toc::-webkit-scrollbar-thumb { background: var(--_sk-border); border-radius: 3px; }\n.sk-blog-toc::-webkit-scrollbar-thumb:hover { background: var(--_sk-text3); }\n.sk-blog-toc-title {\n  margin: 0 0 0.75rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--_sk-text3);\n}\n.sk-blog-toc-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.sk-blog-toc-list li { margin-bottom: 0.4rem; }\n.sk-blog-toc-list a {\n  display: block;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  color: var(--_sk-text2);\n  text-decoration: none;\n  padding: 0.15rem 0;\n  transition: color 0.15s;\n}\n.sk-blog-toc-list a:hover { color: var(--_sk-primary); }\n.sk-blog-toc-indent-3 { padding-left: 0.75rem; }\n.sk-blog-toc-indent-4 { padding-left: 1.5rem; }\n\n@media (max-width: 1023px) {\n  .sk-blog-toc { display: none; }\n}\n\n/* ===== Tags ===== */\n.sk-blog-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-top: 2.5rem;\n}\n.sk-blog-tag {\n  display: inline-block;\n  padding: 0.25rem 0.875rem;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  border-radius: 9999px;\n  background: var(--_sk-bg-el);\n  border: 1px solid var(--_sk-border);\n  color: var(--_sk-text2);\n  text-decoration: none;\n  transition: color 0.15s, border-color 0.15s;\n}\n.sk-blog-tag:hover {\n  color: var(--_sk-primary);\n  border-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);\n}\n\n/* ===== Author card ===== */\n.sk-blog-author {\n  margin-top: 3rem;\n  padding: 1.5rem;\n  border-radius: 0.75rem;\n  background: var(--_sk-bg-el);\n  border: 1px solid var(--_sk-border);\n  display: flex;\n  gap: 1.25rem;\n  align-items: flex-start;\n}\n.sk-blog-author-avatar {\n  width: 72px;\n  height: 72px;\n  border-radius: 50%;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n.sk-blog-author-name {\n  margin: 0 0 0.125rem;\n  font-size: 1.0625rem;\n  font-weight: 700;\n  color: var(--_sk-text);\n}\n.sk-blog-author-title {\n  margin: 0 0 0.25rem;\n  font-size: 0.8125rem;\n  color: var(--_sk-text3);\n}\n.sk-blog-author-bio {\n  margin: 0.5rem 0 0;\n  font-size: 0.875rem;\n  line-height: 1.6;\n  color: var(--_sk-text2);\n}\n.sk-blog-author-links {\n  display: flex;\n  gap: 1rem;\n  margin-top: 0.625rem;\n}\n.sk-blog-author-links a {\n  font-size: 0.8125rem;\n  font-weight: 600;\n  color: var(--_sk-primary);\n  text-decoration: none;\n}\n.sk-blog-author-links a:hover { text-decoration: underline; }\n\n@media (max-width: 640px) {\n  .sk-blog-author { flex-direction: column; align-items: center; text-align: center; }\n  .sk-blog-author-links { justify-content: center; }\n}\n\n/* ===== Related posts ===== */\n.sk-blog-related { margin-top: 3.5rem; }\n.sk-blog-related-title {\n  font-size: 1.375rem;\n  font-weight: 700;\n  margin: 0 0 1.5rem;\n  color: var(--_sk-text);\n}\n.sk-blog-related-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  gap: 1.25rem;\n}\n.sk-blog-related-card {\n  border-radius: 0.75rem;\n  overflow: hidden;\n  background: var(--_sk-bg-el);\n  border: 1px solid var(--_sk-border);\n  text-decoration: none;\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  transition: transform 0.2s, box-shadow 0.2s;\n}\n.sk-blog-related-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n}\n.sk-blog-related-card img {\n  width: 100%;\n  height: 160px;\n  object-fit: cover;\n}\n.sk-blog-related-card-body { padding: 1rem 1.125rem; }\n.sk-blog-related-card h3 {\n  font-size: 0.9375rem;\n  font-weight: 650;\n  line-height: 1.4;\n  margin: 0 0 0.375rem;\n  color: var(--_sk-text);\n}\n.sk-blog-related-card p {\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  color: var(--_sk-text2);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ===== Not found ===== */\n.sk-blog-not-found {\n  text-align: center;\n  padding: 5rem 1rem;\n}\n.sk-blog-not-found h1 {\n  font-size: 1.5rem;\n  font-weight: 700;\n  margin: 0 0 0.75rem;\n  color: var(--_sk-text);\n}\n.sk-blog-not-found p {\n  color: var(--_sk-text2);\n  margin: 0 0 1.5rem;\n}\n.sk-blog-not-found a {\n  display: inline-block;\n  padding: 0.75rem 1.5rem;\n  border-radius: 0.5rem;\n  background: var(--_sk-primary);\n  color: #fff;\n  font-weight: 600;\n  font-size: 0.875rem;\n  text-decoration: none;\n  transition: opacity 0.15s;\n}\n.sk-blog-not-found a:hover { opacity: 0.9; }\n\n/* ===== Responsive ===== */\n@media (max-width: 768px) {\n  .sk-blog-title { font-size: 1.75rem; }\n  .sk-blog-subtitle { font-size: 1.0625rem; }\n  .sk-blog-content { font-size: 1rem; }\n  .sk-blog-related-grid { grid-template-columns: 1fr; }\n}\n`.trim()\n\n// ---------------------------------------------------------------------------\n// BlogList styles\n// ---------------------------------------------------------------------------\n\nexport const blogListCss = /* css */ `\n/* ===== BlogList layout ===== */\n.sk-bloglist {\n  --_sk-primary: var(--sk-primary, #2563eb);\n  --_sk-bg: var(--sk-bg, #ffffff);\n  --_sk-bg-el: var(--sk-bg-elevated, #f8fafc);\n  --_sk-text: var(--sk-text-primary, inherit);\n  --_sk-text2: var(--sk-text-secondary, #475569);\n  --_sk-text3: var(--sk-text-tertiary, #94a3b8);\n  --_sk-border: var(--sk-surface-border, #e2e8f0);\n}\n\n/* ===== Category filter ===== */\n.sk-bloglist-cats {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin-bottom: 2rem;\n}\n.sk-bloglist-cat {\n  display: inline-block;\n  padding: 0.375rem 1rem;\n  border-radius: 9999px;\n  font-size: 0.8125rem;\n  font-weight: 600;\n  text-decoration: none;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n  border: 1px solid var(--_sk-border);\n  background: var(--_sk-bg-el);\n  color: var(--_sk-text2);\n}\n.sk-bloglist-cat:hover {\n  border-color: color-mix(in srgb, var(--_sk-primary) 40%, transparent);\n  color: var(--_sk-primary);\n}\n.sk-bloglist-cat--active {\n  background: var(--_sk-primary);\n  color: #fff;\n  border-color: var(--_sk-primary);\n}\n.sk-bloglist-cat--active:hover { color: #fff; opacity: 0.9; }\n\n/* ===== Card grid ===== */\n.sk-bloglist-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n}\n\n/* ===== Post card ===== */\n.sk-bloglist-card {\n  border-radius: 0.75rem;\n  overflow: hidden;\n  background: var(--_sk-bg-el);\n  border: 1px solid var(--_sk-border);\n  display: flex;\n  flex-direction: column;\n  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;\n}\n.sk-bloglist-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n  border-color: color-mix(in srgb, var(--_sk-primary) 30%, var(--_sk-border));\n}\n.sk-bloglist-card-img-link { display: block; overflow: hidden; }\n.sk-bloglist-card-img {\n  display: block;\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n  transition: transform 0.4s;\n}\n.sk-bloglist-card:hover .sk-bloglist-card-img { transform: scale(1.03); }\n.sk-bloglist-card-body {\n  padding: 1.25rem;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n.sk-bloglist-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  margin-bottom: 0.625rem;\n}\n.sk-bloglist-card-category {\n  display: inline-block;\n  padding: 0.125rem 0.5rem;\n  border-radius: 0.25rem;\n  font-size: 0.6875rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  background: color-mix(in srgb, var(--_sk-primary) 12%, transparent);\n  color: var(--_sk-primary);\n}\n.sk-bloglist-card-date {\n  font-size: 0.8125rem;\n  color: var(--_sk-text3);\n}\n.sk-bloglist-card-title {\n  font-size: 1.0625rem;\n  font-weight: 700;\n  line-height: 1.4;\n  margin: 0 0 0.5rem;\n}\n.sk-bloglist-card-title a {\n  color: var(--_sk-text);\n  text-decoration: none;\n  transition: color 0.15s;\n}\n.sk-bloglist-card:hover .sk-bloglist-card-title a { color: var(--_sk-primary); }\n.sk-bloglist-card-excerpt {\n  font-size: 0.875rem;\n  line-height: 1.6;\n  color: var(--_sk-text2);\n  margin: 0 0 1rem;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  flex: 1;\n}\n.sk-bloglist-card-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 0.75rem;\n  border-top: 1px solid var(--_sk-border);\n  font-size: 0.8125rem;\n  color: var(--_sk-text3);\n}\n\n/* ===== Pagination ===== */\n.sk-bloglist-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.75rem;\n  margin-top: 3rem;\n}\n.sk-bloglist-page-link {\n  display: inline-block;\n  padding: 0.5rem 1.25rem;\n  border-radius: 0.5rem;\n  background: var(--_sk-primary);\n  color: #fff;\n  font-size: 0.875rem;\n  font-weight: 600;\n  text-decoration: none;\n  transition: opacity 0.15s;\n}\n.sk-bloglist-page-link:hover { opacity: 0.9; }\n.sk-bloglist-page-info {\n  font-size: 0.8125rem;\n  color: var(--_sk-text3);\n}\n\n/* ===== Empty state ===== */\n.sk-bloglist-empty {\n  text-align: center;\n  padding: 3rem 1rem;\n  color: var(--_sk-text2);\n}\n\n/* ===== Responsive ===== */\n@media (max-width: 640px) {\n  .sk-bloglist-grid { grid-template-columns: 1fr; }\n}\n`.trim()\n"]}